peter
63a0fecc8b
A pure move (git mv, history kept): 333 files leave components/, which now holds only the platform layer (ui/) and the legal pages. The shell is the frame (App, header, nav rail, palette, boot); each page lives in modules/<page>/ with its rail, store and tests; what several pages share sits in features/<name>/; the shared-link page is watch/. Domain-free helpers went straight to ui/ (ViewSwitcher, FilterRail, the confirm dialog, the language switcher, the copy rows). Every relative specifier was rewritten (imports, dynamic imports, vi.mock, new URL), and the contract tests that scan sources now scan the whole app source, not only components/ — each glob was counted before and after so none went green over fewer files. The locale-format rule matched `/src/components/` only, so the move would have taken ~300 files out from under its i18n-singleton check; it now covers every folder that holds components, with a test per folder.
598 lines
26 KiB
TypeScript
598 lines
26 KiB
TypeScript
// @vitest-environment jsdom
|
|
//
|
|
// The issue composer. It drafts the steps from the session, saves as it goes (the rendered
|
|
// text included — the export is built from what it SAVED), reopens as it was left, takes a log line
|
|
// out of the evidence in the review, adds a pasted image, and a sent session is read-only. i18n is a
|
|
// key-passthrough with its params; the API is stubbed.
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
|
|
import type { DebugDraft, DebugSession, ServerLogRow } from "../../lib/api";
|
|
import { qk } from "../../lib/queryKeys";
|
|
|
|
vi.mock("react-i18next", async (importOriginal) => {
|
|
const actual = await importOriginal<typeof import("react-i18next")>();
|
|
return {
|
|
...actual,
|
|
useTranslation: () => ({
|
|
t: (key: string, opts?: Record<string, unknown>) =>
|
|
opts && Object.keys(opts).length ? `${key}:${Object.values(opts).join(",")}` : key,
|
|
i18n: { language: "en" },
|
|
}),
|
|
};
|
|
});
|
|
|
|
const api = vi.hoisted(() => ({
|
|
session: null as unknown as DebugSession,
|
|
rows: [] as ServerLogRow[],
|
|
saved: [] as DebugDraft[],
|
|
uploaded: [] as Blob[],
|
|
failSession: false,
|
|
failShots: false,
|
|
sent: 0,
|
|
previewed: [] as string[],
|
|
// What happened, in order: a save is "save" when asked and "saved" when it answered.
|
|
order: [] as string[],
|
|
holdSend: null as Promise<void> | null,
|
|
// The server's half-failure: the issue is committed, then an upload dies and the call 422s.
|
|
failSendAfterCreate: false,
|
|
}));
|
|
vi.mock("../../lib/api", async (importOriginal) => {
|
|
const actual = await importOriginal<typeof import("../../lib/api")>();
|
|
return {
|
|
...actual,
|
|
api: {
|
|
...actual.api,
|
|
debugSession: () =>
|
|
api.failSession ? Promise.reject(new Error("down")) : Promise.resolve(api.session),
|
|
debugSessionEvents: () => Promise.resolve({ items: api.rows, total: api.rows.length }),
|
|
debugScreenshots: () =>
|
|
api.failShots ? Promise.reject(new Error("down")) : Promise.resolve({ items: [] }),
|
|
saveDebugDraft: (_id: string, draft: DebugDraft) => {
|
|
api.saved.push(draft);
|
|
api.order.push("save");
|
|
// Answers a task later, so a caller that does not wait for it is seen not waiting.
|
|
return new Promise((resolve) =>
|
|
setTimeout(() => {
|
|
api.order.push("saved");
|
|
resolve({ ok: true, session: { ...api.session, draft } });
|
|
}, 0),
|
|
);
|
|
},
|
|
addDebugScreenshot: (_id: string, image: Blob) => {
|
|
api.uploaded.push(image);
|
|
return Promise.resolve({
|
|
ok: true,
|
|
screenshot: { id: 1, mime: image.type, size: 4, created_at: "" },
|
|
});
|
|
},
|
|
debugExport: () => {
|
|
api.order.push("export");
|
|
return Promise.resolve({ blob: new Blob(["zip"]), name: "siftlode-debug.zip" });
|
|
},
|
|
sendDebugIssue: async () => {
|
|
api.order.push("send");
|
|
if (api.holdSend) await api.holdSend;
|
|
api.sent += 1;
|
|
api.session = {
|
|
...api.session,
|
|
issue_url: "https://git.example/o/r/issues/7",
|
|
pending_files: api.failSendAfterCreate ? ["server.log"] : [],
|
|
// What the server does on the way through: a send that got there shows the images too,
|
|
// so the banner (and the Retry in it) goes. Leaving this true made the retry's own
|
|
// banner outlive its success, which is not a state the server can produce.
|
|
images_pending: false,
|
|
};
|
|
if (api.failSendAfterCreate) throw new Error("issues_unreachable");
|
|
return { ok: true as const, session: api.session };
|
|
},
|
|
previewDebugIssue: (_id: string, text: string) => {
|
|
api.previewed.push(text);
|
|
return Promise.resolve({ ok: true, html: "<h3>Steps</h3><script>alert(1)</script>" });
|
|
},
|
|
},
|
|
};
|
|
});
|
|
|
|
import IssueComposer from "./IssueComposer";
|
|
|
|
const SID = "0123456789abcdef";
|
|
let n = 1;
|
|
const row = (over: Partial<ServerLogRow>): ServerLogRow => ({
|
|
id: n++,
|
|
ts: "2026-09-19T14:05:31.000Z",
|
|
level: "INFO",
|
|
source: "web",
|
|
logger: "web",
|
|
event: "x.y",
|
|
msg: "m",
|
|
attrs: null,
|
|
exc: null,
|
|
request_id: null,
|
|
user_id: 1,
|
|
job_id: null,
|
|
run_id: null,
|
|
debug_session_id: SID,
|
|
version: null,
|
|
...over,
|
|
});
|
|
const baseSession = (over: Partial<DebugSession> = {}): DebugSession => ({
|
|
id: SID,
|
|
level: "DEBUG",
|
|
started_at: "2026-09-19T14:02:00.000Z",
|
|
until: "2026-09-19T15:02:00.000Z",
|
|
ended_at: "2026-09-19T14:16:00.000Z",
|
|
ended_reason: "stopped",
|
|
issue_url: null,
|
|
pending_files: [],
|
|
images_pending: false,
|
|
sending: false,
|
|
screenshots: 0,
|
|
draft: null,
|
|
...over,
|
|
});
|
|
|
|
beforeEach(() => {
|
|
api.session = baseSession();
|
|
api.rows = [
|
|
row({ event: "debug.step", msg: "resume", attrs: { n: 1, label: "Resume" } }),
|
|
row({ event: "ui.click", msg: "private click" }),
|
|
row({ source: "api", event: "http.request", msg: "GET /api/x 200" }),
|
|
];
|
|
api.saved = [];
|
|
api.uploaded = [];
|
|
api.failSession = false;
|
|
api.failShots = false;
|
|
api.order = [];
|
|
api.holdSend = null;
|
|
api.failSendAfterCreate = false;
|
|
api.sent = 0;
|
|
api.previewed = [];
|
|
tracker = null;
|
|
});
|
|
afterEach(() => {
|
|
cleanup();
|
|
vi.useRealTimers();
|
|
vi.restoreAllMocks();
|
|
});
|
|
|
|
let tracker: { repo: string } | null = null;
|
|
|
|
function mount() {
|
|
const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
|
qc.setQueryData(qk.me(), { id: 1, issues: tracker });
|
|
render(
|
|
<QueryClientProvider client={qc}>
|
|
<IssueComposer id={SID} />
|
|
</QueryClientProvider>,
|
|
);
|
|
}
|
|
|
|
/** jsdom lays nothing out, so every element reads as hidden to the dialog's focus rules. */
|
|
const layOut = () =>
|
|
vi.spyOn(HTMLElement.prototype, "offsetParent", "get").mockReturnValue(document.body);
|
|
const lastSaved = () => api.saved[api.saved.length - 1]!;
|
|
const title = () => screen.getByLabelText("recorder.composer.fieldTitle") as HTMLInputElement;
|
|
/** A button once it can be pressed: `loading` holds it while the draft's first save settles. */
|
|
async function ready(name: string): Promise<HTMLButtonElement> {
|
|
const button = (await screen.findByRole("button", { name })) as HTMLButtonElement;
|
|
await waitFor(() => expect(button.disabled).toBe(false));
|
|
return button;
|
|
}
|
|
|
|
describe("the issue composer", () => {
|
|
it("drafts the steps from the session and saves the rendered text after a pause", async () => {
|
|
mount();
|
|
const first = await screen.findByLabelText("recorder.composer.stepLabel:1");
|
|
expect((first as HTMLInputElement).value).toBe("Resume");
|
|
fireEvent.change(screen.getByLabelText("recorder.composer.fieldTitle"), {
|
|
target: { value: "Spinner stays" },
|
|
});
|
|
await waitFor(() => expect(api.saved.length).toBeGreaterThan(0), { timeout: 2000 });
|
|
expect(lastSaved().title).toBe("Spinner stays");
|
|
expect(lastSaved().body).toContain("1. Resume");
|
|
expect(lastSaved().body).toContain("`client.log` — recorder.issue.clientLog:2");
|
|
});
|
|
|
|
it("reopens a saved draft as it was left", async () => {
|
|
api.session = baseSession({
|
|
draft: {
|
|
title: "Saved title",
|
|
body: "",
|
|
excluded: [],
|
|
form: {
|
|
title: "Saved title",
|
|
description: "kept",
|
|
steps: [{ id: "m1", kind: "manual", text: "typed" }],
|
|
excluded: [],
|
|
},
|
|
},
|
|
});
|
|
mount();
|
|
expect(
|
|
((await screen.findByLabelText("recorder.composer.fieldTitle")) as HTMLInputElement).value,
|
|
).toBe("Saved title");
|
|
expect((screen.getByLabelText("recorder.composer.stepLabel:1") as HTMLInputElement).value).toBe(
|
|
"typed",
|
|
);
|
|
});
|
|
|
|
it("takes an unticked line out of the evidence", async () => {
|
|
mount();
|
|
fireEvent.click(
|
|
(await screen.findAllByRole("button", { name: "recorder.composer.review" }))[0]!,
|
|
);
|
|
fireEvent.click(
|
|
screen.getByRole("checkbox", { name: "recorder.composer.keepRow:ui.click,private click" }),
|
|
);
|
|
fireEvent.click(screen.getByRole("button", { name: "recorder.composer.reviewDone" }));
|
|
expect(screen.getByText(/recorder.composer.linesKept:1,2/)).not.toBeNull();
|
|
await waitFor(() => expect(api.saved.length).toBeGreaterThan(0), { timeout: 2000 });
|
|
const clickId = api.rows[1]!.id;
|
|
expect(lastSaved().excluded).toEqual([clickId]);
|
|
expect(lastSaved().body).toContain("recorder.issue.clientLog:1");
|
|
});
|
|
|
|
it("adds a pasted image, and nothing else that was pasted", async () => {
|
|
mount();
|
|
const zone = (await screen.findByText("recorder.composer.attachments")).parentElement!;
|
|
const png = new File([new Uint8Array([137, 80, 78, 71])], "shot.png", { type: "image/png" });
|
|
const text = new File(["hi"], "note.txt", { type: "text/plain" });
|
|
fireEvent.paste(zone, { clipboardData: { files: [png, text] } });
|
|
await waitFor(() => expect(api.uploaded).toHaveLength(1));
|
|
expect(api.uploaded[0]!.type).toBe("image/png");
|
|
});
|
|
|
|
it("takes a dropped or picked image, and nothing else", async () => {
|
|
mount();
|
|
const zone = (await screen.findByText(/recorder.composer.drop/)).closest("div")!;
|
|
const png = new File([new Uint8Array([137, 80, 78, 71])], "a.png", { type: "image/png" });
|
|
const pdf = new File(["%PDF"], "a.pdf", { type: "application/pdf" });
|
|
fireEvent.drop(zone, { dataTransfer: { files: [pdf, png] } });
|
|
await waitFor(() => expect(api.uploaded).toHaveLength(1));
|
|
expect(api.uploaded[0]!.type).toBe("image/png");
|
|
});
|
|
|
|
it("takes an image pasted while typing, anywhere in the composer", async () => {
|
|
mount();
|
|
await screen.findByText("recorder.composer.attachments");
|
|
const png = new File([new Uint8Array([137, 80, 78, 71])], "shot.png", { type: "image/png" });
|
|
fireEvent.paste(title(), { clipboardData: { files: [png] } });
|
|
await waitFor(() => expect(api.uploaded).toHaveLength(1));
|
|
});
|
|
|
|
it("saves an edit still waiting when it is closed", async () => {
|
|
mount();
|
|
await ready("recorder.composer.export");
|
|
fireEvent.change(title(), { target: { value: "Typed and closed" } });
|
|
cleanup(); // closed well inside the pause
|
|
await waitFor(() => expect(api.saved).toHaveLength(1));
|
|
expect(lastSaved().title).toBe("Typed and closed");
|
|
});
|
|
|
|
it("does not call a newer edit saved", async () => {
|
|
mount();
|
|
await ready("recorder.composer.export");
|
|
fireEvent.change(title(), { target: { value: "one" } });
|
|
expect(
|
|
await screen.findByText("recorder.composer.saved", {}, { timeout: 2000 }),
|
|
).not.toBeNull();
|
|
fireEvent.change(title(), { target: { value: "two" } });
|
|
expect(screen.queryByText("recorder.composer.saved")).toBeNull();
|
|
});
|
|
|
|
it("says so when the screenshots cannot be read, and still counts them from the session", async () => {
|
|
api.failShots = true;
|
|
api.session = baseSession({ screenshots: 2 });
|
|
mount();
|
|
expect(await screen.findByText("recorder.composer.shotsFailed")).not.toBeNull();
|
|
// Everything still works: the images are the one thing that could not be listed.
|
|
expect(screen.queryByText("recorder.composer.attachments")).not.toBeNull();
|
|
expect(
|
|
(screen.getByRole("button", { name: "recorder.composer.export" }) as HTMLButtonElement)
|
|
.disabled,
|
|
).toBe(false);
|
|
// Including the control standing right beside the failed list: more can still be added.
|
|
expect(screen.queryByText("recorder.composer.pick")).not.toBeNull();
|
|
// The draft is still saved — and says two screenshots, the server's own count, not none.
|
|
fireEvent.change(title(), { target: { value: "x" } });
|
|
await waitFor(() => expect(api.saved).toHaveLength(1), { timeout: 2000 });
|
|
expect(lastSaved().body).toContain("recorder.issue.screenshots:2");
|
|
});
|
|
|
|
it("says a send is under way instead of calling it half-failed, and holds the draft", async () => {
|
|
// Every step of a send commits its progress, so a reload or a second tab reads exactly the
|
|
// shape of a send that STOPPED. Only the server can tell the two apart — and it does.
|
|
api.session = baseSession({
|
|
issue_url: "https://git.example/o/r/issues/7",
|
|
pending_files: ["server.log", "screenshot-1.png"],
|
|
sending: true,
|
|
});
|
|
mount();
|
|
expect(await screen.findByText("recorder.composer.sendingNow")).not.toBeNull();
|
|
expect(screen.queryByText(/recorder.composer.partial/)).toBeNull();
|
|
// No retry to press: it would only be refused while the send it invites is still running.
|
|
expect(screen.queryByRole("button", { name: "recorder.composer.retry" })).toBeNull();
|
|
fireEvent.change(title(), { target: { value: "typed while it went out" } });
|
|
await new Promise((r) => setTimeout(r, 1000));
|
|
expect(api.saved).toHaveLength(0);
|
|
});
|
|
|
|
it("holds the draft through a first send, before there is an issue to point at", async () => {
|
|
tracker = { repo: "o/r" };
|
|
// A send with no issue_url yet is what the read-only lock is for: an edit made mid-flight
|
|
// would be saved over the very body the send is at that moment uploading, and the issue that
|
|
// arrives would be neither draft. The half-sent case above is locked by its link instead.
|
|
api.session = baseSession({ sending: true });
|
|
mount();
|
|
expect(await screen.findByText("recorder.composer.sendingNow")).not.toBeNull();
|
|
fireEvent.change(title(), { target: { value: "typed mid-flight" } });
|
|
await new Promise((r) => setTimeout(r, 1000));
|
|
expect(api.saved).toHaveLength(0);
|
|
// Nor can a screenshot join what is already on its way up.
|
|
expect(screen.queryByText("recorder.composer.pick")).toBeNull();
|
|
// And the button that would start a SECOND send is out — the server would only refuse it.
|
|
expect(
|
|
(screen.getByRole("button", { name: "recorder.composer.send" }) as HTMLButtonElement)
|
|
.disabled,
|
|
).toBe(true);
|
|
});
|
|
|
|
it("announces the half-sent banner instead of only drawing it", async () => {
|
|
// A screen-reader user hears the failure toast — "couldn't send the report" — and nothing else.
|
|
// WHICH attachments are missing, and that a Retry now stands beside them, live only in this
|
|
// banner, which is inserted already carrying its first message. A live region created together
|
|
// with its content is unreliably announced (the rule ui/Toaster.tsx states and follows), so the
|
|
// announcement has to come from a ROLE, which announces on insertion.
|
|
api.session = baseSession({
|
|
issue_url: "https://git.example/o/r/issues/7",
|
|
pending_files: ["server.log"],
|
|
});
|
|
mount();
|
|
const said = await screen.findByText(/recorder\.composer\.partial/);
|
|
const announced = said.closest('[role="status"]');
|
|
expect(announced).not.toBeNull();
|
|
// ...and the Retry is inside what gets read out, not left behind silently beside it.
|
|
expect(announced!.querySelector("button")).not.toBeNull();
|
|
});
|
|
|
|
it("hands the focus on when a send half-fails, not only when it works", async () => {
|
|
tracker = { repo: "o/r" };
|
|
// The issue is created and an upload then dies, so the call FAILS with the link already
|
|
// committed. The refetch brings the link back, `sent` flips, and "Create issue" — the control
|
|
// holding the focus — unmounts under it. Without a hand-off the focus lands on <body> in the
|
|
// middle of an open dialog: a screen reader loses its place and the Retry that just appeared
|
|
// is several Tabs away, past the dialog's own ✕.
|
|
api.failSendAfterCreate = true;
|
|
mount();
|
|
const send = (await ready("recorder.composer.send")) as HTMLButtonElement;
|
|
send.focus();
|
|
expect(document.activeElement).toBe(send);
|
|
fireEvent.click(send);
|
|
await waitFor(() => expect(api.sent).toBe(1));
|
|
const retry = await screen.findByRole("button", { name: "recorder.composer.retry" });
|
|
await waitFor(() => expect(document.activeElement).toBe(retry));
|
|
expect(screen.queryByRole("button", { name: "recorder.composer.send" })).toBeNull();
|
|
});
|
|
|
|
it("still builds the zip while a send holds the draft, instead of saving into a refusal", async () => {
|
|
tracker = { repo: "o/r" };
|
|
// The zip is the only way out of a send that is stuck — a claim left by a dead request stands
|
|
// for ten minutes. Its pre-save is pointless here (the draft is frozen, and the server would
|
|
// 409 `issue_sending` and take the export down with it), and unnecessary: `GET /export` has no
|
|
// send guard and builds from the saved draft, which is exactly what the send is uploading.
|
|
api.session = baseSession({ sending: true });
|
|
const click = vi.spyOn(HTMLAnchorElement.prototype, "click");
|
|
click.mockImplementation(() => void api.order.push("click"));
|
|
const real = { make: URL.createObjectURL, revoke: URL.revokeObjectURL };
|
|
URL.createObjectURL = () => "blob:zip";
|
|
URL.revokeObjectURL = () => {};
|
|
try {
|
|
mount();
|
|
expect(await screen.findByText("recorder.composer.sendingNow")).not.toBeNull();
|
|
fireEvent.click(await ready("recorder.composer.export"));
|
|
await waitFor(() => expect(click).toHaveBeenCalled());
|
|
expect(api.order).toEqual(["export", "click"]);
|
|
expect(api.saved).toHaveLength(0);
|
|
} finally {
|
|
click.mockRestore();
|
|
URL.createObjectURL = real.make;
|
|
URL.revokeObjectURL = real.revoke;
|
|
}
|
|
});
|
|
|
|
it("asks to show the images, not to send what is already there", async () => {
|
|
tracker = { repo: "o/r" };
|
|
api.session = baseSession({
|
|
issue_url: "https://git.example/o/r/issues/7",
|
|
images_pending: true,
|
|
});
|
|
mount();
|
|
await screen.findByText("recorder.composer.partialImages");
|
|
// Nothing is missing from the issue here — only its text has still to show what it carries.
|
|
expect(screen.queryByRole("button", { name: "recorder.composer.retry" })).toBeNull();
|
|
fireEvent.click(screen.getByRole("button", { name: "recorder.composer.retryImages" }));
|
|
await waitFor(() => expect(api.sent).toBe(1));
|
|
// The button just pressed is gone with its banner: the focus goes to what takes its place,
|
|
// not to <body> in the middle of an open dialog.
|
|
await waitFor(() =>
|
|
expect(document.activeElement?.getAttribute("href")).toBe("https://git.example/o/r/issues/7"),
|
|
);
|
|
});
|
|
|
|
it("leaves an image pasted into a dialog opened over it alone", async () => {
|
|
mount();
|
|
await screen.findByText("recorder.composer.attachments");
|
|
const above = document.createElement("div");
|
|
above.setAttribute("aria-modal", "true");
|
|
const field = document.createElement("input");
|
|
above.appendChild(field);
|
|
document.body.appendChild(above);
|
|
const png = new File([new Uint8Array([137, 80, 78, 71])], "shot.png", { type: "image/png" });
|
|
fireEvent.paste(field, { clipboardData: { files: [png] } });
|
|
await new Promise((r) => setTimeout(r, 50));
|
|
expect(api.uploaded).toHaveLength(0);
|
|
above.remove();
|
|
});
|
|
|
|
it("moves the focus to what stays when a control goes", async () => {
|
|
mount();
|
|
fireEvent.click(
|
|
(await screen.findAllByRole("button", { name: "recorder.composer.review" }))[0]!,
|
|
);
|
|
const done = screen.getByRole("button", { name: "recorder.composer.reviewDone" });
|
|
expect(document.activeElement).toBe(done);
|
|
fireEvent.click(done);
|
|
expect(document.activeElement).toBe(
|
|
screen.getAllByRole("button", { name: "recorder.composer.review" })[0],
|
|
);
|
|
fireEvent.click(screen.getByRole("button", { name: "recorder.composer.removeStep:1" }));
|
|
expect(document.activeElement).toBe(
|
|
screen.getByRole("button", { name: "recorder.composer.addStep" }),
|
|
);
|
|
});
|
|
|
|
it("leaves a paste without an image to the field it was typed into", async () => {
|
|
mount();
|
|
const zone = (await screen.findByText("recorder.composer.attachments")).parentElement!;
|
|
const pasted = fireEvent.paste(zone, { clipboardData: { files: [] } });
|
|
expect(pasted).toBe(true); // not prevented
|
|
expect(api.uploaded).toHaveLength(0);
|
|
});
|
|
|
|
it("saves before it asks for the zip, and hands it to the browser", async () => {
|
|
const click = vi.spyOn(HTMLAnchorElement.prototype, "click");
|
|
click.mockImplementation(() => void api.order.push("click"));
|
|
const urls = { made: 0, revoked: 0 };
|
|
// jsdom implements neither, so there is nothing to spy on: they are DEFINED here — and put
|
|
// back afterwards, or every later test in this file would keep running against them.
|
|
const real = { make: URL.createObjectURL, revoke: URL.revokeObjectURL };
|
|
URL.createObjectURL = () => {
|
|
urls.made += 1;
|
|
return "blob:zip";
|
|
};
|
|
URL.revokeObjectURL = () => void (urls.revoked += 1);
|
|
mount();
|
|
fireEvent.click(await ready("recorder.composer.export"));
|
|
await waitFor(() => expect(click).toHaveBeenCalled());
|
|
// A request, not a bare navigation: a refusal (the export's own pace) is shown like any other.
|
|
expect(api.order).toEqual(["save", "saved", "export", "click"]);
|
|
expect([urls.made, urls.revoked]).toEqual([1, 1]);
|
|
click.mockRestore();
|
|
URL.createObjectURL = real.make;
|
|
URL.revokeObjectURL = real.revoke;
|
|
});
|
|
|
|
it("a sent session is read-only and links its issue", async () => {
|
|
api.session = baseSession({ issue_url: "https://git.example/o/r/issues/7" });
|
|
mount();
|
|
const link = await screen.findByRole("link", { name: /recorder.composer.openIssue/ });
|
|
expect(link.getAttribute("href")).toBe("https://git.example/o/r/issues/7");
|
|
const title = screen.getByLabelText("recorder.composer.fieldTitle") as HTMLInputElement;
|
|
expect(title.readOnly).toBe(true);
|
|
expect(screen.queryByRole("button", { name: /recorder.composer.addStep/ })).toBeNull();
|
|
});
|
|
|
|
it("opens on the title, not on the Edit / Preview switch above it", async () => {
|
|
// The form arrives after the dialog opens; its first control is the switch, and the focus
|
|
// landed there — typing went nowhere.
|
|
layOut();
|
|
mount();
|
|
await waitFor(() => expect(document.activeElement).toBe(title()));
|
|
});
|
|
|
|
it("moves to the title once a retried load brings the form", async () => {
|
|
layOut();
|
|
api.failSession = true;
|
|
mount();
|
|
const message = await screen.findByText("recorder.composer.loadFailed");
|
|
api.failSession = false;
|
|
fireEvent.click(within(message.closest('[role="alert"]')!).getByRole("button"));
|
|
await waitFor(() => expect(document.activeElement).toBe(title()));
|
|
});
|
|
|
|
it("says so when the session cannot be loaded, with a retry", async () => {
|
|
api.failSession = true;
|
|
mount();
|
|
const message = await screen.findByText("recorder.composer.loadFailed");
|
|
expect(within(message.closest('[role="alert"]')!).getByRole("button")).not.toBeNull();
|
|
});
|
|
|
|
it("offers the tracker only where one is set up, and sends the saved draft", async () => {
|
|
mount();
|
|
await screen.findByRole("button", { name: "recorder.composer.export" });
|
|
expect(screen.queryByRole("button", { name: "recorder.composer.send" })).toBeNull();
|
|
cleanup();
|
|
|
|
tracker = { repo: "o/r" };
|
|
mount();
|
|
expect(await screen.findByText("recorder.composer.target:o/r")).not.toBeNull();
|
|
fireEvent.click(await ready("recorder.composer.send"));
|
|
await waitFor(() => expect(api.sent).toBe(1));
|
|
// Saved, and answered, first: the issue is built from what was saved.
|
|
expect(api.order).toEqual(["save", "saved", "send"]);
|
|
expect(await screen.findByRole("link", { name: /recorder.composer.openIssue/ })).not.toBeNull();
|
|
});
|
|
|
|
it("holds the draft while it is being sent", async () => {
|
|
tracker = { repo: "o/r" };
|
|
let release = () => {};
|
|
api.holdSend = new Promise((r) => (release = r));
|
|
mount();
|
|
fireEvent.click(await ready("recorder.composer.send"));
|
|
await waitFor(() => expect(api.order).toContain("send"));
|
|
// What is typed now would not reach the issue: the fields do not take it.
|
|
expect(title().readOnly).toBe(true);
|
|
expect(screen.queryByRole("button", { name: /recorder.composer.addStep/ })).toBeNull();
|
|
release();
|
|
await waitFor(() => expect(api.sent).toBe(1));
|
|
});
|
|
|
|
it("finishes a send that stopped half-way, and says what is missing", async () => {
|
|
tracker = { repo: "o/r" };
|
|
api.session = baseSession({
|
|
issue_url: "https://git.example/o/r/issues/7",
|
|
pending_files: ["server.log"],
|
|
});
|
|
mount();
|
|
expect(await screen.findByText("recorder.composer.partial:server.log")).not.toBeNull();
|
|
fireEvent.click(screen.getByRole("button", { name: "recorder.composer.retry" }));
|
|
await waitFor(() => expect(api.sent).toBe(1));
|
|
expect(api.saved).toHaveLength(0); // sent: nothing to save, only the rest to send
|
|
});
|
|
|
|
it("returns the focus to a reviewed log once, not on every way back from the preview", async () => {
|
|
mount();
|
|
fireEvent.click(
|
|
(await screen.findAllByRole("button", { name: "recorder.composer.review" }))[0]!,
|
|
);
|
|
fireEvent.click(screen.getByRole("button", { name: "recorder.composer.reviewDone" }));
|
|
const review = screen.getAllByRole("button", { name: "recorder.composer.review" })[0];
|
|
expect(document.activeElement).toBe(review);
|
|
fireEvent.click(screen.getByRole("button", { name: "recorder.composer.preview" }));
|
|
const edit = screen.getByRole("button", { name: "recorder.composer.edit" });
|
|
edit.focus();
|
|
fireEvent.click(edit);
|
|
await screen.findAllByRole("button", { name: "recorder.composer.review" });
|
|
expect(document.activeElement).toBe(edit); // the toggle keeps it; the log's button does not take it
|
|
});
|
|
|
|
it("previews through the tracker in a frame where no script runs", async () => {
|
|
tracker = { repo: "o/r" };
|
|
mount();
|
|
fireEvent.click(await screen.findByRole("button", { name: "recorder.composer.preview" }));
|
|
const frame = (await screen.findByTitle("recorder.composer.previewTitle")) as HTMLIFrameElement;
|
|
expect(frame.getAttribute("sandbox")).not.toContain("allow-scripts");
|
|
expect(frame.getAttribute("srcdoc")).toContain("<h3>Steps</h3>");
|
|
expect(api.previewed[0]).toContain("1. Resume");
|
|
});
|
|
|
|
it("previews the zip's own text where there is no tracker", async () => {
|
|
mount();
|
|
fireEvent.click(await screen.findByRole("button", { name: "recorder.composer.preview" }));
|
|
expect(screen.getByText(/1\. Resume/).tagName).toBe("PRE");
|
|
expect(api.previewed).toHaveLength(0);
|
|
});
|
|
});
|