From a4f83a1658d7f98a3ec0209598045acb838fd0e0 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Wed, 8 May 2024 12:56:29 +0800 Subject: [PATCH 01/29] feat: add notification component --- .../AppLayout/Notifications/Notification.tsx | 30 +++++++++++ .../AppLayout/Notifications/index.scss | 54 +++++++++++++++++++ 2 files changed, 84 insertions(+) create mode 100644 src/components/AppLayout/Notifications/Notification.tsx create mode 100644 src/components/AppLayout/Notifications/index.scss diff --git a/src/components/AppLayout/Notifications/Notification.tsx b/src/components/AppLayout/Notifications/Notification.tsx new file mode 100644 index 00000000..c8f9c8c2 --- /dev/null +++ b/src/components/AppLayout/Notifications/Notification.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { NotificationProps } from "./types"; + +const Notification = ({ + icon, + title, + message, + buttonAction, + actionText, +}: NotificationProps) => { + return ( +
+
+
{icon}
+
+

{title}

+
+

{message}

+
+
+
+
+ +
+
+ ); +}; +export default Notification; diff --git a/src/components/AppLayout/Notifications/index.scss b/src/components/AppLayout/Notifications/index.scss new file mode 100644 index 00000000..43bf1c4a --- /dev/null +++ b/src/components/AppLayout/Notifications/index.scss @@ -0,0 +1,54 @@ +.notifications { + .notification { + background: var(--light-8-primary-background, #fff); + box-shadow: 0px -1px 0px 0px #f2f3f4 inset; + padding: 8px 16px; + font-size: 12px; + &__container { + display: flex; + flex-direction: row; + } + &__text { + margin-left: 8px; + } + &__icon { + width: 16px; + height: 16px; + padding: 2px 0; + } + &__title { + color: var(--system-light-1-prominent-text, #333); + + font-family: "IBM Plex Sans"; + font-size: 14px; + font-style: normal; + font-weight: 700; + line-height: 20px; + margin-bottom: 4px; + } + &__message { + color: var(--system-light-2-general-text, #333); + font-family: "IBM Plex Sans"; + font-style: normal; + font-weight: 400; + line-height: 18px; + } + &__button-container { + margin-top: 8px; + display: flex; + justify-content: flex-end; + } + &__button { + display: flex; + align-items: center; + border-radius: 4px; + border: 1px solid var(--light-3-less-prominent-text, #999); + height: 24px; + padding: 3px 8px; + font-size: 12px; + font-style: normal; + font-weight: 700; + line-height: 18px; + } + } +} From da6b1b243a2bb1ea5627e314c3bf7f94795ba0c3 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Wed, 8 May 2024 12:56:56 +0800 Subject: [PATCH 02/29] feat: add notification component type --- src/components/AppLayout/Notifications/types.ts | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/components/AppLayout/Notifications/types.ts diff --git a/src/components/AppLayout/Notifications/types.ts b/src/components/AppLayout/Notifications/types.ts new file mode 100644 index 00000000..ddb94ca0 --- /dev/null +++ b/src/components/AppLayout/Notifications/types.ts @@ -0,0 +1,9 @@ +import React from "react"; + +export type NotificationProps = { + icon: React.ReactNode; + title: string; + message: string; + buttonAction: () => void; + actionText: string; +}; From 7dcf254023e0a59edf7d4abd61c25b6b197f0e8d Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Wed, 8 May 2024 12:57:31 +0800 Subject: [PATCH 03/29] test: add notification story --- stories/Notifications.stories.tsx | 48 +++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 stories/Notifications.stories.tsx diff --git a/stories/Notifications.stories.tsx b/stories/Notifications.stories.tsx new file mode 100644 index 00000000..d837ad14 --- /dev/null +++ b/stories/Notifications.stories.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import { Meta, StoryObj } from "@storybook/react"; +import { Notifications } from "../src/components/AppLayout/Notifications"; +import { LegacyAnnouncementIcon } from "@deriv/quill-icons"; + +const meta = { + title: "Components/Notifications", + component: Notifications, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + notifications: [ + { + icon: , + title: "New trading tools for MT5", + message: + "Power up your Financial trades with intuitive tools from Acuity.", + buttonAction: () => { + console.log("New trading tools for MT5 Clicked"); + }, + actionText: "Learn More", + }, + { + icon: , + title: "Payment problems?", + message: "There’s an app for that", + buttonAction: () => { + console.log("Payment problems? Clicked"); + }, + actionText: "Learn more", + }, + { + icon: , + title: "We’d love to hear your thoughts", + message: "Drop your review on Trustpilot.", + buttonAction: () => { + console.log("We’d love to hear your thoughts Clicked"); + }, + actionText: "Go to Trustpilot", + }, + ], + }, +}; From 39d797e2648205c241132f1185fd81cd8b101f9b Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Wed, 8 May 2024 13:08:18 +0800 Subject: [PATCH 04/29] test: add test cases for the notification --- .../Notifications/__test__/index.spec.tsx | 44 +++++++++++++++++++ .../__test__/notification.spec.tsx | 27 ++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 src/components/AppLayout/Notifications/__test__/index.spec.tsx create mode 100644 src/components/AppLayout/Notifications/__test__/notification.spec.tsx diff --git a/src/components/AppLayout/Notifications/__test__/index.spec.tsx b/src/components/AppLayout/Notifications/__test__/index.spec.tsx new file mode 100644 index 00000000..dd20a110 --- /dev/null +++ b/src/components/AppLayout/Notifications/__test__/index.spec.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import { render, fireEvent } from "@testing-library/react"; +import { Notifications } from ".."; + +describe("Notifications Component", () => { + it("renders multiple notifications with their respective properties", () => { + const mockAction1 = jest.fn(); + const mockAction2 = jest.fn(); + const notifications = [ + { + icon: Icon1, + title: "Title 1", + message: "Message 1", + buttonAction: mockAction1, + actionText: "Action 1", + }, + { + icon: Icon2, + title: "Title 2", + message: "Message 2", + buttonAction: mockAction2, + actionText: "Action 2", + }, + ]; + + const { getByText, getAllByRole } = render( + , + ); + + // Check if the title, message, and button for each notification are in the document + notifications.forEach((notification) => { + expect(getByText(notification.title)).toBeInTheDocument(); + expect(getByText(notification.message)).toBeInTheDocument(); + expect(getByText(notification.actionText)).toBeInTheDocument(); + }); + + // Check if buttons are clickable and actions are called + const buttons = getAllByRole("button"); + fireEvent.click(buttons[0]); + expect(mockAction1).toHaveBeenCalled(); + fireEvent.click(buttons[1]); + expect(mockAction2).toHaveBeenCalled(); + }); +}); diff --git a/src/components/AppLayout/Notifications/__test__/notification.spec.tsx b/src/components/AppLayout/Notifications/__test__/notification.spec.tsx new file mode 100644 index 00000000..3f0608d2 --- /dev/null +++ b/src/components/AppLayout/Notifications/__test__/notification.spec.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import { render, fireEvent } from "@testing-library/react"; +import Notification from "../Notification"; + +describe("Notification Component", () => { + it("renders the notification with title, message, and button", () => { + const mockAction = jest.fn(); + const { getByText, getByRole } = render( + Icon} + title="Test Title" + message="Test message" + buttonAction={mockAction} + actionText="Click Me" + /> + ); + + // Check if the title and message are in the document + expect(getByText("Test Title")).toBeInTheDocument(); + expect(getByText("Test message")).toBeInTheDocument(); + + // Check if the button is rendered and clickable + const button = getByRole("button", { name: "Click Me" }); + fireEvent.click(button); + expect(mockAction).toHaveBeenCalled(); // Ensure button action is triggered + }); +}); \ No newline at end of file From 2fa2af927c26a6bad2eed88ca4a6786683f60196 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Wed, 8 May 2024 13:08:59 +0800 Subject: [PATCH 05/29] feat: add notifications to main barrel file --- src/main.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/main.ts b/src/main.ts index 624794bd..42097a80 100644 --- a/src/main.ts +++ b/src/main.ts @@ -24,3 +24,4 @@ export { Tooltip } from "./components/Tooltip"; export { useDevice } from "./hooks"; export { VerticalTab, VerticalTabItems } from "./components/VerticalTab"; export { Header, Footer, Wrapper, Drawer } from "./components/AppLayout"; +export { Notifications } from "./components/AppLayout/Notifications"; From 20d99ff774146e6b1bb7c204a7eeba78bc6ad3db Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Thu, 9 May 2024 12:15:21 +0800 Subject: [PATCH 06/29] feat: update notifications type --- src/components/AppLayout/Notifications/Notification.tsx | 4 ++-- src/components/AppLayout/Notifications/types.ts | 7 ++++++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/AppLayout/Notifications/Notification.tsx b/src/components/AppLayout/Notifications/Notification.tsx index c8f9c8c2..4fa4779b 100644 --- a/src/components/AppLayout/Notifications/Notification.tsx +++ b/src/components/AppLayout/Notifications/Notification.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { NotificationProps } from "./types"; +import { TNotificationObject } from "./types"; const Notification = ({ icon, @@ -7,7 +7,7 @@ const Notification = ({ message, buttonAction, actionText, -}: NotificationProps) => { +}: TNotificationObject) => { return (
diff --git a/src/components/AppLayout/Notifications/types.ts b/src/components/AppLayout/Notifications/types.ts index ddb94ca0..308351c9 100644 --- a/src/components/AppLayout/Notifications/types.ts +++ b/src/components/AppLayout/Notifications/types.ts @@ -1,9 +1,14 @@ import React from "react"; -export type NotificationProps = { +export type TNotificationObject = { icon: React.ReactNode; title: string; message: string; buttonAction: () => void; actionText: string; }; +export type TNotificationsProps = { + notifications: TNotificationObject[]; + clearNotificationCallback: () => void; + isNotificationsVisible?: boolean; +}; From fd51b5a50fe38afb2a6d791810c0a84f0757287b Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Thu, 9 May 2024 19:13:05 +0800 Subject: [PATCH 07/29] feat: add notifications container --- .../AppLayout/Notifications/index.scss | 59 +++++++++++-- .../AppLayout/Notifications/index.tsx | 87 +++++++++++++++++++ 2 files changed, 141 insertions(+), 5 deletions(-) create mode 100644 src/components/AppLayout/Notifications/index.tsx diff --git a/src/components/AppLayout/Notifications/index.scss b/src/components/AppLayout/Notifications/index.scss index 43bf1c4a..054e07e1 100644 --- a/src/components/AppLayout/Notifications/index.scss +++ b/src/components/AppLayout/Notifications/index.scss @@ -33,12 +33,12 @@ font-weight: 400; line-height: 18px; } - &__button-container { - margin-top: 8px; - display: flex; - justify-content: flex-end; - } &__button { + &-container { + margin-top: 8px; + display: flex; + justify-content: flex-end; + } display: flex; align-items: center; border-radius: 4px; @@ -51,4 +51,53 @@ line-height: 18px; } } + &__header { + &-desktop { + display: flex; + justify-content: center; + margin-bottom: 7px; + font-size: 14px; + font-style: normal; + font-weight: 700; + } + } + &__footer { + align-items: flex-end; + font-size: 12px; + font-style: normal; + font-weight: 700; + display: flex; + justify-content: flex-end; + margin-top: auto; + min-height: 525px; + + &-box { + width: 100%; + box-shadow: 0px 1px 0px 0px #f2f3f4 inset; + justify-content: flex-end; + display: flex; + } + + // width: 100vw; + @include mobile { + font-size: 14px; + padding: 8px 16px !important; + align-items: flex-start !important; + min-height: unset !important; + } + &__clear-button { + margin: 8px 16px 0 0; + display: inline-flex; + height: 32px; + padding: 6px 16px; + justify-content: flex-end; + align-items: center; + flex-shrink: 0; + border-radius: 4px; + border: 1px solid var(--system-light-3-less-prominent-text, #999); + @include mobile { + margin: 0; + } + } + } } diff --git a/src/components/AppLayout/Notifications/index.tsx b/src/components/AppLayout/Notifications/index.tsx new file mode 100644 index 00000000..61e0436a --- /dev/null +++ b/src/components/AppLayout/Notifications/index.tsx @@ -0,0 +1,87 @@ +import React, { useState } from "react"; +import Notification from "./Notification"; +import { TNotificationsProps } from "./types"; +import "./index.scss"; +import { useDevice } from "../../../hooks"; +import { ContextMenu } from "../../ContextMenu"; +import { Modal } from "../../Modal"; +import { Text } from "../../Text"; + +export const Notifications = ({ + notifications, + clearNotificationsCallback = () => {}, + isNotificationsVisible = true, +}: TNotificationsProps) => { + const { isMobile } = useDevice(); + const [isOpen, setIsOpen] = useState(isNotificationsVisible); + return ( + + {isMobile && ( + { + setIsOpen(false); + }} + > + { + setIsOpen(false); + }} + > + + Notifications + + + {notifications.map((notification) => ( + + ))} + + + + + )} + {!isMobile && ( + + + Notifications + + {notifications.map((notification) => ( + + ))} +
+
+ +
+
+ + )} + + ); +}; From 1d82c571f8b84c0ce1b60fc70130992f72a0a7ec Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Thu, 9 May 2024 19:13:20 +0800 Subject: [PATCH 08/29] chore: update type name --- src/components/AppLayout/Notifications/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AppLayout/Notifications/types.ts b/src/components/AppLayout/Notifications/types.ts index 308351c9..40412bf8 100644 --- a/src/components/AppLayout/Notifications/types.ts +++ b/src/components/AppLayout/Notifications/types.ts @@ -9,6 +9,6 @@ export type TNotificationObject = { }; export type TNotificationsProps = { notifications: TNotificationObject[]; - clearNotificationCallback: () => void; + clearNotificationsCallback: () => void; isNotificationsVisible?: boolean; }; From f00266518a0c69cf8ab3a5defc11ee3c9c0016a5 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Fri, 10 May 2024 12:16:31 +0800 Subject: [PATCH 09/29] feat: toggle the modal from props --- src/components/AppLayout/Notifications/index.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/AppLayout/Notifications/index.tsx b/src/components/AppLayout/Notifications/index.tsx index 61e0436a..51d62ea2 100644 --- a/src/components/AppLayout/Notifications/index.tsx +++ b/src/components/AppLayout/Notifications/index.tsx @@ -14,6 +14,12 @@ export const Notifications = ({ }: TNotificationsProps) => { const { isMobile } = useDevice(); const [isOpen, setIsOpen] = useState(isNotificationsVisible); + + React.useEffect(() => { + if (isNotificationsVisible !== isOpen) + setIsOpen(isNotificationsVisible); + }, [isNotificationsVisible]); + return ( {isMobile && ( From 3a382f87fb6d32798c2736765fc778b20b13ba79 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Fri, 10 May 2024 12:16:52 +0800 Subject: [PATCH 10/29] style: add missing styles --- src/components/AppLayout/Notifications/index.scss | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/AppLayout/Notifications/index.scss b/src/components/AppLayout/Notifications/index.scss index 054e07e1..d25d0696 100644 --- a/src/components/AppLayout/Notifications/index.scss +++ b/src/components/AppLayout/Notifications/index.scss @@ -1,9 +1,15 @@ .notifications { + border-radius: 9px; + background: var(--system-light-8-primary-background, #fff); + box-shadow: + 0px 0px 16px 0px rgba(0, 0, 0, 0.08), + 0px 16px 16px 0px rgba(0, 0, 0, 0.08); .notification { background: var(--light-8-primary-background, #fff); box-shadow: 0px -1px 0px 0px #f2f3f4 inset; padding: 8px 16px; font-size: 12px; + &__container { display: flex; flex-direction: row; @@ -18,13 +24,11 @@ } &__title { color: var(--system-light-1-prominent-text, #333); - font-family: "IBM Plex Sans"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 20px; - margin-bottom: 4px; } &__message { color: var(--system-light-2-general-text, #333); @@ -59,6 +63,7 @@ font-size: 14px; font-style: normal; font-weight: 700; + margin: 8px 0; } } &__footer { @@ -82,11 +87,11 @@ @include mobile { font-size: 14px; padding: 8px 16px !important; - align-items: flex-start !important; + align-items: flex-start!important; min-height: unset !important; } &__clear-button { - margin: 8px 16px 0 0; + margin: 8px 16px 8px 0; display: inline-flex; height: 32px; padding: 6px 16px; From 7b5a50dc2fc5a55393d02ff892889b8294bcb2ee Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Fri, 10 May 2024 12:17:30 +0800 Subject: [PATCH 11/29] feat: get component text from props --- src/components/AppLayout/Notifications/index.tsx | 9 +++++---- src/components/AppLayout/Notifications/types.ts | 4 ++++ stories/Notifications.stories.tsx | 6 ++++++ 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/AppLayout/Notifications/index.tsx b/src/components/AppLayout/Notifications/index.tsx index 51d62ea2..40619fb8 100644 --- a/src/components/AppLayout/Notifications/index.tsx +++ b/src/components/AppLayout/Notifications/index.tsx @@ -11,6 +11,7 @@ export const Notifications = ({ notifications, clearNotificationsCallback = () => {}, isNotificationsVisible = true, + componentConfig, }: TNotificationsProps) => { const { isMobile } = useDevice(); const [isOpen, setIsOpen] = useState(isNotificationsVisible); @@ -40,7 +41,7 @@ export const Notifications = ({ weight="bold" className="deriv-modal__header-title" > - Notifications + {componentConfig.modalTitle} {notifications.map((notification) => ( @@ -57,7 +58,7 @@ export const Notifications = ({ setIsOpen(false); }} > - Clear all + {componentConfig.clearButtonText} @@ -65,7 +66,7 @@ export const Notifications = ({ {!isMobile && ( - Notifications + {componentConfig.modalTitle} {notifications.map((notification) => ( - Clear all + {componentConfig.clearButtonText}
diff --git a/src/components/AppLayout/Notifications/types.ts b/src/components/AppLayout/Notifications/types.ts index 40412bf8..c79cceaf 100644 --- a/src/components/AppLayout/Notifications/types.ts +++ b/src/components/AppLayout/Notifications/types.ts @@ -11,4 +11,8 @@ export type TNotificationsProps = { notifications: TNotificationObject[]; clearNotificationsCallback: () => void; isNotificationsVisible?: boolean; + componentConfig:{ + clearButtonText: string; + modalTitle: string; + } }; diff --git a/stories/Notifications.stories.tsx b/stories/Notifications.stories.tsx index d837ad14..2c12b55b 100644 --- a/stories/Notifications.stories.tsx +++ b/stories/Notifications.stories.tsx @@ -14,6 +14,12 @@ type Story = StoryObj; export const Default: Story = { args: { + componentConfig: { + clearButtonText: "Clear all", + modalTitle: "Notifications", + }, + clearNotificationsCallback: () => {}, + isNotificationsVisible: true, notifications: [ { icon: , From b16cd8b5c9d73d5c7146133f148a3ccce504e3c6 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Fri, 10 May 2024 12:18:19 +0800 Subject: [PATCH 12/29] test: use userEvent Co-authored-by: Shayan Khaleghparast <100833613+shayan-deriv@users.noreply.github.com> --- .../AppLayout/Notifications/__test__/notification.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AppLayout/Notifications/__test__/notification.spec.tsx b/src/components/AppLayout/Notifications/__test__/notification.spec.tsx index 3f0608d2..cc19e47f 100644 --- a/src/components/AppLayout/Notifications/__test__/notification.spec.tsx +++ b/src/components/AppLayout/Notifications/__test__/notification.spec.tsx @@ -21,7 +21,7 @@ describe("Notification Component", () => { // Check if the button is rendered and clickable const button = getByRole("button", { name: "Click Me" }); - fireEvent.click(button); + await userEvent.click(button); expect(mockAction).toHaveBeenCalled(); // Ensure button action is triggered }); }); \ No newline at end of file From f7d539a32bab68078c7f4cd94f16eb3be6f7146c Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Fri, 10 May 2024 14:01:02 +0800 Subject: [PATCH 13/29] feat: to close the context modal on click outside --- src/components/AppLayout/Notifications/index.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/AppLayout/Notifications/index.tsx b/src/components/AppLayout/Notifications/index.tsx index 40619fb8..fccf50b6 100644 --- a/src/components/AppLayout/Notifications/index.tsx +++ b/src/components/AppLayout/Notifications/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useRef, useState } from "react"; import Notification from "./Notification"; import { TNotificationsProps } from "./types"; import "./index.scss"; @@ -6,6 +6,7 @@ import { useDevice } from "../../../hooks"; import { ContextMenu } from "../../ContextMenu"; import { Modal } from "../../Modal"; import { Text } from "../../Text"; +import { useOnClickOutside } from "usehooks-ts"; export const Notifications = ({ notifications, @@ -15,12 +16,18 @@ export const Notifications = ({ }: TNotificationsProps) => { const { isMobile } = useDevice(); const [isOpen, setIsOpen] = useState(isNotificationsVisible); + const notificationsRef = useRef(null); React.useEffect(() => { if (isNotificationsVisible !== isOpen) setIsOpen(isNotificationsVisible); }, [isNotificationsVisible]); + useOnClickOutside(notificationsRef, (e) => { + e.stopPropagation(); + setIsOpen(!isOpen); + }); + return ( {isMobile && ( @@ -64,7 +71,11 @@ export const Notifications = ({ )} {!isMobile && ( - + {componentConfig.modalTitle} From d5493fe7f5e56da235c125c81062f6d5af10534e Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Fri, 10 May 2024 14:01:31 +0800 Subject: [PATCH 14/29] feat: use userEvent --- .../Notifications/__test__/notification.spec.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/AppLayout/Notifications/__test__/notification.spec.tsx b/src/components/AppLayout/Notifications/__test__/notification.spec.tsx index cc19e47f..43626bf9 100644 --- a/src/components/AppLayout/Notifications/__test__/notification.spec.tsx +++ b/src/components/AppLayout/Notifications/__test__/notification.spec.tsx @@ -1,9 +1,10 @@ import React from "react"; -import { render, fireEvent } from "@testing-library/react"; +import { render } from "@testing-library/react"; import Notification from "../Notification"; +import userEvent from "@testing-library/user-event"; describe("Notification Component", () => { - it("renders the notification with title, message, and button", () => { + it("renders the notification with title, message, and button", async () => { const mockAction = jest.fn(); const { getByText, getByRole } = render( { message="Test message" buttonAction={mockAction} actionText="Click Me" - /> + />, ); // Check if the title and message are in the document @@ -22,6 +23,6 @@ describe("Notification Component", () => { // Check if the button is rendered and clickable const button = getByRole("button", { name: "Click Me" }); await userEvent.click(button); - expect(mockAction).toHaveBeenCalled(); // Ensure button action is triggered + expect(mockAction).toHaveBeenCalled(); // Ensure button action is triggered }); -}); \ No newline at end of file +}); From 87a98d7da5a094a3c8793cdbb6f0e743f8521687 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Fri, 10 May 2024 14:01:48 +0800 Subject: [PATCH 15/29] feat: mock useDevice --- .../Notifications/__test__/index.spec.tsx | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/src/components/AppLayout/Notifications/__test__/index.spec.tsx b/src/components/AppLayout/Notifications/__test__/index.spec.tsx index dd20a110..14bbe9fb 100644 --- a/src/components/AppLayout/Notifications/__test__/index.spec.tsx +++ b/src/components/AppLayout/Notifications/__test__/index.spec.tsx @@ -1,9 +1,13 @@ import React from "react"; -import { render, fireEvent } from "@testing-library/react"; +import { render } from "@testing-library/react"; import { Notifications } from ".."; - +import userEvent from "@testing-library/user-event"; +// Mocking the useDevice hook +jest.mock("../../../../hooks", () => ({ + useDevice: jest.fn().mockReturnValue({ isMobile: false }), +})); describe("Notifications Component", () => { - it("renders multiple notifications with their respective properties", () => { + it("renders multiple notifications with their respective properties", async () => { const mockAction1 = jest.fn(); const mockAction2 = jest.fn(); const notifications = [ @@ -24,7 +28,15 @@ describe("Notifications Component", () => { ]; const { getByText, getAllByRole } = render( - , + {}} + isNotificationsVisible={true} + componentConfig={{ + clearButtonText: "Clear all", + modalTitle: "Notifications", + }} + />, ); // Check if the title, message, and button for each notification are in the document @@ -36,9 +48,9 @@ describe("Notifications Component", () => { // Check if buttons are clickable and actions are called const buttons = getAllByRole("button"); - fireEvent.click(buttons[0]); + await userEvent.click(buttons[0]); expect(mockAction1).toHaveBeenCalled(); - fireEvent.click(buttons[1]); + await userEvent.click(buttons[1]); expect(mockAction2).toHaveBeenCalled(); }); }); From 2437f7bc942740364782100cac34bd31c4ded7de Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Fri, 10 May 2024 18:34:29 +0800 Subject: [PATCH 16/29] feat: add empty notification state --- .../AppLayout/Notifications/ic-box.svg | 1 + .../AppLayout/Notifications/index.tsx | 31 +++++++++++++++++++ .../AppLayout/Notifications/types.ts | 6 ++-- 3 files changed, 36 insertions(+), 2 deletions(-) create mode 100644 src/components/AppLayout/Notifications/ic-box.svg diff --git a/src/components/AppLayout/Notifications/ic-box.svg b/src/components/AppLayout/Notifications/ic-box.svg new file mode 100644 index 00000000..35878335 --- /dev/null +++ b/src/components/AppLayout/Notifications/ic-box.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/AppLayout/Notifications/index.tsx b/src/components/AppLayout/Notifications/index.tsx index fccf50b6..d0b64f13 100644 --- a/src/components/AppLayout/Notifications/index.tsx +++ b/src/components/AppLayout/Notifications/index.tsx @@ -7,6 +7,7 @@ import { ContextMenu } from "../../ContextMenu"; import { Modal } from "../../Modal"; import { Text } from "../../Text"; import { useOnClickOutside } from "usehooks-ts"; +import Icon from "./ic-box.svg"; export const Notifications = ({ notifications, @@ -51,6 +52,21 @@ export const Notifications = ({ {componentConfig.modalTitle} + {notifications.length === 0 && ( +
+ + + {componentConfig.noNotificationsTitle} + + + {componentConfig.noNotificationsMessage} + +
+ )} {notifications.map((notification) => ( {componentConfig.modalTitle} + {notifications.length === 0 && ( +
+ + + {componentConfig.noNotificationsTitle} + + + {componentConfig.noNotificationsMessage} + +
+ )} {notifications.map((notification) => ( void; isNotificationsVisible?: boolean; - componentConfig:{ + componentConfig: { clearButtonText: string; modalTitle: string; - } + noNotificationsTitle: string; + noNotificationsMessage: string; + }; }; From 2021bfbaf79e91c80df1abacac9e41953f2d42af Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Fri, 10 May 2024 18:35:00 +0800 Subject: [PATCH 17/29] feat: add empty notification styles --- .../AppLayout/Notifications/index.scss | 40 ++++++++++++++++--- 1 file changed, 35 insertions(+), 5 deletions(-) diff --git a/src/components/AppLayout/Notifications/index.scss b/src/components/AppLayout/Notifications/index.scss index d25d0696..5e0a272a 100644 --- a/src/components/AppLayout/Notifications/index.scss +++ b/src/components/AppLayout/Notifications/index.scss @@ -4,12 +4,44 @@ box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 16px 0px rgba(0, 0, 0, 0.08); + min-height: 525px !important; + display: flex; + flex-direction: column; + &__empty { + width: 264px; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: var(--text-less-prominent, #999); + flex-grow: 1; + + @include mobile { + width: unset; + } + p { + justify-content: center; + font-size: 14px; + font-style: normal; + font-weight: 700; + line-height: 20px; + color: var(--text-less-prominent, #999); + } + span { + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 18px; + color: var(--text-less-prominent, #999); + } + } .notification { background: var(--light-8-primary-background, #fff); box-shadow: 0px -1px 0px 0px #f2f3f4 inset; padding: 8px 16px; font-size: 12px; - + &__container { display: flex; flex-direction: row; @@ -74,8 +106,7 @@ display: flex; justify-content: flex-end; margin-top: auto; - min-height: 525px; - + min-height: unset !important; &-box { width: 100%; box-shadow: 0px 1px 0px 0px #f2f3f4 inset; @@ -87,8 +118,7 @@ @include mobile { font-size: 14px; padding: 8px 16px !important; - align-items: flex-start!important; - min-height: unset !important; + align-items: flex-start !important; } &__clear-button { margin: 8px 16px 8px 0; From 994c55142c94ffc03daad634b8e746f797ec22be Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Fri, 10 May 2024 18:35:18 +0800 Subject: [PATCH 18/29] story: add empty notifiaction story --- stories/Notifications.stories.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/stories/Notifications.stories.tsx b/stories/Notifications.stories.tsx index 2c12b55b..f428ab23 100644 --- a/stories/Notifications.stories.tsx +++ b/stories/Notifications.stories.tsx @@ -17,7 +17,10 @@ export const Default: Story = { componentConfig: { clearButtonText: "Clear all", modalTitle: "Notifications", + noNotificationsTitle: "No notifications", + noNotificationsMessage: "You currently have no notifications", }, + clearNotificationsCallback: () => {}, isNotificationsVisible: true, notifications: [ @@ -52,3 +55,18 @@ export const Default: Story = { ], }, }; + +export const Empty: Story = { + args: { + componentConfig: { + clearButtonText: "Clear all", + modalTitle: "Notifications", + noNotificationsTitle: "No notifications", + noNotificationsMessage: "You currently have no notifications", + }, + + clearNotificationsCallback: () => {}, + isNotificationsVisible: true, + notifications: [], + }, +}; From 81761c482357864444ea7e14dae665a6f96c65b7 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Fri, 10 May 2024 18:38:52 +0800 Subject: [PATCH 19/29] test: add test case for empty notification state --- .../Notifications/__test__/index.spec.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/components/AppLayout/Notifications/__test__/index.spec.tsx b/src/components/AppLayout/Notifications/__test__/index.spec.tsx index 14bbe9fb..29268777 100644 --- a/src/components/AppLayout/Notifications/__test__/index.spec.tsx +++ b/src/components/AppLayout/Notifications/__test__/index.spec.tsx @@ -7,6 +7,22 @@ jest.mock("../../../../hooks", () => ({ useDevice: jest.fn().mockReturnValue({ isMobile: false }), })); describe("Notifications Component", () => { + it("should show no notifications when notifications array is empty", () => { + const { queryByText } = render( + {}} + isNotificationsVisible={true} + componentConfig={{ + clearButtonText: "Clear all", + modalTitle: "Notifications", + noNotificationsTitle: "No notifications", + noNotificationsMessage: "You have no notifications", + }} + />, + ); + expect(queryByText("No notifications")).toBeInTheDocument(); + }) it("renders multiple notifications with their respective properties", async () => { const mockAction1 = jest.fn(); const mockAction2 = jest.fn(); @@ -35,6 +51,8 @@ describe("Notifications Component", () => { componentConfig={{ clearButtonText: "Clear all", modalTitle: "Notifications", + noNotificationsTitle: "No notifications", + noNotificationsMessage: "You have no notifications", }} />, ); From 80d9b3788f0002905a8cc38b78b863bcb2eb7575 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Fri, 10 May 2024 18:59:36 +0800 Subject: [PATCH 20/29] feat: remove internal state of the notifications --- .../Notifications/__test__/index.spec.tsx | 8 +++-- .../AppLayout/Notifications/index.tsx | 11 ++----- .../AppLayout/Notifications/types.ts | 3 +- stories/Notifications.stories.tsx | 32 +++++++++++++++++-- 4 files changed, 40 insertions(+), 14 deletions(-) diff --git a/src/components/AppLayout/Notifications/__test__/index.spec.tsx b/src/components/AppLayout/Notifications/__test__/index.spec.tsx index 29268777..92f3311a 100644 --- a/src/components/AppLayout/Notifications/__test__/index.spec.tsx +++ b/src/components/AppLayout/Notifications/__test__/index.spec.tsx @@ -12,7 +12,8 @@ describe("Notifications Component", () => { {}} - isNotificationsVisible={true} + isOpen={true} + setIsOpen={() => {}} componentConfig={{ clearButtonText: "Clear all", modalTitle: "Notifications", @@ -22,7 +23,7 @@ describe("Notifications Component", () => { />, ); expect(queryByText("No notifications")).toBeInTheDocument(); - }) + }); it("renders multiple notifications with their respective properties", async () => { const mockAction1 = jest.fn(); const mockAction2 = jest.fn(); @@ -47,7 +48,8 @@ describe("Notifications Component", () => { {}} - isNotificationsVisible={true} + isOpen={true} + setIsOpen={() => {}} componentConfig={{ clearButtonText: "Clear all", modalTitle: "Notifications", diff --git a/src/components/AppLayout/Notifications/index.tsx b/src/components/AppLayout/Notifications/index.tsx index d0b64f13..4a25fe99 100644 --- a/src/components/AppLayout/Notifications/index.tsx +++ b/src/components/AppLayout/Notifications/index.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from "react"; +import React, { useRef } from "react"; import Notification from "./Notification"; import { TNotificationsProps } from "./types"; import "./index.scss"; @@ -12,18 +12,13 @@ import Icon from "./ic-box.svg"; export const Notifications = ({ notifications, clearNotificationsCallback = () => {}, - isNotificationsVisible = true, + isOpen, + setIsOpen, componentConfig, }: TNotificationsProps) => { const { isMobile } = useDevice(); - const [isOpen, setIsOpen] = useState(isNotificationsVisible); const notificationsRef = useRef(null); - React.useEffect(() => { - if (isNotificationsVisible !== isOpen) - setIsOpen(isNotificationsVisible); - }, [isNotificationsVisible]); - useOnClickOutside(notificationsRef, (e) => { e.stopPropagation(); setIsOpen(!isOpen); diff --git a/src/components/AppLayout/Notifications/types.ts b/src/components/AppLayout/Notifications/types.ts index a9bf3e01..28822682 100644 --- a/src/components/AppLayout/Notifications/types.ts +++ b/src/components/AppLayout/Notifications/types.ts @@ -10,7 +10,8 @@ export type TNotificationObject = { export type TNotificationsProps = { notifications: TNotificationObject[]; clearNotificationsCallback: () => void; - isNotificationsVisible?: boolean; + setIsOpen: (state: boolean) => void; + isOpen: boolean; componentConfig: { clearButtonText: string; modalTitle: string; diff --git a/stories/Notifications.stories.tsx b/stories/Notifications.stories.tsx index f428ab23..0a8a1121 100644 --- a/stories/Notifications.stories.tsx +++ b/stories/Notifications.stories.tsx @@ -22,7 +22,8 @@ export const Default: Story = { }, clearNotificationsCallback: () => {}, - isNotificationsVisible: true, + isOpen: true, + setIsOpen: () => {}, notifications: [ { icon: , @@ -54,6 +55,19 @@ export const Default: Story = { }, ], }, + render: (args) => { + const [isOpen, setIsOpen] = React.useState(args.isOpen); + React.useEffect(() => { + setIsOpen(args.isOpen); + }, [args.isOpen]) + return ( + setIsOpen(state)} + /> + ); + }, }; export const Empty: Story = { @@ -66,7 +80,21 @@ export const Empty: Story = { }, clearNotificationsCallback: () => {}, - isNotificationsVisible: true, + isOpen: true, + setIsOpen: () => {}, notifications: [], }, + render: (args) => { + const [isOpen, setIsOpen] = React.useState(args.isOpen); + React.useEffect(() => { + setIsOpen(args.isOpen); + }, [args.isOpen]) + return ( + setIsOpen(state)} + /> + ); + }, }; From a9dfa8b1e23018002b18193993e892770a84557e Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Fri, 10 May 2024 19:00:21 +0800 Subject: [PATCH 21/29] feat: export out the component --- src/components/AppLayout/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/AppLayout/index.ts b/src/components/AppLayout/index.ts index 884326ae..b8840687 100644 --- a/src/components/AppLayout/index.ts +++ b/src/components/AppLayout/index.ts @@ -4,3 +4,4 @@ export { Footer } from "./Footer"; export { Header } from "./Header"; export { MenuItem } from "./MenuItem"; export { Wrapper } from "./Wrapper"; +export { Notifications } from "./Notifications"; From 56b6c801d4c92e0cba35040ca69121eea38e2b15 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Mon, 13 May 2024 12:21:23 +0800 Subject: [PATCH 22/29] chore: remove react import Co-authored-by: Niloofar Sadeghi <93518187+niloofar-deriv@users.noreply.github.com> --- src/components/AppLayout/Notifications/Notification.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AppLayout/Notifications/Notification.tsx b/src/components/AppLayout/Notifications/Notification.tsx index 4fa4779b..d8a0773b 100644 --- a/src/components/AppLayout/Notifications/Notification.tsx +++ b/src/components/AppLayout/Notifications/Notification.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { TNotificationObject } from "./types"; const Notification = ({ From d9bb1f7df14b6ba1deaa444f2177f66a037161b9 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Mon, 13 May 2024 12:21:42 +0800 Subject: [PATCH 23/29] chore: remove react import Co-authored-by: Niloofar Sadeghi <93518187+niloofar-deriv@users.noreply.github.com> --- src/components/AppLayout/Notifications/__test__/index.spec.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AppLayout/Notifications/__test__/index.spec.tsx b/src/components/AppLayout/Notifications/__test__/index.spec.tsx index 92f3311a..1c6dd435 100644 --- a/src/components/AppLayout/Notifications/__test__/index.spec.tsx +++ b/src/components/AppLayout/Notifications/__test__/index.spec.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { render } from "@testing-library/react"; import { Notifications } from ".."; import userEvent from "@testing-library/user-event"; From 274b40c97f947add8b21f71599907697de432e73 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Mon, 13 May 2024 12:25:53 +0800 Subject: [PATCH 24/29] test: move notifications tests --- .../{Notifications => }/__test__/notification.spec.tsx | 2 +- .../__test__/index.spec.tsx => __test__/notifications.spec.tsx} | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename src/components/AppLayout/{Notifications => }/__test__/notification.spec.tsx (94%) rename src/components/AppLayout/{Notifications/__test__/index.spec.tsx => __test__/notifications.spec.tsx} (98%) diff --git a/src/components/AppLayout/Notifications/__test__/notification.spec.tsx b/src/components/AppLayout/__test__/notification.spec.tsx similarity index 94% rename from src/components/AppLayout/Notifications/__test__/notification.spec.tsx rename to src/components/AppLayout/__test__/notification.spec.tsx index 43626bf9..28c0c677 100644 --- a/src/components/AppLayout/Notifications/__test__/notification.spec.tsx +++ b/src/components/AppLayout/__test__/notification.spec.tsx @@ -1,6 +1,6 @@ import React from "react"; import { render } from "@testing-library/react"; -import Notification from "../Notification"; +import Notification from "../Notifications/Notification"; import userEvent from "@testing-library/user-event"; describe("Notification Component", () => { diff --git a/src/components/AppLayout/Notifications/__test__/index.spec.tsx b/src/components/AppLayout/__test__/notifications.spec.tsx similarity index 98% rename from src/components/AppLayout/Notifications/__test__/index.spec.tsx rename to src/components/AppLayout/__test__/notifications.spec.tsx index 1c6dd435..2a0804ad 100644 --- a/src/components/AppLayout/Notifications/__test__/index.spec.tsx +++ b/src/components/AppLayout/__test__/notifications.spec.tsx @@ -1,5 +1,5 @@ import { render } from "@testing-library/react"; -import { Notifications } from ".."; +import { Notifications } from "../Notifications"; import userEvent from "@testing-library/user-event"; // Mocking the useDevice hook jest.mock("../../../../hooks", () => ({ From e071ecac28c9716922022cd136dd26eba782b290 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Mon, 13 May 2024 12:29:22 +0800 Subject: [PATCH 25/29] feat: use text component --- .../AppLayout/Notifications/Notification.tsx | 6 ++++-- src/components/AppLayout/Notifications/index.tsx | 10 +++++----- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/AppLayout/Notifications/Notification.tsx b/src/components/AppLayout/Notifications/Notification.tsx index d8a0773b..0a3c9a9e 100644 --- a/src/components/AppLayout/Notifications/Notification.tsx +++ b/src/components/AppLayout/Notifications/Notification.tsx @@ -1,3 +1,4 @@ +import { Text } from "../../Text"; import { TNotificationObject } from "./types"; const Notification = ({ @@ -12,9 +13,10 @@ const Notification = ({
{icon}
-

{title}

+ {title}
-

{message}

+ {message}
diff --git a/src/components/AppLayout/Notifications/index.tsx b/src/components/AppLayout/Notifications/index.tsx index 4a25fe99..b69192a1 100644 --- a/src/components/AppLayout/Notifications/index.tsx +++ b/src/components/AppLayout/Notifications/index.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from "react"; +import { Fragment, useRef } from "react"; import Notification from "./Notification"; import { TNotificationsProps } from "./types"; import "./index.scss"; @@ -25,7 +25,7 @@ export const Notifications = ({ }); return ( - + {isMobile && ( - + {componentConfig.modalTitle} - + {notifications.length === 0 && (
@@ -126,6 +126,6 @@ export const Notifications = ({
)} - + ); }; From 203fc55d2f0c51ab87c9fdd7fec85290c344d3c3 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Mon, 13 May 2024 12:29:49 +0800 Subject: [PATCH 26/29] chore: import ReactNode directly --- src/components/AppLayout/Notifications/types.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AppLayout/Notifications/types.ts b/src/components/AppLayout/Notifications/types.ts index 28822682..6d074932 100644 --- a/src/components/AppLayout/Notifications/types.ts +++ b/src/components/AppLayout/Notifications/types.ts @@ -1,7 +1,7 @@ -import React from "react"; +import { ReactNode } from "react"; export type TNotificationObject = { - icon: React.ReactNode; + icon: ReactNode; title: string; message: string; buttonAction: () => void; From cc029dd21eda4a090dbcba5e56a60f32974a3c42 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Mon, 13 May 2024 12:33:23 +0800 Subject: [PATCH 27/29] feat: add display name --- src/components/AppLayout/Notifications/Notification.tsx | 4 ++-- src/components/AppLayout/Notifications/index.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/AppLayout/Notifications/Notification.tsx b/src/components/AppLayout/Notifications/Notification.tsx index 0a3c9a9e..b8604678 100644 --- a/src/components/AppLayout/Notifications/Notification.tsx +++ b/src/components/AppLayout/Notifications/Notification.tsx @@ -1,7 +1,7 @@ import { Text } from "../../Text"; import { TNotificationObject } from "./types"; -const Notification = ({ +export const Notification = ({ icon, title, message, @@ -28,4 +28,4 @@ const Notification = ({ ); }; -export default Notification; +Notification.displayName = 'Notification' diff --git a/src/components/AppLayout/Notifications/index.tsx b/src/components/AppLayout/Notifications/index.tsx index b69192a1..1120fcfe 100644 --- a/src/components/AppLayout/Notifications/index.tsx +++ b/src/components/AppLayout/Notifications/index.tsx @@ -1,5 +1,5 @@ import { Fragment, useRef } from "react"; -import Notification from "./Notification"; +import { Notification } from "./Notification"; import { TNotificationsProps } from "./types"; import "./index.scss"; import { useDevice } from "../../../hooks"; From b8eb8dfe08193b73a06bfb6caef8c1a08983b604 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Mon, 13 May 2024 12:39:01 +0800 Subject: [PATCH 28/29] fix: fix default export issue --- src/components/AppLayout/Notifications/index.tsx | 1 + src/components/AppLayout/__test__/notification.spec.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/AppLayout/Notifications/index.tsx b/src/components/AppLayout/Notifications/index.tsx index 1120fcfe..284d1c35 100644 --- a/src/components/AppLayout/Notifications/index.tsx +++ b/src/components/AppLayout/Notifications/index.tsx @@ -129,3 +129,4 @@ export const Notifications = ({ ); }; +Notifications.displayName = "Notifications"; diff --git a/src/components/AppLayout/__test__/notification.spec.tsx b/src/components/AppLayout/__test__/notification.spec.tsx index 28c0c677..2b052d1b 100644 --- a/src/components/AppLayout/__test__/notification.spec.tsx +++ b/src/components/AppLayout/__test__/notification.spec.tsx @@ -1,6 +1,6 @@ import React from "react"; import { render } from "@testing-library/react"; -import Notification from "../Notifications/Notification"; +import { Notification } from "../Notifications/Notification"; import userEvent from "@testing-library/user-event"; describe("Notification Component", () => { From 8338f2f54c6a7fa17ad56606827a362f035006e9 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Mon, 13 May 2024 12:42:56 +0800 Subject: [PATCH 29/29] test: fix hook path --- src/components/AppLayout/__test__/notifications.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AppLayout/__test__/notifications.spec.tsx b/src/components/AppLayout/__test__/notifications.spec.tsx index 2a0804ad..0109e457 100644 --- a/src/components/AppLayout/__test__/notifications.spec.tsx +++ b/src/components/AppLayout/__test__/notifications.spec.tsx @@ -2,7 +2,7 @@ import { render } from "@testing-library/react"; import { Notifications } from "../Notifications"; import userEvent from "@testing-library/user-event"; // Mocking the useDevice hook -jest.mock("../../../../hooks", () => ({ +jest.mock("../../../hooks", () => ({ useDevice: jest.fn().mockReturnValue({ isMobile: false }), })); describe("Notifications Component", () => {