Skip to content

Commit

Permalink
Reduce duplicated lines
Browse files Browse the repository at this point in the history
  • Loading branch information
w3bdesign committed Jul 24, 2024
1 parent bbf9c46 commit d834dff
Showing 1 changed file with 47 additions and 51 deletions.
98 changes: 47 additions & 51 deletions __tests__/UI/Tabs.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ const mockTabs = [
))}
</ul>
),
expectedTexts: mockCVData.keyQualifications,
unexpectedTexts: ["Example Company", "University of Example"],
},
{
id: "experience",
Expand All @@ -67,6 +69,12 @@ const mockTabs = [
))}
</div>
),
expectedTexts: [
"2020-2022 - Example Company",
"Software Developer",
"Worked on various projects",
],
unexpectedTexts: ["Qualification 1"],
},
{
id: "education",
Expand All @@ -84,72 +92,60 @@ const mockTabs = [
))}
</div>
),
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(<Tabs tabs={mockTabs} />);
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(<Tabs tabs={mockTabs} />);

it("renders the first tab content (Nøkkelkvalifikasjoner) by default", () => {
render(<Tabs tabs={mockTabs} />);
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(<Tabs tabs={mockTabs} />);
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(<Tabs tabs={mockTabs} />);
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(<Tabs tabs={mockTabs} />);
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(<Tabs tabs={mockTabs} />);
renderTabs();
const tabList = screen.getByRole("tablist");
expect(tabList).toHaveClass("sm:flex-col");
});
Expand Down

0 comments on commit d834dff

Please sign in to comment.