test: added new test cases for tab component

Author: yaswanth-deriv

src/components/Tabs/__test__/Tabs.spec.tsx

@@ -13,19 +13,23 @@ describe("Tabs Component", () => {
         );
 
         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", () => {
+    it("changes active tab when clicked and checks active tab content showing", () => {
         render(
-            <Tabs>
+            <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];
@@ -34,6 +38,43 @@ describe("Tabs Component", () => {
         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">