@prenta/admin 2.6.1 → 2.8.0

package/dist/__tests__/views/jobs-list.render.test.js

@@ -0,0 +1,697 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { StrictMode } from 'react';
+/*
+ * The Jobs list (P-17): kit copy and states, client-side filters and counts,
+ * the Live refresh (cadence, backoff, timeout, clock offset), a stable
+ * progress cell, the empty and error states, and focus around the list's
+ * actions. The refresh's GETs are answered by the `fetch` stub, the actions'
+ * POSTs by the `cmsApi` mock, both from `server` below.
+ */
+const MIN = 60_000;
+const server = {
+    jobs: [],
+    // Both are set by resetServer() before each test.
+    worker: {},
+    listError: null,
+    listHangs: false,
+    workerError: null,
+    clockOffsetMs: 0,
+    calls: [],
+    post: () => ({ error: 'not stubbed', status: 500 }),
+};
+vi.mock('../../lib/api.js', () => ({
+    getApiBase: () => '/api/cms',
+    cmsApi: vi.fn(async (endpoint, init = {}) => {
+        server.calls.push({ endpoint, method: (init.method ?? 'GET').toUpperCase() });
+        return server.post(endpoint);
+    }),
+}));
+const toast = vi.hoisted(() => Object.assign(vi.fn(), { error: vi.fn() }));
+vi.mock('sonner', () => ({ toast }));
+/** The parts of a `Response` the Jobs service reads. */
+function reply(status, body, headers = {}) {
+    const all = {
+        date: new Date(Date.now() + server.clockOffsetMs).toUTCString(),
+        ...headers,
+    };
+    return {
+        ok: status >= 200 && status < 300,
+        status,
+        headers: { get: (name) => all[name.toLowerCase()] ?? null },
+        json: async () => body,
+    };
+}
+function fetchStub(url, init = {}) {
+    const endpoint = url.replace(/^\/api\/cms/, '');
+    server.calls.push({ endpoint, method: 'GET' });
+    if (endpoint === '/jobs?limit=50') {
+        if (server.listHangs) {
+            return new Promise((_, reject) => {
+                init.signal?.addEventListener('abort', () => reject(new DOMException('This operation was aborted', 'AbortError')));
+            });
+        }
+        const failure = server.listError;
+        if (failure) {
+            const headers = failure.retryAfter
+                ? { 'retry-after': failure.retryAfter }
+                : {};
+            return Promise.resolve(reply(failure.status, { error: failure.message }, headers));
+        }
+        return Promise.resolve(reply(200, { data: { jobs: server.jobs } }));
+    }
+    if (endpoint === '/jobs/worker') {
+        return Promise.resolve(server.workerError
+            ? reply(500, { error: server.workerError })
+            : reply(200, { data: server.worker }));
+    }
+    return Promise.resolve(reply(404, { error: `unexpected ${endpoint}` }));
+}
+const { Jobs } = await import('../../views/Jobs.js');
+/** Someone who may run, cancel and retry any job. */
+const ADMIN = { role: 'ADMIN', userId: 'u1' };
+/** A time on the server's clock, `offsetMs` from now. */
+function iso(offsetMs) {
+    return new Date(Date.now() + server.clockOffsetMs + offsetMs).toISOString();
+}
+function workerStatus() {
+    return {
+        lastTickAt: iso(-24_000),
+        lastTickMs: 1800,
+        nextTickAt: iso(36_000),
+        budgetMs: 20_000,
+        schedules: [
+            { type: 'seo-scan', cron: '0 4 * * 1', nextAt: iso(7 * 24 * 60 * MIN), activeJobId: null },
+            { type: 'content-health', cron: '30 2 * * *', nextAt: iso(12 * 60 * MIN), activeJobId: null },
+        ],
+    };
+}
+function batch(overrides) {
+    const { done = 0, total = 42, ...rest } = overrides;
+    return {
+        id: 'job',
+        type: 'batch-ai',
+        status: 'queued',
+        title: 'Batch',
+        scope: '42 posts',
+        runAt: iso(0),
+        attempts: 0,
+        maxAttempts: 3,
+        progress: { done, total, unit: 'documents', cursor: null, completed: done },
+        lastError: null,
+        explain: null,
+        summary: null,
+        lockedAt: null,
+        cancelRequestedAt: null,
+        cancelledBy: null,
+        createdBy: { id: 'u1', name: 'Brandon West', initials: 'BW' },
+        createdAt: iso(-19 * MIN),
+        updatedAt: iso(0),
+        finishedAt: null,
+        usage: { tokensIn: 0, tokensOut: 0 },
+        payload: {
+            operation: 'meta',
+            instruction: null,
+            source: 'posts',
+            statusFilter: 'all',
+            documentIds: [],
+            review: 'review',
+            onApprove: 'draft',
+        },
+        review: { pending: 0, approved: 0, rejected: 0 },
+        ...rest,
+    };
+}
+function scan(type, overrides) {
+    const job = batch({
+        type,
+        title: type === 'seo-scan' ? 'SEO scan' : 'Content health',
+        scope: type === 'seo-scan' ? 'All indexable pages' : 'All published documents',
+        createdBy: { kind: 'cron', schedule: type === 'seo-scan' ? 'weekly-seo' : 'nightly-health' },
+        payload: { trigger: 'cron' },
+        ...overrides,
+    });
+    delete job.review;
+    return job;
+}
+/** The kit's nine jobs (jobs-data.jsx `JOBS`), as the API sends them. */
+function kitJobs() {
+    return [
+        batch({
+            id: 'job_418',
+            title: 'Generate alt text',
+            scope: '64 images with no alt text',
+            done: 9,
+            total: 64,
+            attempts: 1,
+            lastError: 'ImageFetchError: img_2291.webp returned 404',
+            runAt: iso(30_000),
+            createdBy: { id: 'u2', name: 'Dana Cole', initials: 'DC' },
+            createdAt: iso(-34 * MIN),
+            review: { pending: 9, approved: 0, rejected: 0 },
+        }),
+        batch({
+            id: 'job_417',
+            title: 'Rewrite meta descriptions',
+            status: 'running',
+            done: 18,
+            total: 42,
+            attempts: 1,
+            lockedAt: iso(-5_000),
+            review: { pending: 6, approved: 12, rejected: 0 },
+        }),
+        scan('content-health', {
+            id: 'job_416',
+            status: 'succeeded',
+            progress: { done: 412, total: 412, unit: 'documents', cursor: null, completed: 412 },
+            createdAt: iso(-60 * MIN),
+            finishedAt: iso(-43 * MIN),
+        }),
+        batch({
+            id: 'job_415',
+            title: 'Translate excerpts to Spanish',
+            scope: '30 case studies',
+            status: 'dead',
+            done: 7,
+            total: 30,
+            attempts: 3,
+            lastError: 'ProviderError: 429 Too Many Requests',
+            createdBy: { id: 'u3', name: 'Maya Shah', initials: 'MS' },
+            review: { pending: 7, approved: 0, rejected: 0 },
+        }),
+        scan('seo-scan', {
+            id: 'job_414',
+            status: 'succeeded',
+            progress: { done: 340, total: 340, unit: 'pages', cursor: null, completed: 340 },
+            createdAt: iso(-180 * MIN),
+            finishedAt: iso(-68 * MIN),
+        }),
+        batch({
+            id: 'job_413',
+            title: 'Add internal links',
+            status: 'succeeded',
+            done: 7,
+            total: 7,
+            finishedAt: iso(-60 * MIN),
+            createdAt: iso(-68 * MIN),
+            review: { pending: 0, approved: 6, rejected: 1 },
+        }),
+        batch({
+            id: 'job_412',
+            title: 'Shorten long titles',
+            status: 'cancelled',
+            done: 12,
+            total: 30,
+            cancelledBy: { id: 'u2', name: 'Dana Cole', initials: 'DC' },
+        }),
+        scan('content-health', { id: 'job_411', status: 'succeeded', attempts: 2 }),
+        scan('content-health', { id: 'job_410', status: 'succeeded' }),
+    ];
+}
+let visibility = 'visible';
+function resetServer() {
+    server.clockOffsetMs = 0;
+    server.jobs = kitJobs();
+    server.worker = workerStatus();
+    server.listError = null;
+    server.listHangs = false;
+    server.workerError = null;
+    server.calls = [];
+    server.post = () => ({ error: 'not stubbed', status: 500 });
+}
+beforeEach(() => {
+    resetServer();
+    vi.stubGlobal('fetch', vi.fn(fetchStub));
+    toast.mockClear();
+    toast.error.mockClear();
+    visibility = 'visible';
+    Object.defineProperty(document, 'visibilityState', {
+        configurable: true,
+        get: () => visibility,
+    });
+});
+afterEach(() => {
+    cleanup();
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+});
+const count = (endpoint) => server.calls.filter((call) => call.endpoint === endpoint && call.method === 'GET').length;
+const listCalls = () => count('/jobs?limit=50');
+const workerCalls = () => count('/jobs/worker');
+/** Fake every timer and the clock, from a whole second, and rebuild the fixtures on it. */
+function useClock() {
+    vi.useFakeTimers({ now: new Date('2026-10-19T14:00:00.000Z') });
+    const offset = server.clockOffsetMs;
+    resetServer();
+    server.clockOffsetMs = offset;
+    server.jobs = kitJobs();
+    server.worker = workerStatus();
+}
+/** Run timers (and the promises they start) up to `ms` from now. */
+async function advance(ms) {
+    await act(async () => {
+        await vi.advanceTimersByTimeAsync(ms);
+    });
+}
+async function renderLoaded() {
+    render(_jsx(Jobs, { onNavigate: () => { }, ...ADMIN }));
+    await screen.findByRole('list', { name: 'Jobs' });
+}
+/** With fake timers: render and let the first load land. */
+async function renderOnClock() {
+    render(_jsx(Jobs, { onNavigate: () => { }, ...ADMIN }));
+    await advance(0);
+    expect(screen.getByRole('list', { name: 'Jobs' })).toBeTruthy();
+}
+function rowFor(title) {
+    const item = screen.getByRole('button', { name: title }).closest('li');
+    if (!item)
+        throw new Error(`no row for ${title}`);
+    return item;
+}
+function note() {
+    return screen.getByRole('status').textContent ?? '';
+}
+function setVisibility(next) {
+    visibility = next;
+    act(() => {
+        document.dispatchEvent(new Event('visibilitychange'));
+    });
+}
+describe('Jobs list', () => {
+    it('shows the kit’s header, worker strip, alerts and filter counts', async () => {
+        await renderLoaded();
+        expect(screen.getByRole('heading', { level: 1, name: 'Jobs' })).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Live', pressed: true })).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'New batch AI job' })).toBeTruthy();
+        expect(screen.getByText(/^Ran 2\ds ago/)).toBeTruthy();
+        expect(screen.getByText('Mon 04:00 UTC', { exact: false })).toBeTruthy();
+        expect(screen.getByText('Daily 02:30 UTC', { exact: false })).toBeTruthy();
+        expect(screen.queryAllByText('· running now')).toHaveLength(0);
+        const failed = screen.getByRole('alert');
+        expect(failed.textContent).toBe('1 job failed after 3 attempts. Translate excerpts to Spanish: ProviderError: 429 Too Many Requests. Finished work is kept.See whyRetry');
+        expect(screen.getByText((_, el) => el?.tagName === 'SPAN' &&
+            /^15 AI changes are waiting for review across 2 jobs\./.test(el.textContent ?? ''))).toBeTruthy();
+        const tabs = within(screen.getByRole('tablist', { name: 'Filter jobs' }))
+            .getAllByRole('tab')
+            .map((tab) => tab.textContent);
+        expect(tabs).toEqual([
+            'All9',
+            'Active2',
+            'Needs review3',
+            'Succeeded5',
+            'Failed1',
+            'Cancelled1',
+        ]);
+        expect(note()).toBe('Latest 50 jobs · updates every 5 seconds');
+        const running = rowFor('Rewrite meta descriptions');
+        expect(within(running).getByText('Running')).toBeTruthy();
+        expect(within(running).getByText('Slice 19 · working')).toBeTruthy();
+        expect(within(running).getByText('18 / 42 documents')).toBeTruthy();
+        expect(within(running).getByRole('button', { name: 'Review: Rewrite meta descriptions' })).toBeTruthy();
+        expect(within(running).getByRole('button', { name: 'Cancel Rewrite meta descriptions' })).toBeTruthy();
+        const retrying = rowFor('Generate alt text');
+        expect(within(retrying).getByText('Retrying')).toBeTruthy();
+        expect(within(retrying).getByText(/^Attempt 2 of 3 · in \d+s$/)).toBeTruthy();
+        expect(within(retrying).getByText('Dana Cole')).toBeTruthy();
+        expect(within(retrying).getByText('34 min ago')).toBeTruthy();
+        expect(within(rowFor('Shorten long titles')).getByText('by Dana Cole')).toBeTruthy();
+        const dead = rowFor('Translate excerpts to Spanish');
+        expect(within(dead).getByRole('button', { name: 'Retry Translate excerpts to Spanish' })).toBeTruthy();
+        expect(within(dead).getByText('After 3 attempts')).toBeTruthy();
+        const scanRow = screen.getAllByRole('button', { name: 'SEO scan' })[0]?.closest('li');
+        expect(scanRow && within(scanRow).getByText('Weekly cron')).toBeTruthy();
+        expect(scanRow && within(scanRow).getByText('340 / 340 pages')).toBeTruthy();
+    });
+    it('filters and counts on the client, within the picked type', async () => {
+        await renderLoaded();
+        const before = listCalls();
+        fireEvent.click(screen.getByRole('tab', { name: /^Failed/ }));
+        expect(screen.getByRole('tab', { name: /^Failed/ }).getAttribute('aria-selected')).toBe('true');
+        let rows = within(screen.getByRole('list', { name: 'Jobs' })).getAllByRole('listitem');
+        expect(rows.map((row) => within(row).getAllByRole('button')[0]?.textContent)).toEqual([
+            'Translate excerpts to Spanish',
+        ]);
+        fireEvent.click(screen.getByRole('tab', { name: /^Needs review/ }));
+        rows = within(screen.getByRole('list', { name: 'Jobs' })).getAllByRole('listitem');
+        expect(rows).toHaveLength(3);
+        fireEvent.change(screen.getByRole('combobox', { name: 'Job type' }), {
+            target: { value: 'content-health' },
+        });
+        expect(within(screen.getByRole('tablist', { name: 'Filter jobs' }))
+            .getAllByRole('tab')
+            .map((tab) => tab.textContent)).toEqual(['All3', 'Active0', 'Needs review0', 'Succeeded3', 'Failed0', 'Cancelled0']);
+        expect(screen.queryByRole('list', { name: 'Jobs' })).toBeNull();
+        expect(screen.getByText('No jobs here. Every AI change has been reviewed.')).toBeTruthy();
+        fireEvent.click(screen.getByRole('tab', { name: /^All/ }));
+        expect(within(screen.getByRole('list', { name: 'Jobs' })).getAllByRole('listitem')).toHaveLength(3);
+        // Filtering never asks the server.
+        expect(listCalls()).toBe(before);
+    });
+    it('shows the empty state', async () => {
+        server.jobs = [];
+        render(_jsx(Jobs, { onNavigate: () => { }, ...ADMIN }));
+        expect(await screen.findByText('No jobs here.')).toBeTruthy();
+        expect(screen.queryByRole('alert')).toBeNull();
+        expect(within(screen.getByRole('tablist', { name: 'Filter jobs' }))
+            .getAllByRole('tab')
+            .map((tab) => tab.textContent)).toEqual(['All0', 'Active0', 'Needs review0', 'Succeeded0', 'Failed0', 'Cancelled0']);
+        fireEvent.click(screen.getByRole('tab', { name: /^Failed/ }));
+        expect(screen.getByText('No jobs here. Nothing has failed.')).toBeTruthy();
+    });
+});
+describe('Jobs list refresh', () => {
+    it('refreshes the list every 5 seconds while Live is on and the tab is visible', async () => {
+        useClock();
+        await renderOnClock();
+        expect(listCalls()).toBe(1);
+        await advance(5000);
+        expect(listCalls()).toBe(2);
+        await advance(4999);
+        expect(listCalls()).toBe(2);
+        await advance(1);
+        expect(listCalls()).toBe(3);
+        // Hidden: no requests, however long.
+        setVisibility('hidden');
+        await advance(30_000);
+        expect(listCalls()).toBe(3);
+        // Visible again: refreshes at once, then every 5 seconds.
+        setVisibility('visible');
+        await advance(0);
+        expect(listCalls()).toBe(4);
+        await advance(5000);
+        expect(listCalls()).toBe(5);
+        // Paused: no requests.
+        fireEvent.click(screen.getByRole('button', { name: 'Live' }));
+        expect(screen.getByRole('button', { name: 'Paused', pressed: false })).toBeTruthy();
+        await advance(30_000);
+        expect(listCalls()).toBe(5);
+        // Live again: refreshes at once.
+        fireEvent.click(screen.getByRole('button', { name: 'Paused' }));
+        await advance(0);
+        expect(listCalls()).toBe(6);
+        await advance(5000);
+        expect(listCalls()).toBe(7);
+    });
+    it('asks for the worker status after the tick it expects, not with every refresh', async () => {
+        useClock();
+        await renderOnClock();
+        expect([listCalls(), workerCalls()]).toEqual([1, 1]);
+        // The next tick is due at 36s; the strip asks a few seconds after it.
+        await advance(40_000);
+        expect([listCalls(), workerCalls()]).toEqual([9, 1]);
+        // That tick ran: its stamp is what the server now has.
+        server.worker = { ...server.worker, lastTickAt: iso(-4_000), nextTickAt: iso(56_000) };
+        await advance(5000);
+        expect([listCalls(), workerCalls()]).toEqual([10, 2]);
+        expect(screen.getByText(/^Ran [4-9]s ago/)).toBeTruthy();
+        // Nothing until a few seconds after the next tick (96s).
+        await advance(55_000);
+        expect([listCalls(), workerCalls()]).toEqual([21, 2]);
+        await advance(5000);
+        expect(workerCalls()).toBe(3);
+        // A late tick: asked again 30 seconds later, not every 5.
+        await advance(29_999);
+        expect(workerCalls()).toBe(3);
+        await advance(1);
+        expect(workerCalls()).toBe(4);
+        // 135 seconds: 28 list refreshes and 4 status requests, about 14 a minute instead of 24.
+        expect([listCalls(), workerCalls()]).toEqual([28, 4]);
+    });
+    it('backs off while refreshes fail and returns to 5 seconds after one works', async () => {
+        useClock();
+        await renderOnClock();
+        server.listError = { status: 500, message: 'Database unavailable' };
+        const at = [];
+        for (const step of [5000, 9999, 1, 19_999, 1, 39_999, 1, 59_999, 1]) {
+            await advance(step);
+            at.push([step, listCalls()]);
+        }
+        // Failures at 5s, 15s, 35s, 75s and 135s: waits of 10, 20, 40, then 60.
+        expect(at.map(([, calls]) => calls)).toEqual([2, 2, 3, 3, 4, 4, 5, 5, 6]);
+        expect(note()).toBe('Couldn’t refresh: Database unavailable. Showing the last update.');
+        expect(within(screen.getByRole('list', { name: 'Jobs' })).getAllByRole('listitem')).toHaveLength(9);
+        server.listError = null;
+        await advance(60_000);
+        expect(listCalls()).toBe(7);
+        expect(note()).toBe('Latest 50 jobs · updates every 5 seconds');
+        await advance(5000);
+        expect(listCalls()).toBe(8);
+    });
+    it('waits as long as a 429 asks', async () => {
+        useClock();
+        await renderOnClock();
+        server.listError = { status: 429, message: 'Too many requests', retryAfter: '30' };
+        await advance(5000);
+        expect(listCalls()).toBe(2);
+        await advance(29_999);
+        expect(listCalls()).toBe(2);
+        server.listError = null;
+        await advance(1);
+        expect(listCalls()).toBe(3);
+        await advance(5000);
+        expect(listCalls()).toBe(4);
+    });
+    it('times out a refresh that never answers and keeps refreshing', async () => {
+        useClock();
+        await renderOnClock();
+        server.listHangs = true;
+        await advance(5000);
+        expect(listCalls()).toBe(2);
+        await advance(9999);
+        expect(note()).toBe('Latest 50 jobs · updates every 5 seconds');
+        await advance(1);
+        expect(note()).toBe('Couldn’t refresh: The server didn’t answer within 10 seconds. Showing the last update.');
+        server.listHangs = false;
+        // The timeout counts as a failure: the next refresh is 10 seconds later.
+        await advance(9999);
+        expect(listCalls()).toBe(2);
+        await advance(1);
+        expect(listCalls()).toBe(3);
+        expect(note()).toBe('Latest 50 jobs · updates every 5 seconds');
+        await advance(5000);
+        expect(listCalls()).toBe(4);
+    });
+    it('loads the worker status through a development remount', async () => {
+        // StrictMode mounts, unmounts and remounts, aborting the first requests.
+        render(_jsx(StrictMode, { children: _jsx(Jobs, { onNavigate: () => { }, ...ADMIN }) }));
+        expect(await screen.findByText(/^Ran 2\ds ago/)).toBeTruthy();
+        expect(screen.queryByText('Status unavailable')).toBeNull();
+    });
+    it('shows a worker status failure in the strip only', async () => {
+        server.workerError = 'Worker status unavailable';
+        await renderLoaded();
+        expect(note()).toBe('Latest 50 jobs · updates every 5 seconds');
+        expect(screen.getByText('Status unavailable')).toBeTruthy();
+        expect(screen.queryByText(/^Ran /)).toBeNull();
+    });
+    it('reads times on the server’s clock when the browser’s is wrong', async () => {
+        // The browser is 11 minutes fast.
+        server.clockOffsetMs = -11 * MIN;
+        useClock();
+        server.jobs = [
+            batch({
+                id: 'job_417',
+                title: 'Rewrite meta descriptions',
+                status: 'running',
+                done: 18,
+                lockedAt: iso(-30_000),
+            }),
+            batch({ id: 'job_420', title: 'Queued just now', createdAt: iso(-20_000) }),
+        ];
+        await renderOnClock();
+        const row = rowFor('Rewrite meta descriptions');
+        expect(within(row).getByText('Running')).toBeTruthy();
+        expect(within(row).queryByText('Retrying')).toBeNull();
+        expect(within(rowFor('Queued just now')).getByText('now')).toBeTruthy();
+        expect(screen.getByText(/^Ran 2[45]s ago/)).toBeTruthy();
+    });
+    it('advances a running job’s progress in place', async () => {
+        useClock();
+        await renderOnClock();
+        const row = rowFor('Rewrite meta descriptions');
+        const cells = Array.from(row.children);
+        const cellClasses = cells.map((cell) => cell.className);
+        const track = within(row).getByTestId('job-progress-track');
+        const fill = track.firstElementChild;
+        const progress = within(row).getByText('18 / 42 documents');
+        expect(fill.style.width).toBe('43%');
+        // Fixed tracks for every column, so no cell's content can resize another.
+        expect(row.className).toContain('grid-cols-[minmax(240px,1.6fr)_minmax(150px,.9fr)_minmax(170px,1fr)_minmax(120px,.7fr)_96px]');
+        // Digits keep one width, and the count never wraps onto a second line.
+        expect(progress.className).toContain('tabular-nums');
+        expect(progress.className).toContain('whitespace-nowrap');
+        server.jobs = server.jobs.map((job) => job.id === 'job_417'
+            ? { ...job, progress: { ...job.progress, done: 19, completed: 19 } }
+            : job);
+        await advance(5000);
+        expect(progress.textContent).toBe('19 / 42 documents');
+        // The same nodes update: nothing is remounted or restyled but the fill.
+        expect(rowFor('Rewrite meta descriptions')).toBe(row);
+        cells.forEach((cell, index) => expect(row.children[index]).toBe(cell));
+        expect(cells.map((cell) => cell.className)).toEqual(cellClasses);
+        expect(track.firstElementChild).toBe(fill);
+        expect(fill.style.width).toBe('45%');
+        expect(within(row).getByText('Slice 20 · working')).toBeTruthy();
+    });
+    it('shows a load error with Try again, then focuses the list it loads', async () => {
+        useClock();
+        server.listError = { status: 500, message: 'Database unavailable' };
+        render(_jsx(Jobs, { onNavigate: () => { }, ...ADMIN }));
+        await advance(0);
+        const alert = screen.getByRole('alert');
+        expect(alert.textContent).toContain('Jobs couldn’t be loaded. Database unavailable');
+        expect(screen.queryByRole('list', { name: 'Jobs' })).toBeNull();
+        server.listError = null;
+        const tryAgain = within(alert).getByRole('button', { name: 'Try again' });
+        tryAgain.focus();
+        fireEvent.click(tryAgain);
+        await advance(0);
+        expect(screen.getByRole('list', { name: 'Jobs' })).toBeTruthy();
+        // The button went with the error; focus moves to the first row, not the body.
+        expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Generate alt text' }));
+    });
+});
+describe('Jobs list actions', () => {
+    it('runs a scan now, and opens the existing job when one is active', async () => {
+        await renderLoaded();
+        let response = { job: scan('seo-scan', { id: 'job_new', createdAt: iso(0) }), reused: false };
+        server.post = () => {
+            server.jobs = [response.job, ...server.jobs.filter((job) => job.id !== response.job.id)];
+            return { data: response, status: response.reused ? 200 : 201 };
+        };
+        fireEvent.click(screen.getByRole('button', { name: 'Run now: SEO scan' }));
+        await waitFor(() => expect(toast).toHaveBeenCalledWith('SEO scan queued. It starts on the next worker run.'));
+        expect(server.calls).toContainEqual({ endpoint: '/jobs/run', method: 'POST' });
+        expect(within(screen.getByRole('list', { name: 'Jobs' })).getAllByRole('listitem')).toHaveLength(10);
+        response = { job: scan('seo-scan', { id: 'job_new', status: 'running' }), reused: true };
+        fireEvent.click(screen.getByRole('button', { name: 'Run now: SEO scan' }));
+        await waitFor(() => expect(toast).toHaveBeenCalledWith('SEO scan is already running. Reusing that job.'));
+        expect(await screen.findByRole('dialog', { name: 'SEO scan' })).toBeTruthy();
+    });
+    it('keeps focus on a busy button, with one icon, and ignores clicks until it answers', async () => {
+        await renderLoaded();
+        let answer = () => { };
+        server.post = () => new Promise((resolve) => (answer = resolve));
+        const run = screen.getByRole('button', { name: 'Run now: Content health' });
+        run.focus();
+        fireEvent.click(run);
+        await waitFor(() => expect(run.getAttribute('aria-busy')).toBe('true'));
+        // Not `disabled`: Chromium drops focus from a focused button that becomes disabled.
+        expect(run.hasAttribute('disabled')).toBe(false);
+        expect(run.getAttribute('aria-disabled')).toBe('true');
+        expect(document.activeElement).toBe(run);
+        expect(run.querySelectorAll('svg')).toHaveLength(1);
+        expect(within(run).getByTestId('busy-spinner')).toBeTruthy();
+        fireEvent.click(run);
+        expect(server.calls.filter((call) => call.method === 'POST')).toHaveLength(1);
+        answer({ error: 'Insufficient permissions', status: 403 });
+        await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Content health didn’t start: Insufficient permissions'));
+        expect(run.getAttribute('aria-disabled')).toBeNull();
+        expect(document.activeElement).toBe(run);
+        // An icon-only button swaps its icon for the spinner rather than adding one.
+        const retry = screen.getByRole('button', { name: 'Retry Translate excerpts to Spanish' });
+        fireEvent.click(retry);
+        await waitFor(() => expect(retry.getAttribute('aria-busy')).toBe('true'));
+        expect(retry.querySelectorAll('svg')).toHaveLength(1);
+        expect(within(retry).getByTestId('busy-spinner')).toBeTruthy();
+        answer({ error: 'nope', status: 409 });
+        await waitFor(() => expect(retry.getAttribute('aria-busy')).toBeNull());
+        expect(retry.querySelectorAll('svg')).toHaveLength(1);
+    });
+    it('retries a failed job and says where it picks up', async () => {
+        await renderLoaded();
+        server.post = (endpoint) => {
+            if (endpoint !== '/jobs/job_415/retry')
+                return { error: 'nope', status: 500 };
+            server.jobs = server.jobs.map((job) => job.id === 'job_415' ? { ...job, status: 'queued', attempts: 0, lastError: null } : job);
+            return { data: server.jobs[3], status: 200 };
+        };
+        const retry = screen.getByRole('button', { name: 'Retry Translate excerpts to Spanish' });
+        retry.focus();
+        fireEvent.click(retry);
+        await waitFor(() => expect(toast).toHaveBeenCalledWith('Retrying from document 8'));
+        expect(within(rowFor('Translate excerpts to Spanish')).getByText('In progress')).toBeTruthy();
+        // The Retry button went with the failure; focus lands on the row.
+        await waitFor(() => expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Translate excerpts to Spanish' })));
+    });
+    it('confirms a cancel with the kit’s copy and shows Cancelling', async () => {
+        await renderLoaded();
+        server.post = (endpoint) => {
+            if (endpoint !== '/jobs/job_417/cancel')
+                return { error: 'nope', status: 500 };
+            server.jobs = server.jobs.map((job) => job.id === 'job_417' ? { ...job, cancelRequestedAt: iso(0) } : job);
+            return { data: server.jobs[1], status: 200 };
+        };
+        const cancel = screen.getByRole('button', { name: 'Cancel Rewrite meta descriptions' });
+        // Keep running leaves the job alone and returns focus to the Cancel button.
+        cancel.focus();
+        fireEvent.click(cancel);
+        fireEvent.click(within(await screen.findByRole('dialog')).getByRole('button', { name: 'Keep running' }));
+        await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+        await waitFor(() => expect(document.activeElement).toBe(cancel));
+        expect(server.calls.some((call) => call.method === 'POST')).toBe(false);
+        fireEvent.click(cancel);
+        const dialog = await screen.findByRole('dialog', {
+            name: 'Cancel “Rewrite meta descriptions”?',
+        });
+        expect(dialog.textContent).toContain('It’s in the middle of a slice. It will stop when that slice finishes, usually within 20 seconds. The 18 changes already made stay in review. Nothing is applied unless you approve it.');
+        fireEvent.click(within(dialog).getByRole('button', { name: 'Cancel job' }));
+        await waitFor(() => expect(toast).toHaveBeenCalledWith('Stopping after this slice'));
+        await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+        const row = rowFor('Rewrite meta descriptions');
+        expect(within(row).getByText('Cancelling')).toBeTruthy();
+        expect(within(row).getByText('Stops after this slice')).toBeTruthy();
+        expect(within(row).queryByRole('button', { name: /^Cancel/ })).toBeNull();
+        // The Cancel button went with the cancel, so focus lands on the row.
+        await waitFor(() => expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Rewrite meta descriptions' })));
+    });
+    it('says a job whose worker stopped mid-slice stops on the next worker run', async () => {
+        server.jobs = [
+            batch({
+                id: 'job_stale',
+                title: 'Stuck batch',
+                status: 'running',
+                done: 4,
+                attempts: 1,
+                lockedAt: iso(-11 * MIN),
+            }),
+        ];
+        await renderLoaded();
+        const row = rowFor('Stuck batch');
+        expect(within(row).getByText('Retrying')).toBeTruthy();
+        server.post = () => {
+            server.jobs = server.jobs.map((job) => ({ ...job, cancelRequestedAt: iso(0) }));
+            return { data: server.jobs[0], status: 200 };
+        };
+        fireEvent.click(within(row).getByRole('button', { name: 'Cancel Stuck batch' }));
+        const dialog = await screen.findByRole('dialog');
+        expect(dialog.textContent).toContain('Its last slice stopped without finishing. It stops on the next worker run, within a minute.');
+        expect(dialog.textContent).not.toContain('stops right away');
+        fireEvent.click(within(dialog).getByRole('button', { name: 'Cancel job' }));
+        await waitFor(() => expect(toast).toHaveBeenCalledWith('Stopping on the next worker run'));
+    });
+    it('focuses the selected filter when a cancel empties it', async () => {
+        server.jobs = [
+            batch({ id: 'job_q', title: 'Waiting batch' }),
+            scan('seo-scan', { id: 'job_done', status: 'succeeded' }),
+        ];
+        await renderLoaded();
+        fireEvent.click(screen.getByRole('tab', { name: /^Active/ }));
+        server.post = () => {
+            server.jobs = server.jobs.map((job) => job.id === 'job_q' ? { ...job, status: 'cancelled' } : job);
+            return { data: server.jobs[0], status: 200 };
+        };
+        const cancel = screen.getByRole('button', { name: 'Cancel Waiting batch' });
+        cancel.focus();
+        fireEvent.click(cancel);
+        fireEvent.click(within(await screen.findByRole('dialog')).getByRole('button', { name: 'Cancel job' }));
+        await waitFor(() => expect(toast).toHaveBeenCalledWith('Job cancelled'));
+        await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+        expect(screen.getByText('No jobs here.')).toBeTruthy();
+        await waitFor(() => expect(document.activeElement).toBe(screen.getByRole('tab', { name: /^Active/ })));
+    });
+});
+//# sourceMappingURL=jobs-list.render.test.js.map