mirror of
https://github.com/mountain-loop/yaak.git
synced 2026-11-13 12:13:42 +01:00
Gregory SchierandClaude Fable 5.2
35058cc3be
Apply the approved wording table: labels stay short, explanations are one full sentence about the user's traffic, and detail moves behind an info icon on the first-run card, the body banners, the Settings Helper row and the rejected card. One word per thing: traffic and flows, recorded, truncated, domains, searches, the CLI, Retry. Backend messages that reach the window change with them, with the tests and harness fixtures that assert on the old text. The two working files for the pass are removed from the branch. Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { renderToStaticMarkup } from "react-dom/server";
|
|
import { describe, expect, test, vi } from "vite-plus/test";
|
|
import type { FlowBodyData } from "../lib/flowViews";
|
|
import { FlowRequestBody } from "./FlowRequestBody";
|
|
|
|
// The package's index reaches for the window as it loads; these four are all this renders.
|
|
vi.mock("@yaakapp-internal/ui", () => ({
|
|
Banner: ({ children, color }: { children: ReactNode; color?: string }) => (
|
|
<div data-banner={color}>{children}</div>
|
|
),
|
|
EmptyStateText: ({ children }: { children: ReactNode }) => <div>{children}</div>,
|
|
LoadingIcon: () => <span>LOADING</span>,
|
|
IconTooltip: ({ content }: { content: string }) => <span data-tooltip={content} />,
|
|
}));
|
|
|
|
const data = (truncated = false): FlowBodyData => ({
|
|
bytes: new TextEncoder().encode('{"a":1}'),
|
|
truncated,
|
|
storedSize: 7,
|
|
});
|
|
|
|
function render(body: Parameters<typeof FlowRequestBody>[0]["body"]) {
|
|
return renderToStaticMarkup(
|
|
<FlowRequestBody body={body} viewer={<div>EDITOR</div>} requestSize={2048} />,
|
|
);
|
|
}
|
|
|
|
describe("FlowRequestBody", () => {
|
|
test("a body that failed to load says why, not that there is none", () => {
|
|
const html = render({ data: undefined, isLoading: false, error: new Error("Key unavailable") });
|
|
expect(html).toContain('data-banner="danger"');
|
|
expect(html).toContain("Key unavailable");
|
|
expect(html).not.toContain("EDITOR");
|
|
});
|
|
|
|
test("shows it is loading while the body is read", () => {
|
|
const html = render({ data: undefined, isLoading: true, error: null });
|
|
expect(html).not.toContain("EDITOR");
|
|
expect(html).toContain("LOADING");
|
|
});
|
|
|
|
test("the viewer once loaded", () => {
|
|
expect(render({ data: data(), isLoading: false, error: null })).toContain("EDITOR");
|
|
});
|
|
|
|
test("a truncated body says how much is shown, and why behind its info icon", () => {
|
|
const html = render({ data: data(true), isLoading: false, error: null });
|
|
expect(html).toContain("EDITOR");
|
|
expect(html).toContain('data-banner="notice"');
|
|
expect(html.replaceAll("<!-- -->", "")).toContain("The first 7 B of 2 KB is shown.");
|
|
expect(html).toContain(
|
|
'data-tooltip="The body was truncated at the capture limit. The app sent all of it."',
|
|
);
|
|
});
|
|
});
|