@charcuterie/ui 3.32.0 → 3.34.0

package/src/RangeSlider/RangeSlider.test.tsx

@@ -0,0 +1,452 @@
+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 "./RangeSlider.stories.tsx"
+
+const { AllStates, BesideTheSlider, Default, Interactive } =
+  composeStories(stories)
+
+/** A fraction along the bar, as viewport coordinates. */
+const pointerAt =
+  (group: HTMLElement) =>
+  (fraction: number): { x: number; y: number } => {
+    const bar = group.getBoundingClientRect()
+
+    return {
+      x: bar.x + bar.width * fraction,
+      y: bar.y + bar.height / 2,
+    }
+  }
+
+/** Everything about a thumb that `../sliderStyles.ts` claims to own. */
+const readThumbStyles = (thumb: Element) => {
+  const style = getComputedStyle(thumb)
+
+  return {
+    backgroundColor: style.backgroundColor,
+    borderColor: style.borderTopColor,
+    borderRadius: style.borderTopLeftRadius,
+    borderWidth: style.borderTopWidth,
+    boxShadow: style.boxShadow,
+    height: style.height,
+    width: style.width,
+  }
+}
+
+test("it is two named sliders inside one named group", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(Default)
+
+  const start = expectAgentDrivable(canvas, {
+    name: "Clip start",
+    role: "slider",
+  })
+
+  const end = expectAgentDrivable(canvas, {
+    name: "Clip end",
+    role: "slider",
+  })
+
+  // The group is what carries the label the two handles are each an
+  // end of. Without it a screen reader announces "Clip start" with
+  // nothing saying the two belong together.
+  expectAgentDrivable(canvas, {
+    name: "Clip",
+    role: "group",
+  })
+
+  await expect(start).toHaveAttribute(
+    "aria-valuenow",
+    "600",
+  )
+
+  await expect(end).toHaveAttribute("aria-valuenow", "1500")
+
+  // Each thumb reports the OTHER as its own bound, which is the
+  // clamping rule said in the only vocabulary a slider has.
+  await expect(start).toHaveAttribute("aria-valuemin", "0")
+
+  await expect(start).toHaveAttribute(
+    "aria-valuemax",
+    "1500",
+  )
+
+  await expect(end).toHaveAttribute("aria-valuemin", "600")
+
+  await expect(end).toHaveAttribute("aria-valuemax", "2700")
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("each thumb takes the arrow keys on its own", async () => {
+  const { canvas } = await mountStory(Interactive)
+
+  const start = expectAgentDrivable(canvas, {
+    name: "Clip start",
+    role: "slider",
+  })
+
+  const end = expectAgentDrivable(canvas, {
+    name: "Clip end",
+    role: "slider",
+  })
+
+  start.focus()
+
+  await userEvent.keyboard("{ArrowRight}")
+
+  await waitFor(() => {
+    expect(start).toHaveAttribute("aria-valuenow", "630")
+  })
+
+  // The other end did not move. That is the whole difference between
+  // two sliders and one widget with a second handle painted on.
+  await expect(end).toHaveAttribute("aria-valuenow", "1500")
+
+  end.focus()
+
+  await userEvent.keyboard("{ArrowUp}{ArrowUp}")
+
+  await waitFor(() => {
+    expect(end).toHaveAttribute("aria-valuenow", "1560")
+  })
+
+  await expect(start).toHaveAttribute(
+    "aria-valuenow",
+    "630",
+  )
+
+  // Ten steps of 30, from the default `largeStep` of a tenth of the
+  // range: a caller should not have to know its own range to get a
+  // sensible page key.
+  await userEvent.keyboard("{PageUp}")
+
+  await waitFor(() => {
+    expect(end).toHaveAttribute("aria-valuenow", "1830")
+  })
+})
+
+/**
+ * The crossing rule, driven rather than argued: the start thumb walks
+ * up into the end thumb, stops **on** it, and is still the start
+ * thumb. A widget that swapped them would report the movement on the
+ * element that no longer has focus.
+ */
+test("a thumb stops on its partner instead of crossing it", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(Interactive)
+
+  const start = expectAgentDrivable(canvas, {
+    name: "Clip start",
+    role: "slider",
+  })
+
+  const end = expectAgentDrivable(canvas, {
+    name: "Clip end",
+    role: "slider",
+  })
+
+  start.focus()
+
+  // End means "as far as THIS thumb may go", which is its partner.
+  await userEvent.keyboard("{End}")
+
+  await waitFor(() => {
+    expect(start).toHaveAttribute("aria-valuenow", "1500")
+  })
+
+  await expect(end).toHaveAttribute("aria-valuenow", "1500")
+
+  // Two more presses past the partner. A start thumb that reached
+  // 1560 would paint a span of negative width, which is invisible
+  // rather than wrong-looking.
+  await userEvent.keyboard("{ArrowRight}{ArrowRight}")
+
+  await expect(start).toHaveAttribute(
+    "aria-valuenow",
+    "1500",
+  )
+
+  // The collapsed pair still says where each handle may go.
+  await expect(start).toHaveAttribute(
+    "aria-valuemax",
+    "1500",
+  )
+
+  await expect(end).toHaveAttribute("aria-valuemin", "1500")
+
+  // Focus never moved to the other handle, so the arrow key and the
+  // value that changed still belong to the same element.
+  await expect(document.activeElement).toBe(start)
+
+  // Collapsed is a state a user can reach, so it is a state that has
+  // to audit clean.
+  await expectNoAxeViolations(canvasElement)
+
+  await userEvent.keyboard("{ArrowLeft}")
+
+  await waitFor(() => {
+    expect(start).toHaveAttribute("aria-valuenow", "1470")
+  })
+})
+
+/**
+ * A press anywhere on the bar picks up the **nearer** thumb and moves
+ * it there. The bar is the pointer target, exactly as it is on
+ * `Slider` — a two-thumb range whose only pointer targets were its
+ * 16px handles would be a control nobody can aim at.
+ *
+ * Driven as a real pointer rather than as dispatched `PointerEvent`s,
+ * for `ReorderList`'s reason: `setPointerCapture` rejects an id that
+ * matches no active pointer, so a synthetic sequence dies inside the
+ * handler before a listener is ever registered. The whole gesture goes
+ * in ONE `userEvent.pointer` call, because the pressed state lives in
+ * that call rather than in the default instance.
+ */
+test("a press on the bar moves the nearer thumb", async () => {
+  const { canvas } = await mountStory(Interactive)
+
+  const group = expectAgentDrivable(canvas, {
+    name: "Clip",
+    role: "group",
+  })
+
+  const start = expectAgentDrivable(canvas, {
+    name: "Clip start",
+    role: "slider",
+  })
+
+  const end = expectAgentDrivable(canvas, {
+    name: "Clip end",
+    role: "slider",
+  })
+
+  const at = pointerAt(group)
+
+  await userEvent.pointer([
+    {
+      coords: at(0.9),
+      keys: "[MouseLeft>]",
+      target: group,
+    },
+    { keys: "[/MouseLeft]" },
+  ])
+
+  // 90% of a 0–2700 range, on a step of 30.
+  await waitFor(() => {
+    expect(end).toHaveAttribute("aria-valuenow", "2430")
+  })
+
+  await expect(start).toHaveAttribute(
+    "aria-valuenow",
+    "600",
+  )
+
+  // Focus follows the grab, so a pointer user reaching for the arrow
+  // keys moves the handle they were just dragging.
+  await expect(document.activeElement).toBe(end)
+})
+
+/**
+ * The pointer half of the crossing rule, and the reason the dragged
+ * thumb is remembered rather than recomputed: halfway through this
+ * gesture the *nearer* thumb becomes the other one, and the handle
+ * under the pointer must not change.
+ */
+test("a drag keeps the thumb it picked up, and stops it on its partner", async () => {
+  const { canvas } = await mountStory(Interactive)
+
+  const group = expectAgentDrivable(canvas, {
+    name: "Clip",
+    role: "group",
+  })
+
+  const start = expectAgentDrivable(canvas, {
+    name: "Clip start",
+    role: "slider",
+  })
+
+  const end = expectAgentDrivable(canvas, {
+    name: "Clip end",
+    role: "slider",
+  })
+
+  const at = pointerAt(group)
+
+  await userEvent.pointer([
+    {
+      coords: at(0.9),
+      keys: "[MouseLeft>]",
+      target: group,
+    },
+    { coords: at(0.5) },
+    { coords: at(0.05) },
+    { keys: "[/MouseLeft]" },
+  ])
+
+  // Dragged well below the start thumb, and stopped on it.
+  await waitFor(() => {
+    expect(end).toHaveAttribute("aria-valuenow", "600")
+  })
+
+  await expect(start).toHaveAttribute(
+    "aria-valuenow",
+    "600",
+  )
+})
+
+test("a disabled range is out of the tab order and does not move", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(AllStates)
+
+  const start = expectAgentDrivable(canvas, {
+    name: "Disabled start",
+    role: "slider",
+  })
+
+  await expect(start).toHaveAttribute(
+    "aria-disabled",
+    "true",
+  )
+
+  await expect(start).toHaveAttribute("tabindex", "-1")
+
+  // The row, not the thumb, carries `pointer-events: none` — the
+  // whole control is inert, including the bar a press would land on.
+  const group = canvas.getByRole("group", {
+    name: "Disabled",
+  })
+
+  await expect(getComputedStyle(group).pointerEvents).toBe(
+    "none",
+  )
+
+  start.focus()
+
+  await userEvent.keyboard("{ArrowRight}")
+
+  await expect(start).toHaveAttribute("aria-valuenow", "30")
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+/**
+ * Read-only is the state that is easy to collapse into `disabled`,
+ * and they are different answers: this one is still focusable and
+ * still full contrast, because both ends of the span are worth
+ * reading even though neither can be changed.
+ */
+test("a read-only range is announced, focusable, and does not move", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(AllStates)
+
+  const end = expectAgentDrivable(canvas, {
+    name: "Read-only end",
+    role: "slider",
+  })
+
+  await expect(end).toHaveAttribute("aria-readonly", "true")
+
+  await expect(end).toHaveAttribute("tabindex", "0")
+
+  await expect(end).not.toHaveAttribute("aria-disabled")
+
+  end.focus()
+
+  await userEvent.keyboard("{ArrowLeft}")
+
+  await expect(end).toHaveAttribute("aria-valuenow", "70")
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+/**
+ * `valueFormat` is the whole reason a media timeline can live in an
+ * app that never taught the library what a timecode is. Without it a
+ * clip announces "600", which is a number of seconds nobody has.
+ */
+test("valueFormat writes aria-valuetext and the shown span", async () => {
+  const { canvas } = await mountStory(AllStates)
+
+  const start = expectAgentDrivable(canvas, {
+    name: "Section start",
+    role: "slider",
+  })
+
+  await expect(start).toHaveAttribute(
+    "aria-valuetext",
+    "10:00",
+  )
+
+  // The raw number is still there for anything that computes with it.
+  await expect(start).toHaveAttribute(
+    "aria-valuenow",
+    "600",
+  )
+
+  // "to", not an en dash: a default is words. Two cells in the story
+  // show this span, so the query is the plural one.
+  await expect(
+    canvas.getAllByText("10:00 to 25:00")[0],
+  ).toBeVisible()
+})
+
+/**
+ * Tick marks are a picture of the app's own chapter list. Each thumb
+ * already announces its own position, so a screen reader reading the
+ * marks would be reading the decoration twice.
+ */
+test("tick labels are drawn and not announced", async () => {
+  const { canvas } = await mountStory(AllStates)
+
+  const chapter = canvas.getByText("Act one")
+
+  await expect(chapter).toBeVisible()
+
+  await expect(
+    chapter.closest("[aria-hidden='true']"),
+  ).not.toBeNull()
+})
+
+/**
+ * The shared bar, asserted rather than trusted.
+ *
+ * `Slider` and `RangeSlider` are separate components and paint one
+ * control, through `../sliderStyles.ts`. "They look the same" written
+ * as two class strings is a promise that survives exactly one edit, so
+ * this compares **computed** styles — the version of the claim a
+ * class-name refactor cannot quietly break.
+ */
+test("a range thumb is a slider thumb", async () => {
+  const { canvas } = await mountStory(BesideTheSlider)
+
+  const slider = expectAgentDrivable(canvas, {
+    name: "Position",
+    role: "slider",
+  })
+
+  // `Slider`'s thumb is decoration hanging off the track, because
+  // there the TRACK is the widget. It is the one element in this
+  // package that has to be reached structurally: giving it a role or
+  // a name would be the bug the component exists to avoid.
+  const sliderThumb = slider.querySelector(
+    ':scope > span[aria-hidden="true"]',
+  )
+
+  if (!sliderThumb) {
+    throw new Error("the slider drew no thumb")
+  }
+
+  const rangeThumb = expectAgentDrivable(canvas, {
+    name: "Section start",
+    role: "slider",
+  })
+
+  expect(readThumbStyles(rangeThumb)).toEqual(
+    readThumbStyles(sliderThumb),
+  )
+})