Merge branch 'deriv-com:main' into yaswanth/FEQ-1858_Implement_circular_progressbar

Author: yaswanth-deriv

package-lock.json

@@ -31,6 +31,9 @@
         "test": "jest",
         "test:report": "jest --collectCoverage"
     },
+    "dependencies": {
+        "@types/react-modal": "^3.16.3"
+    },
     "devDependencies": {
         "@babel/preset-env": "^7.24.3",
         "@babel/preset-react": "^7.24.1",
@@ -53,9 +56,8 @@
         "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^29.5.12",
         "@types/node": "^20.11.30",
-        "@types/react": "^18.2.71",
+        "@types/react": "^18.2.72",
         "@types/react-dom": "^18.2.22",
-        "@types/react-modal": "^3.16.3",
         "@typescript-eslint/eslint-plugin": "^7.4.0",
         "@typescript-eslint/parser": "^7.4.0",
         "@vitejs/plugin-react": "^4.2.1",

package.json

@@ -0,0 +1,52 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { InlineMessage } from "..";
+
+describe("InlineMessage Component", () => {
+  it("renders children correctly", () => {
+    const { getByText } = render(<InlineMessage>Test Message</InlineMessage>);
+    expect(getByText("Test Message")).toBeInTheDocument();
+  });
+
+  it("renders with specified variant", () => {
+    const { container } = render(
+      <InlineMessage variant="error">Error Message</InlineMessage>
+    );
+    expect(container.firstChild).toHaveClass(
+      "deriv-inline-message__error--filled"
+    );
+  });
+
+  it("renders with specified icon", () => {
+    const { container } = render(
+      <InlineMessage icon={<span>Icon</span>}>Message with Icon</InlineMessage>
+    );
+    expect(container.querySelector(".deriv-inline-message__icon")).toBeInTheDocument();
+  });
+
+  it("renders with specified type", () => {
+    const { container } = render(
+      <InlineMessage variant="warning" type="outlined">Outlined Warning Message</InlineMessage>
+    );
+    expect(container.firstChild).toHaveClass(
+      "deriv-inline-message__warning--outlined"
+    );
+  });
+
+  it("renders with custom class name", () => {
+    const { container } = render(
+      <InlineMessage className="custom-class">Custom Message</InlineMessage>
+    );
+    expect(container.firstChild).toHaveClass("custom-class");
+  });
+
+  it("should position the icon at the top", () => {
+    const { container } = render(
+      <InlineMessage iconPosition="top" variant="info">
+        Test Message
+      </InlineMessage>
+    );
+    const iconElement = container.querySelector(".deriv-inline-message__icon--top")
+    expect(iconElement).toBeInTheDocument();
+  });
+});

src/components/InlineMessage/__test__/InlineMessage.spec.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { PageLayout } from "..";
+import * as hooks from "../../../hooks"
+
+// Mocking the useDevice hook
+jest.mock("../../../hooks", () => ({
+  useDevice: jest.fn().mockReturnValue({isMobile:false}),
+}));
+
+describe("PageLayout Component", () => {
+  it("renders children correctly", () => {
+    render(
+      <PageLayout>
+        <div>Content</div>
+      </PageLayout>
+    );
+    const content =screen.getByText("Content")
+    expect(content).toBeInTheDocument();
+  });
+
+  it("renders sidebar when provided and not on mobile", () => {
+    const sidebar = <div>Sidebar</div>;
+    render(<PageLayout sidebar={sidebar} />);
+    const sidebarContent =screen.getByText("Sidebar")
+    expect(sidebarContent).toBeInTheDocument();
+  });
+
+  it("does not render sidebar on mobile", () => {
+    jest.spyOn(hooks,'useDevice').mockImplementation(()=>({isMobile:true, isDesktop:false, isTablet:false}))
+    const sidebar = <div>Sidebar</div>;
+    render(<PageLayout sidebar={sidebar} />);
+    const sidebarContent =screen.queryByText("Sidebar")
+    expect(sidebarContent).not.toBeInTheDocument()
+  });
+
+  it("does not render sidebar when not provided", () => {
+    render(<PageLayout />);
+    const sidebarContent=screen.queryByTestId("sidebar")
+    expect(sidebarContent).toBeNull();
+  });
+});

src/components/PageLayout/__test__/PageLayout.spec.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useDevice } from "../../hooks/useDevice";
+import { useDevice } from "../../hooks";
 import "./PageLayout.scss";
 
 type PageLayoutProps = {

src/components/PageLayout/index.tsx

@@ -3,6 +3,12 @@
     color: #333333;
     padding: 16px 24px;
     border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+
+    &__title {
+        margin-bottom: 8px;
+    }
 
     &:hover > &__action {
         text-decoration: underline;
@@ -14,5 +20,6 @@
         align-items: center;
         gap: 8px;
         cursor: pointer;
+        margin-top: 16px;
     }
 }

src/components/SideNote/SideNote.scss

@@ -15,6 +15,7 @@ type SideNoteProps = Omit<ComponentProps<"div">, "className"> & {
     className?: HTMLDivElement["className"];
     actionClick?: MouseEventHandler<HTMLButtonElement>;
     actionClassName?: HTMLDivElement["className"];
+    titleClassName?: HTMLDivElement["className"];
     actionLabel?: ReactNode;
 };
 
