fix(downloads): media-library UI review fixes (E7)
Deep-review remediation on the frontend, all findings adversarially verified: - LibraryPlayer picks audio vs video from the canonical media_kind (single source), not a hardcoded container whitelist, so an uploaded audio file with an uncommon/absent container renders in <audio> instead of a broken video box (legacy null media_kind keeps the heuristic). - UploadDialog aborts the in-flight upload when the dialog is closed by X/ESC/backdrop/Back (not only the footer Cancel); drag highlight uses an enter/leave depth counter to stop the flicker; the progress bar gets a stable role=progressbar aria-label with the value on aria-valuenow. - DownloadCenter's Shared tab renders honest loading/error states instead of a blank panel, and the library/shared row-action gating moves to a single tested helper (lib/downloadActions). Tests: downloadActions gating matrix, the uploadReq XHR path (abort/401/422-localize/onerror), and the media_kind-driven audio/video branch. i18n: downloads.upload.uploadProgress (HU + EN).
This commit is contained in:
@@ -0,0 +1,119 @@
|
||||
// @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 } = vi.hoisted(() => ({
|
||||
reportError: vi.fn(),
|
||||
notify: vi.fn(() => 1),
|
||||
remove: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("../errorDialog", () => ({ reportError }));
|
||||
vi.mock("../notifications", () => ({ notify, remove }));
|
||||
vi.mock("../../i18n", () => ({ default: { t: (k: string) => k, language: "en" } }));
|
||||
vi.mock("../activeAccount", () => ({
|
||||
activeAccountId: () => null,
|
||||
ACTIVE_ACCOUNT_KEY: "k",
|
||||
notifyActiveAccountChange: vi.fn(),
|
||||
}));
|
||||
|
||||
import { uploadReq, setUnauthorizedHandler, HttpError } 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<string, string> = {};
|
||||
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();
|
||||
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();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user