Skip to content

test: cover drag-reorder, per-editor validation, and a11y on stable stories#58

Merged
zhawtof merged 1 commit into
mainfrom
claude/eager-maxwell-8336ca
May 16, 2026
Merged

test: cover drag-reorder, per-editor validation, and a11y on stable stories#58
zhawtof merged 1 commit into
mainfrom
claude/eager-maxwell-8336ca

Conversation

@zhawtof
Copy link
Copy Markdown
Contributor

@zhawtof zhawtof commented May 16, 2026

Summary

Adds the three highest-leverage testing gaps identified in the suite audit: end-to-end drag-reorder coverage, payload-level validation around the editor forms, and enforced a11y assertions on stable stories.

Why

The current suite catches type errors and core pure-function regressions, but leaves the most user-visible behaviors uncovered: dnd-kit dragging (zero tests, dep upgrades could silently break the headline UX), editor → Slack payload shape drift (factories validated to "has a type" but not to "Slack would accept it"), and a11y (`addon-a11y` installed but configured as `'todo'` everywhere). These additions are cheap, ride on the existing Storybook + Playwright/chromium infrastructure, and turn the validator dep that's already in production into a safety net.

What changed

  • Drag-reorder play test in block-kitchen.stories.tsx — anchors on visible block text, dispatches `pointerDown` → `pointerMove` (clears the 4px activation distance) → `pointerMove` to drop target → `pointerUp`, then asserts `onChange` resolved with the reordered block types.
  • Per-editor payload validation — new `expectLastOnChangeIsValid` helper in block-editor.stories.tsx plus three new play tests (Header, Markdown, Image) that type into fields and assert the resulting block validates. Existing section test now also asserts validity.
  • Factory validation in unit teststest/public-api.test.ts loops every `defaultPalette` and legacy variant through `toSlackBlocks → validateBlockKit`, the same path the runtime uses.
  • a11y enforced — `a11y: { test: 'error' }` on Button, Palette, Toolbar, and TemplatePicker stories. BlockKitchen and BlockEditor stay on `'todo'` per the existing comment about theme-dependent contrast flags.
  • Vitest configvitest.config.ts inlines `@tightknitai/slack-block-kit-validator` so its extension-less ESM imports route through Vite's resolver. Node's pure ESM resolver rejected them; Storybook's Vite-backed browser project already handled them. One-line workaround for an upstream packaging quirk, no behavior change.

Test plan

  • `pnpm typecheck`
  • `pnpm lint`
  • `pnpm test` — 217 passing (up from 199)

Notes for reviewer

  • The drag-reorder test uses `fireEvent.pointerDown/Move/Up` rather than `userEvent.pointer` so it can explicitly set `isPrimary: true, button: 0, pointerId` — dnd-kit's `PointerSensor` rejects events that don't satisfy those checks, and `PointerEventInit` defaults `isPrimary` to `false`.
  • The factory validation test deliberately throws with the failing variant id in the error message so a regression surfaces the exact broken factory rather than a generic assertion failure.
  • The a11y flip only enforces axe on already-passing stories, so this PR does not fix any new a11y issues — it locks in the current good state.

🤖 Generated with Claude Code

…tories

Three test-coverage additions backing the highest-leverage gaps identified
when auditing the suite:

- A drag-reorder play test in BlockKitchen exercises the headline @dnd-kit
  flow end-to-end (pointerDown → activation move → drop on target row),
  catching dnd-kit regressions on React/dep upgrades.
- Per-editor play tests (Header, Markdown, Image) plus a shared helper
  assert that field edits produce payloads accepted by
  @tightknitai/slack-block-kit-validator, and the palette factory unit
  tests now validate every defaultPalette / legacy variant through the
  same path the runtime uses (toSlackBlocks → validateBlockKit).
- a11y is flipped from "todo" to "error" on the stable stories
  (Button, Palette, Toolbar, TemplatePicker) so axe violations fail CI.

vitest.config.ts inlines the validator package so its extension-less ESM
imports route through Vite's resolver (Node's pure-ESM resolver rejects
them); this is a workaround for an upstream packaging quirk, not a
behavior change.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@cloudflare-workers-and-pages
Copy link
Copy Markdown
Contributor

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
block-kitchen 317a400 Commit Preview URL

Branch Preview URL
May 16 2026, 05:21 PM

@zhawtof zhawtof merged commit f3b073b into main May 16, 2026
12 checks passed
@zhawtof zhawtof deleted the claude/eager-maxwell-8336ca branch May 16, 2026 17:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant