Vito
40dc0e5417
* feat(saved-views): keep a collection in a saved view Images saved views gain a collection key (#331 D140): empty or a collection id of 1 to 9 digits. Writes refuse favorites together with a collection; older rows read an empty collection, and a stored row with both opens the collection, as the listing does for a URL with both. Part of #331 * feat(collections): store collections in the library database * feat(collections): add, remove and rename collections and keep members through duplicate cleanup * feat(collections): add collection routes and the Images collection filter * feat(images): store images' own categories in the library database (#332) One new table, image_categories, and its category index, created empty by a forward-only migration that reads and writes only its own objects. Startup checks the structure; restore also checks the values. The store sets, clears and reads own categories by file key (the deepest output source holding the file and the path below it), and copies a removed duplicate's category to a kept copy that has none. * feat(images): duplicate cleanup keeps images' own categories (#332) The kept copy's own category wins; a kept copy without one receives the removed copy's, keyed by the deepest output source holding each file. The removed copy's row is never deleted, so a give-back or a failed delete loses nothing. The job log reports how many were kept. * feat(images): set, remove and list images' own categories (#332) PUT /prompt_manager/images/category sets the own category of up to 500 listed files, DELETE removes it (listed or not), and GET /prompt_manager/images/categories lists the values whose file is listed. Targets are the Images listing identity of an output source, checked by media_target (shared with Collections). The routes never touch prompts, recipes or links; POST /prompt_manager/bulk/category is unchanged. * fix(images): key symlinked output folders and keep key work off the event loop (#332) Review fixes: a source matches by its configured spelling too, so a detected output folder that is a symlink keys its files (routes and duplicate cleanup). File keys are computed in the executor. A path no source holds is a plain 403, a lone surrogate a 400. The install repairs a table that lacks its category index instead of refusing to open. * fix(collections): address review findings * feat(images): set or remove a category on all N matching images (#332) The category routes also accept the Images listing filter of "Select all N matching" (#392) instead of explicit items, resolved now and capped at 500 images like an explicit selection. * feat(collections): browse a collection from the sidebar The sidebar gains the concept's COLLECTIONS group (D136): one row per collection with its folder icon, name and listed-member count, without the PROPOSED badge; the label shows once a collection exists. A row opens #/collection/<id>, the Images page filtered to that collection (D137): the collection's name as h1, Collection as breadcrumb and title, Edit to rename or delete it through the saved views' Edit dialog with collection nouns, and a note counting members the sources do not list now. An unknown or deleted collection shows a page that says so with a link to Images. A saved view on a deleted collection lists nothing and says so (MC6, D140). The list is read again after a restore and the counts 300 ms after a change. Part of #331 * test(collections): compare the COLLECTIONS group with the concept The concept hides COLLECTIONS at 950 px and below, which would leave a phone no way to open a collection; production shows the rows there in the wrapped layout of every other sidebar nav (D136). The shell comparison now compares the group instead of filtering it out: the concept fixture seeds Landscapes (12) and Experiments (8), the rows compare by name order, and at phone width the nav compares against the concept's own sidebar-nav layout. The collection rows are checked at 1600x1100 and 390x844 in both themes. Part of #331 * test(vendor): count the #332 host case in the execution matrix image-attribution.spec.mjs gains the image category route case, so the execution config lists 92 tests (3 attribution cases per project). * test(browser): install the slideshow clock before wrapping setTimeout The slideshow fixture wrapped window.setTimeout before page.clock.install(), so the viewer's timer ran on real time and clock.runFor() did not drive it; a late WebKit timer failed 'slideshow exposes exact state labels' on CI. * feat(collections): add and remove from the selection bar Add to collection follows Set category in the Images selection bar and opens the concept's simpleInput ("Add selected images to collection", "Collection name", Add) with the existing names as a datalist. Remove from collection follows it while a collection filter is active and reloads the listing in place, keeping the checked files still listed. Every outcome uses the design's strings (section 7.4). The routes take at most 500 explicit files, so an "all N matching" selection is sent only when every match is loaded, checked and at most 500; otherwise the action toasts "Select at most 500 images." (D138, #331). * fix(collections): address review findings - A list read superseded by a newer one (the 300 ms count read, a restore) no longer shows "could not be loaded": the collection and saved-view pages wait for the list to settle. - A listing that finds the open collection gone shows the deleted page once the list no longer holds it; when the list read fails or still holds it, the page keeps the listing's error and Retry instead of staying blank, and each failed read is reported again. - The missing-members note follows every list read and goes away at zero. - A rename that settles after its Edit dialog closed leaves any dialog opened since alone. - The deleted-collection, list-failed and saved-view failure pages focus their title after a route change, as every page does. Part of #331 * feat(collections): add and remove from the inspector and the viewer The shared inspector's footer ends with Collections… (folder icon) after Prompt history for a listed file, in the Images side panel and the viewer. Its dialog reads the file's membership, lists every collection as the concept's checkbox rows, takes an optional new name, and Save sends one request per change (new name, added, removed). A failure keeps the dialog with the membership read again. On a collection page a change to the open collection reloads the listing at once from the side panel and only when the viewer closes from the viewer. The inspector concept comparison draws the button into the concept after Prompt history (D139, #331). * test(collections): compare the collection page and dialog with the concept images-concept compares Add to collection in place in the selection bar (only Remove links… stays omitted) and the collection page's heading, toolbar and filter row against the concept's #collection-landscapes, with D137's Edit drawn into the concept. collections-concept compares the Add to collection dialog with the concept's simpleInput (D138: "Add", an empty field, the datalist of names), in both themes at 1600 and 390 px, with a mutation check. TESTING.md gains the Collections contract (database, keys, missing members, duplicate move, restore, routes, rules, limits, the PR 1 rulings and the all-matching ruling), D136-D140, and amends D28 and D8; docs/application-redesign.md gets the delivery-status line. The coverage baseline adds the two new modules; optional collection callbacks are null rather than no-op defaults so they do not count as uncovered functions. * test(coverage): keep main's floors for files this PR does not touch coverage:update raised nine floors of untouched files from one run; metadata-autocomplete.js branches then measured 84.84 against 85. * fix(collections): address review findings - M1: after a failed Save the Collections dialog shows the membership loading and keeps Save disabled until the re-read lands, so a stale plan cannot be sent. - M2: the changes a Save made reach the page only when the dialog closes, so a collection page's reload cannot remove the dialog before its failure is read. - L4: a New collection name equal to a listed collection ignoring case is that collection's checkbox, checked; never an add then a remove. - L5: a name that cannot be a collection name is refused on the field; nothing is sent, the checkbox edits stay, no re-read. - L6: focus starts on the field and moves to the first checkbox once listed; closing after a re-render replaced the trigger focuses the inspector's current Collections… button or its heading (openContentDialog takes an optional focusTarget). - L3, L7: TESTING.md D138/D139 describe the stale-source and deleted collection outcomes and the above; the viewer spec asserts no listing request while it is open, and a browser test covers M2. * test(legacy): record the image category routes in the legacy contract snapshot (#332) #332 adds PUT/DELETE /prompt_manager/images/category and GET /prompt_manager/images/categories; the legacy pages' routes are unchanged. * test(duplicates): a removed copy with a collection and a category moves both (#331, #332) * test(collections): map the Add to collection suggestions to the shared dialog's datalist (#331) After the merge with #332 PR 3 the input dialog places its datalist after the field with the id workspace-input-suggestions; the concept mapping follows.
857 lines
49 KiB
JavaScript
857 lines
49 KiB
JavaScript
import { startCoverage, saveCoverage } from '../../tools/vendor/browser-coverage.mjs';
|
||
import { test, expect } from './fixtures.mjs';
|
||
|
||
// Collections (#331): the sidebar COLLECTIONS group (D136, concept index.html 28–31, app.js 336–339), the collection
|
||
// page `#/collection/<id>` with its Edit (D137, concept render a1186–1189) and saved views on a collection (D140).
|
||
const workspace = '/prompt_manager/workspace';
|
||
const API = '/prompt_manager/collections';
|
||
const main = page => page.locator('#workspace-main');
|
||
const heading = page => main(page).getByRole('heading', { level: 1 });
|
||
const breadcrumb = page => page.locator('#workspace-breadcrumb');
|
||
const description = page => main(page).locator('.heading p.muted');
|
||
const missingNote = page => main(page).locator('.heading p.small');
|
||
const search = page => page.getByRole('searchbox', { name: 'Search workspace', exact: true });
|
||
const imageCards = page => page.locator('article[data-image-key]');
|
||
const collectionsNav = page => page.getByRole('navigation', { name: 'Collections', exact: true });
|
||
const collectionsLabel = page => page.locator('aside.sidebar .sidebar-label', { hasText: 'COLLECTIONS' });
|
||
const rows = page => collectionsNav(page).locator('a[data-route^="collection/"]');
|
||
const row = (page, name) => rows(page).filter({ hasText: name });
|
||
const savedNav = page => page.getByRole('navigation', { name: 'Saved views', exact: true });
|
||
const editButton = page => main(page).locator('.heading-actions > button').first();
|
||
const editDialog = page => page.getByRole('dialog', { name: 'Edit collection', exact: true });
|
||
const deleteDialog = page => page.getByRole('dialog', { name: 'Delete collection', exact: true });
|
||
const nameField = page => editDialog(page).getByRole('textbox', { name: 'Collection name', exact: true });
|
||
const toast = page => page.locator('#workspace-toast');
|
||
|
||
async function seed(request) {
|
||
const response = await request.post('/__test__/collections/seed');
|
||
await expect(response).toBeOK();
|
||
return response.json();
|
||
}
|
||
|
||
async function listed(request) {
|
||
const response = await request.get(API);
|
||
await expect(response).toBeOK();
|
||
return (await response.json()).collections;
|
||
}
|
||
|
||
test.beforeEach(async ({ page, request, browserName }) => {
|
||
await startCoverage(page, browserName);
|
||
await expect(await request.post('/__test__/reset')).toBeOK();
|
||
page.collectionErrors = [];
|
||
page.on('pageerror', error => page.collectionErrors.push(error.message));
|
||
// D51: deleting asks inside the dialog; no browser dialog (window.confirm) may ever open.
|
||
page.on('dialog', dialog => { page.collectionErrors.push(`browser ${dialog.type()}`); dialog.dismiss().catch(() => {}); });
|
||
});
|
||
|
||
test.afterEach(async ({ page, browserName }) => {
|
||
await saveCoverage(page, browserName);
|
||
expect(page.collectionErrors).toEqual([]);
|
||
});
|
||
|
||
test('a collection row opens its page', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
const { id } = manifest.collections.Landscapes;
|
||
await page.setViewportSize({ width: 1600, height: 1100 });
|
||
await page.goto(`${workspace}#/images`);
|
||
// D136: name order, the listed-member count, no "PROPOSED" badge.
|
||
await expect(collectionsLabel(page)).toBeVisible();
|
||
await expect(collectionsLabel(page)).toHaveText('COLLECTIONS');
|
||
await expect(rows(page)).toHaveCount(2);
|
||
await expect(rows(page).nth(0)).toContainText('Experiments');
|
||
await expect(rows(page).nth(1)).toContainText('Landscapes');
|
||
await expect(row(page, 'Experiments').locator('.nav-count')).toHaveText('8');
|
||
await expect(row(page, 'Landscapes').locator('.nav-count')).toHaveText('12');
|
||
await expect(row(page, 'Landscapes')).toHaveAttribute('href', `#/collection/${id}`);
|
||
await expect(row(page, 'Landscapes').locator('svg')).toHaveCount(1);
|
||
await expect(page.locator('aside.sidebar .new-label')).toHaveCount(0);
|
||
await expect(imageCards(page)).toHaveCount(21);
|
||
|
||
await row(page, 'Landscapes').click();
|
||
await expect(page).toHaveURL(new RegExp(`#/collection/${id}$`));
|
||
await expect(heading(page)).toHaveText('Landscapes');
|
||
await expect(breadcrumb(page)).toHaveText('Collection');
|
||
await expect(page).toHaveTitle('Collection · Prompt Manager');
|
||
await expect(row(page, 'Landscapes')).toHaveAttribute('aria-current', 'page');
|
||
await expect(description(page)).toHaveText('Your generations, their prompts, and the next idea.');
|
||
await expect(imageCards(page)).toHaveCount(12);
|
||
for (const path of manifest.files.Landscapes) {
|
||
await expect(page.locator(`article[data-image-key$=":${path}"]`)).toHaveCount(1);
|
||
}
|
||
// MC3: the member whose file is gone is not listed and is counted in the note.
|
||
await expect(missingNote(page)).toHaveText('1 image in this collection is not in your current sources.');
|
||
|
||
// Every Images filter narrows the members.
|
||
await search(page).fill('landscape_03');
|
||
await expect(imageCards(page)).toHaveCount(1);
|
||
await search(page).fill('');
|
||
await expect(imageCards(page)).toHaveCount(12);
|
||
|
||
await row(page, 'Experiments').click();
|
||
await expect(heading(page)).toHaveText('Experiments');
|
||
await expect(imageCards(page)).toHaveCount(8);
|
||
await expect(missingNote(page)).toHaveCount(0);
|
||
});
|
||
|
||
test('without collections the group shows no label and no rows', async ({ page }) => {
|
||
await page.goto(`${workspace}#/images`);
|
||
await expect(imageCards(page).first()).toBeVisible();
|
||
await expect(collectionsNav(page)).toHaveCount(1);
|
||
await expect(rows(page)).toHaveCount(0);
|
||
await expect(collectionsLabel(page)).toBeHidden();
|
||
});
|
||
|
||
test('a collection page neither restores nor replaces the Images return state', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
await page.goto(`${workspace}#/images`);
|
||
await search(page).fill('experiment');
|
||
await expect(imageCards(page)).toHaveCount(8);
|
||
await row(page, 'Landscapes').click();
|
||
await expect(search(page)).toHaveValue('');
|
||
await expect(imageCards(page)).toHaveCount(12);
|
||
await search(page).fill('landscape_01');
|
||
await expect(imageCards(page)).toHaveCount(1);
|
||
await page.goto(`${workspace}#/images`);
|
||
await expect(search(page)).toHaveValue('experiment');
|
||
expect(manifest.collections.Landscapes.count).toBe(12);
|
||
});
|
||
|
||
test('Edit renames the open collection; a taken name stays in the dialog', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
const { id } = manifest.collections.Landscapes;
|
||
await page.goto(`${workspace}#/collection/${id}`);
|
||
await expect(heading(page)).toHaveText('Landscapes');
|
||
await expect(editButton(page)).toHaveText('Edit');
|
||
await editButton(page).click();
|
||
await expect(nameField(page)).toHaveValue('Landscapes');
|
||
await expect(editDialog(page).locator('.dialog-actions button')).toHaveText(['Delete…', 'Cancel', 'Save']);
|
||
|
||
// CUJ 3: names are unique ignoring case.
|
||
await nameField(page).fill('experiments');
|
||
await editDialog(page).getByRole('button', { name: 'Save', exact: true }).click();
|
||
await expect(editDialog(page).getByRole('alert')).toHaveText('A collection named “experiments” already exists.');
|
||
await expect(heading(page)).toHaveText('Landscapes');
|
||
|
||
await nameField(page).fill(' Landscape grids ');
|
||
await editDialog(page).getByRole('button', { name: 'Save', exact: true }).click();
|
||
await expect(editDialog(page)).toHaveCount(0);
|
||
await expect(toast(page)).toHaveText('Collection renamed.');
|
||
await expect(heading(page)).toHaveText('Landscape grids');
|
||
await expect(breadcrumb(page)).toHaveText('Collection');
|
||
await expect(row(page, 'Landscape grids')).toHaveAttribute('aria-current', 'page');
|
||
await expect(rows(page).nth(1)).toContainText('Landscape grids');
|
||
expect((await listed(request)).map(item => item.name)).toEqual(['Experiments', 'Landscape grids']);
|
||
});
|
||
|
||
test('a failed rename keeps the dialog; a failed delete changes nothing', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
const { id } = manifest.collections.Experiments;
|
||
await page.goto(`${workspace}#/collection/${id}`);
|
||
await expect(heading(page)).toHaveText('Experiments');
|
||
let failing = true;
|
||
await page.route(`**${API}/${id}`, route => failing
|
||
? route.fulfill({ status: 500, contentType: 'application/json', body: '{"success":false,"error":"The collection could not be changed."}' })
|
||
: route.fallback());
|
||
await editButton(page).click();
|
||
await nameField(page).fill('Tests');
|
||
await editDialog(page).getByRole('button', { name: 'Save', exact: true }).click();
|
||
await expect(toast(page)).toHaveText('The collection could not be renamed. Try again.');
|
||
await expect(editDialog(page)).toBeVisible();
|
||
await expect(heading(page)).toHaveText('Experiments');
|
||
await editDialog(page).getByRole('button', { name: 'Delete…', exact: true }).click();
|
||
await expect(deleteDialog(page).locator('p')).toHaveText(
|
||
'Delete “Experiments”? Its 8 images stay where they are; only the collection is removed.');
|
||
await deleteDialog(page).getByRole('button', { name: 'Delete', exact: true }).click();
|
||
await expect(toast(page)).toHaveText('The collection could not be deleted. Try again.');
|
||
await expect(page).toHaveURL(new RegExp(`#/collection/${id}$`));
|
||
expect(await listed(request)).toHaveLength(2);
|
||
failing = false;
|
||
});
|
||
|
||
test('Delete removes the collection only after confirming, and leaves every file', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
const { id } = manifest.collections.Landscapes;
|
||
await page.goto(`${workspace}#/collection/${id}`);
|
||
await editButton(page).click();
|
||
await editDialog(page).getByRole('button', { name: 'Delete…', exact: true }).click();
|
||
// The stored count: 12 listed members and the missing one.
|
||
await expect(deleteDialog(page).locator('p')).toHaveText(
|
||
'Delete “Landscapes”? Its 13 images stay where they are; only the collection is removed.');
|
||
await deleteDialog(page).getByRole('button', { name: 'Cancel', exact: true }).click();
|
||
await expect(deleteDialog(page)).toHaveCount(0);
|
||
expect(await listed(request)).toHaveLength(2);
|
||
|
||
await editButton(page).click();
|
||
await editDialog(page).getByRole('button', { name: 'Delete…', exact: true }).click();
|
||
await deleteDialog(page).getByRole('button', { name: 'Delete', exact: true }).click();
|
||
await expect(toast(page)).toHaveText('Collection deleted.');
|
||
await expect(page).toHaveURL(/#\/images$/);
|
||
await expect(heading(page)).toHaveText('Images');
|
||
await expect(rows(page)).toHaveCount(1);
|
||
await expect(imageCards(page)).toHaveCount(21);
|
||
expect((await listed(request)).map(item => item.name)).toEqual(['Experiments']);
|
||
});
|
||
|
||
test('an unknown collection says it no longer exists, with the way back to Images', async ({ page, request }) => {
|
||
await seed(request);
|
||
await page.goto(`${workspace}#/collection/999999`);
|
||
await expect(heading(page)).toHaveText('Collection');
|
||
await expect(breadcrumb(page)).toHaveText('Collection');
|
||
await expect(description(page)).toHaveText('This collection no longer exists.');
|
||
await expect(imageCards(page)).toHaveCount(0);
|
||
await main(page).getByRole('link', { name: 'Open Images', exact: true }).click();
|
||
await expect(page).toHaveURL(/#\/images$/);
|
||
await expect(imageCards(page)).toHaveCount(21);
|
||
});
|
||
|
||
test('a failed list says so and Retry reads it again', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
const { id } = manifest.collections.Experiments;
|
||
let failing = true;
|
||
await page.route(`**${API}`, route => failing
|
||
? route.fulfill({ status: 500, contentType: 'application/json', body: '{"success":false,"error":"Collections could not be read."}' })
|
||
: route.fallback());
|
||
await page.goto(`${workspace}#/collection/${id}`);
|
||
await expect(description(page)).toHaveText('Collections could not be loaded. Your saved data has not changed.');
|
||
await expect(description(page)).toHaveAttribute('role', 'alert');
|
||
await expect(rows(page)).toHaveCount(0);
|
||
failing = false;
|
||
await main(page).getByRole('button', { name: 'Retry', exact: true }).click();
|
||
await expect(heading(page)).toHaveText('Experiments');
|
||
await expect(imageCards(page)).toHaveCount(8);
|
||
await expect(rows(page)).toHaveCount(2);
|
||
});
|
||
|
||
test('a saved view keeps its collection, and says so once the collection is deleted (MC6)', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
const view = manifest.saved_view;
|
||
await page.goto(`${workspace}#/images`);
|
||
await savedNav(page).locator(`a[data-route="saved/${view.id}"]`).click();
|
||
await expect(heading(page)).toHaveText(view.name);
|
||
await expect(breadcrumb(page)).toHaveText(view.name);
|
||
await expect(imageCards(page)).toHaveCount(8);
|
||
// A saved view is not the collection page: no missing note.
|
||
await expect(missingNote(page)).toHaveCount(0);
|
||
|
||
// Save view on a collection page stores the collection.
|
||
await row(page, 'Landscapes').click();
|
||
await expect(imageCards(page)).toHaveCount(12);
|
||
await search(page).fill('landscape_1');
|
||
await expect(imageCards(page)).toHaveCount(3);
|
||
await main(page).getByRole('button', { name: 'Save view', exact: true }).click();
|
||
const save = page.getByRole('dialog', { name: 'Save this view', exact: true });
|
||
await save.getByRole('textbox', { name: 'View name', exact: true }).fill('Grid seed');
|
||
await save.getByRole('button', { name: 'Save', exact: true }).click();
|
||
await expect(toast(page)).toHaveText('Saved view added to the sidebar.');
|
||
const views = (await (await request.get('/prompt_manager/saved-views')).json()).views;
|
||
const saved = views.find(item => item.name === 'Grid seed');
|
||
expect(saved.state).toMatchObject({ q: 'landscape_1', favorites: false, collection: String(manifest.collections.Landscapes.id) });
|
||
|
||
await expect(await request.delete(`${API}/${manifest.collections.Experiments.id}`)).toBeOK();
|
||
await page.goto(`${workspace}#/saved/${view.id}`);
|
||
await expect(heading(page)).toHaveText(view.name);
|
||
await expect(main(page).locator('.empty')).toHaveText('The collection this view uses was deleted.');
|
||
await expect(main(page).locator('.empty')).toBeVisible();
|
||
await expect(imageCards(page)).toHaveCount(0);
|
||
await expect(main(page).getByRole('button', { name: 'Retry', exact: true })).toBeHidden();
|
||
});
|
||
|
||
test('a collection deleted in another tab shows the deleted-collection page', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
const { id } = manifest.collections.Experiments;
|
||
await page.goto(`${workspace}#/images`);
|
||
await expect(rows(page)).toHaveCount(2);
|
||
await expect(await request.delete(`${API}/${id}`)).toBeOK();
|
||
await row(page, 'Experiments').click();
|
||
await expect(description(page)).toHaveText('This collection no longer exists.');
|
||
await expect(rows(page)).toHaveCount(1);
|
||
});
|
||
|
||
// D136 / CUJ 15: the rows show and open at desktop and phone width in both themes. The concept's own phone rule hides
|
||
// every nav count there, so the rows keep their counts only at desktop width.
|
||
for (const [width, height] of [[1600, 1100], [390, 844]]) for (const theme of ['dark', 'light']) {
|
||
test(`collection rows show and open at ${width}x${height} ${theme}`, async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
await page.setViewportSize({ width, height });
|
||
await page.goto(`${workspace}#/images`);
|
||
await page.getByRole('combobox', { name: 'Theme', exact: true }).selectOption(theme);
|
||
for (const name of ['Experiments', 'Landscapes']) await expect(row(page, name)).toBeVisible();
|
||
const count = row(page, 'Landscapes').locator('.nav-count');
|
||
if (width > 950) await expect(count).toBeVisible();
|
||
else await expect(count).toBeHidden();
|
||
// Phone width: the label stays hidden as every sidebar label is; desktop shows it.
|
||
if (width > 950) await expect(collectionsLabel(page)).toBeVisible();
|
||
else await expect(collectionsLabel(page)).toBeHidden();
|
||
expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
|
||
await row(page, 'Landscapes').click();
|
||
await expect(page).toHaveURL(new RegExp(`#/collection/${manifest.collections.Landscapes.id}$`));
|
||
await expect(heading(page)).toHaveText('Landscapes');
|
||
await expect(imageCards(page)).toHaveCount(12);
|
||
});
|
||
}
|
||
|
||
test('a finished restore reads the collections again', async ({ page, request }) => {
|
||
await seed(request);
|
||
await expect(await request.post('/__test__/system/reset')).toBeOK();
|
||
await expect(await request.post('/__test__/jobs/restart')).toBeOK();
|
||
try {
|
||
const backup = await request.get('/prompt_manager/backup');
|
||
await expect(backup).toBeOK();
|
||
const bytes = await backup.body();
|
||
const [experiments] = await listed(request);
|
||
await expect(await request.delete(`${API}/${experiments.id}`)).toBeOK();
|
||
await page.goto(`${workspace}#/system/backups`);
|
||
await expect(rows(page)).toHaveCount(1);
|
||
const chooser = page.waitForEvent('filechooser');
|
||
await page.getByRole('button', { name: 'Review restore…', exact: true }).click();
|
||
await (await chooser).setFiles({ name: 'prompts_backup_20261027_093000.db', mimeType: 'application/octet-stream', buffer: bytes });
|
||
await page.locator('dialog#modal[open]').getByRole('button', { name: 'Restore', exact: true }).click();
|
||
await expect(toast(page)).toHaveText(/^Database restore finished · /);
|
||
// The list was read again without a reload.
|
||
await expect(rows(page)).toHaveCount(2);
|
||
await expect(row(page, 'Experiments').locator('.nav-count')).toHaveText('8');
|
||
} finally {
|
||
await request.post('/__test__/jobs/restart');
|
||
await request.post('/__test__/system/reset');
|
||
}
|
||
});
|
||
|
||
test('renaming a collection deleted in another tab says so and shows the deleted-collection page', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
const { id } = manifest.collections.Experiments;
|
||
await page.goto(`${workspace}#/collection/${id}`);
|
||
await expect(heading(page)).toHaveText('Experiments');
|
||
await editButton(page).click();
|
||
await expect(await request.delete(`${API}/${id}`)).toBeOK();
|
||
await nameField(page).fill('Tests');
|
||
await editDialog(page).getByRole('button', { name: 'Save', exact: true }).click();
|
||
await expect(toast(page)).toHaveText('That collection no longer exists.');
|
||
await expect(editDialog(page)).toHaveCount(0);
|
||
await expect(description(page)).toHaveText('This collection no longer exists.');
|
||
await expect(rows(page)).toHaveCount(1);
|
||
});
|
||
|
||
/** A Playwright hold on the collections list read: `held` fills as reads arrive; `release()` lets them all through. */
|
||
async function holdListReads(page, answer = route => route.fallback()) {
|
||
const held = [];
|
||
let open = false;
|
||
await page.route(`**${API}`, route => {
|
||
if (route.request().method() !== 'GET') return route.fallback();
|
||
if (open) return answer(route);
|
||
held.push(route);
|
||
return undefined;
|
||
});
|
||
return {
|
||
held,
|
||
async release() {
|
||
open = true;
|
||
for (const route of held.splice(0)) await answer(route).catch(() => {});
|
||
},
|
||
};
|
||
}
|
||
|
||
test('a list read superseded by another read still opens a collection made since (review M1)', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
const listing = await (await request.get('/prompt_manager/images/output?mode=workspace&limit=1')).json();
|
||
const [file] = listing.images;
|
||
await page.goto(`${workspace}#/collection/${manifest.collections.Landscapes.id}`);
|
||
await expect(heading(page)).toHaveText('Landscapes');
|
||
// Another tab makes "Fresh"; this tab does not list it yet.
|
||
const added = await request.post(`${API}/items`, { data: { name: 'Fresh',
|
||
items: [{ root_index: file.root_index, root_scope: file.root_scope, path: file.path }] } });
|
||
await expect(added).toBeOK();
|
||
const fresh = (await added.json()).collection.id;
|
||
await expect(rows(page)).toHaveCount(2);
|
||
const hold = await holdListReads(page);
|
||
// A rename schedules the 300 ms count re-read; opening "Fresh" first reads the list once more. The timer's read
|
||
// supersedes that one while both are held.
|
||
await editButton(page).click();
|
||
await nameField(page).fill('Landscape grids');
|
||
await editDialog(page).getByRole('button', { name: 'Save', exact: true }).click();
|
||
await expect(toast(page)).toHaveText('Collection renamed.');
|
||
await page.evaluate(hash => { window.location.hash = hash; }, `#/collection/${fresh}`);
|
||
await expect.poll(() => hold.held.length).toBeGreaterThanOrEqual(2);
|
||
await expect(main(page)).not.toContainText('Collections could not be loaded.');
|
||
await hold.release();
|
||
await expect(heading(page)).toHaveText('Fresh');
|
||
await expect(imageCards(page)).toHaveCount(1);
|
||
});
|
||
|
||
test('a listing that finds the collection gone while the list still has it offers Retry (review M2)', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
const { id } = manifest.collections.Experiments;
|
||
let gone = true;
|
||
await page.route('**/prompt_manager/images/output?*', route => gone && route.request().url().includes(`collection=${id}`)
|
||
? route.fulfill({ status: 404, contentType: 'application/json',
|
||
body: '{"success":false,"error":"Collection not found","code":"collection-not-found"}' })
|
||
: route.fallback());
|
||
await page.goto(`${workspace}#/images`);
|
||
await expect(rows(page)).toHaveCount(2);
|
||
// The shell's re-read is held, then fails: the page must not stay blank.
|
||
const hold = await holdListReads(page, route => route.fulfill({ status: 500, contentType: 'application/json',
|
||
body: '{"success":false,"error":"Collections could not be read."}' }));
|
||
await row(page, 'Experiments').click();
|
||
await expect.poll(() => hold.held.length).toBe(1);
|
||
await hold.release();
|
||
const retry = main(page).getByRole('button', { name: 'Retry', exact: true });
|
||
await expect(retry).toBeVisible();
|
||
await expect(main(page).locator('#gallery-continuation p')).toHaveText('Images could not be loaded. Retry or rescan the collection.');
|
||
gone = false;
|
||
await page.unroute(`**${API}`);
|
||
await retry.click();
|
||
await expect(imageCards(page)).toHaveCount(8);
|
||
|
||
// The list read again still lists it: the same Retry, never a blank page.
|
||
gone = true;
|
||
await page.evaluate(() => { window.location.hash = '#/images'; });
|
||
await expect(heading(page)).toHaveText('Images');
|
||
await row(page, 'Experiments').click();
|
||
await expect(retry).toBeVisible();
|
||
gone = false;
|
||
await retry.click();
|
||
await expect(imageCards(page)).toHaveCount(8);
|
||
});
|
||
|
||
test('the missing-members note follows the list read again (review L2)', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
const { id } = manifest.collections.Landscapes;
|
||
let missing = null;
|
||
await page.route(`**${API}`, async route => {
|
||
if (route.request().method() !== 'GET' || missing === null) return route.fallback();
|
||
const response = await route.fetch();
|
||
const data = await response.json();
|
||
data.collections = data.collections.map(item => item.id === id ? { ...item, missing } : item);
|
||
return route.fulfill({ response, json: data });
|
||
});
|
||
await page.goto(`${workspace}#/collection/${id}`);
|
||
await expect(missingNote(page)).toHaveText('1 image in this collection is not in your current sources.');
|
||
const rename = async name => {
|
||
await editButton(page).click();
|
||
await nameField(page).fill(name);
|
||
await editDialog(page).getByRole('button', { name: 'Save', exact: true }).click();
|
||
await expect(toast(page)).toHaveText('Collection renamed.');
|
||
};
|
||
missing = 3;
|
||
await rename('Landscapes A');
|
||
await expect(missingNote(page)).toHaveText('3 images in this collection are not in your current sources.');
|
||
missing = 0;
|
||
await rename('Landscapes B');
|
||
await expect(missingNote(page)).toHaveCount(0);
|
||
missing = 1;
|
||
await rename('Landscapes C');
|
||
await expect(missingNote(page)).toHaveText('1 image in this collection is not in your current sources.');
|
||
});
|
||
|
||
test('a rename that settles after its dialog closed leaves the next dialog open (review L1)', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
const { id } = manifest.collections.Landscapes;
|
||
await page.goto(`${workspace}#/collection/${id}`);
|
||
await expect(imageCards(page)).toHaveCount(12);
|
||
let release;
|
||
const released = new Promise(resolve => { release = resolve; });
|
||
await page.route(`**${API}/${id}`, async route => {
|
||
if (route.request().method() !== 'PATCH') return route.fallback();
|
||
await released;
|
||
return route.fallback();
|
||
});
|
||
await editButton(page).click();
|
||
await nameField(page).fill('Later');
|
||
await editDialog(page).getByRole('button', { name: 'Save', exact: true }).click();
|
||
await page.keyboard.press('Escape');
|
||
await expect(editDialog(page)).toHaveCount(0);
|
||
await main(page).getByRole('button', { name: 'Save view', exact: true }).click();
|
||
const save = page.getByRole('dialog', { name: 'Save this view', exact: true });
|
||
await expect(save).toBeVisible();
|
||
release();
|
||
await expect(heading(page)).toHaveText('Later');
|
||
await expect(save).toBeVisible();
|
||
});
|
||
|
||
test('a page that says a collection or view could not be opened takes focus after a route change (review L3)', async ({ page, request }) => {
|
||
await seed(request);
|
||
await page.goto(`${workspace}#/images`);
|
||
await expect(heading(page)).toHaveText('Images');
|
||
await page.evaluate(() => { window.location.hash = '#/collection/999999'; });
|
||
await expect(description(page)).toHaveText('This collection no longer exists.');
|
||
await expect(heading(page)).toBeFocused();
|
||
|
||
await page.route(`**${API}`, route => route.request().method() === 'GET'
|
||
? route.fulfill({ status: 500, contentType: 'application/json', body: '{"success":false,"error":"x"}' })
|
||
: route.fallback());
|
||
await page.evaluate(() => { window.location.hash = '#/images'; });
|
||
await expect(heading(page)).toHaveText('Images');
|
||
await page.evaluate(() => { window.location.hash = '#/collection/999998'; });
|
||
await expect(main(page).getByRole('button', { name: 'Retry', exact: true })).toBeVisible();
|
||
await expect(heading(page)).toBeFocused();
|
||
|
||
await page.route('**/prompt_manager/saved-views', route => route.request().method() === 'GET'
|
||
? route.fulfill({ status: 500, contentType: 'application/json', body: '{"success":false,"error":"x"}' })
|
||
: route.fallback());
|
||
await page.evaluate(() => { window.location.hash = '#/saved/5'; });
|
||
await expect(description(page)).toHaveText('Saved views could not be loaded. Your saved data has not changed.');
|
||
await expect(heading(page)).toBeFocused();
|
||
});
|
||
|
||
// #331 D138 (design §7): the selection bar's Add to collection and Remove from collection.
|
||
const bar = page => page.locator('#bulkbar > .bulkbar');
|
||
const barButton = (page, name) => bar(page).getByRole('button', { name, exact: true });
|
||
const addDialog = page => page.getByRole('dialog', { name: 'Add selected images to collection', exact: true });
|
||
const addField = page => addDialog(page).getByRole('combobox', { name: 'Collection name', exact: true });
|
||
const check = (page, file) => page.getByRole('checkbox', { name: `Select ${file}`, exact: true }).check();
|
||
const card = (page, path) => page.locator(`article[data-image-key$=":${path}"]`);
|
||
|
||
/** Add the checked images under `name` through the bar's dialog. */
|
||
async function addChecked(page, name) {
|
||
await barButton(page, 'Add to collection').click();
|
||
await expect(addDialog(page)).toBeVisible();
|
||
await addField(page).fill(name);
|
||
await addDialog(page).getByRole('button', { name: 'Add', exact: true }).click();
|
||
await expect(addDialog(page)).toHaveCount(0);
|
||
}
|
||
|
||
test('Add to collection creates a collection and adds to it ignoring case (CUJ 1–3)', async ({ page, request }) => {
|
||
await seed(request);
|
||
await page.goto(`${workspace}#/images`);
|
||
await expect(imageCards(page)).toHaveCount(21);
|
||
for (const file of ['loose.png', 'landscape_01.png', 'experiment_01.png']) await check(page, file);
|
||
await expect(bar(page).locator('button')).toHaveText(['Add tags', 'Auto-tag selected', 'Set category', 'Add to collection',
|
||
'Export metadata', 'Clear']);
|
||
await barButton(page, 'Add to collection').click();
|
||
// The concept's simpleInput with Add (D138) and the existing names as suggestions.
|
||
await expect(addDialog(page).locator('label')).toHaveText('Collection name');
|
||
await expect(addField(page)).toHaveValue('');
|
||
await expect(addField(page)).toHaveAttribute('maxlength', '100');
|
||
await expect(addDialog(page).locator('datalist option')).toHaveCount(2);
|
||
expect(await addDialog(page).locator('datalist option').evaluateAll(options => options.map(option => option.value)))
|
||
.toEqual(['Experiments', 'Landscapes']);
|
||
await expect(addDialog(page).locator('.dialog-actions button')).toHaveText(['Cancel', 'Add']);
|
||
// An empty name keeps the dialog on its field.
|
||
await addDialog(page).getByRole('button', { name: 'Add', exact: true }).click();
|
||
await expect(addField(page)).toBeFocused();
|
||
await addField(page).fill(' LoRa testing ');
|
||
await addDialog(page).getByRole('button', { name: 'Add', exact: true }).click();
|
||
await expect(toast(page)).toHaveText('Added 3 images to “LoRa testing”.');
|
||
await expect(bar(page).locator('strong')).toHaveText('3 selected');
|
||
await expect(row(page, 'LoRa testing').locator('.nav-count')).toHaveText('3');
|
||
await expect(rows(page)).toHaveCount(3);
|
||
|
||
// CUJ 2: one of two already in it.
|
||
await bar(page).getByRole('button', { name: 'Clear', exact: true }).click();
|
||
await check(page, 'loose.png');
|
||
await check(page, 'landscape_02.png');
|
||
await addChecked(page, 'LoRa testing');
|
||
await expect(toast(page)).toHaveText('Added 1 image to “LoRa testing”. 1 was already in it.');
|
||
await expect(row(page, 'LoRa testing').locator('.nav-count')).toHaveText('4');
|
||
|
||
// CUJ 3: a case variant joins the same collection.
|
||
await bar(page).getByRole('button', { name: 'Clear', exact: true }).click();
|
||
await check(page, 'landscape_03.png');
|
||
await addChecked(page, 'lora TESTING');
|
||
await expect(toast(page)).toHaveText('Added 1 image to “LoRa testing”.');
|
||
await expect(rows(page)).toHaveCount(3);
|
||
await expect(row(page, 'LoRa testing').locator('.nav-count')).toHaveText('5');
|
||
const created = (await listed(request)).find(item => item.name === 'LoRa testing');
|
||
expect(created).toMatchObject({ count: 5, missing: 0 });
|
||
|
||
// Everything already in it.
|
||
await addChecked(page, 'LoRa testing');
|
||
await expect(toast(page)).toHaveText('All selected images were already in “LoRa testing”.');
|
||
});
|
||
|
||
test('Remove from collection takes the checked images off the open collection (CUJ 5)', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
const { id } = manifest.collections.Landscapes;
|
||
await page.goto(`${workspace}#/collection/${id}`);
|
||
await expect(imageCards(page)).toHaveCount(12);
|
||
await check(page, 'landscape_01.png');
|
||
await check(page, 'landscape_02.png');
|
||
await expect(bar(page).locator('button')).toHaveText(['Add tags', 'Auto-tag selected', 'Set category', 'Add to collection',
|
||
'Remove from collection', 'Export metadata', 'Clear']);
|
||
await barButton(page, 'Remove from collection').click();
|
||
await expect(toast(page)).toHaveText('Removed 2 images from “Landscapes”.');
|
||
await expect(imageCards(page)).toHaveCount(10);
|
||
await expect(card(page, 'collections/landscape_01.png')).toHaveCount(0);
|
||
// The removed files left the listing, so the bar has nothing checked.
|
||
await expect(bar(page)).toHaveCount(0);
|
||
await expect(row(page, 'Landscapes').locator('.nav-count')).toHaveText('10');
|
||
// A checked file still listed stays checked across the reload.
|
||
await check(page, 'landscape_03.png');
|
||
await check(page, 'landscape_04.png');
|
||
await page.route(`**${API}/items`, async route => {
|
||
if (route.request().method() !== 'DELETE') return route.fallback();
|
||
// Remove only landscape_04; landscape_03 stays listed and checked.
|
||
const body = route.request().postDataJSON();
|
||
await route.continue({ postData: JSON.stringify({ ...body, items: body.items.filter(item => item.path.endsWith('_04.png')) }) });
|
||
});
|
||
await barButton(page, 'Remove from collection').click();
|
||
await expect(toast(page)).toHaveText('Removed 1 image from “Landscapes”.');
|
||
await expect(imageCards(page)).toHaveCount(9);
|
||
await expect(bar(page).locator('strong')).toHaveText('1 selected');
|
||
await expect(page.getByRole('checkbox', { name: 'Select landscape_03.png', exact: true })).toBeChecked();
|
||
// No file changed: the plain Images page still lists all of them.
|
||
await page.goto(`${workspace}#/images`);
|
||
await expect(imageCards(page)).toHaveCount(21);
|
||
});
|
||
|
||
test('Images without a collection filter has no Remove from collection', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
await page.goto(`${workspace}#/images`);
|
||
await check(page, 'loose.png');
|
||
await expect(barButton(page, 'Add to collection')).toBeVisible();
|
||
await expect(barButton(page, 'Remove from collection')).toHaveCount(0);
|
||
// A saved view on a collection has its filter active: Remove shows (design §5).
|
||
await page.goto(`${workspace}#/saved/${manifest.saved_view.id}`);
|
||
await expect(imageCards(page)).toHaveCount(8);
|
||
await check(page, 'experiment_01.png');
|
||
await barButton(page, 'Remove from collection').click();
|
||
await expect(toast(page)).toHaveText('Removed 1 image from “Experiments”.');
|
||
await expect(imageCards(page)).toHaveCount(7);
|
||
});
|
||
|
||
test('a failed add keeps the selection; a stale source reloads the images', async ({ page, request }) => {
|
||
await seed(request);
|
||
await page.goto(`${workspace}#/images`);
|
||
await expect(imageCards(page)).toHaveCount(21);
|
||
let reply = { status: 500, body: { success: false, error: 'The collection could not be changed.' } };
|
||
await page.route(`**${API}/items`, route => route.fulfill({ status: reply.status, contentType: 'application/json',
|
||
body: JSON.stringify(reply.body) }));
|
||
await check(page, 'loose.png');
|
||
await check(page, 'landscape_05.png');
|
||
await addChecked(page, 'Grids');
|
||
await expect(toast(page)).toHaveText('The images could not be added. Try again.');
|
||
await expect(bar(page).locator('strong')).toHaveText('2 selected');
|
||
await expect(rows(page)).toHaveCount(2);
|
||
|
||
reply = { status: 404, body: { success: false, code: 'files-not-found', error: 'x' } };
|
||
await addChecked(page, 'Grids');
|
||
await expect(toast(page)).toHaveText('None of the selected images could be found. Refresh the images and try again.');
|
||
await expect(bar(page).locator('strong')).toHaveText('2 selected');
|
||
|
||
reply = { status: 409, body: { success: false, code: 'source-changed', error: 'x' } };
|
||
const reloaded = page.waitForRequest(request => request.url().includes('/prompt_manager/gallery/subfolders'));
|
||
await addChecked(page, 'Grids');
|
||
await expect(toast(page)).toHaveText('The sources changed. Refresh the images and try again.');
|
||
await reloaded;
|
||
await expect(imageCards(page)).toHaveCount(21);
|
||
await expect(bar(page)).toHaveCount(0);
|
||
});
|
||
|
||
test('more than 500 or an unloaded "all matching" selection is refused with the cap', async ({ page, request }) => {
|
||
await seed(request);
|
||
await page.goto(`${workspace}#/images`);
|
||
await expect(imageCards(page)).toHaveCount(21);
|
||
// Every loaded image checked and the listing says more match: "Select all N matching" (#392, D135).
|
||
await page.route('**/prompt_manager/images/output?*', async route => {
|
||
// A next page never answers, so the listing stays at its loaded 21 of 900.
|
||
if (new URL(route.request().url()).searchParams.has('cursor')) return;
|
||
const response = await route.fetch();
|
||
const data = await response.json();
|
||
await route.fulfill({ response, json: { ...data, total: 900, has_more: true, next_cursor: 'more' } });
|
||
});
|
||
await page.reload();
|
||
await expect(imageCards(page)).toHaveCount(21);
|
||
await page.locator('#image-grid .image-open').first().focus();
|
||
await page.keyboard.press('ControlOrMeta+a');
|
||
await bar(page).getByRole('button', { name: 'Select all 900 matching', exact: true }).click();
|
||
await expect(bar(page).locator('strong')).toHaveText('All 900 matching selected');
|
||
await barButton(page, 'Add to collection').click();
|
||
await expect(toast(page)).toHaveText('Select at most 500 images.');
|
||
await expect(addDialog(page)).toHaveCount(0);
|
||
});
|
||
|
||
for (const theme of ['dark', 'light']) {
|
||
test(`the Add to collection dialog fits 390x844 ${theme}`, async ({ page, request }) => {
|
||
await seed(request);
|
||
await page.setViewportSize({ width: 390, height: 844 });
|
||
await page.goto(`${workspace}#/images`);
|
||
await page.getByRole('combobox', { name: 'Theme', exact: true }).selectOption(theme);
|
||
await check(page, 'loose.png');
|
||
await expect(barButton(page, 'Add to collection')).toBeVisible();
|
||
await barButton(page, 'Add to collection').click();
|
||
await expect(addDialog(page)).toBeVisible();
|
||
const fits = await addDialog(page).evaluate(dialog => {
|
||
const box = dialog.getBoundingClientRect();
|
||
return box.left >= 0 && box.right <= window.innerWidth && dialog.scrollWidth <= dialog.clientWidth;
|
||
});
|
||
expect(fits).toBe(true);
|
||
expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
|
||
await addField(page).fill('Phone');
|
||
await addDialog(page).getByRole('button', { name: 'Add', exact: true }).click();
|
||
await expect(toast(page)).toHaveText('Added 1 image to “Phone”.');
|
||
await expect(row(page, 'Phone')).toBeVisible();
|
||
});
|
||
}
|
||
|
||
// #331 D139 (design §8): the shared inspector's Collections… in the Images side panel and in the viewer.
|
||
const panel = page => page.locator('#image-inspector');
|
||
const collectionsDialog = page => page.getByRole('dialog', { name: 'Collections', exact: true });
|
||
const choice = (page, name) => collectionsDialog(page).getByRole('checkbox', { name, exact: true });
|
||
const newCollection = page => collectionsDialog(page).getByRole('textbox', { name: 'New collection', exact: true });
|
||
|
||
async function membership(request, path) {
|
||
const [image] = (await (await request.get(`/prompt_manager/images/output?mode=workspace&q=${encodeURIComponent(path)}`)).json()).images;
|
||
const query = new URLSearchParams({ root_index: String(image.root_index), root_scope: image.root_scope, path: image.path });
|
||
const response = await request.get(`${API}/membership?${query}`);
|
||
await expect(response).toBeOK();
|
||
return (await response.json()).collection_ids;
|
||
}
|
||
|
||
test('Collections… in the side panel adds, removes and creates for one image (CUJ 6)', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
const { Landscapes, Experiments } = manifest.collections;
|
||
await page.goto(`${workspace}#/images`);
|
||
// The newest image, landscape_01, is the panel's.
|
||
await expect(panel(page).getByRole('heading', { level: 2 })).toHaveText('landscape_01.png');
|
||
const open = panel(page).getByRole('button', { name: 'Collections…', exact: true });
|
||
await expect(panel(page).locator('.detail-footer > button').last()).toHaveText('Collections…');
|
||
await open.click();
|
||
await expect(collectionsDialog(page)).toBeVisible();
|
||
await expect(choice(page, 'Landscapes')).toBeChecked();
|
||
await expect(choice(page, 'Experiments')).not.toBeChecked();
|
||
await expect(collectionsDialog(page).locator('label.tag-suggestion')).toHaveText(['Experiments', 'Landscapes']);
|
||
await expect(collectionsDialog(page).locator('.dialog-actions button')).toHaveText(['Cancel', 'Save']);
|
||
await choice(page, 'Landscapes').uncheck();
|
||
await choice(page, 'Experiments').check();
|
||
await newCollection(page).fill('Grids');
|
||
await collectionsDialog(page).getByRole('button', { name: 'Save', exact: true }).click();
|
||
await expect(collectionsDialog(page)).toHaveCount(0);
|
||
await expect(toast(page)).toHaveText('Collections updated.');
|
||
await expect(open).toBeFocused();
|
||
await expect(row(page, 'Grids').locator('.nav-count')).toHaveText('1');
|
||
await expect(row(page, 'Landscapes').locator('.nav-count')).toHaveText('11');
|
||
await expect(row(page, 'Experiments').locator('.nav-count')).toHaveText('9');
|
||
const grids = (await listed(request)).find(item => item.name === 'Grids');
|
||
expect((await membership(request, 'landscape_01')).sort()).toEqual([Experiments.id, grids.id].sort());
|
||
expect(Landscapes.id).not.toBe(grids.id);
|
||
// The Images page lists the same files; the dialog opened again shows the new state.
|
||
await expect(imageCards(page)).toHaveCount(21);
|
||
await open.click();
|
||
await expect(choice(page, 'Grids')).toBeChecked();
|
||
await expect(choice(page, 'Experiments')).toBeChecked();
|
||
await expect(choice(page, 'Landscapes')).not.toBeChecked();
|
||
// Save without a change sends nothing.
|
||
let writes = 0;
|
||
page.on('request', request => { if (request.url().includes(`${API}/items`)) writes++; });
|
||
await collectionsDialog(page).getByRole('button', { name: 'Save', exact: true }).click();
|
||
await expect(collectionsDialog(page)).toHaveCount(0);
|
||
expect(writes).toBe(0);
|
||
});
|
||
|
||
test('Collections… in the viewer keeps the viewer until it closes (CUJ 7)', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
await page.goto(`${workspace}#/collection/${manifest.collections.Landscapes.id}`);
|
||
await expect(imageCards(page)).toHaveCount(12);
|
||
await page.getByRole('button', { name: 'Open landscape_01.png', exact: true }).click();
|
||
const viewer = page.locator('#viewer-dialog[open]');
|
||
await expect(viewer.locator('#viewer-title')).toContainText('landscape_01.png');
|
||
// Review L7: no listing request while the viewer is open.
|
||
let listings = 0;
|
||
const countListing = request => { if (new URL(request.url()).pathname === '/prompt_manager/images/output') listings++; };
|
||
page.on('request', countListing);
|
||
await viewer.locator('#viewer-details').getByRole('button', { name: 'Collections…', exact: true }).click();
|
||
await expect(choice(page, 'Landscapes')).toBeChecked();
|
||
// Review L6: focus moves to the first checkbox once listed.
|
||
await expect(choice(page, 'Experiments')).toBeFocused();
|
||
await choice(page, 'Landscapes').uncheck();
|
||
await collectionsDialog(page).getByRole('button', { name: 'Save', exact: true }).click();
|
||
await expect(toast(page)).toHaveText('Collections updated.');
|
||
await expect(collectionsDialog(page)).toHaveCount(0);
|
||
// The viewer stays on the image; the page keeps listing it while the viewer is open.
|
||
await expect(viewer.locator('#viewer-title')).toContainText('landscape_01.png');
|
||
await expect(row(page, 'Landscapes').locator('.nav-count')).toHaveText('11');
|
||
await expect(imageCards(page)).toHaveCount(12);
|
||
expect(listings, 'no listing request while the viewer is open').toBe(0);
|
||
page.off('request', countListing);
|
||
await viewer.getByRole('button', { name: 'Close image viewer', exact: true }).click();
|
||
await expect(viewer).toHaveCount(0);
|
||
await expect(imageCards(page)).toHaveCount(11);
|
||
await expect(card(page, 'collections/landscape_01.png')).toHaveCount(0);
|
||
});
|
||
|
||
test('a failed membership read says so and Retry reads it again', async ({ page, request }) => {
|
||
await seed(request);
|
||
let failing = true;
|
||
await page.route(`**${API}/membership?*`, route => failing
|
||
? route.fulfill({ status: 500, contentType: 'application/json', body: '{"success":false,"error":"Collections could not be read."}' })
|
||
: route.fallback());
|
||
await page.goto(`${workspace}#/images`);
|
||
await panel(page).getByRole('button', { name: 'Collections…', exact: true }).click();
|
||
await expect(collectionsDialog(page).getByRole('alert').first()).toHaveText('Collections could not be loaded.');
|
||
await expect(collectionsDialog(page).getByRole('checkbox')).toHaveCount(0);
|
||
await expect(collectionsDialog(page).getByRole('button', { name: 'Save', exact: true })).toHaveAttribute('aria-disabled', 'true');
|
||
failing = false;
|
||
await collectionsDialog(page).getByRole('button', { name: 'Retry', exact: true }).click();
|
||
await expect(choice(page, 'Landscapes')).toBeChecked();
|
||
await expect(collectionsDialog(page).getByRole('button', { name: 'Retry', exact: true })).toBeHidden();
|
||
// A failed write keeps the dialog with the current membership.
|
||
await page.route(`**${API}/items`, route => route.fulfill({ status: 500, contentType: 'application/json',
|
||
body: '{"success":false,"error":"The collection could not be changed."}' }));
|
||
await choice(page, 'Experiments').check();
|
||
await collectionsDialog(page).getByRole('button', { name: 'Save', exact: true }).click();
|
||
await expect(collectionsDialog(page).getByRole('alert')).toHaveText('The collections could not be updated. Try again.');
|
||
await expect(choice(page, 'Experiments')).not.toBeChecked();
|
||
await expect(choice(page, 'Landscapes')).toBeChecked();
|
||
});
|
||
|
||
test('a file in no collection with no collections at all can start one', async ({ page }) => {
|
||
await page.goto(`${workspace}#/images`);
|
||
await panel(page).getByRole('button', { name: 'Collections…', exact: true }).click();
|
||
await expect(collectionsDialog(page)).toContainText('No collections yet. Name one below.');
|
||
await newCollection(page).fill('First');
|
||
await collectionsDialog(page).getByRole('button', { name: 'Save', exact: true }).click();
|
||
await expect(toast(page)).toHaveText('Collections updated.');
|
||
await expect(rows(page)).toHaveCount(1);
|
||
await expect(row(page, 'First').locator('.nav-count')).toHaveText('1');
|
||
});
|
||
|
||
for (const theme of ['dark', 'light']) {
|
||
test(`the Collections dialog fits 390x844 ${theme}`, async ({ page, request }) => {
|
||
await seed(request);
|
||
await page.setViewportSize({ width: 390, height: 844 });
|
||
await page.goto(`${workspace}#/images`);
|
||
await page.getByRole('combobox', { name: 'Theme', exact: true }).selectOption(theme);
|
||
await panel(page).getByRole('button', { name: 'Collections…', exact: true }).click();
|
||
await expect(choice(page, 'Landscapes')).toBeChecked();
|
||
const fits = await collectionsDialog(page).evaluate(dialog => {
|
||
const box = dialog.getBoundingClientRect();
|
||
return box.left >= 0 && box.right <= window.innerWidth && dialog.scrollWidth <= dialog.clientWidth;
|
||
});
|
||
expect(fits).toBe(true);
|
||
expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
|
||
});
|
||
}
|
||
|
||
// Review M2: on a collection page, a Save that removed the file from the open collection and then failed keeps its
|
||
// dialog and message; the listing is read again only once the dialog closes.
|
||
test('a partly failed Save from the side panel keeps its dialog until it closes', async ({ page, request }) => {
|
||
const manifest = await seed(request);
|
||
const { Experiments, Landscapes } = manifest.collections;
|
||
// experiment_01 is in both collections; Experiments sorts first, so its remove is sent before Landscapes'.
|
||
const [image] = (await (await request.get('/prompt_manager/images/output?mode=workspace&q=experiment_01')).json()).images;
|
||
const item = { root_index: image.root_index, root_scope: image.root_scope, path: image.path };
|
||
await expect(await request.post(`${API}/items`, { data: { collection_id: Landscapes.id, items: [item] } })).toBeOK();
|
||
await page.route(`**${API}/items`, route => {
|
||
const body = route.request().postDataJSON();
|
||
return route.request().method() === 'DELETE' && body.collection_id === Landscapes.id
|
||
? route.fulfill({ status: 500, contentType: 'application/json', body: '{"success":false,"error":"x"}' })
|
||
: route.fallback();
|
||
});
|
||
await page.goto(`${workspace}#/collection/${Experiments.id}`);
|
||
await expect(imageCards(page)).toHaveCount(8);
|
||
await expect(panel(page).getByRole('heading', { level: 2 })).toHaveText('experiment_01.png');
|
||
await panel(page).getByRole('button', { name: 'Collections…', exact: true }).click();
|
||
await expect(choice(page, 'Landscapes')).toBeChecked();
|
||
await choice(page, 'Experiments').uncheck();
|
||
await choice(page, 'Landscapes').uncheck();
|
||
await collectionsDialog(page).getByRole('button', { name: 'Save', exact: true }).click();
|
||
await expect(collectionsDialog(page).getByRole('alert')).toHaveText('The collections could not be updated. Try again.');
|
||
// The remove from Experiments went through; the dialog shows it and the page has not reloaded under it.
|
||
await expect(choice(page, 'Experiments')).not.toBeChecked();
|
||
await expect(choice(page, 'Landscapes')).toBeChecked();
|
||
await expect(imageCards(page)).toHaveCount(8);
|
||
await collectionsDialog(page).getByRole('button', { name: 'Cancel', exact: true }).click();
|
||
await expect(collectionsDialog(page)).toHaveCount(0);
|
||
await expect(imageCards(page)).toHaveCount(7);
|
||
await expect(card(page, 'collections/experiment_01.png')).toHaveCount(0);
|
||
});
|