Vito
e34bd70e13
The hidden-tab and teardown specs assumed the one scan addition after a page closed its change stream is the write that finds the stream closed. The server notices a closed stream only when a write fails, and nothing orders the browser's close before that write: on WebKit under load the close arrived after the change was written, the write succeeded, and the stream stayed counted until the 25 s keepalive (CI job 120735035017). Both specs now send no-op change notices (new fixture route POST /__test__/review/notify) until the server has dropped the stream. A new spec makes the CI ordering certain by holding the page's close until the change has reached it.
589 lines
34 KiB
JavaScript
589 lines
34 KiB
JavaScript
// Needs review (#249 PR F, plan Tasks F1 and F2, Mock inventory M4): the SAVED VIEWS row and its count, the Metadata
|
|
// review page over the real review routes, and Activity's Review metadata. Items are recorded by the real recorder
|
|
// (tests/browser/workspace_review_fixture.py) through the scan's recorder (only scans add items); the conflict item's file was linked
|
|
// to another prompt after it was queued. An open page re-reads its queue from the review change stream (F2).
|
|
import { startCoverage, saveCoverage } from '../../tools/vendor/browser-coverage.mjs';
|
|
import { test, expect } from './fixtures.mjs';
|
|
|
|
const review = '/prompt_manager/workspace#/review';
|
|
const main = page => page.locator('#workspace-main');
|
|
const savedNav = page => page.getByRole('navigation', { name: 'Saved views', exact: true });
|
|
const reviewRow = page => savedNav(page).locator('a[data-route="review"]');
|
|
const panel = page => main(page).getByRole('region', { name: 'Resolve the association', exact: true });
|
|
const context = page => panel(page).getByRole('combobox', { name: 'Sampler context', exact: true });
|
|
const cards = page => main(page).locator('.review-queue article.media-card');
|
|
const toast = page => page.locator('#workspace-toast');
|
|
const NOTICE = 'Multiple sampler paths were found. The existing image links were preserved. Choose the correct context or leave them unresolved.';
|
|
const EMPTY = 'Ambiguous images are added when a metadata scan or a new generation finds more than one sampler path.';
|
|
const OPTIONS = ['Sampler 11 · Golden dunes at dusk / Soft negative, blur', 'Sampler 13 · Harbor lights at night / Soft negative, blur',
|
|
'Leave unresolved'];
|
|
|
|
async function seed(request, items = 3, special = {}) {
|
|
const response = await request.post('/__test__/review/reset', { data: { items, ...special } });
|
|
await expect(response).toBeOK();
|
|
return response.json();
|
|
}
|
|
async function pending(request) {
|
|
return (await (await request.get('/prompt_manager/review/items?limit=1')).json()).total;
|
|
}
|
|
const links = async request => (await (await request.get('/__test__/review/links')).json()).links;
|
|
const streams = async request => (await (await request.get('/__test__/review/streams')).json());
|
|
/**
|
|
* Wait until the server has dropped every stream a page closed. It notices a closed stream only when a write to it
|
|
* fails, and the close can reach it after any one write (WebKit under load): each poll sends one more change notice,
|
|
* which changes nothing in the queue, until the count is 0.
|
|
*/
|
|
async function closedStreamsDropped(request) {
|
|
await expect.poll(async () => {
|
|
await expect(await request.post('/__test__/review/notify')).toBeOK();
|
|
return (await streams(request)).streams;
|
|
}).toBe(0);
|
|
}
|
|
const apply = page => panel(page).getByRole('button', { name: 'Apply association', exact: true });
|
|
const warning = page => panel(page).locator('.warning-note');
|
|
/** The page with its first item's sampler paths loaded. */
|
|
async function open(page) {
|
|
await page.goto(review);
|
|
await expect(context(page)).toBeEnabled();
|
|
}
|
|
|
|
test.beforeEach(async ({ page, browserName }) => {
|
|
await startCoverage(page, browserName);
|
|
page.reviewErrors = [];
|
|
page.on('pageerror', error => page.reviewErrors.push(error.message));
|
|
});
|
|
test.afterEach(async ({ page, browserName, request }) => {
|
|
await saveCoverage(page, browserName);
|
|
expect(page.reviewErrors).toEqual([]);
|
|
await request.post('/__test__/jobs/restart');
|
|
});
|
|
|
|
test('queue shows persisted items and the nav count', async ({ page, request }) => {
|
|
await seed(request, 3);
|
|
await open(page);
|
|
// SAVED VIEWS: Favorites, then Needs review with the exact pending count (ruling R5).
|
|
await expect(savedNav(page).locator('a').nth(1)).toHaveAttribute('data-route', 'review');
|
|
await expect(reviewRow(page)).toHaveText('Needs review3');
|
|
await expect(reviewRow(page)).toHaveAttribute('aria-current', 'page');
|
|
await expect(page).toHaveTitle('Review · Prompt Manager');
|
|
await expect(page.locator('#workspace-breadcrumb')).toHaveText('Review');
|
|
await expect(main(page).getByRole('heading', { level: 1 })).toHaveText('Metadata review');
|
|
await expect(main(page).locator('.heading p.muted')).toHaveText('Uncertain evidence stays visible until you decide.');
|
|
await expect(main(page).locator('.notice h2')).toHaveText('3 images need a decision');
|
|
await expect(main(page).locator('.notice p')).toHaveText(NOTICE);
|
|
await expect(cards(page)).toHaveCount(3);
|
|
await expect(cards(page).first()).toHaveClass(/selected/);
|
|
await expect(panel(page).locator('p.small')).toHaveText('review_0000.png');
|
|
await expect(context(page).locator('option')).toHaveText(OPTIONS);
|
|
await expect(context(page)).toHaveValue(/^[0-9a-f]{64}$/);
|
|
await expect(panel(page).locator('.prompt-section.positive .prompt-text')).toHaveText('Golden dunes at dusk');
|
|
await expect(panel(page).locator('.prompt-section.negative .prompt-text')).toHaveText('Soft negative, blur');
|
|
await context(page).selectOption({ label: OPTIONS[1] });
|
|
await expect(panel(page).locator('.prompt-section.positive .prompt-text')).toHaveText('Harbor lights at night');
|
|
await context(page).selectOption({ label: 'Leave unresolved' });
|
|
await expect(panel(page).locator('.prompt-section.positive .prompt-text')).toHaveText('Multiple possible prompts. Source could not be determined.');
|
|
// Info selects another item.
|
|
await cards(page).nth(1).getByRole('button', { name: 'Inspect review_0001.png', exact: true }).click();
|
|
await expect(panel(page).locator('p.small')).toHaveText('review_0001.png');
|
|
await expect(cards(page).nth(1)).toHaveClass(/selected/);
|
|
await expect(context(page)).toBeEnabled();
|
|
// The card's image opens the shared viewer.
|
|
await cards(page).nth(1).getByRole('button', { name: 'Open review_0001.png', exact: true }).click();
|
|
await expect(page.locator('#viewer-dialog')).toBeVisible();
|
|
await page.keyboard.press('Escape');
|
|
await expect(page.locator('#viewer-dialog')).toHaveCount(0);
|
|
// Open activity.
|
|
await main(page).getByRole('button', { name: 'Open activity', exact: true }).click();
|
|
await expect(page).toHaveURL(/#\/activity$/);
|
|
});
|
|
|
|
test('apply candidate links the pair and the item leaves the queue and the count drops', async ({ page, request }) => {
|
|
await seed(request, 2);
|
|
await open(page);
|
|
await expect(reviewRow(page)).toHaveText('Needs review2');
|
|
const decided = page.waitForResponse(item => /\/review\/items\/[^/]+\/decision$/.test(item.url()));
|
|
await panel(page).getByRole('button', { name: 'Apply association', exact: true }).click();
|
|
expect((await decided).status()).toBe(200);
|
|
await expect(toast(page)).toHaveText('Association accepted.');
|
|
await expect(page).toHaveURL(/#\/images$/);
|
|
await expect(reviewRow(page)).toHaveText('Needs review1');
|
|
expect(await pending(request)).toBe(1);
|
|
// The first sampler path's pair is linked to that file, and only to it.
|
|
expect(await links(request)).toEqual([{ filename: 'review_0000.png', prompt: 'Golden dunes at dusk',
|
|
pair_id: expect.any(Number), positive: 'Golden dunes at dusk', negative: 'Soft negative, blur' }]);
|
|
});
|
|
|
|
test('conflict leaves links unchanged and explains', async ({ page, request }) => {
|
|
// Queued first, then linked to another prompt (before a scan or monitor pass could settle it).
|
|
await seed(request, 0, { conflict: true });
|
|
const before = await links(request);
|
|
expect(before).toEqual([{ filename: 'conflict.png', prompt: 'Misty forest path', pair_id: null, positive: null,
|
|
negative: null }]);
|
|
await open(page);
|
|
await expect(panel(page).locator('p.small')).toHaveText('conflict.png');
|
|
await expect(context(page).locator('option')).toHaveText(OPTIONS);
|
|
const decided = page.waitForResponse(item => /\/decision$/.test(item.url()));
|
|
await apply(page).click();
|
|
const answer = await decided;
|
|
expect(answer.status()).toBe(409);
|
|
expect((await answer.json()).code).toBe('association-conflict');
|
|
await expect(warning(page)).toHaveText('This image is already linked to another prompt or negative, so this sampler path cannot be attached safely. The existing links were preserved.');
|
|
await expect(page).toHaveURL(/#\/review$/);
|
|
await expect(context(page)).toBeEnabled();
|
|
await expect(context(page)).toHaveValue(/^[0-9a-f]{64}$/);
|
|
expect(await links(request)).toEqual(before);
|
|
expect(await pending(request)).toBe(1);
|
|
await expect(reviewRow(page)).toHaveText('Needs review1');
|
|
// The file can still be left unresolved, which links nothing either.
|
|
await context(page).selectOption({ label: 'Leave unresolved' });
|
|
await apply(page).click();
|
|
await expect(toast(page)).toHaveText('Left unresolved.');
|
|
expect(await links(request)).toEqual(before);
|
|
expect(await pending(request)).toBe(0);
|
|
});
|
|
|
|
test('a limited item and an unavailable file can only be left unresolved', async ({ page, request }) => {
|
|
await seed(request, 0, { limited: true, unavailable: true });
|
|
await open(page);
|
|
await expect(cards(page)).toHaveCount(2);
|
|
await expect(panel(page).locator('p.small')).toHaveText('limited.png');
|
|
await expect(context(page).locator('option')).toHaveText(['Leave unresolved']);
|
|
await expect(warning(page)).toHaveText('This file has too many sampler paths to list. You can leave it unresolved.');
|
|
// The unavailable file: no current root lists it, so its media and Tag are inert.
|
|
const unavailable = cards(page).nth(1);
|
|
await expect(unavailable.locator('.image-open')).toHaveAttribute('aria-disabled', 'true');
|
|
await expect(unavailable.locator('.image-card-actions button').last()).toHaveAttribute('aria-disabled', 'true');
|
|
// F3: its empty media button keeps the concept's 1.33 media area, so the card lines up with its neighbours.
|
|
await expect(cards(page).first().locator('.image-open img')).toBeVisible();
|
|
const sizes = await cards(page).evaluateAll(nodes => nodes.map(node => {
|
|
const art = node.querySelector('.image-open').getBoundingClientRect();
|
|
return [Math.round(art.width), Math.round(art.height), Math.round(node.getBoundingClientRect().height)];
|
|
}));
|
|
expect(sizes[1]).toEqual(sizes[0]);
|
|
await unavailable.getByRole('button', { name: 'Inspect unavailable.png', exact: true }).click();
|
|
await expect(panel(page).locator('p.small')).toHaveText('unavailable.png');
|
|
await expect(warning(page)).toHaveText('This file is not under a current image source, so it cannot be opened. You can leave it unresolved.');
|
|
await expect(panel(page).getByRole('button', { name: 'Tag image', exact: true })).toHaveAttribute('aria-disabled', 'true');
|
|
const observes = [];
|
|
page.on('request', item => { if (item.url().endsWith('/image-annotations/observe')) observes.push(item.url()); });
|
|
await apply(page).click();
|
|
await expect(toast(page)).toHaveText('Left unresolved.');
|
|
expect(observes).toEqual([]);
|
|
expect(await pending(request)).toBe(1);
|
|
});
|
|
|
|
test('leave unresolved removes the item from pending', async ({ page, request }) => {
|
|
await seed(request, 2);
|
|
await open(page);
|
|
await context(page).selectOption({ label: 'Leave unresolved' });
|
|
await panel(page).getByRole('button', { name: 'Apply association', exact: true }).click();
|
|
await expect(toast(page)).toHaveText('Left unresolved.');
|
|
await expect(page).toHaveURL(/#\/images$/);
|
|
expect(await pending(request)).toBe(1);
|
|
});
|
|
|
|
test('leave for later writes nothing and goes to Images', async ({ page, request }) => {
|
|
await seed(request, 2);
|
|
await open(page);
|
|
const writes = [];
|
|
page.on('request', item => { if (item.method() !== 'GET') writes.push(item.url()); });
|
|
await panel(page).getByRole('button', { name: 'Leave for later', exact: true }).click();
|
|
await expect(page).toHaveURL(/#\/images$/);
|
|
expect(writes).toEqual([]);
|
|
expect(await pending(request)).toBe(2);
|
|
});
|
|
|
|
test('tag image from review saves tags and the item remains pending', async ({ page, request }) => {
|
|
await seed(request, 1);
|
|
await open(page);
|
|
const before = await links(request);
|
|
await panel(page).getByRole('button', { name: 'Tag image', exact: true }).click();
|
|
const dialog = page.getByRole('dialog', { name: 'Tag image', exact: true });
|
|
await expect(dialog).toBeVisible();
|
|
await expect(dialog.locator('p.tag-scope-note')).toHaveText('Tags belong to this image. Resolve its prompt association separately in Needs review.');
|
|
await dialog.getByRole('textbox', { name: 'Image tags · edit manually', exact: true }).fill('dunes');
|
|
await dialog.getByRole('button', { name: 'Save manual tags', exact: true }).click();
|
|
await expect(toast(page)).toHaveText('1 tags saved for review_0000.png. Prompt association still awaits review.');
|
|
await expect(dialog).toHaveCount(0);
|
|
expect(await pending(request)).toBe(1);
|
|
await expect(page).toHaveURL(/#\/review$/);
|
|
// The item is untouched: still listed, still open, nothing linked.
|
|
await expect(cards(page)).toHaveCount(1);
|
|
await expect(context(page)).toBeEnabled();
|
|
expect(await links(request)).toEqual(before);
|
|
const [item] = (await (await request.get('/prompt_manager/review/items')).json()).items;
|
|
expect([item.state, item.revision]).toEqual(['pending', 0]);
|
|
// The card's Tag opens the same dialog.
|
|
await cards(page).first().getByRole('button', { name: 'Tag or auto-tag review_0000.png', exact: true }).click();
|
|
await expect(dialog).toBeVisible();
|
|
await expect(dialog.locator('p.tag-scope-note')).toBeVisible();
|
|
await page.keyboard.press('Escape');
|
|
await expect(dialog).toHaveCount(0);
|
|
});
|
|
|
|
test('an empty queue shows the empty notice only', async ({ page, request }) => {
|
|
await seed(request, 0);
|
|
await page.goto(review);
|
|
await expect(main(page).locator('.notice h2')).toHaveText('No images need a decision');
|
|
await expect(main(page).locator('.notice p')).toHaveText(EMPTY);
|
|
await expect(main(page).locator('.gallery-layout')).toHaveCount(0);
|
|
await expect(reviewRow(page)).toHaveText('Needs review0');
|
|
});
|
|
|
|
test('load more appends the next page', async ({ page, request }) => {
|
|
await seed(request, 45);
|
|
await open(page);
|
|
await expect(cards(page)).toHaveCount(40);
|
|
const continuation = main(page).locator('.infinite-continuation');
|
|
await expect(continuation.locator('p')).toHaveText('40 of 45 images');
|
|
await continuation.getByRole('button', { name: 'Load more images', exact: true }).click();
|
|
await expect(cards(page)).toHaveCount(45);
|
|
await expect(continuation).toHaveCount(0);
|
|
});
|
|
|
|
test('a scan job with review items offers Review metadata in Activity', async ({ page, request }) => {
|
|
await seed(request, 1);
|
|
const started = await (await request.post('/__test__/jobs/start', { data: { total: 10, review_items: 2 } })).json();
|
|
await expect(await request.post(`/__test__/jobs/${started.job.id}/finish`, { data: {} })).toBeOK();
|
|
const plain = await (await request.post('/__test__/jobs/start', { data: { total: 10 } })).json();
|
|
await expect(await request.post(`/__test__/jobs/${plain.job.id}/finish`, { data: {} })).toBeOK();
|
|
await page.goto('/prompt_manager/workspace#/activity');
|
|
const item = main(page).locator(`.activity-item[data-job-id="${started.job.id}"]`);
|
|
await expect(item.getByRole('button', { name: 'Review metadata', exact: true })).toBeVisible();
|
|
await expect(main(page).locator(`.activity-item[data-job-id="${plain.job.id}"] button`)).toHaveCount(0);
|
|
await page.goto(`/prompt_manager/workspace#/activity/${started.job.id}`);
|
|
const actions = main(page).locator('.heading-actions button');
|
|
await expect(actions).toHaveText(['Download report', 'Review metadata']);
|
|
await actions.nth(1).click();
|
|
await expect(page).toHaveURL(/#\/review$/);
|
|
await expect(main(page).getByRole('heading', { level: 1 })).toHaveText('Metadata review');
|
|
});
|
|
|
|
test('a failed item read says so and Retry reads it again', async ({ page, request }) => {
|
|
await seed(request, 1);
|
|
await page.route(url => /\/prompt_manager\/review\/items\/[0-9a-f-]{36}$/.test(url.pathname),
|
|
route => route.fulfill({ status: 500, contentType: 'application/json', body: JSON.stringify({ success: false, code: 'review-failed', error: 'x' }) }),
|
|
{ times: 1 });
|
|
await page.goto(review);
|
|
await expect(panel(page).locator('.warning-note')).toHaveText('This item could not be read. Select it again to retry.');
|
|
await expect(panel(page).getByText('Could not read prompts from this file.', { exact: true })).toBeVisible();
|
|
await expect(panel(page).getByRole('button', { name: 'Apply association', exact: true })).toHaveAttribute('aria-disabled', 'true');
|
|
await panel(page).getByRole('button', { name: 'Retry prompt details', exact: true }).click();
|
|
await expect(context(page)).toBeEnabled();
|
|
await expect(context(page).locator('option')).toHaveText(OPTIONS);
|
|
await expect(panel(page).locator('.warning-note')).toBeHidden();
|
|
});
|
|
|
|
test('a failed queue read offers Retry', async ({ page, request }) => {
|
|
await seed(request, 1);
|
|
await page.route(url => url.pathname.endsWith('/prompt_manager/review/items') && url.searchParams.get('limit') === '40',
|
|
route => route.fulfill({ status: 500, contentType: 'application/json', body: JSON.stringify({ success: false, code: 'review-failed', error: 'x' }) }),
|
|
{ times: 1 });
|
|
await page.goto(review);
|
|
await expect(main(page).getByRole('alert')).toHaveText('The review queue could not be read.');
|
|
await main(page).getByRole('button', { name: 'Retry', exact: true }).click();
|
|
await expect(context(page)).toBeEnabled();
|
|
await expect(main(page).locator('.notice h2')).toHaveText('1 image needs a decision');
|
|
});
|
|
|
|
test('keyboard focus labels and touch targets', async ({ page, request }) => {
|
|
await seed(request, 2);
|
|
await open(page);
|
|
const first = cards(page).first();
|
|
for (const [name, role] of [['Open review_0000.png', 'button'], ['Inspect review_0000.png', 'button'],
|
|
['Tag or auto-tag review_0000.png', 'button']]) await expect(first.getByRole(role, { name, exact: true })).toBeVisible();
|
|
await expect(main(page).getByRole('list', { name: 'Review queue', exact: true })).toBeVisible();
|
|
await expect(panel(page)).toBeVisible();
|
|
// Keyboard: Info on the second card opens it, and the panel's controls take focus in their order.
|
|
const info = cards(page).nth(1).getByRole('button', { name: 'Inspect review_0001.png', exact: true });
|
|
await info.focus();
|
|
await page.keyboard.press('Enter');
|
|
await expect(panel(page).locator('p.small')).toHaveText('review_0001.png');
|
|
await expect(context(page)).toBeEnabled();
|
|
await context(page).focus();
|
|
await expect(context(page)).toBeFocused();
|
|
const order = await panel(page).evaluate(node => [...node.querySelectorAll('button, select')]
|
|
.filter(control => control.offsetParent !== null).map(control => control.getAttribute('aria-label') || control.textContent.trim()));
|
|
expect(order[0]).toBe('Tag image');
|
|
expect(order.slice(-2)).toEqual(['Leave for later', 'Apply association']);
|
|
// Targets: the panel's controls are 40px on a coarse pointer (the concept's coarse buttons) and 24px otherwise (the
|
|
// WCAG 2.2 minimum); the card's buttons keep the concept's compact size, never under 24px (its ≤700px rule).
|
|
const coarse = await page.evaluate(() => matchMedia('(pointer: coarse)').matches);
|
|
const sized = [
|
|
[panel(page).getByRole('button', { name: 'Tag image', exact: true }), coarse ? 40 : 24],
|
|
[context(page), coarse ? 40 : 24],
|
|
[panel(page).getByRole('button', { name: 'Leave for later', exact: true }), coarse ? 40 : 24],
|
|
[apply(page), coarse ? 40 : 24],
|
|
[first.getByRole('button', { name: 'Inspect review_0000.png', exact: true }), 24],
|
|
[first.getByRole('button', { name: 'Tag or auto-tag review_0000.png', exact: true }), 24],
|
|
];
|
|
for (const [control, minimum] of sized) {
|
|
const box = await control.boundingBox();
|
|
const label = await control.evaluate(node => node.getAttribute('aria-label') || node.textContent.trim().slice(0, 40));
|
|
expect(box.height, label).toBeGreaterThanOrEqual(minimum);
|
|
expect(box.width, label).toBeGreaterThanOrEqual(24);
|
|
}
|
|
// Enter on Leave for later returns to Images.
|
|
await panel(page).getByRole('button', { name: 'Leave for later', exact: true }).focus();
|
|
await page.keyboard.press('Enter');
|
|
await expect(page).toHaveURL(/#\/images$/);
|
|
});
|
|
|
|
test('an open page shows items a scan adds and keeps the open choice', async ({ page, request }) => {
|
|
await seed(request, 1);
|
|
await open(page);
|
|
await expect.poll(async () => (await streams(request)).streams).toBe(1);
|
|
await context(page).selectOption({ label: OPTIONS[1] });
|
|
await expect(reviewRow(page)).toHaveText('Needs review1');
|
|
await expect(await request.post('/__test__/review/add', { data: { kind: 'scan' } })).toBeOK();
|
|
await expect(cards(page)).toHaveCount(2);
|
|
await expect(main(page).locator('.notice h2')).toHaveText('2 images need a decision');
|
|
await expect(reviewRow(page)).toHaveText('Needs review2');
|
|
await expect(cards(page).first()).toHaveClass(/selected/);
|
|
await expect(panel(page).locator('p.small')).toHaveText('review_0000.png');
|
|
await expect(context(page).locator('option:checked')).toHaveText(OPTIONS[1]);
|
|
await expect(warning(page)).toBeHidden();
|
|
});
|
|
|
|
test('an open page shows items a metadata scan adds', async ({ page, request }) => {
|
|
await seed(request, 1);
|
|
await expect(await request.post('/__test__/review/add', { data: { kind: 'file' } })).toBeOK();
|
|
await open(page);
|
|
await expect.poll(async () => (await streams(request)).streams).toBe(1);
|
|
await expect(cards(page)).toHaveCount(1);
|
|
const started = await request.post('/prompt_manager/jobs/scan', { data: { scope: 'new' } });
|
|
expect(started.status()).toBe(202);
|
|
await expect(cards(page)).toHaveCount(2);
|
|
await expect(cards(page).nth(1).getByRole('button', { name: 'Inspect added_0000.png', exact: true })).toBeVisible();
|
|
await expect(reviewRow(page)).toHaveText('Needs review2');
|
|
});
|
|
|
|
test('a decision in another tab leaves the open page and opens the next image', async ({ page, request, context: browserContext }) => {
|
|
await seed(request, 2);
|
|
await open(page);
|
|
await expect.poll(async () => (await streams(request)).streams).toBe(1);
|
|
const other = await browserContext.newPage();
|
|
await open(other);
|
|
await context(other).selectOption({ label: 'Leave unresolved' });
|
|
await apply(other).click();
|
|
await expect(other).toHaveURL(/#\/images$/);
|
|
await other.close();
|
|
await expect(cards(page)).toHaveCount(1);
|
|
await expect(panel(page).locator('p.small')).toHaveText('review_0001.png');
|
|
await expect(warning(page)).toHaveText('review_0000.png was decided elsewhere, so the next image is open.');
|
|
await expect(main(page).locator('.notice h2')).toHaveText('1 image needs a decision');
|
|
await expect(reviewRow(page)).toHaveText('Needs review1');
|
|
await expect(context(page)).toBeEnabled();
|
|
});
|
|
|
|
/** The queue reads (`?limit=40`, cursors) and count reads (`?limit=1`) the page sends from now on. */
|
|
function reviewReads(page) {
|
|
const reads = [];
|
|
page.on('request', item => {
|
|
const url = new URL(item.url());
|
|
if (url.pathname === '/prompt_manager/review/items') reads.push(url.searchParams.get('cursor') ? 'more' : url.search);
|
|
});
|
|
return reads;
|
|
}
|
|
|
|
test('a visit reads its queue once, and a change reads it once more', async ({ page, request }) => {
|
|
// F3 ruling: the stream's ready must not read a queue the first read already holds.
|
|
await seed(request, 1);
|
|
const reads = reviewReads(page);
|
|
await open(page);
|
|
await expect.poll(async () => (await streams(request)).streams).toBe(1);
|
|
await expect(await request.post('/__test__/review/add', { data: { kind: 'scan' } })).toBeOK();
|
|
await expect(cards(page)).toHaveCount(2);
|
|
await expect(reviewRow(page)).toHaveText('Needs review2');
|
|
// The page's first read and the change's re-read; the shell's count read at start, and the row follows the page.
|
|
expect(reads.filter(search => search === '?limit=40')).toHaveLength(2);
|
|
expect(reads.filter(search => search === '?limit=1')).toHaveLength(1);
|
|
});
|
|
|
|
test('a ready whose version cannot be read re-reads the queue once', async ({ page, request }) => {
|
|
// The stream's ready names no readable version (an older server, a proxy that rewrote it): the page reads again.
|
|
await seed(request, 1);
|
|
const reads = reviewReads(page);
|
|
// M1: `retry` keeps the browser from reconnecting the ended stream during the test, so exactly one re-read follows.
|
|
await page.route(url => url.pathname === '/prompt_manager/review/events', route => route.fulfill({
|
|
status: 200, headers: { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-store' },
|
|
body: 'retry: 3600000\nevent: ready\ndata: not json\n\n' }));
|
|
let reread = 0;
|
|
const second = page.waitForResponse(item => item.url().endsWith('/prompt_manager/review/items?limit=40') && ++reread === 2);
|
|
await open(page);
|
|
await second;
|
|
await expect(cards(page)).toHaveCount(1);
|
|
expect(reads.filter(search => search === '?limit=40')).toHaveLength(2);
|
|
});
|
|
|
|
const live = page => main(page).locator('.heading .review-live');
|
|
const NOT_LIVE = 'Live updates are paused: changes made elsewhere appear once the connection returns.';
|
|
|
|
test('a stream the browser gives up on is opened again, and the page says it is not live meanwhile', async ({ page, request }) => {
|
|
// I3: a 503 (shutdown, or a proxy while the backend restarts) fails an EventSource for good.
|
|
await seed(request, 1);
|
|
let attempts = 0;
|
|
await page.route(url => url.pathname === '/prompt_manager/review/events', route => {
|
|
attempts += 1;
|
|
if (attempts === 1) return route.fulfill({ status: 503, contentType: 'application/json', body: '{"success":false}' });
|
|
return route.fallback();
|
|
});
|
|
await open(page);
|
|
await expect(live(page)).toHaveText(NOT_LIVE);
|
|
await expect(live(page)).toBeVisible();
|
|
// The page opens the stream again (after 3 s) and is live once it sends ready.
|
|
await expect.poll(async () => (await streams(request)).streams, { timeout: 15000 }).toBe(1);
|
|
await expect(live(page)).toBeHidden();
|
|
await expect(await request.post('/__test__/review/add', { data: { kind: 'scan' } })).toBeOK();
|
|
await expect(cards(page)).toHaveCount(2);
|
|
expect(attempts).toBe(2);
|
|
});
|
|
|
|
/** Make the page hidden or visible as a tab switch does. */
|
|
async function setVisible(page, visible) {
|
|
await page.evaluate(shown => {
|
|
Object.defineProperty(document, 'hidden', { configurable: true, get: () => !shown });
|
|
Object.defineProperty(document, 'visibilityState', { configurable: true, get: () => (shown ? 'visible' : 'hidden') });
|
|
document.dispatchEvent(new Event('visibilitychange'));
|
|
}, visible);
|
|
}
|
|
|
|
test('a hidden tab closes its stream and a visible one reads only what changed meanwhile', async ({ page, request }) => {
|
|
// I4: background tabs must not hold one of the origin's six connections.
|
|
await seed(request, 1);
|
|
const reads = reviewReads(page);
|
|
await open(page);
|
|
await expect.poll(async () => (await streams(request)).streams).toBe(1);
|
|
await setVisible(page, false);
|
|
await expect(await request.post('/__test__/review/add', { data: { kind: 'scan' } })).toBeOK();
|
|
await closedStreamsDropped(request);
|
|
await expect(cards(page)).toHaveCount(1);
|
|
expect(reads.filter(search => search === '?limit=40')).toHaveLength(1);
|
|
// Visible again: the reopened stream's ready names a newer version, so the page reads once.
|
|
const reread = page.waitForResponse(item => item.url().endsWith('/prompt_manager/review/items?limit=40'));
|
|
await setVisible(page, true);
|
|
await expect.poll(async () => (await streams(request)).streams).toBe(1);
|
|
await reread;
|
|
await expect(cards(page)).toHaveCount(2);
|
|
await expect(live(page)).toBeHidden();
|
|
expect(reads.filter(search => search === '?limit=40')).toHaveLength(2);
|
|
});
|
|
|
|
test('a stream whose close reaches the server after a change is dropped at a later write', async ({ page, request }) => {
|
|
// The CI ordering made certain: the hidden page's close arrives only after the scan addition's change was
|
|
// written to its stream, so that write succeeds and a later one finds the stream closed.
|
|
await seed(request, 1);
|
|
await open(page);
|
|
await expect.poll(async () => (await streams(request)).streams).toBe(1);
|
|
await page.evaluate(() => {
|
|
const close = EventSource.prototype.close;
|
|
window.lateChanges = 0;
|
|
window.heldCloses = [];
|
|
EventSource.prototype.close = function () {
|
|
this.addEventListener('change', () => { window.lateChanges += 1; });
|
|
window.heldCloses.push(() => close.call(this));
|
|
};
|
|
});
|
|
await setVisible(page, false);
|
|
await expect(await request.post('/__test__/review/add', { data: { kind: 'scan' } })).toBeOK();
|
|
await expect.poll(() => page.evaluate(() => window.lateChanges)).toBe(1);
|
|
await page.evaluate(() => window.heldCloses.splice(0).forEach(close => close()));
|
|
expect((await streams(request)).streams).toBe(1);
|
|
await closedStreamsDropped(request);
|
|
await expect(cards(page)).toHaveCount(1);
|
|
});
|
|
|
|
test('a re-read refreshes a card whose media or target changed', async ({ page, request }) => {
|
|
// M6 and M10: a root came or went between reads; the card follows, and a known thumbnail is its media.
|
|
await seed(request, 2);
|
|
let rewrite = false;
|
|
await page.route(url => url.pathname === '/prompt_manager/review/items' && url.search === '?limit=40', async route => {
|
|
if (!rewrite) return route.fallback();
|
|
const response = await route.fetch();
|
|
const body = await response.json();
|
|
body.items[0] = { ...body.items[0], thumbnail_url: `${body.items[0].url}&thumb=1` };
|
|
body.items[1] = { ...body.items[1], url: null, thumbnail_url: null, target: null, unavailable: true };
|
|
return route.fulfill({ response, json: body });
|
|
});
|
|
await open(page);
|
|
await expect.poll(async () => (await streams(request)).streams).toBe(1);
|
|
const second = cards(page).nth(1);
|
|
await expect(second.getByRole('button', { name: 'Open review_0001.png', exact: true })).not.toHaveAttribute('aria-disabled', 'true');
|
|
rewrite = true;
|
|
await expect(await request.post('/__test__/review/add', { data: { kind: 'scan' } })).toBeOK();
|
|
await expect(cards(page)).toHaveCount(3);
|
|
await expect(cards(page).first().locator('img')).toHaveAttribute('src', /&thumb=1$/);
|
|
await expect(second.getByRole('button', { name: 'Open review_0001.png', exact: true })).toHaveAttribute('aria-disabled', 'true');
|
|
await expect(second.locator('img')).toHaveCount(0);
|
|
await expect(second.locator('.image-card-actions button').last()).toHaveAttribute('aria-disabled', 'true');
|
|
await expect(cards(page).first()).toHaveClass(/selected/);
|
|
});
|
|
|
|
test('leaving during the observe releases the capture it answers', async ({ page, request }) => {
|
|
// M4: the server made the capture; the page left before the answer came.
|
|
await seed(request, 1);
|
|
await open(page);
|
|
let held;
|
|
const sent = new Promise(resolve => { held = resolve; });
|
|
await page.route(url => url.pathname === '/prompt_manager/image-annotations/observe', async route => {
|
|
const response = await route.fetch();
|
|
held(() => route.fulfill({ response }));
|
|
});
|
|
await apply(page).click();
|
|
const answer = await sent;
|
|
expect((await streams(request)).captures).toBe(1);
|
|
await page.evaluate(() => { window.location.hash = '#/tags'; });
|
|
await expect(main(page).getByRole('heading', { level: 1 })).toHaveText('Tags & categories');
|
|
await answer();
|
|
await expect.poll(async () => (await streams(request)).captures).toBe(0);
|
|
});
|
|
|
|
test('a live re-read keeps the loaded depth and the scroll position', async ({ page, request }) => {
|
|
// F3 ruling: a queue change re-reads as many items as Load more had shown, and the page does not jump.
|
|
await seed(request, 45);
|
|
await open(page);
|
|
await expect.poll(async () => (await streams(request)).streams).toBe(1);
|
|
await main(page).getByRole('button', { name: 'Load more images', exact: true }).click();
|
|
await expect(cards(page)).toHaveCount(45);
|
|
await cards(page).last().scrollIntoViewIfNeeded();
|
|
const scrollTop = () => cards(page).first().evaluate(node => {
|
|
for (let el = node.parentElement; el; el = el.parentElement) {
|
|
const style = getComputedStyle(el);
|
|
if (/(auto|scroll)/.test(style.overflowY) && el.scrollHeight > el.clientHeight) return el.scrollTop;
|
|
}
|
|
return document.scrollingElement.scrollTop;
|
|
});
|
|
const before = await scrollTop();
|
|
expect(before).toBeGreaterThan(0);
|
|
const reads = reviewReads(page);
|
|
await expect(await request.post('/__test__/review/add', { data: { kind: 'scan' } })).toBeOK();
|
|
await expect(main(page).locator('.notice h2')).toHaveText('46 images need a decision');
|
|
await expect(cards(page)).toHaveCount(46);
|
|
expect(await scrollTop()).toBe(before);
|
|
expect(reads).toEqual(['?limit=40', 'more']);
|
|
await expect(main(page).locator('.infinite-continuation')).toHaveCount(0);
|
|
});
|
|
|
|
test('teardown releases captures listeners and requests', async ({ page, request }) => {
|
|
await seed(request, 1);
|
|
await open(page);
|
|
await expect.poll(async () => (await streams(request)).streams).toBe(1);
|
|
const inFlight = new Set();
|
|
page.on('request', item => { if (item.url().includes('/prompt_manager/review/')) inFlight.add(item); });
|
|
page.on('requestfinished', item => inFlight.delete(item));
|
|
page.on('requestfailed', item => inFlight.delete(item));
|
|
// A decision whose answer never comes: leaving the page must still release its capture.
|
|
let held;
|
|
const sent = new Promise(resolve => { held = resolve; });
|
|
await page.route(url => /\/decision$/.test(url.pathname), route => held(route));
|
|
await apply(page).click();
|
|
const route = await sent;
|
|
expect((await streams(request)).captures).toBe(1);
|
|
await page.evaluate(() => { window.location.hash = '#/tags'; });
|
|
await expect(main(page).getByRole('heading', { level: 1 })).toHaveText('Tags & categories');
|
|
await expect.poll(async () => (await streams(request)).captures).toBe(0);
|
|
await route.abort().catch(() => {});
|
|
await closedStreamsDropped(request);
|
|
await expect.poll(() => inFlight.size).toBe(0);
|
|
});
|