@charcuterie/ui 4.4.0 → 4.5.1

package/src/markdownEditorCodeMirror/MarkdownView.test.tsx

@@ -9,7 +9,7 @@ import * as stories from "./MarkdownView.stories.tsx"
 
 const {
   AllStates,
-  Default,
+  Playground,
   HostileMarkdown,
   Interactive,
   NestedLinkText,
@@ -26,7 +26,7 @@ const {
  * there is the fix.
  */
 test("there is no toolbar, not a hidden one", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   await expect(canvas.queryAllByRole("toolbar")).toEqual([])
 
@@ -47,7 +47,7 @@ test("there is no toolbar, not a hidden one", async () => {
  * asserted together.
  */
 test("it is an article whose headings are headings", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const article = expectAgentDrivable(canvas, {
     name: "Description",
@@ -86,12 +86,28 @@ test("it is an article whose headings are headings", async () => {
 test("it renders what the editor renders", async () => {
   const { canvas } = await mountStory(SameAsTheEditor)
 
-  const [viewTable, editorTable] =
-    canvas.getAllByRole("table")
-
-  await expect(viewTable).toBeDefined()
-
-  await expect(editorTable).toBeDefined()
+  // ⚠️ WAIT FOR THE COUNT, not for "a table".
+  //
+  // This test is the only one in the file that mounts a story with
+  // BOTH surfaces, so it is the only one that has to wait for
+  // CodeMirror. `MarkdownView` paints its table in the first commit;
+  // CodeMirror parses and decorates the document afterwards. A
+  // synchronous `getAllByRole("table")` therefore returned ONE table
+  // on a slow runner, `editorTable` was `undefined`, and the failure
+  // read "expected undefined to be defined" — which says nothing
+  // about the real cause (CI, 2026-09-14).
+  //
+  // ⚠️ A bare `findAllByRole` does NOT fix it. `findAllBy*` retries
+  // until the query matches AT LEAST ONE element, and one element is
+  // exactly the broken state: the view's table is there from the
+  // start. The count is the condition, so the count goes in the wait.
+  const [viewTable, editorTable] = await waitFor(() => {
+    const tables = canvas.getAllByRole("table")
+
+    expect(tables).toHaveLength(2)
+
+    return tables
+  })
 
   const toCellText = (table: HTMLElement) =>
     Array.from(table.querySelectorAll("th, td")).map(
@@ -103,10 +119,16 @@ test("it renders what the editor renders", async () => {
   ).toEqual(toCellText(editorTable as HTMLElement))
 
   // Three task boxes in each, and the first one ticked in each.
-  const checkboxes: HTMLInputElement[] =
-    canvas.getAllByRole("checkbox")
+  // Same wait, same reason: CodeMirror's boxes arrive with its
+  // decorations, so a count taken too early sees only the view's.
+  const checkboxes = await waitFor(() => {
+    const boxes: HTMLInputElement[] =
+      canvas.getAllByRole("checkbox")
 
-  await expect(checkboxes).toHaveLength(6)
+    expect(boxes).toHaveLength(6)
+
+    return boxes
+  })
 
   await expect(
     checkboxes.filter((checkbox) => checkbox.checked),
@@ -114,11 +136,13 @@ test("it renders what the editor renders", async () => {
 
   // The bare URL, autolinked on both sides with nothing typed
   // around it.
-  await expect(
-    canvas.getAllByText(
-      "https://example.invalid/product?id=1234",
-    ).length,
-  ).toBe(2)
+  await waitFor(() => {
+    expect(
+      canvas.getAllByText(
+        "https://example.invalid/product?id=1234",
+      ),
+    ).toHaveLength(2)
+  })
 })
 
 /**
@@ -265,7 +289,7 @@ test("hostile markdown renders as characters, not as behaviour", async () => {
  * else noticing.
  */
 test("the text can be selected", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const article = canvas.getByRole("article")
 
@@ -360,7 +384,7 @@ test.each([
  * survives a change to the base font size.
  */
 test("the document is set at prose leading", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const article = canvas.getByRole("article")
 
@@ -379,7 +403,7 @@ test("the document is set at prose leading", async () => {
  * backticks comes out as a wall of emphasis nobody asked for.
  */
 test("a code span is smaller than the prose it sits in", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const article = canvas.getByRole("article")
 

package/src/reactRouter/ReactRouterAdapter.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import {
   MemoryRouter,
@@ -92,7 +93,8 @@ const EpisodePage = () => (
  * `TextLink` becomes a soft navigation and `Main` keeps the
  * reader's place because `ReactRouterAdapter` is above them both.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   render: () => (
     <MemoryRouter initialEntries={["/library"]}>
       <ReactRouterAdapter>

package/src/reactRouter/ReactRouterAdapter.test.tsx

@@ -11,7 +11,7 @@ import {
 } from "../viewport.testHelpers.ts"
 import * as stories from "./ReactRouterAdapter.stories.tsx"
 
-const { Default } = composeStories(stories)
+const { Playground } = composeStories(stories)
 
 // The offsets are module state, so they outlive a mount. A test
 // must not.
@@ -33,7 +33,7 @@ afterEach(() => {
 test("an app renders one component and gets both seams", async () => {
   await setViewport(DESKTOP)
 
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const main = canvas.getByRole("main")