add tests for the Tabs component

Signed-off-by: Haris Bikovic <[email protected]>

frontend/src/components/Tabs.test.tsx

@@ -0,0 +1,170 @@
+/*
+  This file is part of Edgehog.
+
+  Copyright 2023 SECO Mind Srl
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  
+  SPDX-License-Identifier: Apache-2.0
+*/
+
+import { it, expect, describe } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import Tabs, { Tab } from "./Tabs";
+
+describe("Tabs", () => {
+  it("renders tab elements correctly", () => {
+    render(
+      <Tabs>
+        <Tab eventKey="tab1" title="Tab 1" />
+        <Tab eventKey="tab2" title="Tab 2" />
+      </Tabs>,
+    );
+
+    // Check if all tab headers are rendered
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toBeVisible();
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toBeVisible();
+  });
+
+  it("applies className to the Tabs component", () => {
+    render(<Tabs className="custom-tabs-class">Tabs Content</Tabs>);
+
+    const tabsElement = screen.getByText("Tabs Content");
+    expect(tabsElement).toHaveClass("custom-tabs-class");
+  });
+
+  it("renders the content of the tab specified in defaultActiveKey", () => {
+    render(
+      <Tabs defaultActiveKey="tab2">
+        <Tab eventKey="tab1" title="Tab 1">
+          <div data-testid="tab1-content"></div>
+        </Tab>
+        <Tab eventKey="tab2" title="Tab 2">
+          <div data-testid="tab2-content"></div>
+        </Tab>
+      </Tabs>,
+    );
+
+    expect(screen.getByTestId("tab2-content")).toBeVisible();
+    expect(screen.queryByTestId("tab1-content")).not.toBeInTheDocument();
+  });
+
+  it("renders active tab content and behaves correctly when clicked", async () => {
+    render(
+      <Tabs defaultActiveKey="tab1">
+        <Tab eventKey="tab1" title="Tab 1">
+          <div data-testid="tab1-children"></div>
+        </Tab>
+        <Tab eventKey="tab2" title="Tab 2">
+          <div data-testid="tab2-children"></div>
+        </Tab>
+      </Tabs>,
+    );
+
+    // Check if the default active tab content is rendered
+    expect(screen.getByTestId("tab1-children")).toBeVisible();
+    //Check if active tab has valid aria-selected attribute
+    expect(
+      screen.getByRole("tab", { name: "Tab 1", selected: true }),
+    ).toBeVisible();
+    // Check that second tab content is not rendered
+    expect(screen.queryByTestId("tab2-children")).not.toBeInTheDocument();
+
+    // Click on the second tab
+    await userEvent.click(screen.getByRole("tab", { name: "Tab 2" }));
+
+    // Check if the second tab content is rendered
+    expect(screen.getByTestId("tab2-children")).toBeVisible();
+    // Check that first tabs content is not rendered
+    expect(screen.queryByTestId("tab1-children")).not.toBeInTheDocument();
+  });
+
+  it("sets the first tab as active when no defaultActiveKey specified", () => {
+    render(
+      <Tabs>
+        <Tab eventKey="tab1" title="Tab 1">
+          <div data-testid="tab1-children"></div>
+        </Tab>
+        <Tab eventKey="tab2" title="Tab 2">
+          <div data-testid="tab2-children"></div>
+        </Tab>
+      </Tabs>,
+    );
+
+    // Check if the first tab content is rendered
+    expect(screen.getByTestId("tab1-children")).toBeVisible();
+
+    // Check that the second tab content is not rendered
+    expect(screen.queryByTestId("tab2-children")).not.toBeInTheDocument();
+  });
+
+  describe("tabsOrder", () => {
+    it("when specified renders tabs in the requested order", () => {
+      render(
+        <Tabs tabsOrder={["tabOne", "tabTwo", "tabThree"]}>
+          <Tab eventKey="tabTwo" title="Tab 2" />
+          <Tab eventKey="tabThree" title="Tab 3" />
+          <Tab eventKey="tabOne" title="Tab 1" />
+        </Tabs>,
+      );
+      const tabs = screen.getAllByRole("tab");
+      expect(tabs[0]).toHaveTextContent("Tab 1");
+      expect(tabs[1]).toHaveTextContent("Tab 2");
+      expect(tabs[2]).toHaveTextContent("Tab 3");
+    });
+    it("when not specified respects children order", () => {
+      render(
+        <Tabs>
+          <Tab eventKey="tabTwo" title="Tab 2" />
+          <Tab eventKey="tabThree" title="Tab 3" />
+          <Tab eventKey="tabOne" title="Tab 1" />
+        </Tabs>,
+      );
+      const tabs = screen.getAllByRole("tab");
+      expect(tabs[0]).toHaveTextContent("Tab 2");
+      expect(tabs[1]).toHaveTextContent("Tab 3");
+      expect(tabs[2]).toHaveTextContent("Tab 1");
+    });
+  });
+});
+
+describe("Tab", () => {
+  it("renders tab content correctly", () => {
+    render(
+      <Tabs>
+        <Tab eventKey="tab1">
+          <div data-testid="tab1-content" />
+        </Tab>
+      </Tabs>,
+    );
+    expect(screen.getByTestId("tab1-content")).toBeVisible();
+  });
+
+  it("applies className to the Tab component", () => {
+    render(
+      <Tabs defaultActiveKey="tab1">
+        <Tab eventKey="tab1" title="Tab1" className="custom-tab-class">
+          Tab 1
+        </Tab>
+        <Tab eventKey="tab2" title="Tab2" className="custom-tab-class-2">
+          Tab 2
+        </Tab>
+      </Tabs>,
+    );
+
+    const tab1 = screen.getByText("Tab 1");
+    expect(tab1).toHaveClass("custom-tab-class");
+  });
+});