,
);
+ const { container } = screen;
const table = container.querySelector("table")!;
const viewport = table.closest
('[data-slot="scroll-area-viewport"]')!;
const cell = table.tBodies[0]!.rows[0]!.cells[0]!;
@@ -252,9 +234,11 @@
it.each(["", "", "", "", "", ""])(
"preserves unmatched %s without linking later blocks",
async (token) => {
- const container = await renderText(
+ setup();
+ await using screen = await renderText(
`- **"From ${token}"** appears in the header.\n\n- **Tests:** cover inheritance.\n\nThe deferred move continues on B.\n\nSee the link.`,
);
+ const { container } = screen;
expect(container.querySelector("strong")?.textContent).toBe(`"From ${token}"`);
expect(linkTexts(container)).toEqual(["the link"]);
expect(container.querySelectorAll("li")).toHaveLength(2);
@@ -267,29 +251,37 @@
it.each([" ", "more
\n"])(
"preserves a paired anchor closing in the raw block %s",
async (closing) => {
- const container = await renderText(`See label\n\n${closing}\n\nfinish`);
+ setup();
+ await using screen = await renderText(`See label\n\n${closing}\n\nfinish`);
+ const { container } = screen;
expect(container.querySelector("p")?.textContent).toBe("See label");
},
);
it("preserves a paired anchor after comment-looking raw text", async () => {
+ setup();
- const container = await renderText("See label -->");
+ await using screen = await renderText("See label -->");
+ const { container } = screen;
expect(container.querySelector("p")?.textContent).toBe("See label -->");
});
it.each(["", 'more
', ''])(
"ignores apparent closing anchors inside %s",
async (html) => {
+ setup();
+ await using screen = await renderText(`Before .\n\n${html}\n\nAfter.`);
+ const { container } = screen;
- const container = await renderText(`Before .\n\n${html}\n\nAfter.`);
expect(container.querySelector("p")?.textContent).toBe("Before .");
expect(container.querySelectorAll("a")).toHaveLength(0);
},
);
it("preserves paired HTML anchors, details, markdown links, and inline code", async () => {
- const container = await renderText(
+ setup();
+ await using screen = await renderText(
'Bare label, , ``, and [docs](https://example.com).\n\nMore
DetailsPinned
\n\n## Install\n\n## Install',
{ parseRawHtml: true },
);
+ const { container } = screen;
expect([...container.querySelectorAll("h2")].map((heading) => heading.id)).toEqual([
"user-content-setup",
"user-content-setup-1",
@@ -1022,43 +1079,50 @@
["backslashes", String.raw`[Open](C:\Users\shawn\project\src\main.ts)`],
["reference links", "[Open][source]\n\n[source]: C:/Users/shawn/project/src/main.ts"],
])("resolves %s to the workspace file", async (_, text) => {
+ setup();
for (const parseRawHtml of [true, false]) {
+ await using screen = await renderWindows(text, parseRawHtml);
- const container = await renderWindows(text, parseRawHtml);
+ const { container } = screen;
expect(fileHrefs(container)).toEqual(["C:/Users/shawn/project/src/main.ts"]);
}
});
it("keeps backslashes CommonMark would read as escapes", async () => {
+ setup();
for (const parseRawHtml of [true, false]) {
- const container = await renderWindows(
+ await using screen = await renderWindows(
String.raw`[settings](C:\Users\shawn\.claude\settings.json)`,
parseRawHtml,
);
+ const { container } = screen;
expect(fileHrefs(container)).toEqual(["C:/Users/shawn/.claude/settings.json"]);
}
});
it("distinguishes same-named backslash paths but not the same file twice", async () => {
+ setup();
for (const parseRawHtml of [true, false]) {
+ await using distinct = await renderWindows(
- const distinct = await renderWindows(
String.raw`[Source](C:\Users\shawn\project\src\index.ts) and [Test](C:\Users\shawn\project\test\index.ts)`,
parseRawHtml,
);
- expect(distinct.textContent).toContain("index.ts · project/src");
+ expect(distinct.container.textContent).toContain("index.ts · project/src");
+ expect(distinct.container.textContent).toContain("index.ts · project/test");
- expect(distinct.textContent).toContain("index.ts · project/test");
const path = String.raw`C:\Users\shawn\project\src\main.ts`;
- const same = await renderWindows(`[Source](${path}) and \`${path}\``, parseRawHtml);
- expect(fileHrefs(same)).toHaveLength(2);
- expect(same.textContent).not.toContain("main.ts ·");
+ await using same = await renderWindows(`[Source](${path}) and \`${path}\``, parseRawHtml);
+ expect(fileHrefs(same.container)).toHaveLength(2);
+ expect(same.container.textContent).not.toContain("main.ts ·");
}
});
it("still rejects unsafe schemes", async () => {
+ setup();
for (const parseRawHtml of [true, false]) {
+ await using screen = await renderWindows(
- const container = await renderWindows(
"[unsafe](javascript:alert(1)) and [unknown](d:alert(1))",
parseRawHtml,
);
+ const { container } = screen;
expect(container.innerHTML).not.toContain("javascript:");
expect(container.innerHTML).not.toContain("d:alert");
expect(fileHrefs(container)).toEqual([]);
@@ -1070,14 +1134,16 @@
it.each([true, false])(
"scrolls a table-of-contents link to its heading without touching the URL (parseRawHtml=%s)",
async (parseRawHtml) => {
- const scrollIntoView = vi
+ setup();
+ using scrollIntoView = vi
.spyOn(HTMLElement.prototype, "scrollIntoView")
.mockImplementation(() => {});
const href = window.location.href;
- const container = await renderText(
+ await using screen = await renderText(
"- [Operating model](#1-operating-model)\n- [Missing](#nowhere)\n\n## 1. Operating model\n\n## 1. Operating model",
{ parseRawHtml },
);
+ const { container } = screen;
const headings = [...container.querySelectorAll("h2")];
expect(headings.map((heading) => heading.id)).toEqual([
"user-content-1-operating-model",
@@ -1117,15 +1183,17 @@
}
const frame = () =>
act(() => new Promise((resolve) => requestAnimationFrame(() => resolve())));
+ // Highlights live in a document-wide registry the rendered tree does not own.
+ const clearHighlights = () => ({ [Symbol.dispose]: () => CSS.highlights.clear() });
const activeHighlights = () =>
[...(CSS.highlights.get("t3-thread-find-active") ?? [])].map((range) =>
(range as Range).toString(),
);
it("opens a disclosure only when find selects a match inside it", async () => {
+ setup();
+ using _highlights = clearHighlights();
- const container = document.body.appendChild(document.createElement("div"));
- const root = createRoot(container);
- roots.push(root);
+ const container = document.createElement("div");
const markdown = (
);
+ const probe = (query: string, activeOccurrence: number) => (
+
+ {markdown}
+
+ );
+ await using screen = await render(probe("", 0), { container });
const show = (query: string, activeOccurrence: number) =>
+ screen.rerender(probe(query, activeOccurrence));
- act(() =>
- root.render(
-
- {markdown}
- ,
- ),
- );
const openStates = () =>
[...container.querySelectorAll("[data-markdown-details-open]")].map(
(node) => node.dataset.markdownDetailsOpen,
);
- await show("", 0);
expect(container.textContent).not.toContain("nothing here");
await show("needle", 0);
await frame();
@@ -1166,24 +1233,21 @@
});
it("keeps Mermaid diagrams rendered until find selects a match in their source", async () => {
+ setup();
+ using _highlights = clearHighlights();
+ const container = document.createElement("div");
- const container = document.body.appendChild(document.createElement("div"));
- const root = createRoot(container);
- roots.push(root);
const diagram = "```mermaid\ngraph TD; Alpha-->Beta\n```";
+ const probe = (query: string) => (
+
+
+
- const show = (query: string) =>
+ );
- act(() =>
- root.render(
-
-
- ,
- ),
- );
const diagrams = () => container.querySelectorAll('svg[aria-label="Diagram"]').length;
- await show("Needle");
+ await using screen = await render(probe("Needle"), { container });
await frame();
expect(diagrams()).toBe(2);
- await show("Alpha");
+ await screen.rerender(probe("Alpha"));
await frame();
await frame();
expect(diagrams()).toBe(1);
@@ -1224,23 +1288,22 @@
])(
"highlights the indexed occurrences of $query in $text",
async ({ text, query, count, lineBreaks, user, withTemplate }) => {
+ setup();
const skills = [{ name: "test-t3-app", displayName: "T3 App Testing" }];
- const container = document.body.appendChild(document.createElement("div"));
- const root = createRoot(container);
- roots.push(root);
+ using _highlights = clearHighlights();
+ const container = document.createElement("div");
+ await using _screen = await render(
+
+ undefined : undefined}
+ />
+ ,
+ { container },
- await act(() =>
- root.render(
-
- undefined : undefined}
- />
- ,
- ),
);
await frame();
// Lazy blocks such as Mermaid can swap their source text after the first frame,
@@ -1290,17 +1353,19 @@
relative: "reports/report.csv",
},
])("copies $name and shows the copied text", async ({ platform, cwd, href, full, relative }) => {
+ setup();
+ using _platform = vi.spyOn(navigator, "platform", "get").mockReturnValue(platform);
- vi.spyOn(navigator, "platform", "get").mockReturnValue(platform);
+ using _clipboardItem = stubGlobal("ClipboardItem", undefined);
+ using writeText = vi.spyOn(navigator.clipboard, "writeText").mockResolvedValue(undefined);
+ using toast = vi.spyOn(toastManager, "add");
- vi.stubGlobal("ClipboardItem", undefined);
- const writeText = vi.spyOn(navigator.clipboard, "writeText").mockResolvedValue(undefined);
- const toast = vi.spyOn(toastManager, "add");
const api = readLocalApi();
if (!api) throw new Error("Local API unavailable");
- const choose = vi.spyOn(api.contextMenu, "show");
- const container = await renderText(`[File](<${href}>)`, {
+ using choose = vi.spyOn(api.contextMenu, "show");
+ await using screen = await renderText(`[File](<${href}>)`, {
cwd,
environmentId: EnvironmentId.make("env-file-copy"),
});
+ const { container } = screen;
const link = container.querySelector(".chat-markdown-file-link");
if (!link) throw new Error("File link unavailable");
for (const [action, expected] of [
@@ -1324,21 +1389,24 @@
options: Partial[0]> = {},
) => {
settingsOverrides.mathRenderingEnabled = true;
+ await using stack = new AsyncDisposableStack();
+ const screen = stack.use(
- const { container: host } = await render(
- ,
+ await render(),
);
+ screen.container.setAttribute("data-assistant-citation-source", "assistant");
- host.setAttribute("data-assistant-citation-source", "assistant");
await act(async () => {
await import("./chat/MathTypeset");
});
+ stack.move();
- return { host };
+ return screen;
};
it.each(["$x$", "$$x$$", "```math\nx\n```", "$\\notACommand{x}$"])(
"keeps keyboard focus on the parent control in compact previews of %s",
async (formula) => {
+ setup();
settingsOverrides.mathRenderingEnabled = true;
- const { container } = await render(
+ await using screen = await render(
<>