@fpkit/acss 0.5.13 → 0.6.0

package/src/components/link/link.test.tsx

@@ -0,0 +1,677 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import Link from "./link";
+
+describe("Link Component", () => {
+  describe("Rendering", () => {
+    it("should render with href and children", () => {
+      render(<Link href="/about">About Us</Link>);
+
+      const link = screen.getByRole("link");
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveTextContent("About Us");
+      expect(link).toHaveAttribute("href", "/about");
+    });
+
+    it("should render as an anchor element", () => {
+      render(<Link href="/test">Link</Link>);
+
+      const link = screen.getByRole("link");
+      expect(link.tagName).toBe("A");
+    });
+
+    it("should render with custom classes via UI component", () => {
+      render(
+        <Link href="/" classes="custom-link-class">
+          Test
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      expect(link).toHaveClass("custom-link-class");
+    });
+
+    it("should apply custom styles via styles prop", () => {
+      render(
+        <Link href="/" styles={{ color: "red" }}>
+          Styled Link
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      const styleAttr = link.getAttribute("style") || "";
+      expect(styleAttr).toContain("color");
+    });
+
+    it("should render children correctly", () => {
+      render(
+        <Link href="/">
+          <span data-testid="child-element">Child Content</span>
+        </Link>
+      );
+
+      expect(screen.getByTestId("child-element")).toBeInTheDocument();
+      expect(screen.getByText("Child Content")).toBeInTheDocument();
+    });
+  });
+
+  describe("Target Attribute", () => {
+    it("should render with target attribute", () => {
+      render(
+        <Link href="https://example.com" target="_blank">
+          External
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      expect(link).toHaveAttribute("target", "_blank");
+    });
+
+    it("should work with different target values", () => {
+      const { rerender } = render(
+        <Link href="/" target="_self">
+          Self
+        </Link>
+      );
+
+      let link = screen.getByRole("link");
+      expect(link).toHaveAttribute("target", "_self");
+
+      rerender(
+        <Link href="/" target="_parent">
+          Parent
+        </Link>
+      );
+      link = screen.getByRole("link");
+      expect(link).toHaveAttribute("target", "_parent");
+    });
+  });
+
+  describe("Security (rel attribute)", () => {
+    it("should automatically add security attributes for target=_blank", () => {
+      render(
+        <Link href="https://example.com" target="_blank">
+          External Link
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      const rel = link.getAttribute("rel");
+
+      expect(rel).toContain("noopener");
+      expect(rel).toContain("noreferrer");
+    });
+
+    it("should merge custom rel with security defaults for target=_blank", () => {
+      render(
+        <Link href="https://example.com" target="_blank" rel="nofollow author">
+          External Link
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      const rel = link.getAttribute("rel");
+
+      // Should have security defaults
+      expect(rel).toContain("noopener");
+      expect(rel).toContain("noreferrer");
+
+      // Should also have custom values
+      expect(rel).toContain("nofollow");
+      expect(rel).toContain("author");
+    });
+
+    it("should use provided rel as-is when target is not _blank", () => {
+      render(
+        <Link href="/internal" rel="author">
+          Internal Link
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      expect(link).toHaveAttribute("rel", "author");
+    });
+
+    it("should not add security attributes for internal links", () => {
+      render(<Link href="/about">About</Link>);
+
+      const link = screen.getByRole("link");
+      expect(link).not.toHaveAttribute("rel");
+    });
+
+    it("should handle empty rel attribute gracefully", () => {
+      render(
+        <Link href="https://example.com" target="_blank" rel="">
+          External
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      const rel = link.getAttribute("rel");
+
+      expect(rel).toContain("noopener");
+      expect(rel).toContain("noreferrer");
+    });
+
+    it("should not duplicate rel tokens when merging", () => {
+      render(
+        <Link
+          href="https://example.com"
+          target="_blank"
+          rel="noopener nofollow"
+        >
+          External
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      const rel = link.getAttribute("rel") || "";
+      const tokens = rel.split(/\s+/);
+
+      // Check for duplicates
+      const uniqueTokens = new Set(tokens);
+      expect(tokens.length).toBe(uniqueTokens.size);
+
+      // Should have all three: noopener, noreferrer, nofollow
+      expect(uniqueTokens.has("noopener")).toBe(true);
+      expect(uniqueTokens.has("noreferrer")).toBe(true);
+      expect(uniqueTokens.has("nofollow")).toBe(true);
+    });
+  });
+
+  describe("Prefetch", () => {
+    it("should add prefetch to rel when prefetch=true and target=_blank", () => {
+      render(
+        <Link href="https://example.com" target="_blank" prefetch>
+          Prefetch Link
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      const rel = link.getAttribute("rel");
+
+      expect(rel).toContain("noopener");
+      expect(rel).toContain("noreferrer");
+      expect(rel).toContain("prefetch");
+    });
+
+    it("should not add prefetch when prefetch=false", () => {
+      render(
+        <Link href="https://example.com" target="_blank" prefetch={false}>
+          No Prefetch
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      const rel = link.getAttribute("rel");
+
+      expect(rel).not.toContain("prefetch");
+    });
+
+    it("should not add prefetch for internal links", () => {
+      render(
+        <Link href="/internal" prefetch>
+          Internal
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      const rel = link.getAttribute("rel");
+
+      // Internal links don't get prefetch (only external with target="_blank")
+      expect(rel).toBeNull();
+    });
+  });
+
+  describe("Button Styling", () => {
+    it("should apply data-btn attribute when btnStyle is provided", () => {
+      render(
+        <Link href="/" btnStyle="primary">
+          Button Link
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      expect(link).toHaveAttribute("data-btn", "primary");
+    });
+
+    it("should render button-styled link with <b> wrapper", () => {
+      render(
+        <Link href="/">
+          <b>Button Text</b>
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      const bold = link.querySelector("b");
+
+      expect(bold).toBeInTheDocument();
+      expect(bold).toHaveTextContent("Button Text");
+    });
+
+    it("should render pill-styled link with <i> wrapper", () => {
+      render(
+        <Link href="/">
+          <i>Pill Text</i>
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      const italic = link.querySelector("i");
+
+      expect(italic).toBeInTheDocument();
+      expect(italic).toHaveTextContent("Pill Text");
+    });
+  });
+
+  describe("Event Handlers", () => {
+    it("should call onClick when link is clicked", async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+
+      render(
+        <Link href="/test" onClick={handleClick}>
+          Click Me
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      await user.click(link);
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+      expect(handleClick).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: "click",
+        })
+      );
+    });
+
+    it("should call onClick when activated with keyboard (Enter)", async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+
+      render(
+        <Link href="/test" onClick={handleClick}>
+          Click Me
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+
+      // Focus the link
+      link.focus();
+      expect(link).toHaveFocus();
+
+      // Press Enter to activate
+      await user.keyboard("{Enter}");
+
+      // onClick should be called for keyboard activation
+      expect(handleClick).toHaveBeenCalled();
+    });
+
+    it("should call onPointerDown when link is clicked", async () => {
+      const user = userEvent.setup();
+      const handlePointerDown = vi.fn();
+
+      render(
+        <Link href="/test" onPointerDown={handlePointerDown}>
+          Click Me
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      await user.click(link);
+
+      expect(handlePointerDown).toHaveBeenCalledTimes(1);
+      expect(handlePointerDown).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: "pointerdown",
+        })
+      );
+    });
+
+    it("should call both onClick and onPointerDown when provided", async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+      const handlePointerDown = vi.fn();
+
+      render(
+        <Link href="/test" onClick={handleClick} onPointerDown={handlePointerDown}>
+          Click Me
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      await user.click(link);
+
+      // Both handlers should be called
+      expect(handleClick).toHaveBeenCalled();
+      expect(handlePointerDown).toHaveBeenCalled();
+    });
+
+    it("should NOT call onPointerDown on keyboard activation (Enter)", async () => {
+      const user = userEvent.setup();
+      const handlePointerDown = vi.fn();
+
+      render(
+        <Link href="/test" onPointerDown={handlePointerDown}>
+          Click Me
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      link.focus();
+
+      // Press Enter
+      await user.keyboard("{Enter}");
+
+      // onPointerDown should NOT be called (only pointer events trigger it)
+      expect(handlePointerDown).not.toHaveBeenCalled();
+    });
+
+    it("should not throw error when onClick is not provided", async () => {
+      const user = userEvent.setup();
+
+      render(<Link href="/test">Click Me</Link>);
+
+      const link = screen.getByRole("link");
+      await expect(user.click(link)).resolves.not.toThrow();
+    });
+
+    it("should not throw error when onPointerDown is not provided", async () => {
+      const user = userEvent.setup();
+
+      render(<Link href="/test">Click Me</Link>);
+
+      const link = screen.getByRole("link");
+      await expect(user.click(link)).resolves.not.toThrow();
+    });
+  });
+
+  describe("Ref Forwarding", () => {
+    it("should forward ref to the anchor element", () => {
+      const ref = React.createRef<HTMLAnchorElement>();
+
+      render(
+        <Link ref={ref} href="/test">
+          Test Link
+        </Link>
+      );
+
+      expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+      expect(ref.current?.tagName).toBe("A");
+      expect(ref.current?.href).toContain("/test");
+    });
+
+    it("should allow programmatic focus via ref", () => {
+      const ref = React.createRef<HTMLAnchorElement>();
+
+      render(
+        <Link ref={ref} href="/test">
+          Focusable Link
+        </Link>
+      );
+
+      ref.current?.focus();
+      expect(ref.current).toHaveFocus();
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("should render with proper role", () => {
+      render(<Link href="/test">Accessible Link</Link>);
+
+      const link = screen.getByRole("link");
+      expect(link).toBeInTheDocument();
+      expect(link).toBeVisible();
+    });
+
+    it("should render external links accessibly", () => {
+      render(
+        <Link href="https://example.com" target="_blank">
+          External Link
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveAttribute("target", "_blank");
+
+      // Security attributes present
+      const rel = link.getAttribute("rel");
+      expect(rel).toContain("noopener");
+      expect(rel).toContain("noreferrer");
+    });
+
+    it("should render button-styled links with semantic anchor", () => {
+      render(
+        <Link href="/action">
+          <b>Call to Action</b>
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      expect(link.tagName).toBe("A");
+      expect(link).toHaveAttribute("href", "/action");
+    });
+
+    it("should support aria-label for icon-only links", () => {
+      render(
+        <Link href="/settings" aria-label="Open settings">
+          <svg aria-hidden="true">
+            <path d="M0 0h24v24H0z" />
+          </svg>
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      expect(link).toHaveAccessibleName("Open settings");
+
+      // Verify SVG is hidden from screen readers
+      const svg = link.querySelector("svg");
+      expect(svg).toHaveAttribute("aria-hidden", "true");
+    });
+
+    it("should be keyboard accessible", async () => {
+      const user = userEvent.setup();
+
+      render(<Link href="/test">Keyboard Link</Link>);
+
+      const link = screen.getByRole("link");
+
+      // Tab to link
+      await user.tab();
+      expect(link).toHaveFocus();
+
+      // Press Enter should work (default browser behavior)
+      // We just verify focus worked
+      expect(link).toHaveFocus();
+    });
+
+    it("should have accessible name from text content", () => {
+      render(<Link href="/test">Read installation guide</Link>);
+
+      const link = screen.getByRole("link");
+      expect(link).toHaveAccessibleName("Read installation guide");
+    });
+
+    it("should support aria-describedby for additional context", () => {
+      render(
+        <>
+          <span id="link-description">Opens in a new window</span>
+          <Link href="https://example.com" aria-describedby="link-description">
+            External Resource
+          </Link>
+        </>
+      );
+
+      const link = screen.getByRole("link");
+      expect(link).toHaveAttribute("aria-describedby", "link-description");
+    });
+  });
+
+  describe("URL Schemes", () => {
+    it("should support mailto: links", () => {
+      render(<Link href="mailto:test@example.com">Email Us</Link>);
+
+      const link = screen.getByRole("link");
+      expect(link).toHaveAttribute("href", "mailto:test@example.com");
+    });
+
+    it("should support tel: links", () => {
+      render(<Link href="tel:+1234567890">Call Us</Link>);
+
+      const link = screen.getByRole("link");
+      expect(link).toHaveAttribute("href", "tel:+1234567890");
+    });
+
+    it("should support hash/anchor links", () => {
+      render(<Link href="#section-1">Jump to Section</Link>);
+
+      const link = screen.getByRole("link");
+      expect(link).toHaveAttribute("href", "#section-1");
+    });
+
+    it("should support relative paths", () => {
+      render(<Link href="../parent">Go to Parent</Link>);
+
+      const link = screen.getByRole("link");
+      expect(link).toHaveAttribute("href", "../parent");
+    });
+
+    it("should support absolute paths", () => {
+      render(<Link href="/absolute/path">Absolute Path</Link>);
+
+      const link = screen.getByRole("link");
+      expect(link).toHaveAttribute("href", "/absolute/path");
+    });
+  });
+
+  describe("Display Name", () => {
+    it("should have correct displayName for debugging", () => {
+      expect(Link.displayName).toBe("Link");
+    });
+  });
+
+  describe("Props Spreading", () => {
+    it("should spread additional HTML attributes", () => {
+      render(
+        <Link href="/" data-testid="custom-link" id="link-123">
+          Test
+        </Link>
+      );
+
+      const link = screen.getByTestId("custom-link");
+      expect(link).toHaveAttribute("id", "link-123");
+    });
+
+    it("should support title attribute", () => {
+      render(
+        <Link href="/" title="Additional information">
+          Hover Me
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      expect(link).toHaveAttribute("title", "Additional information");
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle missing href gracefully", () => {
+      // href is optional in the type, testing edge case behavior
+      render(<Link>No href</Link>);
+
+      // Should still render, though not a valid link
+      const element = screen.getByText("No href");
+      expect(element).toBeInTheDocument();
+    });
+
+    it("should handle whitespace-only rel values", () => {
+      render(
+        <Link href="https://example.com" target="_blank" rel="   ">
+          External
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      const rel = link.getAttribute("rel");
+
+      // Should still include security tokens
+      expect(rel).toContain("noopener");
+      expect(rel).toContain("noreferrer");
+    });
+
+    it("should handle multiple whitespace between rel tokens", () => {
+      render(
+        <Link
+          href="https://example.com"
+          target="_blank"
+          rel="nofollow    author"
+        >
+          External
+        </Link>
+      );
+
+      const link = screen.getByRole("link");
+      const rel = link.getAttribute("rel") || "";
+
+      // Split should handle multiple spaces
+      expect(rel).toContain("noopener");
+      expect(rel).toContain("noreferrer");
+      expect(rel).toContain("nofollow");
+      expect(rel).toContain("author");
+    });
+  });
+
+  describe("Performance", () => {
+    it("should memoize rel computation to avoid unnecessary recalculations", () => {
+      const { rerender } = render(
+        <Link href="https://example.com" target="_blank">
+          Link
+        </Link>
+      );
+
+      const link1 = screen.getByRole("link");
+      const rel1 = link1.getAttribute("rel");
+
+      // Rerender with same props
+      rerender(
+        <Link href="https://example.com" target="_blank">
+          Link
+        </Link>
+      );
+
+      const link2 = screen.getByRole("link");
+      const rel2 = link2.getAttribute("rel");
+
+      // Should produce same result
+      expect(rel1).toBe(rel2);
+    });
+
+    it("should update rel when dependencies change", () => {
+      const { rerender } = render(
+        <Link href="https://example.com" target="_blank" prefetch={false}>
+          Link
+        </Link>
+      );
+
+      const link1 = screen.getByRole("link");
+      const rel1 = link1.getAttribute("rel");
+      expect(rel1).not.toContain("prefetch");
+
+      // Rerender with prefetch=true
+      rerender(
+        <Link href="https://example.com" target="_blank" prefetch={true}>
+          Link
+        </Link>
+      );
+
+      const link2 = screen.getByRole("link");
+      const rel2 = link2.getAttribute("rel");
+      expect(rel2).toContain("prefetch");
+    });
+  });
+});