@@ -25,6 +26,7 @@ type SideNoteProps = Omit<ComponentProps<"div">, "className"> & {
  * @param {SideNoteProps.className} className - Add an extra className to the container.
  * @param {SideNoteProps.actionClick} actionClick - An onclick handler for the action button.
  * @param {SideNoteProps.actionClassName} actionClassName - Add an extra className to the action button.
+ * @param {SideNoteProps.titleClassName} titleClassName - Add an extra className to the title.
  * @param {SideNoteProps.actionLabel} actionLabel - Display the label of the action. (default: "Learn more")
  * @returns {React.JSX.Element} - Returns the SideNote component.
  */
@@ -35,17 +37,18 @@ export const SideNote = ({
     className,
     actionClick,
     actionClassName,
+    titleClassName,
     actionLabel = "Learn more",
     ...props
 }: PropsWithChildren<SideNoteProps>) => (
     <div className={clsx("deriv-side-note", className)} {...props}>
         {title && (
-            <Text data-testid="dt_deriv-side-note-title" size={titleSize} align="left" weight="bold">
+            <Text data-testid="dt_deriv-side-note-title" className={clsx("deriv-side-note__title", titleClassName)} size={titleSize} align="left" weight="bold">
                 {title}
             </Text>
         )}
 
-        <div>{children}</div>
+        {children}
 
         {actionClick && (
             <button

src/components/SideNote/index.tsx

@@ -0,0 +1,88 @@
+
+import React from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import { Tab, Tabs } from "..";
+
+describe("Tabs Component", () => {
+    it("renders Tabs component with primary variant by default", () => {
+        const { container } = render(
+            <Tabs>
+                <Tab title="Tab 1">Tab 1 Content</Tab>
+                <Tab title="Tab 2">Tab 2 Content</Tab>
+            </Tabs>
+        );
+
+        const tabsComponent = container.querySelector(".derivs-primary-tabs")
+        const tabTitle = screen.getByText("Tab 1")
+        const tab1Content = screen.getByText("Tab 1 Content")
+        expect(tabTitle).toBeInTheDocument();
+        expect(tabsComponent).toBeInTheDocument();
+        expect(tab1Content).toBeInTheDocument();
+        expect(tabsComponent).toHaveClass("derivs-primary-tabs");
+    });
+
+    it("changes active tab when clicked and checks active tab content showing", () => {
+        render(
+            <Tabs activeTab="Tab 1">
+                <Tab title="Tab 1">Tab 1 Content</Tab>
+                <Tab title="Tab 2">Tab 2 Content</Tab>
+            </Tabs>
+        );
+        const tab1 = screen.getByText("Tab 1 Content")
+        expect(tab1).toBeInTheDocument();
+        const tab2 = screen.getByText("Tab 2");
+        fireEvent.click(tab2);
+        const activeButton = screen.getAllByRole("button")[1];
+        const tabContent = screen.getByText("Tab 2 Content")
+        expect(tabContent).toBeInTheDocument();
+        expect(activeButton).toHaveClass("derivs-primary-tabs__btn--active");
+    });
+
+    it("should render tabs with correct variant", () => {
+        const { container } = render(
+            <Tabs variant="secondary">
+                <Tab title="Tab 1">Tab 1 Content</Tab>
+                <Tab title="Tab 2">Tab 2 Content</Tab>
+            </Tabs>
+        );
+        const tabsComponent = container.querySelector(".derivs-secondary-tabs")
+        expect(tabsComponent).toBeInTheDocument();
+    });
+
+    it("should render tabs with correct title font size", () => {
+        const { container } = render(
+            <Tabs TitleFontSize="lg">
+                <Tab title="Tab 1">Tab 1 Content</Tab>
+                <Tab title="Tab 2">Tab 2 Content</Tab>
+            </Tabs>
+        );
+
+        const tabsComponent = container.querySelector(".derivs-primary-tabs")
+
+        expect(tabsComponent).toHaveStyle("font-size: lg;");
+    });
+
+    it("should call onChange handler when a tab is clicked", () => {
+        const mockOnChange = jest.fn();
+        const { getByText } = render(
+            <Tabs onChange={mockOnChange}>
+                <Tab title="Tab 1">Tab 1 Content</Tab>
+                <Tab title="Tab 2">Tab 2 Content</Tab>
+            </Tabs>
+        );
+        const tabTitle = getByText("Tab 1");
+        fireEvent.click(tabTitle);
+        expect(mockOnChange).toHaveBeenCalled();
+    });
+
+    it("applies custom class to wrapper", () => {
+        const { container } = render(
+            <Tabs wrapperClassName="custom-wrapper">
+                <Tab title="Tab 1">Tab 1 Content</Tab>
+                <Tab title="Tab 2">Tab 2 Content</Tab>
+            </Tabs>
+        );
+        const tabsWrapper = container.querySelector(".custom-wrapper");
+        expect(tabsWrapper).toBeInTheDocument();
+    });
+});