@etus/ui 0.1.0

package/src/components/navigation/Toolbar/Toolbar.test.tsx

@@ -0,0 +1,620 @@
+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 {
+  Toolbar,
+  ToolbarButton,
+  ToolbarLink,
+  ToolbarSeparator,
+  ToolbarToggleGroup,
+  ToolbarToggleItem,
+} from "./Toolbar"
+
+expect.extend(toHaveNoViolations)
+
+describe("Toolbar", () => {
+  describe("rendering", () => {
+    it("renders with toolbar role", () => {
+      render(
+        <Toolbar>
+          <ToolbarButton>Action</ToolbarButton>
+        </Toolbar>
+      )
+
+      expect(screen.getByRole("toolbar")).toBeInTheDocument()
+    })
+
+    it("renders children correctly", () => {
+      render(
+        <Toolbar>
+          <ToolbarButton>Button 1</ToolbarButton>
+          <ToolbarButton>Button 2</ToolbarButton>
+        </Toolbar>
+      )
+
+      expect(screen.getByText("Button 1")).toBeInTheDocument()
+      expect(screen.getByText("Button 2")).toBeInTheDocument()
+    })
+
+    it("applies custom className", () => {
+      render(
+        <Toolbar className="custom-class">
+          <ToolbarButton>Action</ToolbarButton>
+        </Toolbar>
+      )
+
+      expect(screen.getByRole("toolbar")).toHaveClass("custom-class")
+    })
+
+    it("has correct data-slot attribute", () => {
+      render(
+        <Toolbar>
+          <ToolbarButton>Action</ToolbarButton>
+        </Toolbar>
+      )
+
+      expect(screen.getByRole("toolbar")).toHaveAttribute("data-slot", "toolbar")
+    })
+  })
+
+  describe("variants", () => {
+    it("renders default variant", () => {
+      render(
+        <Toolbar variant="default">
+          <ToolbarButton>Action</ToolbarButton>
+        </Toolbar>
+      )
+
+      expect(screen.getByRole("toolbar")).toHaveClass("border", "bg-background")
+    })
+
+    it("renders floating variant", () => {
+      render(
+        <Toolbar variant="floating">
+          <ToolbarButton>Action</ToolbarButton>
+        </Toolbar>
+      )
+
+      expect(screen.getByRole("toolbar")).toHaveClass("shadow-lg", "bg-popover")
+    })
+
+    it("renders sticky variant", () => {
+      render(
+        <Toolbar variant="sticky">
+          <ToolbarButton>Action</ToolbarButton>
+        </Toolbar>
+      )
+
+      expect(screen.getByRole("toolbar")).toHaveClass("border-b")
+    })
+
+    it("renders minimal variant", () => {
+      render(
+        <Toolbar variant="minimal">
+          <ToolbarButton>Action</ToolbarButton>
+        </Toolbar>
+      )
+
+      expect(screen.getByRole("toolbar")).toHaveClass("gap-0.5")
+    })
+  })
+
+  describe("orientation", () => {
+    it("supports horizontal orientation", () => {
+      render(
+        <Toolbar orientation="horizontal">
+          <ToolbarButton>Action</ToolbarButton>
+        </Toolbar>
+      )
+
+      expect(screen.getByRole("toolbar")).toHaveAttribute("data-orientation", "horizontal")
+    })
+
+    it("supports vertical orientation", () => {
+      render(
+        <Toolbar orientation="vertical">
+          <ToolbarButton>Action</ToolbarButton>
+        </Toolbar>
+      )
+
+      expect(screen.getByRole("toolbar")).toHaveAttribute("data-orientation", "vertical")
+    })
+  })
+})
+
+describe("ToolbarButton", () => {
+  it("renders as a button", () => {
+    render(
+      <Toolbar>
+        <ToolbarButton>Click me</ToolbarButton>
+      </Toolbar>
+    )
+
+    expect(screen.getByRole("button", { name: "Click me" })).toBeInTheDocument()
+  })
+
+  it("handles click events", async () => {
+    const user = userEvent.setup()
+    const onClick = vi.fn()
+
+    render(
+      <Toolbar>
+        <ToolbarButton onClick={onClick}>Click me</ToolbarButton>
+      </Toolbar>
+    )
+
+    await user.click(screen.getByRole("button", { name: "Click me" }))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it("can be disabled", () => {
+    render(
+      <Toolbar>
+        <ToolbarButton disabled>Disabled</ToolbarButton>
+      </Toolbar>
+    )
+
+    expect(screen.getByRole("button", { name: "Disabled" })).toBeDisabled()
+  })
+
+  it("has correct data-slot attribute", () => {
+    render(
+      <Toolbar>
+        <ToolbarButton>Action</ToolbarButton>
+      </Toolbar>
+    )
+
+    expect(screen.getByRole("button")).toHaveAttribute("data-slot", "toolbar-button")
+  })
+
+  it("applies custom className", () => {
+    render(
+      <Toolbar>
+        <ToolbarButton className="custom-button">Action</ToolbarButton>
+      </Toolbar>
+    )
+
+    expect(screen.getByRole("button")).toHaveClass("custom-button")
+  })
+})
+
+describe("ToolbarToggleGroup", () => {
+  it("renders toggle items", () => {
+    render(
+      <Toolbar>
+        <ToolbarToggleGroup type="single">
+          <ToolbarToggleItem value="a">A</ToolbarToggleItem>
+          <ToolbarToggleItem value="b">B</ToolbarToggleItem>
+        </ToolbarToggleGroup>
+      </Toolbar>
+    )
+
+    expect(screen.getByText("A")).toBeInTheDocument()
+    expect(screen.getByText("B")).toBeInTheDocument()
+  })
+
+  it("handles single selection", async () => {
+    const user = userEvent.setup()
+    const onValueChange = vi.fn()
+
+    render(
+      <Toolbar>
+        <ToolbarToggleGroup type="single" onValueChange={onValueChange}>
+          <ToolbarToggleItem value="left">Left</ToolbarToggleItem>
+          <ToolbarToggleItem value="center">Center</ToolbarToggleItem>
+        </ToolbarToggleGroup>
+      </Toolbar>
+    )
+
+    await user.click(screen.getByText("Left"))
+    expect(onValueChange).toHaveBeenCalledWith("left")
+
+    await user.click(screen.getByText("Center"))
+    expect(onValueChange).toHaveBeenCalledWith("center")
+  })
+
+  it("handles multiple selection", async () => {
+    const user = userEvent.setup()
+    const onValueChange = vi.fn()
+
+    render(
+      <Toolbar>
+        <ToolbarToggleGroup type="multiple" onValueChange={onValueChange}>
+          <ToolbarToggleItem value="bold">Bold</ToolbarToggleItem>
+          <ToolbarToggleItem value="italic">Italic</ToolbarToggleItem>
+        </ToolbarToggleGroup>
+      </Toolbar>
+    )
+
+    await user.click(screen.getByText("Bold"))
+    expect(onValueChange).toHaveBeenCalledWith(["bold"])
+
+    await user.click(screen.getByText("Italic"))
+    expect(onValueChange).toHaveBeenCalledWith(["bold", "italic"])
+  })
+
+  it("supports default value", () => {
+    render(
+      <Toolbar>
+        <ToolbarToggleGroup defaultValue="left" type="single">
+          <ToolbarToggleItem value="left">Left</ToolbarToggleItem>
+          <ToolbarToggleItem value="center">Center</ToolbarToggleItem>
+        </ToolbarToggleGroup>
+      </Toolbar>
+    )
+
+    expect(screen.getByText("Left")).toHaveAttribute("data-state", "on")
+    expect(screen.getByText("Center")).toHaveAttribute("data-state", "off")
+  })
+
+  it("has correct data-slot attribute", () => {
+    render(
+      <Toolbar>
+        <ToolbarToggleGroup data-testid="toggle-group" type="single">
+          <ToolbarToggleItem value="a">A</ToolbarToggleItem>
+        </ToolbarToggleGroup>
+      </Toolbar>
+    )
+
+    expect(screen.getByTestId("toggle-group")).toHaveAttribute("data-slot", "toolbar-toggle-group")
+  })
+})
+
+describe("ToolbarToggleItem", () => {
+  it("toggles on click", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Toolbar>
+        <ToolbarToggleGroup type="multiple">
+          <ToolbarToggleItem value="test">Test</ToolbarToggleItem>
+        </ToolbarToggleGroup>
+      </Toolbar>
+    )
+
+    const item = screen.getByText("Test")
+    expect(item).toHaveAttribute("data-state", "off")
+
+    await user.click(item)
+    expect(item).toHaveAttribute("data-state", "on")
+  })
+
+  it("can be disabled", () => {
+    render(
+      <Toolbar>
+        <ToolbarToggleGroup type="single">
+          <ToolbarToggleItem disabled value="disabled">
+            Disabled
+          </ToolbarToggleItem>
+        </ToolbarToggleGroup>
+      </Toolbar>
+    )
+
+    expect(screen.getByText("Disabled")).toBeDisabled()
+  })
+
+  it("has correct data-slot attribute", () => {
+    render(
+      <Toolbar>
+        <ToolbarToggleGroup type="single">
+          <ToolbarToggleItem value="test">Test</ToolbarToggleItem>
+        </ToolbarToggleGroup>
+      </Toolbar>
+    )
+
+    expect(screen.getByText("Test")).toHaveAttribute("data-slot", "toolbar-toggle-item")
+  })
+
+  it("applies custom className", () => {
+    render(
+      <Toolbar>
+        <ToolbarToggleGroup type="single">
+          <ToolbarToggleItem className="custom-item" value="test">
+            Test
+          </ToolbarToggleItem>
+        </ToolbarToggleGroup>
+      </Toolbar>
+    )
+
+    expect(screen.getByText("Test")).toHaveClass("custom-item")
+  })
+})
+
+describe("ToolbarSeparator", () => {
+  it("renders as a separator", () => {
+    render(
+      <Toolbar>
+        <ToolbarButton>Before</ToolbarButton>
+        <ToolbarSeparator data-testid="separator" />
+        <ToolbarButton>After</ToolbarButton>
+      </Toolbar>
+    )
+
+    expect(screen.getByTestId("separator")).toBeInTheDocument()
+  })
+
+  it("has correct data-slot attribute", () => {
+    render(
+      <Toolbar>
+        <ToolbarSeparator data-testid="separator" />
+      </Toolbar>
+    )
+
+    expect(screen.getByTestId("separator")).toHaveAttribute("data-slot", "toolbar-separator")
+  })
+
+  it("applies custom className", () => {
+    render(
+      <Toolbar>
+        <ToolbarSeparator className="custom-separator" data-testid="separator" />
+      </Toolbar>
+    )
+
+    expect(screen.getByTestId("separator")).toHaveClass("custom-separator")
+  })
+})
+
+describe("ToolbarLink", () => {
+  it("renders as a link", () => {
+    render(
+      <Toolbar>
+        <ToolbarLink href="https://example.com">Link</ToolbarLink>
+      </Toolbar>
+    )
+
+    expect(screen.getByRole("link", { name: "Link" })).toBeInTheDocument()
+  })
+
+  it("has correct href", () => {
+    render(
+      <Toolbar>
+        <ToolbarLink href="https://example.com">Link</ToolbarLink>
+      </Toolbar>
+    )
+
+    expect(screen.getByRole("link")).toHaveAttribute("href", "https://example.com")
+  })
+
+  it("has correct data-slot attribute", () => {
+    render(
+      <Toolbar>
+        <ToolbarLink href="#">Link</ToolbarLink>
+      </Toolbar>
+    )
+
+    expect(screen.getByRole("link")).toHaveAttribute("data-slot", "toolbar-link")
+  })
+
+  it("applies custom className", () => {
+    render(
+      <Toolbar>
+        <ToolbarLink className="custom-link" href="#">
+          Link
+        </ToolbarLink>
+      </Toolbar>
+    )
+
+    expect(screen.getByRole("link")).toHaveClass("custom-link")
+  })
+})
+
+describe("keyboard navigation", () => {
+  it("navigates with arrow keys", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Toolbar>
+        <ToolbarButton>Button 1</ToolbarButton>
+        <ToolbarButton>Button 2</ToolbarButton>
+        <ToolbarButton>Button 3</ToolbarButton>
+      </Toolbar>
+    )
+
+    const buttons = screen.getAllByRole("button")
+    const [btn0, btn1, btn2] = buttons
+    if (!btn0 || !btn1 || !btn2) {
+      throw new Error("Expected at least three toolbar buttons.")
+    }
+    btn0.focus()
+
+    await user.keyboard("{ArrowRight}")
+    expect(btn1).toHaveFocus()
+
+    await user.keyboard("{ArrowRight}")
+    expect(btn2).toHaveFocus()
+  })
+
+  it("loops navigation when loop is enabled", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Toolbar loop>
+        <ToolbarButton>Button 1</ToolbarButton>
+        <ToolbarButton>Button 2</ToolbarButton>
+      </Toolbar>
+    )
+
+    const buttons = screen.getAllByRole("button")
+    const [btn0, btn1] = buttons
+    if (!btn0 || !btn1) {
+      throw new Error("Expected at least two toolbar buttons.")
+    }
+    btn1.focus()
+
+    await user.keyboard("{ArrowRight}")
+    expect(btn0).toHaveFocus()
+  })
+
+  it("navigates to first/last with Home/End", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Toolbar>
+        <ToolbarButton>Button 1</ToolbarButton>
+        <ToolbarButton>Button 2</ToolbarButton>
+        <ToolbarButton>Button 3</ToolbarButton>
+      </Toolbar>
+    )
+
+    const buttons = screen.getAllByRole("button")
+    const [btn0, btn1, btn2] = buttons
+    if (!btn0 || !btn1 || !btn2) {
+      throw new Error("Expected at least three toolbar buttons.")
+    }
+    btn1.focus()
+
+    await user.keyboard("{Home}")
+    expect(btn0).toHaveFocus()
+
+    await user.keyboard("{End}")
+    expect(btn2).toHaveFocus()
+  })
+
+  it("skips disabled items during navigation", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Toolbar>
+        <ToolbarButton>Button 1</ToolbarButton>
+        <ToolbarButton disabled>Disabled</ToolbarButton>
+        <ToolbarButton>Button 3</ToolbarButton>
+      </Toolbar>
+    )
+
+    const buttons = screen.getAllByRole("button")
+    const [btn0, , btn2] = buttons
+    if (!btn0 || !btn2) {
+      throw new Error("Expected at least two toolbar buttons.")
+    }
+    btn0.focus()
+
+    await user.keyboard("{ArrowRight}")
+    expect(btn2).toHaveFocus()
+  })
+})
+
+describe("accessibility", () => {
+  it("has no violations with default variant", async () => {
+    const { container } = render(
+      <Toolbar aria-label="Formatting toolbar">
+        <ToolbarButton aria-label="Bold">B</ToolbarButton>
+        <ToolbarButton aria-label="Italic">I</ToolbarButton>
+        <ToolbarSeparator />
+        <ToolbarLink aria-label="Help" href="#">
+          ?
+        </ToolbarLink>
+      </Toolbar>
+    )
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has no violations with toggle groups", async () => {
+    const { container } = render(
+      <Toolbar aria-label="Text alignment">
+        <ToolbarToggleGroup defaultValue="left" type="single">
+          <ToolbarToggleItem aria-label="Align left" value="left">
+            L
+          </ToolbarToggleItem>
+          <ToolbarToggleItem aria-label="Align center" value="center">
+            C
+          </ToolbarToggleItem>
+          <ToolbarToggleItem aria-label="Align right" value="right">
+            R
+          </ToolbarToggleItem>
+        </ToolbarToggleGroup>
+      </Toolbar>
+    )
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has no violations with floating variant", async () => {
+    const { container } = render(
+      <Toolbar aria-label="Quick actions" variant="floating">
+        <ToolbarButton aria-label="Bold">B</ToolbarButton>
+        <ToolbarButton aria-label="Italic">I</ToolbarButton>
+      </Toolbar>
+    )
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})
+
+describe("complex scenarios", () => {
+  it("renders a complete formatting toolbar", () => {
+    render(
+      <Toolbar aria-label="Formatting toolbar">
+        <ToolbarToggleGroup type="multiple">
+          <ToolbarToggleItem aria-label="Bold" value="bold">
+            B
+          </ToolbarToggleItem>
+          <ToolbarToggleItem aria-label="Italic" value="italic">
+            I
+          </ToolbarToggleItem>
+          <ToolbarToggleItem aria-label="Underline" value="underline">
+            U
+          </ToolbarToggleItem>
+        </ToolbarToggleGroup>
+        <ToolbarSeparator />
+        <ToolbarToggleGroup defaultValue="left" type="single">
+          <ToolbarToggleItem aria-label="Align left" value="left">
+            L
+          </ToolbarToggleItem>
+          <ToolbarToggleItem aria-label="Align center" value="center">
+            C
+          </ToolbarToggleItem>
+          <ToolbarToggleItem aria-label="Align right" value="right">
+            R
+          </ToolbarToggleItem>
+        </ToolbarToggleGroup>
+        <ToolbarSeparator />
+        <ToolbarButton aria-label="Undo">Undo</ToolbarButton>
+        <ToolbarButton aria-label="Redo">Redo</ToolbarButton>
+      </Toolbar>
+    )
+
+    expect(screen.getByRole("toolbar")).toBeInTheDocument()
+    expect(screen.getByLabelText("Bold")).toBeInTheDocument()
+    expect(screen.getByLabelText("Italic")).toBeInTheDocument()
+    expect(screen.getByLabelText("Underline")).toBeInTheDocument()
+    expect(screen.getByLabelText("Align left")).toBeInTheDocument()
+    expect(screen.getByLabelText("Undo")).toBeInTheDocument()
+  })
+
+  it("maintains toggle state across interactions", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Toolbar>
+        <ToolbarToggleGroup type="multiple">
+          <ToolbarToggleItem value="bold">Bold</ToolbarToggleItem>
+          <ToolbarToggleItem value="italic">Italic</ToolbarToggleItem>
+        </ToolbarToggleGroup>
+      </Toolbar>
+    )
+
+    const bold = screen.getByText("Bold")
+    const italic = screen.getByText("Italic")
+
+    // Toggle bold on
+    await user.click(bold)
+    expect(bold).toHaveAttribute("data-state", "on")
+    expect(italic).toHaveAttribute("data-state", "off")
+
+    // Toggle italic on
+    await user.click(italic)
+    expect(bold).toHaveAttribute("data-state", "on")
+    expect(italic).toHaveAttribute("data-state", "on")
+
+    // Toggle bold off
+    await user.click(bold)
+    expect(bold).toHaveAttribute("data-state", "off")
+    expect(italic).toHaveAttribute("data-state", "on")
+  })
+})