Testing

Verify Liquidify semantics, state contracts, overlays, and visual rendering.

Test the public behavior a user can perceive: semantic roles, accessible names, value changes, focus movement, dismissal, and disabled state. Avoid assertions against internal lq-* classes or the SVG filter graph.

import { render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import { Toggle } from "@liquidify/react"

it("reports the next checked value", async () => {
  const user = userEvent.setup()
  const changes: boolean[] = []

  render(
    <Toggle
      aria-label="Product updates"
      defaultChecked={false}
      onChange={(checked) => changes.push(checked)}
    />,
  )

  await user.click(screen.getByRole("switch", { name: "Product updates" }))
  expect(changes).toEqual([true])
})

Controlled and uncontrolled cases

For a controlled component, rerender with the next value and verify the rendered state remains owned by the fixture. For an uncontrolled component, assert that interaction updates the component and calls the change handler once.

Overlay cases

Query portal content from the document, not only from the trigger container. Cover keyboard opening, initial focus, focus containment, Escape, scrim dismissal when supported, action callbacks, and focus restoration.

Visual coverage

Material fidelity needs browser screenshots over a non-flat backdrop. Capture light and dark themes, focus and disabled states, and the supported browser paths. Keep semantic interaction tests separate so a visual baseline update cannot hide a behavior regression.

Animations and browser rendering are incomplete in DOM-only test environments. Use a real browser for focus, portals, reduced motion, and material output.