Closes #252: port vanilla-DOM tests to React Testing Library
Rewrites the 27 DOM-behavior test files (dialogs, sidebar, spawn form, command bar, structured pane, catalog, multiview, theme, etc.) to use screen/within/fireEvent/waitFor instead of manual querySelector and dispatchEvent. Pure-logic test files (matcher, tree, activity, paths, reconnect, keys, webgl, paneTitle, commands, daemonLink, events, layout, persistence, previewSchedule, projectList, spawnSimilar, structuredDiff, toolIcon, fastForward, spawnForm) are untouched, and preview.test.ts needed no changes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
8304ef9a49
commit
c9562ab5eb
@@ -1,5 +1,7 @@
|
||||
// @vitest-environment happy-dom
|
||||
import "@testing-library/jest-dom/vitest";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import { fireEvent, within } from "@testing-library/react";
|
||||
|
||||
import { createSpawnForm, type SpawnFormHandle, type SpawnFormValues } from "./spawnForm.js";
|
||||
|
||||
@@ -54,6 +56,14 @@ describe("spawnForm preset selection vs. late /api/info (#76)", () => {
|
||||
for (let i = 0; i < 40; i++) await Promise.resolve();
|
||||
}
|
||||
|
||||
// Tiles fold their icon's accessible name into the button's computed name,
|
||||
// so lookups go by the stable `data-id` rather than by accessible role/name.
|
||||
function tileById(form: HTMLFormElement, id: string): HTMLButtonElement {
|
||||
return [...form.querySelectorAll<HTMLButtonElement>(".harness-card")].find(
|
||||
(t) => t.dataset.id === id,
|
||||
)!;
|
||||
}
|
||||
|
||||
it("keeps an operator-picked tile after /api/info resolves late", async () => {
|
||||
const { resolveInfo } = stubDeferredInfo();
|
||||
let values: SpawnFormValues | undefined;
|
||||
@@ -63,11 +73,9 @@ describe("spawnForm preset selection vs. late /api/info (#76)", () => {
|
||||
await drain();
|
||||
|
||||
// Fallback presets are up; the operator picks "zsh" before /api/info lands.
|
||||
const zshTile = [...form.querySelectorAll<HTMLButtonElement>(".harness-card")].find(
|
||||
(t) => t.dataset.id === "zsh",
|
||||
)!;
|
||||
zshTile.click();
|
||||
expect(zshTile.classList.contains("is-active")).toBe(true);
|
||||
const zshTile = tileById(form, "zsh");
|
||||
fireEvent.click(zshTile);
|
||||
expect(zshTile).toHaveClass("is-active");
|
||||
|
||||
// /api/info lands late with a preset list that doesn't even include "zsh".
|
||||
resolveInfo();
|
||||
@@ -88,13 +96,9 @@ describe("spawnForm preset selection vs. late /api/info (#76)", () => {
|
||||
document.body.appendChild(form);
|
||||
await drain();
|
||||
|
||||
const customTile = [...form.querySelectorAll<HTMLButtonElement>(".harness-card")].find(
|
||||
(t) => t.dataset.id === "custom",
|
||||
)!;
|
||||
customTile.click();
|
||||
const cmdRaw = form.querySelector<HTMLInputElement>(".cmd-raw")!;
|
||||
cmdRaw.value = "htop";
|
||||
cmdRaw.dispatchEvent(new Event("input"));
|
||||
fireEvent.click(tileById(form, "custom"));
|
||||
const cmdRaw = within(form).getByPlaceholderText("bash -l") as HTMLInputElement;
|
||||
fireEvent.input(cmdRaw, { target: { value: "htop" } });
|
||||
|
||||
resolveInfo();
|
||||
await drain();
|
||||
@@ -116,9 +120,6 @@ describe("spawnForm preset selection vs. late /api/info (#76)", () => {
|
||||
|
||||
// Untouched: the refined preset list is still free to settle the command.
|
||||
expect(values?.command).toBe("claude");
|
||||
const fishTile = [...form.querySelectorAll<HTMLButtonElement>(".harness-card")].find(
|
||||
(t) => t.dataset.id === "fish",
|
||||
);
|
||||
expect(fishTile).toBeDefined();
|
||||
expect(tileById(form, "fish")).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user