opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-22 05:05:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): use cross-browser compatible assertions in MonacoEditor story (#22337)

Browse Source 
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
This commit is contained in:
Jeremy Ruppel
2026-02-27 08:40:23 -05:00
committed by GitHub
parent a51eb40dca
commit e161083053
1 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/TemplateVersionEditorPage/MonacoEditor.stories.tsx
+13 -10
View File
@@ -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<typeof MonacoEditor> = {
@@ -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");
});
},
};