diff --git a/__tests__/UI/Tabs.test.tsx b/__tests__/UI/Tabs.test.tsx index 120d446b..b1f75dee 100644 --- a/__tests__/UI/Tabs.test.tsx +++ b/__tests__/UI/Tabs.test.tsx @@ -50,6 +50,8 @@ const mockTabs = [ ))} ), + expectedTexts: mockCVData.keyQualifications, + unexpectedTexts: ["Example Company", "University of Example"], }, { id: "experience", @@ -67,6 +69,12 @@ const mockTabs = [ ))} ), + expectedTexts: [ + "2020-2022 - Example Company", + "Software Developer", + "Worked on various projects", + ], + unexpectedTexts: ["Qualification 1"], }, { id: "education", @@ -84,72 +92,60 @@ const mockTabs = [ ))} ), + expectedTexts: [ + "2016-2020 - University of Example", + "Bachelor in Computer Science", + "Studied various aspects of computer science", + ], + unexpectedTexts: ["Qualification 1"], }, ]; describe("Tabs", () => { - it("renders all CV tab labels", () => { - render(); - expect( - screen.getByRole("tab", { name: "Nøkkelkvalifikasjoner" }) - ).toBeInTheDocument(); - expect(screen.getByRole("tab", { name: "Erfaring" })).toBeInTheDocument(); - expect(screen.getByRole("tab", { name: "Utdanning" })).toBeInTheDocument(); - }); + const renderTabs = () => render(); - it("renders the first tab content (Nøkkelkvalifikasjoner) by default", () => { - render(); - expect(screen.getByText("Qualification 1")).toBeInTheDocument(); - expect(screen.getByText("Qualification 2")).toBeInTheDocument(); - expect(screen.queryByText("Example Company")).not.toBeInTheDocument(); - expect(screen.queryByText("University of Example")).not.toBeInTheDocument(); - }); + const expectTextsToBePresent = (texts: string[]) => { + texts.forEach((text) => { + expect(screen.getByText(text)).toBeInTheDocument(); + }); + }; - it("switches to Erfaring tab when clicked", () => { - render(); - fireEvent.click(screen.getByRole("tab", { name: "Erfaring" })); - expect(screen.getByText("2020-2022 - Example Company")).toBeInTheDocument(); - expect(screen.getByText("Software Developer")).toBeInTheDocument(); - expect(screen.getByText("Worked on various projects")).toBeInTheDocument(); - expect(screen.queryByText("Qualification 1")).not.toBeInTheDocument(); + const expectTextsNotToBePresent = (texts: string[]) => { + texts.forEach((text) => { + expect(screen.queryByText(text)).not.toBeInTheDocument(); + }); + }; + + it("renders all CV tab labels", () => { + renderTabs(); + mockTabs.forEach((tab) => { + expect(screen.getByRole("tab", { name: tab.label })).toBeInTheDocument(); + }); }); - it("switches to Utdanning tab when clicked", () => { - render(); - fireEvent.click(screen.getByRole("tab", { name: "Utdanning" })); - expect( - screen.getByText("2016-2020 - University of Example") - ).toBeInTheDocument(); - expect( - screen.getByText("Bachelor in Computer Science") - ).toBeInTheDocument(); - expect( - screen.getByText("Studied various aspects of computer science") - ).toBeInTheDocument(); - expect(screen.queryByText("Qualification 1")).not.toBeInTheDocument(); + it.each(mockTabs)("renders correct content for $label tab", (tab) => { + renderTabs(); + if (tab.id !== mockTabs[0].id) { + fireEvent.click(screen.getByRole("tab", { name: tab.label })); + } + expectTextsToBePresent(tab.expectedTexts); + expectTextsNotToBePresent(tab.unexpectedTexts); }); it("applies correct ARIA attributes to CV tabs", () => { - render(); - const qualificationsTab = screen.getByRole("tab", { - name: "Nøkkelkvalifikasjoner", + renderTabs(); + mockTabs.forEach((tab, index) => { + const tabElement = screen.getByRole("tab", { name: tab.label }); + expect(tabElement).toHaveAttribute( + "aria-selected", + index === 0 ? "true" : "false" + ); + expect(tabElement).toHaveAttribute("aria-controls", `tabpanel-${tab.id}`); }); - expect(qualificationsTab).toHaveAttribute("aria-selected", "true"); - expect(qualificationsTab).toHaveAttribute( - "aria-controls", - "tabpanel-qualifications" - ); - - const experienceTab = screen.getByRole("tab", { name: "Erfaring" }); - expect(experienceTab).toHaveAttribute("aria-selected", "false"); - expect(experienceTab).toHaveAttribute( - "aria-controls", - "tabpanel-experience" - ); }); it("renders in vertical orientation by default", () => { - render(); + renderTabs(); const tabList = screen.getByRole("tablist"); expect(tabList).toHaveClass("sm:flex-col"); });