@etus/ui 0.1.1 → 0.1.2

package/src/components/data-display/Banner/Banner.test.tsx

@@ -1,648 +0,0 @@
-// Banner/Banner.test.tsx
-import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { axe, toHaveNoViolations } from "jest-axe"
-import { Info, TriangleAlert } from "lucide-react"
-import { describe, expect, it, vi } from "vitest"
-
-import { Banner } from "./Banner"
-
-expect.extend(toHaveNoViolations)
-
-// ============================================
-// RENDERING TESTS
-// ============================================
-describe("Banner", () => {
-  describe("Rendering", () => {
-    it("renders content correctly", () => {
-      render(<Banner>Test message</Banner>)
-      expect(screen.getByText("Test message")).toBeInTheDocument()
-    })
-
-    it("renders with custom className", () => {
-      render(
-        <Banner className="custom-class" data-testid="banner">
-          Message
-        </Banner>
-      )
-      expect(screen.getByTestId("banner")).toHaveClass("custom-class")
-    })
-
-    it("renders with icon", () => {
-      render(
-        <Banner icon={<Info data-testid="icon" />}>
-          Message with icon
-        </Banner>
-      )
-      expect(screen.getByTestId("icon")).toBeInTheDocument()
-    })
-
-    it("renders with action", () => {
-      render(
-        <Banner action={<button type="button">Action</button>}>
-          Message with action
-        </Banner>
-      )
-      expect(screen.getByRole("button", { name: "Action" })).toBeInTheDocument()
-    })
-
-    it("renders close button when dismissible", () => {
-      render(<Banner dismissible>Dismissible message</Banner>)
-      expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument()
-    })
-
-    it("does not render close button when dismissible is false", () => {
-      render(<Banner dismissible={false}>Non-dismissible message</Banner>)
-      expect(
-        screen.queryByRole("button", { name: "Close" })
-      ).not.toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // DATA SLOT TESTS
-  // ============================================
-  describe("Data Slot Attributes", () => {
-    it("has data-slot attribute on root", () => {
-      render(<Banner data-testid="banner">Message</Banner>)
-      expect(screen.getByTestId("banner")).toHaveAttribute(
-        "data-slot",
-        "banner"
-      )
-    })
-
-    it("has data-slot on icon container", () => {
-      const { container } = render(
-        <Banner icon={<Info />}>Message</Banner>
-      )
-      expect(
-        container.querySelector('[data-slot="banner-icon"]')
-      ).toBeInTheDocument()
-    })
-
-    it("has data-slot on content container", () => {
-      const { container } = render(<Banner>Message</Banner>)
-      expect(
-        container.querySelector('[data-slot="banner-content"]')
-      ).toBeInTheDocument()
-    })
-
-    it("has data-slot on action container", () => {
-      const { container } = render(
-        <Banner action={<button type="button">Click</button>}>Message</Banner>
-      )
-      expect(
-        container.querySelector('[data-slot="banner-action"]')
-      ).toBeInTheDocument()
-    })
-
-    it("has data-slot on close button", () => {
-      const { container } = render(<Banner>Message</Banner>)
-      expect(
-        container.querySelector('[data-slot="banner-close"]')
-      ).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // VARIANT TESTS
-  // ============================================
-  describe("Variants", () => {
-    it("applies default variant", () => {
-      render(<Banner data-testid="banner">Message</Banner>)
-      const banner = screen.getByTestId("banner")
-      expect(banner).toHaveAttribute("data-variant", "default")
-      expect(banner.className).toContain("bg-muted")
-    })
-
-    it("applies info variant", () => {
-      render(
-        <Banner data-testid="banner" variant="info">
-          Info message
-        </Banner>
-      )
-      const banner = screen.getByTestId("banner")
-      expect(banner).toHaveAttribute("data-variant", "info")
-      expect(banner.className).toContain("bg-info-bg")
-    })
-
-    it("applies success variant", () => {
-      render(
-        <Banner data-testid="banner" variant="success">
-          Success message
-        </Banner>
-      )
-      const banner = screen.getByTestId("banner")
-      expect(banner).toHaveAttribute("data-variant", "success")
-      expect(banner.className).toContain("bg-success-bg")
-    })
-
-    it("applies warning variant", () => {
-      render(
-        <Banner data-testid="banner" variant="warning">
-          Warning message
-        </Banner>
-      )
-      const banner = screen.getByTestId("banner")
-      expect(banner).toHaveAttribute("data-variant", "warning")
-      expect(banner.className).toContain("bg-warning-bg")
-    })
-
-    it("applies error variant", () => {
-      render(
-        <Banner data-testid="banner" variant="error">
-          Error message
-        </Banner>
-      )
-      const banner = screen.getByTestId("banner")
-      expect(banner).toHaveAttribute("data-variant", "error")
-      expect(banner.className).toContain("bg-error-bg")
-    })
-
-    it("applies promo variant", () => {
-      render(
-        <Banner data-testid="banner" variant="promo">
-          Promo message
-        </Banner>
-      )
-      const banner = screen.getByTestId("banner")
-      expect(banner).toHaveAttribute("data-variant", "promo")
-      expect(banner.className).toContain("bg-gradient-to-r")
-    })
-  })
-
-  // ============================================
-  // POSITION TESTS
-  // ============================================
-  describe("Position", () => {
-    it("applies inline position by default", () => {
-      render(<Banner data-testid="banner">Message</Banner>)
-      const banner = screen.getByTestId("banner")
-      expect(banner).toHaveAttribute("data-position", "inline")
-      expect(banner.className).toContain("relative")
-    })
-
-    it("applies top position", () => {
-      render(
-        <Banner data-testid="banner" position="top">
-          Top banner
-        </Banner>
-      )
-      const banner = screen.getByTestId("banner")
-      expect(banner).toHaveAttribute("data-position", "top")
-      expect(banner.className).toContain("fixed")
-      expect(banner.className).toContain("top-0")
-    })
-
-    it("applies bottom position", () => {
-      render(
-        <Banner data-testid="banner" position="bottom">
-          Bottom banner
-        </Banner>
-      )
-      const banner = screen.getByTestId("banner")
-      expect(banner).toHaveAttribute("data-position", "bottom")
-      expect(banner.className).toContain("fixed")
-      expect(banner.className).toContain("bottom-0")
-    })
-  })
-
-  // ============================================
-  // STICKY TESTS
-  // ============================================
-  describe("Sticky", () => {
-    it("applies sticky class when sticky is true", () => {
-      render(
-        <Banner sticky data-testid="banner">
-          Sticky banner
-        </Banner>
-      )
-      const banner = screen.getByTestId("banner")
-      expect(banner).toHaveAttribute("data-sticky", "")
-      expect(banner.className).toContain("sticky")
-    })
-
-    it("does not apply sticky class when sticky is false", () => {
-      render(
-        <Banner data-testid="banner" sticky={false}>
-          Non-sticky banner
-        </Banner>
-      )
-      const banner = screen.getByTestId("banner")
-      expect(banner).not.toHaveAttribute("data-sticky")
-      expect(banner.className).not.toContain("sticky")
-    })
-  })
-
-  // ============================================
-  // INTERACTION TESTS
-  // ============================================
-  describe("Interactions", () => {
-    it("calls onDismiss when close button is clicked", async () => {
-      const onDismiss = vi.fn()
-      const user = userEvent.setup()
-
-      render(<Banner onDismiss={onDismiss}>Message</Banner>)
-
-      await user.click(screen.getByRole("button", { name: "Close" }))
-      expect(onDismiss).toHaveBeenCalledTimes(1)
-    })
-
-    it("does not call onDismiss when action is clicked", async () => {
-      const onDismiss = vi.fn()
-      const onAction = vi.fn()
-      const user = userEvent.setup()
-
-      render(
-        <Banner
-          action={
-            <button type="button" onClick={onAction}>
-              Action
-            </button>
-          }
-          onDismiss={onDismiss}
-        >
-          Message
-        </Banner>
-      )
-
-      await user.click(screen.getByRole("button", { name: "Action" }))
-      expect(onAction).toHaveBeenCalledTimes(1)
-      expect(onDismiss).not.toHaveBeenCalled()
-    })
-  })
-
-  // ============================================
-  // KEYBOARD NAVIGATION TESTS
-  // ============================================
-  describe("Keyboard Navigation", () => {
-    it("close button is focusable", async () => {
-      const user = userEvent.setup()
-      render(<Banner>Message</Banner>)
-
-      const closeButton = screen.getByRole("button", { name: "Close" })
-      await user.tab()
-      expect(closeButton).toHaveFocus()
-    })
-
-    it("close button can be activated with Enter", async () => {
-      const onDismiss = vi.fn()
-      const user = userEvent.setup()
-
-      render(<Banner onDismiss={onDismiss}>Message</Banner>)
-
-      const closeButton = screen.getByRole("button", { name: "Close" })
-      closeButton.focus()
-      await user.keyboard("{Enter}")
-      expect(onDismiss).toHaveBeenCalledTimes(1)
-    })
-
-    it("close button can be activated with Space", async () => {
-      const onDismiss = vi.fn()
-      const user = userEvent.setup()
-
-      render(<Banner onDismiss={onDismiss}>Message</Banner>)
-
-      const closeButton = screen.getByRole("button", { name: "Close" })
-      closeButton.focus()
-      await user.keyboard(" ")
-      expect(onDismiss).toHaveBeenCalledTimes(1)
-    })
-
-    it("action button is focusable", async () => {
-      const user = userEvent.setup()
-      render(
-        <Banner action={<button type="button">Action</button>}>
-          Message
-        </Banner>
-      )
-
-      await user.tab()
-      expect(screen.getByRole("button", { name: "Action" })).toHaveFocus()
-    })
-  })
-
-  // ============================================
-  // ARIA ATTRIBUTES TESTS
-  // ============================================
-  describe("ARIA Attributes", () => {
-    it("has role=status for default variant", () => {
-      render(<Banner data-testid="banner">Message</Banner>)
-      expect(screen.getByTestId("banner")).toHaveAttribute("role", "status")
-    })
-
-    it("has role=status for info variant", () => {
-      render(
-        <Banner data-testid="banner" variant="info">
-          Info
-        </Banner>
-      )
-      expect(screen.getByTestId("banner")).toHaveAttribute("role", "status")
-    })
-
-    it("has role=status for success variant", () => {
-      render(
-        <Banner data-testid="banner" variant="success">
-          Success
-        </Banner>
-      )
-      expect(screen.getByTestId("banner")).toHaveAttribute("role", "status")
-    })
-
-    it("has role=alert for warning variant", () => {
-      render(
-        <Banner data-testid="banner" variant="warning">
-          Warning
-        </Banner>
-      )
-      expect(screen.getByTestId("banner")).toHaveAttribute("role", "alert")
-    })
-
-    it("has role=alert for error variant", () => {
-      render(
-        <Banner data-testid="banner" variant="error">
-          Error
-        </Banner>
-      )
-      expect(screen.getByTestId("banner")).toHaveAttribute("role", "alert")
-    })
-
-    it("has aria-live=polite for status role", () => {
-      render(<Banner data-testid="banner">Message</Banner>)
-      expect(screen.getByTestId("banner")).toHaveAttribute(
-        "aria-live",
-        "polite"
-      )
-    })
-
-    it("has aria-live=assertive for alert role", () => {
-      render(
-        <Banner data-testid="banner" variant="error">
-          Error
-        </Banner>
-      )
-      expect(screen.getByTestId("banner")).toHaveAttribute(
-        "aria-live",
-        "assertive"
-      )
-    })
-
-    it("allows custom role override", () => {
-      render(
-        <Banner data-testid="banner" role="region">
-          Message
-        </Banner>
-      )
-      expect(screen.getByTestId("banner")).toHaveAttribute("role", "region")
-    })
-
-    it("close button has aria-label", () => {
-      render(<Banner>Message</Banner>)
-      expect(screen.getByRole("button", { name: "Close" })).toHaveAttribute(
-        "aria-label",
-        "Close"
-      )
-    })
-  })
-
-  // ============================================
-  // CLASSNAME MERGING TESTS
-  // ============================================
-  describe("ClassName Merging", () => {
-    it("merges custom className with base styles", () => {
-      render(
-        <Banner className="mt-4" data-testid="banner">
-          Message
-        </Banner>
-      )
-      const banner = screen.getByTestId("banner")
-      expect(banner).toHaveClass("mt-4")
-      expect(banner).toHaveClass("flex")
-    })
-
-    it("allows overriding padding with className", () => {
-      render(
-        <Banner className="py-6" data-testid="banner">
-          Message
-        </Banner>
-      )
-      expect(screen.getByTestId("banner")).toHaveClass("py-6")
-    })
-  })
-
-  // ============================================
-  // EDGE CASE TESTS
-  // ============================================
-  describe("Edge Cases", () => {
-    it("renders without children", () => {
-      render(<Banner data-testid="banner" />)
-      expect(screen.getByTestId("banner")).toBeInTheDocument()
-    })
-
-    it("renders with multiple action elements", () => {
-      render(
-        <Banner
-          action={
-            <div className="flex gap-2">
-              <button type="button">Reject</button>
-              <button type="button">Accept</button>
-            </div>
-          }
-        >
-          Cookie consent
-        </Banner>
-      )
-      expect(screen.getByRole("button", { name: "Reject" })).toBeInTheDocument()
-      expect(screen.getByRole("button", { name: "Accept" })).toBeInTheDocument()
-    })
-
-    it("renders with complex icon element", () => {
-      render(
-        <Banner
-          icon={
-            <span className="flex items-center gap-1">
-              <TriangleAlert className="size-4" data-testid="icon" />
-              <span>!</span>
-            </span>
-          }
-        >
-          Complex icon
-        </Banner>
-      )
-      expect(screen.getByTestId("icon")).toBeInTheDocument()
-    })
-
-    it("handles long content gracefully", () => {
-      const longText = "A".repeat(500)
-      render(<Banner data-testid="banner">{longText}</Banner>)
-      expect(screen.getByText(longText)).toBeInTheDocument()
-    })
-
-    it("renders with links in content", () => {
-      render(
-        <Banner>
-          Visit our{" "}
-          <a data-testid="link" href="/privacy">
-            privacy policy
-          </a>
-        </Banner>
-      )
-      expect(screen.getByTestId("link")).toHaveAttribute("href", "/privacy")
-    })
-  })
-
-  // ============================================
-  // ACCESSIBILITY TESTS
-  // ============================================
-  describe("Accessibility", () => {
-    it("has no accessibility violations with default variant", async () => {
-      const { container } = render(<Banner>Default message</Banner>)
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with info variant", async () => {
-      const { container } = render(
-        <Banner variant="info">Info message</Banner>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with success variant", async () => {
-      const { container } = render(
-        <Banner variant="success">Success message</Banner>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with warning variant", async () => {
-      const { container } = render(
-        <Banner variant="warning">Warning message</Banner>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with error variant", async () => {
-      const { container } = render(
-        <Banner variant="error">Error message</Banner>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with promo variant", async () => {
-      const { container } = render(
-        <Banner variant="promo">Promo message</Banner>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with icon", async () => {
-      const { container } = render(
-        <Banner icon={<Info className="size-4" />}>Message with icon</Banner>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with action", async () => {
-      const { container } = render(
-        <Banner action={<button type="button">Click</button>}>
-          Message with action
-        </Banner>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations when non-dismissible", async () => {
-      const { container } = render(
-        <Banner dismissible={false}>Non-dismissible message</Banner>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations with all positions", async () => {
-      for (const position of ["top", "bottom", "inline"] as const) {
-        const { container } = render(
-          <Banner position={position}>
-            {position} position
-          </Banner>
-        )
-        const results = await axe(container)
-        expect(results).toHaveNoViolations()
-      }
-    })
-  })
-
-  // ============================================
-  // INTEGRATION TESTS
-  // ============================================
-  describe("Integration", () => {
-    it("renders complete cookie consent banner", () => {
-      render(
-        <Banner
-          sticky
-          action={
-            <div className="flex gap-2">
-              <button type="button">Reject</button>
-              <button type="button">Accept</button>
-            </div>
-          }
-          position="bottom"
-          variant="default"
-        >
-          We use cookies to improve your experience.{" "}
-          <a href="/privacy">Privacy Policy</a>
-        </Banner>
-      )
-
-      expect(screen.getByText(/We use cookies/)).toBeInTheDocument()
-      expect(screen.getByRole("link", { name: "Privacy Policy" })).toHaveAttribute(
-        "href",
-        "/privacy"
-      )
-      expect(screen.getByRole("button", { name: "Reject" })).toBeInTheDocument()
-      expect(screen.getByRole("button", { name: "Accept" })).toBeInTheDocument()
-      expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument()
-    })
-
-    it("renders complete maintenance banner", () => {
-      render(
-        <Banner
-          action={<button type="button">Learn more</button>}
-          dismissible={false}
-          icon={<TriangleAlert className="size-4" />}
-          variant="warning"
-        >
-          Scheduled maintenance tonight at 10PM.
-        </Banner>
-      )
-
-      expect(screen.getByText(/Scheduled maintenance/)).toBeInTheDocument()
-      expect(screen.getByRole("button", { name: "Learn more" })).toBeInTheDocument()
-      expect(
-        screen.queryByRole("button", { name: "Close" })
-      ).not.toBeInTheDocument()
-    })
-
-    it("renders complete promo banner", () => {
-      render(
-        <Banner
-          action={<button type="button">Shop now</button>}
-          variant="promo"
-        >
-          Black Friday! Up to 50% off all plans.
-        </Banner>
-      )
-
-      expect(screen.getByText(/Black Friday/)).toBeInTheDocument()
-      expect(screen.getByRole("button", { name: "Shop now" })).toBeInTheDocument()
-    })
-  })
-})