146 lines
4.2 KiB
TypeScript
146 lines
4.2 KiB
TypeScript
/* eslint-disable playwright/missing-playwright-await */
|
|
import { fireEvent, render, screen } from "@testing-library/react";
|
|
import { vi } from "vitest";
|
|
|
|
import HorizontalTabs from "./HorizontalTabs";
|
|
import VerticalTabs from "./VerticalTabs";
|
|
|
|
vi.mock("@calcom/lib/hooks/useUrlMatchesCurrentUrl", () => ({
|
|
useUrlMatchesCurrentUrl() {
|
|
return {
|
|
route: "/",
|
|
pathname: "",
|
|
query: "",
|
|
asPath: "",
|
|
push: vi.fn(),
|
|
events: {
|
|
on: vi.fn(),
|
|
off: vi.fn(),
|
|
},
|
|
beforePopState: vi.fn(() => null),
|
|
prefetch: vi.fn(() => null),
|
|
};
|
|
},
|
|
}));
|
|
|
|
vi.mock("@calcom/lib/hooks/useLocale", () => ({
|
|
useLocale: () => {
|
|
return {
|
|
t: (str: string) => str,
|
|
isLocaleReady: true,
|
|
i18n: {
|
|
language: "en",
|
|
defaultLocale: "en",
|
|
locales: ["en"],
|
|
exists: () => false,
|
|
},
|
|
};
|
|
},
|
|
}));
|
|
|
|
describe("Tests for navigation folder", () => {
|
|
describe("Test HorizontalTabs Component", () => {
|
|
const mockTabs = [
|
|
{ name: "Tab 1", href: "/tab1" },
|
|
{ name: "Tab 2", href: "/tab2", avatar: "Avatar" },
|
|
{ name: "Tab 3", href: "/tab3" },
|
|
];
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
test("Should render tabs with correct name and href", () => {
|
|
render(<HorizontalTabs tabs={mockTabs} />);
|
|
mockTabs.forEach((tab) => {
|
|
const tabLabelElement = screen.getByTestId(`horizontal-tab-${tab.name}`);
|
|
expect(tabLabelElement).toBeInTheDocument();
|
|
|
|
const name = screen.getByText(tab.name);
|
|
expect(name).toBeInTheDocument();
|
|
expect(tabLabelElement).toHaveAttribute("href", tab.href);
|
|
});
|
|
});
|
|
|
|
test("Should render actions correctly", () => {
|
|
const handleClick = vi.fn();
|
|
const mockActions = <button onClick={handleClick}>Actions</button>;
|
|
render(<HorizontalTabs tabs={mockTabs} actions={mockActions} />);
|
|
const actionsElement = screen.getByText("Actions");
|
|
expect(actionsElement).toBeInTheDocument();
|
|
fireEvent.click(actionsElement);
|
|
|
|
expect(handleClick).toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe("Test VerticalTabs Component", () => {
|
|
const mockTabs = [
|
|
{
|
|
name: "Tab 1",
|
|
href: "/tab1",
|
|
disableChevron: true,
|
|
disabled: true,
|
|
icon: "plus" as const,
|
|
},
|
|
{ name: "Tab 2", href: "/tab2", isExternalLink: true },
|
|
{ name: "Tab 3", href: "/tab3", info: "info" },
|
|
];
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
test("Should render tabs with correct name and href", () => {
|
|
render(<VerticalTabs tabs={mockTabs} />);
|
|
mockTabs.forEach((tab) => {
|
|
const tabLabelElement = screen.getByTestId(`vertical-tab-${tab.name}`);
|
|
expect(tabLabelElement).toBeInTheDocument();
|
|
|
|
const name = screen.getByText(tab.name);
|
|
expect(name).toBeInTheDocument();
|
|
expect(tabLabelElement).toHaveAttribute("href", tab.href);
|
|
});
|
|
});
|
|
|
|
test("Should render correctly if props are passed", async () => {
|
|
render(<VerticalTabs tabs={mockTabs} />);
|
|
|
|
const iconElement = await screen.findAllByTestId("icon-component");
|
|
const externalLink = await screen.findAllByTestId("external-link");
|
|
const chevronRight = await screen.findAllByTestId("chevron-right");
|
|
|
|
mockTabs.forEach((tab) => {
|
|
const tabName = screen.getByText(tab.name);
|
|
expect(tabName).toBeInTheDocument();
|
|
|
|
const aTag = screen.getByTestId(`vertical-tab-${tab.name}`);
|
|
const tabContainer = tabName.closest("a");
|
|
const infoElement = tabContainer?.querySelector("p[title='info']");
|
|
|
|
expect(chevronRight.length).toEqual(mockTabs.length - 1);
|
|
if (tab.disabled) {
|
|
expect(aTag).tabToBeDisabled();
|
|
} else {
|
|
expect(aTag).not.tabToBeDisabled();
|
|
}
|
|
|
|
if (tab.info) {
|
|
expect(infoElement).toBeInTheDocument();
|
|
} else {
|
|
expect(infoElement).toBeNull();
|
|
}
|
|
|
|
if (tab.isExternalLink) {
|
|
expect(aTag).toHaveAttribute("target", "_blank");
|
|
} else {
|
|
expect(aTag).toHaveAttribute("target", "_self");
|
|
}
|
|
});
|
|
|
|
expect(externalLink.length).toEqual(1);
|
|
expect(iconElement.length).toEqual(1);
|
|
});
|
|
});
|
|
});
|