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");
});