test: added unit tests for platformswitcher component

src/components/AppLayout/PlatformSwitcher/PlatformSwitcherButton.tsx

@@ -10,6 +10,15 @@ type TPlatformSwitcherButton = ComponentProps<"button"> & {
     chevronIconClassName?: string;
 };
 
+/**
+ * PlatformSwitcherButton component renders a button with an icon and a chevron that indicates expansion state.
+ * @param {TPlatformSwitcherButton} props - The properties passed to the component.
+ * @property {ReactNode} icon - The icon to be displayed inside the button.
+ * @property {boolean} isExpanded - Flag to determine if the switcher is expanded.
+ * @property {number} [chevronIconSize=16] - Optional size for the chevron icon.
+ * @property {string} [chevronIconClassName] - Optional additional class names for the chevron icon.
+ * @returns {JSX.Element} The PlatformSwitcherButton component.
+ */
 export const PlatformSwitcherButton = ({
     icon,
     className,

src/components/AppLayout/PlatformSwitcher/PlatformSwitcherItem.tsx

@@ -9,6 +9,17 @@ type TPlatformSwitcherItem = ComponentProps<"a"> & {
     description: JSX.Element | string;
 };
 
+/**
+ * PlatformSwitcherItem component renders an anchor tag styled as an item in a platform switcher UI,
+ * with an icon and a description that can be a simple text or an element.
+ *
+ * @param {TPlatformSwitcherItem} props - The properties passed to the component including icon, description,
+ * active state, and any other anchor tag attributes.
+ * @property {ReactNode} icon - The icon to be displayed inside the item.
+ * @property {boolean} active - Indicates if the current item is active.
+ * @property {JSX.Element|string} description - The content description of the item, can be a string or JSX.
+ * @returns {JSX.Element} The rendered anchor element styled as a platform switcher item.
+ */
 export const PlatformSwitcherItem = ({
     icon,
     description,
@@ -17,6 +28,7 @@ export const PlatformSwitcherItem = ({
     ...props
 }: TPlatformSwitcherItem) => (
     <a
+        role="link"
         className={clsx(
             "deriv-platform-switcher__item",
             {

src/components/AppLayout/PlatformSwitcher/index.tsx

@@ -19,6 +19,15 @@ type TPlatformSwitcher = {
     bottomLink: ComponentProps<"a"> & { text: string | JSX.Element };
 };
 
+/**
+ * PlatformSwitcher component manages a dropdown-like interface for switching between different platforms or sections.
+ * It includes a button to trigger expansion of the menu and a context menu that renders its children as items.
+ *
+ * @param {PropsWithChildren<TPlatformSwitcher>} props - The properties passed to the component.
+ * @property {Omit<ComponentProps<typeof PlatformSwitcherButton>, "isExpanded" | "onClick">} buttonProps - Properties to pass to the PlatformSwitcherButton component, excluding 'isExpanded' and 'onClick'.
+ * @property {ComponentProps<"a"> & { text: string | JSX.Element }} bottomLink - Properties for the bottom link element, including text content which can be a string or JSX.
+ * @returns {JSX.Element} The PlatformSwitcher component wrapped in a div with overlay and context menu.
+ */
 export const PlatformSwitcher = ({
     buttonProps,
     children,

src/components/AppLayout/__test__/PlatformSwitcher.spec.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from "@testing-library/react";
+import { PlatformSwitcher } from "../PlatformSwitcher";
+import userEvent from "@testing-library/user-event";
+
+const PlatformSwitcherComponent = () => (
+    <PlatformSwitcher
+        buttonProps={{ icon: <span>icon</span> }}
+        bottomLink={{ text: "CFD link", href: "#" }}
+    >
+        <span>platform switcher child</span>
+    </PlatformSwitcher>
+);
+
+describe("PlatformSwitcher Component", () => {
+    it("renders without crashing", async () => {
+        render(<PlatformSwitcherComponent />);
+        await userEvent.click(screen.getByRole("button"));
+        expect(screen.getByText("platform switcher child")).toBeInTheDocument();
+    });
+
+    it("renders the bottom link if provided", async () => {
+        render(<PlatformSwitcherComponent />);
+        await userEvent.click(screen.getByRole("button"));
+        expect(screen.getByText("CFD link")).toBeInTheDocument();
+    });
+});

src/components/AppLayout/__test__/PlatformSwitcherButton.spec.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from "@testing-library/react";
+import { PlatformSwitcherButton } from "../PlatformSwitcher/PlatformSwitcherButton";
+
+describe("PlatformSwitcherButton Component", () => {
+    const TestIcon = () => <span>Test Icon</span>;
+
+    it("renders without crashing", () => {
+        render(
+            <PlatformSwitcherButton icon={<TestIcon />} isExpanded={false} />,
+        );
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+
+    it("displays the provided icon", () => {
+        render(
+            <PlatformSwitcherButton icon={<TestIcon />} isExpanded={false} />,
+        );
+        expect(screen.getByText("Test Icon")).toBeInTheDocument();
+    });
+
+    it("shows expanded chevron when isExpanded is true", () => {
+        render(<PlatformSwitcherButton icon={<TestIcon />} isExpanded />);
+        expect(screen.getByRole("img")).toHaveClass(
+            "deriv-platform-switcher__button-chevron__expanded",
+        );
+    });
+
+    it("applies custom class names to the chevron", () => {
+        const customClassName = "custom-chevron-class";
+        render(
+            <PlatformSwitcherButton
+                icon={<TestIcon />}
+                isExpanded={false}
+                chevronIconClassName={customClassName}
+            />,
+        );
+        expect(screen.getByRole("img")).toHaveClass(customClassName);
+    });
+});

src/components/AppLayout/__test__/PlatformSwitcherItem.spec.tsx

@@ -0,0 +1,66 @@
+import { render, screen } from "@testing-library/react";
+import { PlatformSwitcherItem } from "../PlatformSwitcher/PlatformSwitcherItem";
+
+describe("PlatformSwitcherItem Component", () => {
+    const TestIcon = () => <div>Test Icon</div>;
+
+    it("renders without crashing", () => {
+        render(
+            <PlatformSwitcherItem
+                icon={<TestIcon />}
+                active={false}
+                description="Test Description"
+            />,
+        );
+        expect(screen.getByRole("link")).toBeInTheDocument();
+    });
+
+    it("shows as active when active prop is true", () => {
+        render(
+            <PlatformSwitcherItem
+                icon={<TestIcon />}
+                active
+                description="Active Item"
+            />,
+        );
+        expect(screen.getByRole("link")).toHaveClass(
+            "deriv-platform-switcher__item--active",
+        );
+    });
+
+    it("displays the correct description content as text", () => {
+        render(
+            <PlatformSwitcherItem
+                icon={<TestIcon />}
+                active={false}
+                description="Simple Description"
+            />,
+        );
+        expect(screen.getByText("Simple Description")).toBeInTheDocument();
+    });
+
+    it("displays the correct description content as JSX", () => {
+        const JsxDescription = <span>JSX Description</span>;
+        render(
+            <PlatformSwitcherItem
+                icon={<TestIcon />}
+                active={false}
+                description={JsxDescription}
+            />,
+        );
+        expect(screen.getByText("JSX Description")).toBeInTheDocument();
+    });
+
+    it("applies custom class names correctly", () => {
+        const customClassName = "custom-item-class";
+        render(
+            <PlatformSwitcherItem
+                icon={<TestIcon />}
+                active={false}
+                description="Test"
+                className={customClassName}
+            />,
+        );
+        expect(screen.getByRole("link")).toHaveClass(customClassName);
+    });
+});