@etus/ui 0.1.1 → 0.1.3

package/src/components/primitives/Link/Link.test.tsx

@@ -1,764 +0,0 @@
-// Link/Link.test.tsx
-import type { ReactNode } from "react"
-
-import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { axe, toHaveNoViolations } from "jest-axe"
-import { describe, expect, it, vi } from "vitest"
-
-import { Link } from "./Link"
-
-expect.extend(toHaveNoViolations)
-
-// ============================================
-// RENDERING TESTS
-// ============================================
-describe("Link", () => {
-  describe("Rendering", () => {
-    it("renders correctly", () => {
-      render(<Link href="/test">Click me</Link>)
-      expect(screen.getByRole("link", { name: /click me/i })).toBeInTheDocument()
-    })
-
-    it("renders children content", () => {
-      render(<Link href="/test">Test Label</Link>)
-      expect(screen.getByText("Test Label")).toBeInTheDocument()
-    })
-
-    it("renders with custom className", () => {
-      render(
-        <Link className="custom-class" href="/test">
-          Label
-        </Link>
-      )
-      expect(screen.getByRole("link")).toHaveClass("custom-class")
-    })
-
-    it("has data-slot attribute", () => {
-      render(<Link href="/test">Label</Link>)
-      expect(screen.getByRole("link")).toHaveAttribute("data-slot", "link")
-    })
-
-    it("passes through data-* attributes", () => {
-      render(
-        <Link data-custom="value" data-testid="link" href="/test">
-          Label
-        </Link>
-      )
-      expect(screen.getByTestId("link")).toHaveAttribute("data-custom", "value")
-    })
-
-    it("renders as anchor by default", () => {
-      render(<Link href="/test">Label</Link>)
-      expect(screen.getByRole("link").tagName).toBe("A")
-    })
-
-    it("renders as child element with asChild", () => {
-      render(
-        <Link asChild>
-          <button type="button">Button Link</button>
-        </Link>
-      )
-      const button = screen.getByRole("button")
-      expect(button).toHaveAttribute("data-slot", "link")
-    })
-
-    it("has correct href attribute", () => {
-      render(<Link href="/destination">Go</Link>)
-      expect(screen.getByRole("link")).toHaveAttribute("href", "/destination")
-    })
-
-    it("passes through data-id attribute", () => {
-      render(
-        <Link data-id="link-123" href="/test">
-          Label
-        </Link>
-      )
-      expect(screen.getByRole("link")).toHaveAttribute("data-id", "link-123")
-    })
-  })
-
-  // ============================================
-  // VARIANT TESTS
-  // ============================================
-  describe("Variants", () => {
-    it("applies default variant classes", () => {
-      render(<Link href="/test">Default</Link>)
-      expect(screen.getByRole("link")).toHaveClass("text-[color:var(--link-color-default)]")
-    })
-
-    it("applies muted variant classes", () => {
-      render(
-        <Link href="/test" variant="muted">
-          Muted
-        </Link>
-      )
-      expect(screen.getByRole("link")).toHaveClass("text-[color:var(--link-color-muted)]")
-    })
-
-    it("applies subtle variant classes", () => {
-      render(
-        <Link href="/test" variant="subtle">
-          Subtle
-        </Link>
-      )
-      expect(screen.getByRole("link")).toHaveClass("text-[color:var(--link-color-subtle)]")
-    })
-
-    it("applies nav variant classes", () => {
-      render(
-        <Link href="/test" variant="nav">
-          Nav
-        </Link>
-      )
-      const link = screen.getByRole("link")
-      expect(link).toHaveClass("text-[color:var(--link-color-nav)]")
-      expect(link).toHaveClass("no-underline")
-    })
-
-    it("applies inline variant classes", () => {
-      render(
-        <Link href="/test" variant="inline">
-          Inline
-        </Link>
-      )
-      const link = screen.getByRole("link")
-      expect(link).toHaveClass("text-[color:var(--link-color-default)]")
-      expect(link).toHaveClass("underline")
-    })
-
-    it("applies unstyled variant classes", () => {
-      render(
-        <Link href="/test" variant="unstyled">
-          Unstyled
-        </Link>
-      )
-      const link = screen.getByRole("link")
-      // unstyled should not have text color classes from variants
-      expect(link).not.toHaveClass("text-[color:var(--link-color-default)]")
-      expect(link).not.toHaveClass("text-[color:var(--link-color-subtle)]")
-    })
-  })
-
-  // ============================================
-  // SIZE TESTS
-  // ============================================
-  describe("Sizes", () => {
-    it("applies xs size classes", () => {
-      render(
-        <Link href="/test" size="xs">
-          Extra Small
-        </Link>
-      )
-      expect(screen.getByRole("link")).toHaveClass("text-[length:var(--link-text-xs)]")
-    })
-
-    it("applies sm size classes", () => {
-      render(
-        <Link href="/test" size="sm">
-          Small
-        </Link>
-      )
-      expect(screen.getByRole("link")).toHaveClass("text-[length:var(--link-text-sm)]")
-    })
-
-    it("applies default size classes", () => {
-      render(
-        <Link href="/test" size="default">
-          Default
-        </Link>
-      )
-      expect(screen.getByRole("link")).toHaveClass("text-[length:var(--link-text-default)]")
-    })
-
-    it("applies lg size classes", () => {
-      render(
-        <Link href="/test" size="lg">
-          Large
-        </Link>
-      )
-      expect(screen.getByRole("link")).toHaveClass("text-[length:var(--link-text-lg)]")
-    })
-
-    it("applies inherit size (no size class)", () => {
-      render(
-        <Link href="/test" size="inherit">
-          Inherit
-        </Link>
-      )
-      const link = screen.getByRole("link")
-      expect(link).not.toHaveClass("text-[length:var(--link-text-xs)]")
-      expect(link).not.toHaveClass("text-[length:var(--link-text-sm)]")
-      expect(link).not.toHaveClass("text-[length:var(--link-text-default)]")
-      expect(link).not.toHaveClass("text-[length:var(--link-text-lg)]")
-    })
-
-    it("uses inherit size by default", () => {
-      render(<Link href="/test">Default Size</Link>)
-      const link = screen.getByRole("link")
-      expect(link).not.toHaveClass("text-[length:var(--link-text-xs)]")
-      expect(link).not.toHaveClass("text-[length:var(--link-text-sm)]")
-      expect(link).not.toHaveClass("text-[length:var(--link-text-default)]")
-      expect(link).not.toHaveClass("text-[length:var(--link-text-lg)]")
-    })
-  })
-
-  // ============================================
-  // UNDERLINE TESTS
-  // ============================================
-  describe("Underline", () => {
-    it("applies hover underline by default", () => {
-      render(<Link href="/test">Hover</Link>)
-      expect(screen.getByRole("link")).toHaveClass("hover:underline")
-    })
-
-    it("applies always underline", () => {
-      render(
-        <Link href="/test" underline="always">
-          Always
-        </Link>
-      )
-      const link = screen.getByRole("link")
-      expect(link).toHaveClass("underline")
-    })
-
-    it("applies hover underline", () => {
-      render(
-        <Link href="/test" underline="hover">
-          Hover
-        </Link>
-      )
-      expect(screen.getByRole("link")).toHaveClass("hover:underline")
-    })
-
-    it("applies no underline", () => {
-      render(
-        <Link href="/test" underline="none">
-          None
-        </Link>
-      )
-      expect(screen.getByRole("link")).toHaveClass("no-underline")
-    })
-
-    it("inline variant overrides underline prop to always", () => {
-      render(
-        <Link href="/test" underline="none" variant="inline">
-          Inline
-        </Link>
-      )
-      const link = screen.getByRole("link")
-      expect(link).toHaveClass("underline")
-    })
-
-    it("nav variant overrides underline prop to none", () => {
-      render(
-        <Link href="/test" underline="always" variant="nav">
-          Nav
-        </Link>
-      )
-      const link = screen.getByRole("link")
-      expect(link).toHaveClass("no-underline")
-    })
-  })
-
-  // ============================================
-  // EXTERNAL LINK TESTS
-  // ============================================
-  describe("External Links", () => {
-    it("adds target and rel for external links", () => {
-      render(
-        <Link external href="https://external.com">
-          External
-        </Link>
-      )
-      const link = screen.getByRole("link")
-      expect(link).toHaveAttribute("target", "_blank")
-      expect(link).toHaveAttribute("rel", "noopener noreferrer")
-    })
-
-    it("does not add target for internal links", () => {
-      render(<Link href="/internal">Internal</Link>)
-      const link = screen.getByRole("link")
-      expect(link).not.toHaveAttribute("target")
-    })
-
-    it("shows external icon by default for external links", () => {
-      render(
-        <Link external href="https://external.com">
-          External
-        </Link>
-      )
-      expect(
-        document.querySelector('[data-slot="external-icon"]')
-      ).toBeInTheDocument()
-    })
-
-    it("hides external icon when showExternalIcon is false", () => {
-      render(
-        <Link external href="https://external.com" showExternalIcon={false}>
-          External
-        </Link>
-      )
-      expect(
-        document.querySelector('[data-slot="external-icon"]')
-      ).not.toBeInTheDocument()
-    })
-
-    it("hides external icon when rightIcon is provided", () => {
-      render(
-        <Link
-          external
-          href="https://external.com"
-          rightIcon={<svg data-testid="custom-icon" />}
-        >
-          External
-        </Link>
-      )
-      expect(
-        document.querySelector('[data-slot="external-icon"]')
-      ).not.toBeInTheDocument()
-      expect(screen.getByTestId("custom-icon")).toBeInTheDocument()
-    })
-
-    it("includes screen reader text for external links", () => {
-      render(
-        <Link external href="https://external.com">
-          External
-        </Link>
-      )
-      expect(screen.getByText("(opens in new tab)")).toHaveClass("sr-only")
-    })
-  })
-
-  // ============================================
-  // ICON TESTS
-  // ============================================
-  describe("Icons", () => {
-    it("renders left icon", () => {
-      render(
-        <Link href="/test" leftIcon={<svg data-testid="left-icon" />}>
-          With Icon
-        </Link>
-      )
-      expect(screen.getByTestId("left-icon")).toBeInTheDocument()
-      expect(
-        document.querySelector('[data-slot="left-icon"]')
-      ).toBeInTheDocument()
-    })
-
-    it("renders right icon", () => {
-      render(
-        <Link href="/test" rightIcon={<svg data-testid="right-icon" />}>
-          With Icon
-        </Link>
-      )
-      expect(screen.getByTestId("right-icon")).toBeInTheDocument()
-      expect(
-        document.querySelector('[data-slot="right-icon"]')
-      ).toBeInTheDocument()
-    })
-
-    it("renders both left and right icons", () => {
-      render(
-        <Link
-          href="/test"
-          leftIcon={<svg data-testid="left-icon" />}
-          rightIcon={<svg data-testid="right-icon" />}
-        >
-          With Icons
-        </Link>
-      )
-      expect(screen.getByTestId("left-icon")).toBeInTheDocument()
-      expect(screen.getByTestId("right-icon")).toBeInTheDocument()
-    })
-
-    it("icon wrappers have aria-hidden", () => {
-      render(
-        <Link
-          href="/test"
-          leftIcon={<svg data-testid="left-icon" />}
-          rightIcon={<svg data-testid="right-icon" />}
-        >
-          With Icons
-        </Link>
-      )
-      expect(document.querySelector('[data-slot="left-icon"]')).toHaveAttribute(
-        "aria-hidden",
-        "true"
-      )
-      expect(
-        document.querySelector('[data-slot="right-icon"]')
-      ).toHaveAttribute("aria-hidden", "true")
-    })
-  })
-
-  // ============================================
-  // INTERACTION TESTS
-  // ============================================
-  describe("Interactions", () => {
-    it("calls onClick with event and payload when clicked", async () => {
-      const handleClick = vi.fn((e: React.MouseEvent) => { e.preventDefault() })
-      render(
-        <Link data-id="link-123" href="/test" onClick={handleClick}>
-          Click
-        </Link>
-      )
-      await userEvent.click(screen.getByRole("link"))
-
-      expect(handleClick).toHaveBeenCalledTimes(1)
-      /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-      expect(handleClick).toHaveBeenCalledWith(
-        expect.any(Object),
-        expect.objectContaining({
-          id: "link-123",
-          timestamp: expect.any(Number),
-          isExternal: false,
-          href: "/test",
-        })
-      )
-      /* eslint-enable @typescript-eslint/no-unsafe-assignment */
-    })
-
-    it("includes isExternal in payload for external links", async () => {
-      const handleClick = vi.fn((e: React.MouseEvent) => { e.preventDefault() })
-      render(
-        <Link external href="https://example.com" onClick={handleClick}>
-          External
-        </Link>
-      )
-      await userEvent.click(screen.getByRole("link"))
-
-      expect(handleClick).toHaveBeenCalledWith(
-        expect.any(Object),
-        expect.objectContaining({
-          isExternal: true,
-          href: "https://example.com",
-        })
-      )
-    })
-
-    it("can be activated with keyboard", async () => {
-      const handleClick = vi.fn((e: React.MouseEvent) => { e.preventDefault() })
-      render(
-        <Link href="/test" onClick={handleClick}>
-          Click
-        </Link>
-      )
-      screen.getByRole("link").focus()
-      await userEvent.keyboard("{Enter}")
-      expect(handleClick).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  // ============================================
-  // ASCHILD TESTS
-  // ============================================
-  describe("asChild", () => {
-    it("renders as child element", () => {
-      const CustomLink = ({
-        href,
-        children,
-        ...props
-      }: {
-        children?: ReactNode
-        href: string
-      }) => (
-        <a data-custom="true" href={href} {...props}>
-          {children}
-        </a>
-      )
-
-      render(
-        <Link asChild>
-          <CustomLink href="/test">Custom Link</CustomLink>
-        </Link>
-      )
-
-      const link = screen.getByRole("link", { name: "Custom Link" })
-      expect(link).toBeInTheDocument()
-      expect(link).toHaveAttribute("href", "/test")
-      expect(link).toHaveAttribute("data-custom", "true")
-      expect(link).toHaveAttribute("data-slot", "link")
-    })
-
-    it("merges className with child", () => {
-      render(
-        <Link asChild className="link-styles">
-          <a className="custom-class" href="/test">
-            Link
-          </a>
-        </Link>
-      )
-      const link = screen.getByRole("link")
-      expect(link).toHaveClass("link-styles")
-      expect(link).toHaveClass("custom-class")
-    })
-  })
-
-  // ============================================
-  // EDGE CASES TESTS
-  // ============================================
-  describe("Edge Cases", () => {
-    it("handles hash links correctly", () => {
-      render(<Link href="#section">Go to section</Link>)
-      expect(screen.getByRole("link")).toHaveAttribute("href", "#section")
-    })
-
-    it("handles mailto links", () => {
-      render(<Link href="mailto:test@example.com">Email us</Link>)
-      expect(screen.getByRole("link")).toHaveAttribute(
-        "href",
-        "mailto:test@example.com"
-      )
-    })
-
-    it("handles tel links", () => {
-      render(<Link href="tel:+5511999999999">Call us</Link>)
-      expect(screen.getByRole("link")).toHaveAttribute(
-        "href",
-        "tel:+5511999999999"
-      )
-    })
-
-    it("handles download attribute", () => {
-      render(
-        <Link download href="/file.pdf">
-          Download PDF
-        </Link>
-      )
-      expect(screen.getByRole("link")).toHaveAttribute("download")
-    })
-
-    it("works with empty href", () => {
-      render(<Link data-testid="empty-link" href="">Empty href</Link>)
-      // Note: Empty href doesn't get the "link" role in accessibility tree
-      expect(screen.getByTestId("empty-link")).toHaveAttribute("href", "")
-    })
-
-    it("supports aria-current for current page", () => {
-      render(
-        <Link aria-current="page" href="/current">
-          Current Page
-        </Link>
-      )
-      expect(screen.getByRole("link")).toHaveAttribute("aria-current", "page")
-    })
-
-    it("preserves custom rel when not external", () => {
-      render(
-        <Link href="/test" rel="nofollow">
-          NoFollow
-        </Link>
-      )
-      expect(screen.getByRole("link")).toHaveAttribute("rel", "nofollow")
-    })
-
-    it("overrides custom rel when external", () => {
-      render(
-        <Link external href="https://example.com" rel="nofollow">
-          External
-        </Link>
-      )
-      expect(screen.getByRole("link")).toHaveAttribute(
-        "rel",
-        "noopener noreferrer"
-      )
-    })
-  })
-
-  // ============================================
-  // BASE STYLING TESTS
-  // ============================================
-  describe("Base Styling", () => {
-    it("has inline-flex display", () => {
-      render(<Link href="/test">Label</Link>)
-      expect(screen.getByRole("link")).toHaveClass("inline-flex")
-    })
-
-    it("has items-center alignment", () => {
-      render(<Link href="/test">Label</Link>)
-      expect(screen.getByRole("link")).toHaveClass("items-center")
-    })
-
-    it("has gap for icons", () => {
-      render(<Link href="/test">Label</Link>)
-      expect(screen.getByRole("link")).toHaveClass("gap-1")
-    })
-
-    it("has transition-colors", () => {
-      render(<Link href="/test">Label</Link>)
-      expect(screen.getByRole("link")).toHaveClass("transition-colors")
-    })
-
-    it("has focus-visible ring styling", () => {
-      render(<Link href="/test">Label</Link>)
-      const link = screen.getByRole("link")
-      expect(link).toHaveClass("focus-visible:ring-ring/50")
-      expect(link).toHaveClass("focus-visible:ring-[3px]")
-    })
-
-    it("has underline-offset-4", () => {
-      render(<Link href="/test">Label</Link>)
-      expect(screen.getByRole("link")).toHaveClass("underline-offset-4")
-    })
-  })
-
-  // ============================================
-  // ACCESSIBILITY TESTS
-  // ============================================
-  describe("Accessibility", () => {
-    it("has no accessibility violations with basic link", async () => {
-      const { container } = render(<Link href="/test">Accessible</Link>)
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations with all variants", async () => {
-      const { container } = render(
-        <nav>
-          <Link href="/1" variant="default">
-            Default
-          </Link>
-          <Link href="/2" variant="muted">
-            Muted
-          </Link>
-          <Link href="/3" variant="subtle">
-            Subtle
-          </Link>
-          <Link href="/4" variant="nav">
-            Nav
-          </Link>
-          <Link href="/5" variant="inline">
-            Inline
-          </Link>
-          <Link href="/6" variant="unstyled">
-            Unstyled
-          </Link>
-        </nav>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations with all sizes", async () => {
-      const { container } = render(
-        <div>
-          <Link href="/1" size="xs">
-            Extra Small
-          </Link>
-          <Link href="/2" size="sm">
-            Small
-          </Link>
-          <Link href="/3" size="default">
-            Default
-          </Link>
-          <Link href="/4" size="lg">
-            Large
-          </Link>
-          <Link href="/5" size="inherit">
-            Inherit
-          </Link>
-        </div>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations with external link", async () => {
-      const { container } = render(
-        <Link external href="https://example.com">
-          External Link
-        </Link>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations with icons", async () => {
-      const { container } = render(
-        <Link
-          href="/test"
-          leftIcon={<svg aria-hidden="true" />}
-          rightIcon={<svg aria-hidden="true" />}
-        >
-          With Icons
-        </Link>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("is focusable", () => {
-      render(<Link href="/test">Focus me</Link>)
-      const link = screen.getByRole("link")
-      link.focus()
-      expect(link).toHaveFocus()
-    })
-  })
-
-  // ============================================
-  // COMBINED VARIANTS TESTS
-  // ============================================
-  describe("Combined Variants", () => {
-    it("combines variant and size", () => {
-      render(
-        <Link href="/test" size="lg" variant="muted">
-          Combined
-        </Link>
-      )
-      const link = screen.getByRole("link")
-      expect(link).toHaveClass("text-[color:var(--link-color-muted)]")
-      expect(link).toHaveClass("text-[length:var(--link-text-lg)]")
-    })
-
-    it("combines variant, size, and underline", () => {
-      render(
-        <Link href="/test" size="sm" underline="always" variant="subtle">
-          Combined
-        </Link>
-      )
-      const link = screen.getByRole("link")
-      expect(link).toHaveClass("text-[color:var(--link-color-subtle)]")
-      expect(link).toHaveClass("text-[length:var(--link-text-sm)]")
-      expect(link).toHaveClass("underline")
-    })
-
-    it("combines external with icons", () => {
-      render(
-        <Link
-          external
-          href="https://example.com"
-          leftIcon={<svg data-testid="left-icon" />}
-          showExternalIcon={false}
-        >
-          External with Icon
-        </Link>
-      )
-      expect(screen.getByTestId("left-icon")).toBeInTheDocument()
-      expect(screen.getByRole("link")).toHaveAttribute("target", "_blank")
-    })
-
-    it("combines all options", () => {
-      const handleClick = vi.fn((e: React.MouseEvent) => { e.preventDefault() })
-      render(
-        <Link
-          external
-          data-id="combined-link"
-          href="https://example.com"
-          leftIcon={<svg data-testid="left" />}
-          size="sm"
-          variant="muted"
-          onClick={handleClick}
-        >
-          All Options
-        </Link>
-      )
-      const link = screen.getByRole("link")
-      expect(link).toHaveClass("text-[color:var(--link-color-muted)]")
-      expect(link).toHaveClass("text-[length:var(--link-text-sm)]")
-      expect(link).toHaveAttribute("target", "_blank")
-      expect(link).toHaveAttribute("data-id", "combined-link")
-      expect(screen.getByTestId("left")).toBeInTheDocument()
-    })
-  })
-})