fix(site): fix StreamingCodeFence storybook flake (#23681)

This commit is contained in:
Danielle Maywood
2026-03-26 17:00:47 +00:00
committed by GitHub
parent 8da45c14bc
commit d4fc4e0837
@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from "@storybook/react-vite"; import type { Meta, StoryObj } from "@storybook/react-vite";
import { expect, within } from "storybook/test"; import { expect, waitFor, within } from "storybook/test";
import { Response } from "./response"; import { Response } from "./response";
const sampleMarkdown = ` const sampleMarkdown = `
@@ -125,15 +125,21 @@ export const StreamingInlineMarkdown: Story = {
// Verifies that an incomplete fenced code block in streaming mode // Verifies that an incomplete fenced code block in streaming mode
// renders inside a code element rather than showing raw backticks. // renders inside a code element rather than showing raw backticks.
// The FileViewer renders a <diffs-container> web component whose
// content lives in Shadow DOM, so we assert on DOM structure rather
// than text content inside the web component.
export const StreamingCodeFence: Story = { export const StreamingCodeFence: Story = {
args: { args: {
children: "```ts\nconst x = 1", children: "```ts\nconst x = 1",
streaming: true, streaming: true,
}, },
play: async ({ canvasElement }) => { play: async ({ canvasElement }) => {
const canvas = within(canvasElement); // The code fence should be parsed into a FileViewer (web component),
const codeContent = await canvas.findByText(/const x = 1/); // not rendered as raw backtick text.
expect(codeContent).toBeInTheDocument(); await waitFor(() => {
const viewer = canvasElement.querySelector("diffs-container");
expect(viewer).toBeInTheDocument();
});
// The raw triple-backtick should not appear as visible text. // The raw triple-backtick should not appear as visible text.
const bodyText = canvasElement.textContent ?? ""; const bodyText = canvasElement.textContent ?? "";
expect(bodyText).not.toContain("```"); expect(bodyText).not.toContain("```");