@charcuterie/ui 4.26.2 → 4.27.1

package/src/ColorPicker/ColorPicker.test.tsx

@@ -0,0 +1,385 @@
+import { composeStories } from "@storybook/react"
+import { expect, userEvent, waitFor } from "storybook/test"
+import { test } from "vitest"
+
+import { expectNoAxeViolations } from "../expectNoAxeViolations.testHelpers.ts"
+import { mountStory } from "../mountStory.testHelpers.ts"
+import { expectAgentDrivable } from "../testing/index.ts"
+import * as stories from "./ColorPicker.stories.tsx"
+import { parseHexColor } from "./parseHexColor.ts"
+
+const {
+  AllStates,
+  AllVariants,
+  CustomPanel,
+  Interactive,
+  Playground,
+  Responsive,
+} = composeStories(stories)
+
+const openInteractive = async () => {
+  const mounted = await mountStory(Interactive)
+
+  await userEvent.click(
+    expectAgentDrivable(mounted.canvas, {
+      name: "Interactive color: Blue",
+      role: "button",
+    }),
+  )
+
+  const input = expectAgentDrivable(mounted.body, {
+    role: "combobox",
+  })
+
+  await waitFor(() => {
+    expect(input).toHaveFocus()
+  })
+
+  return { ...mounted, input }
+}
+
+test("the trigger names the preset and shows its swatch", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(Playground)
+
+  const trigger = expectAgentDrivable(canvas, {
+    name: "Color: Hot Pink",
+    role: "button",
+  })
+
+  await expect(trigger).toHaveTextContent("Hot Pink")
+
+  const swatchDot = trigger.querySelector(
+    '[role="img"] > span',
+  ) as HTMLElement
+
+  await expect(
+    getComputedStyle(swatchDot).backgroundColor,
+  ).toBe("rgb(255, 0, 110)")
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("typing a name narrows the list to that family", async () => {
+  const { body, input } = await openInteractive()
+
+  await userEvent.type(input, "pink")
+
+  await waitFor(() => {
+    const names = body
+      .getAllByRole("option")
+      .map((option: HTMLElement) =>
+        // The tick is drawn in every row and shown on the chosen one.
+        option.textContent?.replace("✓", "").trim(),
+      )
+
+    // "Hot Pink" by its name, the rest by their `keywords`.
+    expect(names).toStrictEqual([
+      "Raspberry",
+      "Hot Pink",
+      "Blush",
+      "Bubblegum",
+      "Cotton Candy",
+      "Custom color…",
+    ])
+  })
+})
+
+test("a hex code finds its preset", async () => {
+  const { body, input } = await openInteractive()
+
+  await userEvent.type(input, "#ff69")
+
+  await waitFor(() => {
+    body.getByRole("option", { name: "Bubblegum" })
+  })
+})
+
+test("choosing a preset changes the value and the trigger", async () => {
+  const { body, canvas } = await openInteractive()
+
+  await userEvent.click(
+    body.getByRole("option", { name: "Raspberry" }),
+  )
+
+  await waitFor(() => {
+    expectAgentDrivable(canvas, {
+      name: "Interactive color: Raspberry",
+      role: "button",
+    })
+  })
+
+  await expect(
+    canvas.getByText("Value: #DB2777"),
+  ).toBeInTheDocument()
+})
+
+test("a custom color is applied from the hex field and the trigger reads its code", async () => {
+  const { body, canvas } = await openInteractive()
+
+  await userEvent.click(
+    body.getByRole("option", { name: "Custom color…" }),
+  )
+
+  const hexInput = expectAgentDrivable(canvas, {
+    name: "Hex code",
+    role: "textbox",
+  })
+
+  await waitFor(() => {
+    expect(hexInput).toHaveFocus()
+  })
+
+  await userEvent.clear(hexInput)
+  await userEvent.type(hexInput, "c2185b{Enter}")
+
+  await waitFor(() => {
+    expectAgentDrivable(canvas, {
+      name: "Interactive color: #C2185B",
+      role: "button",
+    })
+  })
+
+  await expect(
+    canvas.getByText("Value: #C2185B"),
+  ).toBeInTheDocument()
+
+  // Applying closes the panel and returns focus to the trigger.
+  await expect(
+    canvas.queryByRole("textbox", { name: "Hex code" }),
+  ).toBeNull()
+})
+
+test("a hex typed into the search seeds the custom panel", async () => {
+  const { body, canvas, input } = await openInteractive()
+
+  await userEvent.type(input, "7b1fa2")
+
+  await userEvent.click(
+    body.getByRole("option", {
+      name: "Custom color #7B1FA2…",
+    }),
+  )
+
+  await expect(
+    expectAgentDrivable(canvas, {
+      name: "Hex code",
+      role: "textbox",
+    }),
+  ).toHaveValue("#7B1FA2")
+})
+
+test("the app's rule blocks a custom color with its own message", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(CustomPanel)
+
+  await CustomPanel.play?.({
+    canvasElement,
+  } as never)
+
+  const hexInput = expectAgentDrivable(canvas, {
+    name: "Hex code",
+    role: "textbox",
+  })
+
+  await expect(hexInput).toHaveAttribute(
+    "aria-invalid",
+    "true",
+  )
+
+  await expect(
+    canvas.getByText(/Gray, white, and black/),
+  ).toBeInTheDocument()
+
+  await expect(
+    expectAgentDrivable(canvas, {
+      name: "Use color",
+      role: "button",
+    }),
+  ).toBeDisabled()
+
+  await userEvent.clear(hexInput)
+  await userEvent.type(hexInput, "E040FB")
+
+  await waitFor(() => {
+    expect(hexInput).not.toHaveAttribute("aria-invalid")
+  })
+
+  await expect(
+    expectAgentDrivable(canvas, {
+      name: "Use color",
+      role: "button",
+    }),
+  ).toBeEnabled()
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("an unreadable code explains itself and cannot be applied", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(CustomPanel)
+
+  await CustomPanel.play?.({
+    canvasElement,
+  } as never)
+
+  const hexInput = expectAgentDrivable(canvas, {
+    name: "Hex code",
+    role: "textbox",
+  })
+
+  await userEvent.clear(hexInput)
+  await userEvent.type(hexInput, "12345")
+
+  await expect(
+    canvas.getByText(/three or six hex digits/),
+  ).toBeInTheDocument()
+
+  await expect(
+    expectAgentDrivable(canvas, {
+      name: "Use color",
+      role: "button",
+    }),
+  ).toBeDisabled()
+})
+
+test("the color wheel follows the hex field", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(CustomPanel)
+
+  await CustomPanel.play?.({
+    canvasElement,
+  } as never)
+
+  const hexInput = expectAgentDrivable(canvas, {
+    name: "Hex code",
+    role: "textbox",
+  })
+
+  await userEvent.clear(hexInput)
+  await userEvent.type(hexInput, "#0af")
+
+  await expect(
+    canvas.getByLabelText("Rule color: color wheel"),
+  ).toHaveValue("#00aaff")
+})
+
+test("Escape and Cancel drop the draft and keep the value", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(CustomPanel)
+
+  await CustomPanel.play?.({
+    canvasElement,
+  } as never)
+
+  const hexInput = expectAgentDrivable(canvas, {
+    name: "Hex code",
+    role: "textbox",
+  })
+
+  await userEvent.clear(hexInput)
+  await userEvent.type(hexInput, "E040FB{Escape}")
+
+  await expect(
+    canvas.queryByRole("textbox", { name: "Hex code" }),
+  ).toBeNull()
+
+  await expect(
+    canvas.getByText("Value: #808080"),
+  ).toBeInTheDocument()
+})
+
+test("every state is named and has no axe violations", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(AllStates)
+
+  expectAgentDrivable(canvas, {
+    name: "Preset color: Bubblegum",
+    role: "button",
+  })
+  expectAgentDrivable(canvas, {
+    name: "Custom color: #C2185B",
+    role: "button",
+  })
+  expectAgentDrivable(canvas, {
+    name: "Empty color: Choose a color",
+    role: "button",
+  })
+
+  await expect(
+    expectAgentDrivable(canvas, {
+      name: "Disabled color: Purple",
+      role: "button",
+    }),
+  ).toBeDisabled()
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("presets only offers no custom row", async () => {
+  const { body, canvas } = await mountStory(AllStates)
+
+  await userEvent.click(
+    expectAgentDrivable(canvas, {
+      name: "Presets-only color: Green",
+      role: "button",
+    }),
+  )
+
+  await waitFor(() => {
+    expect(
+      body.getAllByRole("option").length,
+    ).toBeGreaterThan(0)
+  })
+
+  await expect(
+    body.queryByRole("option", { name: "Custom color…" }),
+  ).toBeNull()
+})
+
+test("every size renders a named trigger", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(AllVariants)
+
+  for (const size of ["sm", "md", "lg"]) {
+    expectAgentDrivable(canvas, {
+      name: `Color ${size}: Blue`,
+      role: "button",
+    })
+  }
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("a stretched trigger keeps its chevron inside", async () => {
+  const { canvas } = await mountStory(Responsive)
+
+  for (const trigger of canvas.getAllByRole("button", {
+    name: /^Color at .*: Cotton Candy$/,
+  })) {
+    const triggerBox = trigger.getBoundingClientRect()
+    const chevronBox = (
+      trigger.querySelector("svg") as SVGElement
+    ).getBoundingClientRect()
+
+    await expect(trigger.scrollWidth).toBe(
+      trigger.clientWidth,
+    )
+    await expect(chevronBox.right).toBeLessThanOrEqual(
+      triggerBox.right,
+    )
+  }
+})
+
+test.each([
+  ["3a86ff", "#3A86FF"],
+  ["#3A86FF", "#3A86FF"],
+  [" #38f ", "#3388FF"],
+  ["abc", "#AABBCC"],
+  ["12345", null],
+  ["#GGGGGG", null],
+  ["#3A86FF80", null],
+  ["", null],
+])("parseHexColor(%j) is %j", (text, expected) => {
+  expect(parseHexColor(text)).toBe(expected)
+})