test(link): add unit tests

tests/Link.test.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-  import { Link, OutboundLink } from "carbon-components-svelte";
-</script>
-
-<Link size="sm" inline disabled download visited href="/" target="_blank">
-  Carbon Design System
-</Link>
-
-<OutboundLink inline href="https://www.carbondesignsystem.com/" />

tests/Link/Link.test.svelte

@@ -0,0 +1,87 @@
+<svelte:options accessors />
+
+<script lang="ts">
+  import { Link } from "carbon-components-svelte";
+  import Carbon from "carbon-icons-svelte/lib/Carbon.svelte";
+</script>
+
+<!-- Default link -->
+<div data-testid="default-link">
+  <Link
+    href="https://www.carbondesignsystem.com/"
+    on:click={(e) => {
+      e.preventDefault();
+      console.log("click");
+    }}
+    on:mouseover={() => {
+      console.log("mouseover");
+    }}
+    on:mouseenter={() => {
+      console.log("mouseenter");
+    }}
+    on:mouseleave={() => {
+      console.log("mouseleave");
+    }}
+  >
+    Carbon Design System
+  </Link>
+</div>
+
+<!-- Link with target _blank -->
+<div data-testid="link-blank">
+  <Link href="https://www.carbondesignsystem.com/" target="_blank">
+    Carbon Design System
+  </Link>
+</div>
+
+<!-- Inline link -->
+<div data-testid="link-inline">
+  <Link inline href="https://www.carbondesignsystem.com/">
+    Carbon Design System
+  </Link>
+</div>
+
+<!-- Link with icon -->
+<div data-testid="link-with-icon">
+  <Link href="https://www.carbondesignsystem.com/" icon={Carbon}>
+    Carbon Design System
+  </Link>
+</div>
+
+<!-- Link with icon slot -->
+<div data-testid="link-with-icon-slot">
+  <Link href="https://www.carbondesignsystem.com/">
+    Carbon Design System
+    <svelte:fragment slot="icon">
+      <Carbon />
+    </svelte:fragment>
+  </Link>
+</div>
+
+<!-- Large link -->
+<div data-testid="link-large">
+  <Link size="lg" href="https://www.carbondesignsystem.com/">
+    Carbon Design System
+  </Link>
+</div>
+
+<!-- Small link -->
+<div data-testid="link-small">
+  <Link size="sm" href="https://www.carbondesignsystem.com/">
+    Carbon Design System
+  </Link>
+</div>
+
+<!-- Disabled link -->
+<div data-testid="link-disabled">
+  <Link disabled href="https://www.carbondesignsystem.com/">
+    Carbon Design System
+  </Link>
+</div>
+
+<!-- Visited link -->
+<div data-testid="link-visited">
+  <Link visited href="https://www.carbondesignsystem.com/">
+    Carbon Design System
+  </Link>
+</div>

tests/Link/Link.test.ts

@@ -0,0 +1,121 @@
+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();
+  });
+});