mirror of
https://github.com/mountain-loop/yaak.git
synced 2026-11-13 12:13:42 +01:00
Gregory SchierandClaude Opus 5.5
7ece5fa5df
The actions row moves out of the code editor into ActionsBar, a plain component a wrapper places over its content. FormatAction reformats an editor through its ref, and BodyViewModeSwitch names its first state for the body's format (Pretty, Table, Parts, Preview, Form) next to Raw. Yaak Proxy's request and response body tabs now share one viewer choice, with the switch in each tab's bar beside the text viewer's filter. The choice is remembered for both panes; bodies over the large size open raw. "Response (Raw)" leaves the proxy's tab menu, while Yaak's response pane keeps it until the remaining sites move. SegmentedControl moves from the client into packages/ui. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
55 lines
2.0 KiB
TypeScript
55 lines
2.0 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 three 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>,
|
|
CONTROL_TOOLTIP_DELAY: 0,
|
|
Tooltip: ({ children }: { children: ReactNode }) => <>{children}</>,
|
|
}));
|
|
|
|
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 cut body says how much was kept", () => {
|
|
const html = render({ data: data(true), isLoading: false, error: null });
|
|
expect(html).toContain("EDITOR");
|
|
expect(html).toContain('data-banner="notice"');
|
|
expect(html).toContain("kept");
|
|
});
|
|
});
|