// @vitest-environment jsdom // // uploadReq is the XHR upload path (progress/abort/error/401/4xx-localize) that `fetch`/`req` can't // cover. UploadDialog's DOM test mocks api.uploadDownload wholesale, so without this the abort, 401, // and structured-detail-localize branches ship untested. A controllable fake XMLHttpRequest drives // each lifecycle branch. import { describe, it, expect, beforeEach, vi } from "vitest"; const { reportError, notify, remove, getActiveToasts } = vi.hoisted(() => ({ reportError: vi.fn(), notify: vi.fn(() => 1), remove: vi.fn(), getActiveToasts: vi.fn((): { id: number }[] => []), })); vi.mock("../errorDialog", () => ({ reportError })); vi.mock("../notifications", () => ({ notify, remove, getActiveToasts })); vi.mock("../../i18n", () => ({ default: { t: (k: string) => k, language: "en" } })); vi.mock("../activeAccount", () => ({ activeAccountId: () => null, ACTIVE_ACCOUNT_KEY: "k", notifyActiveAccountChange: vi.fn(), })); import { req, uploadReq, setUnauthorizedHandler, HttpError, alreadyReported } from "./core"; // A fake XHR whose lifecycle the test drives: capture the instance, set status/responseText, then // invoke onload/onerror/abort by hand. class FakeXHR { static last: FakeXHR; status = 0; responseText = ""; withCredentials = false; headers: Record = {}; upload: { onprogress: ((e: ProgressEvent) => void) | null } = { onprogress: null }; onload: (() => void) | null = null; onerror: (() => void) | null = null; onabort: (() => void) | null = null; sent = false; constructor() { FakeXHR.last = this; } open() {} setRequestHeader(k: string, v: string) { this.headers[k] = v; } send() { this.sent = true; } abort() { this.onabort?.(); } } beforeEach(() => { reportError.mockReset(); notify.mockReset(); remove.mockReset(); getActiveToasts.mockReset(); getActiveToasts.mockReturnValue([]); setUnauthorizedHandler(null); vi.stubGlobal("XMLHttpRequest", FakeXHR as unknown as typeof XMLHttpRequest); }); const form = () => new FormData(); describe("uploadReq", () => { it("resolves with the parsed JSON on a 2xx", async () => { const p = uploadReq<{ id: number }>("/u", form()); const x = FakeXHR.last; x.status = 200; x.responseText = '{"id":7}'; x.onload!(); await expect(p).resolves.toEqual({ id: 7 }); }); it("rejects immediately if the signal is already aborted (never sends)", async () => { const ac = new AbortController(); ac.abort(); const p = uploadReq("/u", form(), { signal: ac.signal }); await expect(p).rejects.toBeInstanceOf(HttpError); expect(FakeXHR.last?.sent).not.toBe(true); }); it("aborts the XHR and rejects when the signal fires", async () => { const ac = new AbortController(); const p = uploadReq("/u", form(), { signal: ac.signal }); ac.abort(); // → our abort listener calls xhr.abort() → onabort → reject await expect(p).rejects.toMatchObject({ status: 0 }); }); it("calls the unauthorized handler on 401", async () => { const onUnauth = vi.fn(); setUnauthorizedHandler(onUnauth); const p = uploadReq("/u", form()); const x = FakeXHR.last; x.status = 401; x.onload!(); await expect(p).rejects.toBeInstanceOf(HttpError); expect(onUnauth).toHaveBeenCalledOnce(); expect(reportError).not.toHaveBeenCalled(); }); it("localizes a structured 422 upload_too_large and surfaces the error", async () => { const p = uploadReq("/u", form()); const x = FakeXHR.last; x.status = 422; x.responseText = '{"detail":{"code":"upload_too_large","limit":5}}'; x.onload!(); await expect(p).rejects.toMatchObject({ status: 422 }); // localizeDetail routes upload_too_large → the tooLarge key (t is passthrough in the mock). expect(reportError).toHaveBeenCalledWith("downloads.errors.upload.tooLarge"); }); it("reports a connectivity failure on a network error", async () => { const p = uploadReq("/u", form()); FakeXHR.last.onerror!(); await expect(p).rejects.toMatchObject({ status: 0 }); // The soft self-clearing "connection lost" toast (via notify), not a blocking modal. expect(notify).toHaveBeenCalled(); expect(reportError).not.toHaveBeenCalled(); }); }); describe("req — a structured refusal reads in the user's language", () => { it("names a playlist that is gone instead of passing the server's English through", async () => { // The 404 every playlist route answers when the list was deleted in another tab. It used to be a // bare "Unknown playlist" string, shown verbatim under the Hungarian UI. vi.spyOn(globalThis, "fetch").mockResolvedValue( new Response(JSON.stringify({ detail: { code: "not_found", reason: "playlist" } }), { status: 404, headers: { "content-type": "application/json" }, }), ); await expect(req("/api/playlists/7/items/v1", { method: "DELETE" })).rejects.toMatchObject({ status: 404, detail: "errors.notFound.playlist", }); expect(reportError).not.toHaveBeenCalled(); // a 404 is the caller's to report }); }); describe("req — what it has already put in front of the user", () => { // A caller that toasts a failed action on top of the dialog `req` already opened reported one fault // twice. `alreadyReported` is how `notifyActionError` tells the two apart. const answer = (status: number) => vi.spyOn(globalThis, "fetch").mockResolvedValue( new Response(JSON.stringify({ detail: "x" }), { status, headers: { "content-type": "application/json" }, }), ); it.each([500, 422, 409, 400])("marks a %s it raised the error dialog for", async (status) => { answer(status); const err = await req("/api/x", { method: "POST" }).catch((e: unknown) => e); expect(reportError).toHaveBeenCalled(); expect(alreadyReported(err)).toBe(true); }); it.each([404, 403, 429])("leaves a %s to the caller", async (status) => { answer(status); const err = await req("/api/x", { method: "POST" }).catch((e: unknown) => e); expect(err).toBeInstanceOf(HttpError); expect(alreadyReported(err)).toBe(false); }); it("marks a 401 the app shell handles (it signs the tab out)", async () => { answer(401); const err = await req("/api/x", { method: "POST" }).catch((e: unknown) => e); expect(alreadyReported(err)).toBe(true); }); // The connection notice says the server is unreachable — not that THIS action failed — and it // removes itself on the very next answer (the caller's own resync refetch). Marked as reported, a // delete that hit a keepalive reset flashed the notice and was then reported nowhere at all. it("raises the connection notice for a request that never reached the server, and leaves the failed action to the caller", async () => { vi.spyOn(globalThis, "fetch").mockRejectedValue(new TypeError("Failed to fetch")); const err = await req("/api/x", { method: "POST" }).catch((e: unknown) => e); expect(notify).toHaveBeenCalled(); expect(alreadyReported(err)).toBe(false); }); it.each([502, 503, 504])( "raises the connection notice for a %s, and leaves the failed action to the caller", async (status) => { answer(status); const err = await req("/api/x", { method: "POST" }).catch((e: unknown) => e); expect(notify).toHaveBeenCalled(); expect(reportError).not.toHaveBeenCalled(); expect(err).toMatchObject({ status }); expect(alreadyReported(err)).toBe(false); }, ); it("raises the connection notice again after the user closed it", async () => { vi.spyOn(globalThis, "fetch").mockRejectedValue(new TypeError("Failed to fetch")); notify.mockReturnValue(7); await req("/api/x", { method: "POST" }).catch(() => {}); getActiveToasts.mockReturnValue([{ id: 7 }]); // still on screen: one notice, not a stack notify.mockClear(); await req("/api/x", { method: "POST" }).catch(() => {}); expect(notify).not.toHaveBeenCalled(); getActiveToasts.mockReturnValue([]); // closed with its ✕ await req("/api/x", { method: "POST" }).catch(() => {}); expect(notify).toHaveBeenCalledOnce(); }); it("marks what the upload path reported the same way", async () => { const dead = uploadReq("/u", form()); FakeXHR.last.onerror!(); expect(alreadyReported(await dead.catch((e: unknown) => e))).toBe(false); const refused = uploadReq("/u", form()); FakeXHR.last.status = 500; FakeXHR.last.onload!(); expect(alreadyReported(await refused.catch((e: unknown) => e))).toBe(true); const gone = uploadReq("/u", form()); FakeXHR.last.status = 404; FakeXHR.last.onload!(); expect(alreadyReported(await gone.catch((e: unknown) => e))).toBe(false); }); it("treats a gateway error on the upload path as the connection notice, not a blocking dialog", async () => { // The upload path kept its own copy of this policy, and it had drifted: a 502 opened the // blocking "Server error (502)" dialog and cleared a connection notice that was still true. notify.mockReturnValue(9); vi.spyOn(globalThis, "fetch").mockRejectedValue(new TypeError("Failed to fetch")); await req("/api/x", { method: "POST" }).catch(() => {}); // a notice is up getActiveToasts.mockReturnValue([{ id: 9 }]); remove.mockClear(); const p = uploadReq("/u", form()); FakeXHR.last.status = 502; FakeXHR.last.onload!(); await expect(p).rejects.toMatchObject({ status: 502 }); expect(reportError).not.toHaveBeenCalled(); expect(remove).not.toHaveBeenCalled(); }); });