adilallo
76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import React from "react";
|
|
import { render, screen } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { describe, it, expect, vi } from "vitest";
|
|
import "@testing-library/jest-dom/vitest";
|
|
import Link from "../../../app/components/navigation/Link";
|
|
|
|
vi.mock("next/link", () => ({
|
|
default: ({
|
|
children,
|
|
href,
|
|
...props
|
|
}: {
|
|
children?: React.ReactNode;
|
|
href?: string;
|
|
[key: string]: unknown;
|
|
}) => (
|
|
<a href={href} {...props}>
|
|
{children}
|
|
</a>
|
|
),
|
|
}));
|
|
|
|
const FIGMA = "21861:21428";
|
|
|
|
describe("Link (Navigation)", () => {
|
|
it("renders an anchor with href and data-figma-node", () => {
|
|
const { container } = render(
|
|
<Link
|
|
href="/rules/1"
|
|
variant="paragraph"
|
|
type="primary"
|
|
theme="light"
|
|
>
|
|
View
|
|
</Link>,
|
|
);
|
|
const a = screen.getByRole("link", { name: /view/i });
|
|
expect(a).toHaveAttribute("href", "/rules/1");
|
|
expect(a).toHaveAttribute("data-figma-node", FIGMA);
|
|
expect(container.querySelector("a")?.className).toMatch(
|
|
/text-\[var\(--color-link-primary\)\]/,
|
|
);
|
|
});
|
|
|
|
it("renders a button when href is omitted", async () => {
|
|
const user = userEvent.setup();
|
|
const onClick = vi.fn();
|
|
render(
|
|
<Link
|
|
variant="paragraph"
|
|
type="primary"
|
|
theme="light"
|
|
onClick={onClick}
|
|
>
|
|
Delete
|
|
</Link>,
|
|
);
|
|
const btn = screen.getByRole("button", { name: /delete/i });
|
|
expect(btn).toHaveAttribute("data-figma-node", FIGMA);
|
|
expect(btn).toHaveAttribute("type", "button");
|
|
await user.click(btn);
|
|
expect(onClick).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("applies secondary + dark classes for that combination", () => {
|
|
const { container } = render(
|
|
<Link href="#" variant="paragraph" type="secondary" theme="dark">
|
|
More
|
|
</Link>,
|
|
);
|
|
const el = container.querySelector("a");
|
|
expect(el?.className).toMatch(/text-\[var\(--color-link-invert-secondary\)\]/);
|
|
});
|
|
});
|