mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
121 lines
3.6 KiB
TypeScript
121 lines
3.6 KiB
TypeScript
import { render, screen } from "@testing-library/svelte";
|
|
import { user } from "../setup-tests";
|
|
import Link from "./Link.test.svelte";
|
|
|
|
describe("Link", () => {
|
|
afterEach(() => {
|
|
vi.restoreAllMocks();
|
|
});
|
|
|
|
it("renders with default props", () => {
|
|
render(Link);
|
|
const wrapper = screen.getByTestId("default-link");
|
|
const link = wrapper.querySelector("a");
|
|
|
|
expect(link).toHaveClass("bx--link");
|
|
expect(link).toHaveAttribute("href", "https://www.carbondesignsystem.com/");
|
|
expect(link).toHaveTextContent("Carbon Design System");
|
|
});
|
|
|
|
it("adds noopener noreferrer when target is _blank", () => {
|
|
render(Link);
|
|
const wrapper = screen.getByTestId("link-blank");
|
|
const link = wrapper.querySelector("a");
|
|
|
|
expect(link).toHaveAttribute("target", "_blank");
|
|
expect(link).toHaveAttribute("rel", "noopener noreferrer");
|
|
});
|
|
|
|
it("supports inline variant", () => {
|
|
render(Link);
|
|
const wrapper = screen.getByTestId("link-inline");
|
|
const link = wrapper.querySelector("a");
|
|
|
|
expect(link).toHaveClass("bx--link--inline");
|
|
});
|
|
|
|
it("supports icon prop", () => {
|
|
render(Link);
|
|
const wrapper = screen.getByTestId("link-with-icon");
|
|
const link = wrapper.querySelector("a");
|
|
const iconWrapper = link?.querySelector(".bx--link__icon");
|
|
|
|
expect(iconWrapper).toBeInTheDocument();
|
|
expect(iconWrapper?.querySelector("svg")).toBeInTheDocument();
|
|
});
|
|
|
|
it("supports icon slot", () => {
|
|
render(Link);
|
|
const wrapper = screen.getByTestId("link-with-icon-slot");
|
|
const link = wrapper.querySelector("a");
|
|
const iconWrapper = link?.querySelector(".bx--link__icon");
|
|
|
|
expect(iconWrapper).toBeInTheDocument();
|
|
expect(iconWrapper?.querySelector("svg")).toBeInTheDocument();
|
|
});
|
|
|
|
it("supports large size variant", () => {
|
|
render(Link);
|
|
const wrapper = screen.getByTestId("link-large");
|
|
const link = wrapper.querySelector("a");
|
|
|
|
expect(link).toHaveClass("bx--link--lg");
|
|
});
|
|
|
|
it("supports small size variant", () => {
|
|
render(Link);
|
|
const wrapper = screen.getByTestId("link-small");
|
|
const link = wrapper.querySelector("a");
|
|
|
|
expect(link).toHaveClass("bx--link--sm");
|
|
});
|
|
|
|
it("supports disabled state", () => {
|
|
render(Link);
|
|
const wrapper = screen.getByTestId("link-disabled");
|
|
const link = wrapper.querySelector("a");
|
|
|
|
expect(link).toHaveClass("bx--link--disabled");
|
|
expect(link).toHaveAttribute("aria-disabled", "true");
|
|
expect(link).toHaveAttribute("role", "link");
|
|
});
|
|
|
|
it("supports visited state", () => {
|
|
render(Link);
|
|
const wrapper = screen.getByTestId("link-visited");
|
|
const link = wrapper.querySelector("a");
|
|
|
|
expect(link).toHaveClass("bx--link--visited");
|
|
});
|
|
|
|
it("supports click and mouse events", async () => {
|
|
const consoleLog = vi.spyOn(console, "log");
|
|
render(Link);
|
|
|
|
const wrapper = screen.getByTestId("default-link");
|
|
const link = wrapper.querySelector("a");
|
|
assert(link);
|
|
|
|
await user.click(link);
|
|
expect(consoleLog).toHaveBeenCalledWith("click");
|
|
|
|
await user.hover(link);
|
|
expect(consoleLog).toHaveBeenCalledWith("mouseover");
|
|
|
|
await user.hover(link);
|
|
expect(consoleLog).toHaveBeenCalledWith("mouseenter");
|
|
|
|
await user.unhover(link);
|
|
expect(consoleLog).toHaveBeenCalledWith("mouseleave");
|
|
expect(consoleLog).toHaveBeenCalledTimes(4);
|
|
});
|
|
|
|
it("prevents icon rendering when inline is true", () => {
|
|
render(Link);
|
|
const wrapper = screen.getByTestId("link-inline");
|
|
const link = wrapper.querySelector("a");
|
|
|
|
expect(link).toHaveClass("bx--link--inline");
|
|
expect(link?.querySelector(".bx--link__icon")).not.toBeInTheDocument();
|
|
});
|
|
});
|