agent_coder
2d30ad1fa2
The reasoning block memoized its markdown render on [trimmed] alone, so as the
reasoning text streamed in it re-parsed the whole, ever-growing text (marked +
DOMPurify) on every throttled delta (~20Hz) — an O(n^2) CPU storm that pinned the
main thread and froze the chat during a long "thinking" phase. Worse, the block is
collapsed by default, so all that parsing was for a hidden body the user never sees
(html is only shown inside <Collapse in={open}>).
Gate the parse on `open`: collapsed shows the cheap raw-text fallback and does no
markdown parsing; expanding parses the current text once (an instant user click), and
further streaming while open is the normal per-delta append render, like the answer.
Test: assert renderChatMarkdown is not called while collapsed and is called once on
expand.
closes #302
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
88 lines
3.8 KiB
TypeScript
88 lines
3.8 KiB
TypeScript
import { describe, it, expect, vi } from "vitest";
|
|
import { render, screen, fireEvent } from "@testing-library/react";
|
|
import { MantineProvider } from "@mantine/core";
|
|
|
|
// Spy on the markdown renderer so we can assert it is NOT called while the block
|
|
// is collapsed (the #302 fix) and IS called once on expand. The count/fallback
|
|
// tests don't depend on real markdown, so a light stub is safe.
|
|
vi.mock("@/features/ai-chat/utils/markdown.ts", () => ({
|
|
renderChatMarkdown: vi.fn((md: string) => `<p>${md}</p>`),
|
|
}));
|
|
|
|
// Stub react-i18next so `t` returns the key with `{{count}}` interpolated. This
|
|
// keeps the assertions on the component's OWN count logic (authoritative vs
|
|
// estimate) rather than on translation, and mirrors the t-mock pattern used by
|
|
// other component tests in the repo.
|
|
vi.mock("react-i18next", () => ({
|
|
useTranslation: () => ({
|
|
t: (key: string, opts?: { count?: number }) =>
|
|
opts && typeof opts.count === "number"
|
|
? key.replace("{{count}}", String(opts.count))
|
|
: key,
|
|
}),
|
|
}));
|
|
|
|
import ReasoningBlock from "./reasoning-block";
|
|
import { estimateTokens } from "@/features/ai-chat/utils/count-stream-tokens.ts";
|
|
import { renderChatMarkdown } from "@/features/ai-chat/utils/markdown.ts";
|
|
|
|
// matchMedia (read by MantineProvider) is stubbed globally in vitest.setup.ts.
|
|
|
|
function renderBlock(props: { text: string; tokens?: number }) {
|
|
return render(
|
|
<MantineProvider>
|
|
<ReasoningBlock {...props} />
|
|
</MantineProvider>,
|
|
);
|
|
}
|
|
|
|
describe("ReasoningBlock", () => {
|
|
it("shows the authoritative count in the header when tokens > 0", () => {
|
|
// Text "thinking…" estimates to ceil(9/4) = 3, but the authoritative 42
|
|
// must win, so the header shows 42 (and NOT the 3-token estimate).
|
|
renderBlock({ text: "thinking…", tokens: 42 });
|
|
expect(screen.getByText("Thinking · 42 tokens")).toBeDefined();
|
|
expect(screen.queryByText("Thinking · 3 tokens")).toBeNull();
|
|
});
|
|
|
|
it("falls back to the text-length estimate when no authoritative tokens", () => {
|
|
const text = "some reasoning prose that streams in";
|
|
const estimate = estimateTokens(text);
|
|
renderBlock({ text });
|
|
expect(estimate).toBeGreaterThan(0);
|
|
expect(screen.getByText(new RegExp(`${estimate} tokens`))).toBeDefined();
|
|
});
|
|
|
|
it("header-only when text is empty but an authoritative count is present", () => {
|
|
renderBlock({ text: "", tokens: 17 });
|
|
expect(screen.getByText(/17 tokens/)).toBeDefined();
|
|
// No disclosure body to expand: the toggle button is disabled.
|
|
const button = screen.getByRole("button");
|
|
expect((button as HTMLButtonElement).disabled).toBe(true);
|
|
});
|
|
|
|
it("renders the reasoning body (markdown or raw-text fallback)", () => {
|
|
renderBlock({ text: "**bold** reasoning", tokens: 5 });
|
|
// The toggle is enabled because there IS body text to expand.
|
|
const button = screen.getByRole("button");
|
|
expect((button as HTMLButtonElement).disabled).toBe(false);
|
|
// The body prose renders (markdown -> sanitized html, or raw-text fallback);
|
|
// either way the text is present in the document.
|
|
expect(screen.getByText(/reasoning/)).toBeDefined();
|
|
});
|
|
|
|
it("does not parse the reasoning markdown while collapsed; parses on expand (#302)", () => {
|
|
const renderSpy = vi.mocked(renderChatMarkdown);
|
|
renderSpy.mockClear();
|
|
renderBlock({ text: "**bold** reasoning", tokens: 5 });
|
|
// Collapsed is the default. The expensive markdown parse (marked + DOMPurify)
|
|
// must NOT run for the hidden body — that O(n^2) re-parse on every streamed
|
|
// delta is exactly what froze the chat (#302). The collapsed body shows the
|
|
// cheap raw-text fallback instead.
|
|
expect(renderSpy).not.toHaveBeenCalled();
|
|
// Expanding parses the current text exactly once (a user-initiated click).
|
|
fireEvent.click(screen.getByRole("button"));
|
|
expect(renderSpy).toHaveBeenCalledTimes(1);
|
|
});
|
|
});
|