From e161083053804fe001f5b5c4da44dc6d5bb564c6 Mon Sep 17 00:00:00 2001 From: Jeremy Ruppel Date: Fri, 27 Feb 2026 08:40:23 -0500 Subject: [PATCH] fix(site): use cross-browser compatible assertions in MonacoEditor story (#22337) Switch to asserting only on the onChange spy, which is the actual component contract being tested. Monaco's textarea value is always empty regardless of model content, so the toHaveValue assertions were unreliable anyway. Fixes the new storybook test introduced in #22202 --- .../MonacoEditor.stories.tsx | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/site/src/pages/TemplateVersionEditorPage/MonacoEditor.stories.tsx b/site/src/pages/TemplateVersionEditorPage/MonacoEditor.stories.tsx index cbafff62f5..d380a645ff 100644 --- a/site/src/pages/TemplateVersionEditorPage/MonacoEditor.stories.tsx +++ b/site/src/pages/TemplateVersionEditorPage/MonacoEditor.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import * as monaco from "monaco-editor"; -import { expect, fn, within } from "storybook/test"; +import { expect, fn, waitFor } from "storybook/test"; import { MonacoEditor } from "./MonacoEditor"; const meta: Meta = { @@ -58,23 +58,26 @@ export const WithOnChangeHandler: Story = { // Monaco's textarea does not receive or fire events directly. Instead, we // have to interact with the editor's model and then assert that the // onChange callback was called with the new value. - async play({ args, canvasElement }) { - const canvas = within(canvasElement); - const editor = canvas.getByRole("textbox"); + async play({ args, canvas }) { + await waitFor(() => canvas.getByRole("textbox")); // there's only one model in the story + await waitFor(() => expect(monaco.editor.getModels()).toHaveLength(1)); + const model = monaco.editor.getModels()[0]; model.setValue(""); - await expect(editor).toHaveValue(""); - await expect(args.onChange).toHaveBeenCalledOnce(); - await expect(args.onChange).toHaveBeenCalledWith(""); + await waitFor(async () => { + await expect(args.onChange).toHaveBeenCalledOnce(); + await expect(args.onChange).toHaveBeenCalledWith(""); + }); model.setValue("fnord"); - await expect(editor).toHaveValue("fnord"); - await expect(args.onChange).toHaveBeenCalledTimes(2); - await expect(args.onChange).toHaveBeenLastCalledWith("fnord"); + await waitFor(async () => { + await expect(args.onChange).toHaveBeenCalledTimes(2); + await expect(args.onChange).toHaveBeenLastCalledWith("fnord"); + }); }, };