Vito
cbf46a7573
* feat(vocabulary): add workspace vocabulary state * feat(vocabulary): render the native Tags & categories screen * feat(vocabulary): add guarded vocabulary dialogs * fix(vocabulary): recover unconfirmed deletes and list every category in Manage * refactor(vocabulary): use the shared plural helper * test(vocabulary): compare the native screen with the approved concept * fix(vocabulary): wrap long tag names so row actions stay visible on narrow screens * docs(vocabulary): document the native vocabulary screen and gates Also aligns the shell link focus-ring offset with the concept (3px) and makes the chrome comparison poll the document title. * fix(vocabulary): refresh lists when a write lands after its dialog closes A rename, delete, create or category apply that commits after its dialog was disposed (Chromium force-closing the modal on a repeated Escape, or Back while the write is in flight) returned before onInvalidate, so the lists were never re-read and a cached Library shelf kept showing the old names. Like the recipe editor, a disposed command now still reports any outcome that may have changed storage (receipt, conflict, restore, unconfirmed) without rendering; only a failed write stays silent. * fix(vocabulary): give the Manage categories datalist its own id The proposed-name datalist reused the recipe editor's `categories` id. It was safe only because routes dispose each other's dialogs; it is now `vocabulary-category-options`. * docs(vocabulary): correct vocabulary testing notes Name the Tag column and the Create tag heading action, say that a failed Load more moves focus to Retry, place bulk actions on the admin page, describe late writes after a closed dialog, Browse's exact filter and the full deviation list, and use a test port that is not the live concept server's. * test(vocabulary): raise the vocabulary dialog branch floor coverage:update after the late-write and datalist fixes: workspace/vocabulary-dialog.mjs branches 87 -> 88. No floor is lowered. * fix(vocabulary): keep 390px row actions visible regardless of font metrics The one-column Tags table reserved a fixed 6em for the tag name. With CI's stock DejaVu Sans fallback (about 9% wider than the pinned image's) Tag + Prompts + Images + stacked actions needed 351px of a 336px wrap, so Browse and Rename / merge were pushed out of view on every row. At 700px and below the Tag column now has no fixed minimum and the actions ask for no more than their stacked width, so all remaining space goes to the tag name: short names stay on one line wherever the concept's own table fits, and a wider font wraps the name instead of clipping an action. A new test widens the metrics with letter spacing and fails without this change in every engine. * ci: run browser jobs in the pinned Playwright image Concept comparisons measure geometry, which follows the fonts a browser falls back to. The concept names Inter, which neither environment ships: the pinned image falls back to WenQuanYi Zen Hei, a stock ubuntu-latest runner to DejaVu Sans. Under DejaVu the concept's own Tags table needs more than a 390px viewport (its page scrolls sideways and, under touch emulation, the widened layout viewport resizes its dialogs), so the 390px comparisons failed in CI while passing locally. Both browser jobs now run in mcr.microsoft.com/playwright:v1.64.1-noble, the image local runs use, instead of installing browsers on the runner. A tooling test keeps the tag equal to @playwright/test in the lockfile. * fix(vocabulary): ignore a category preview edited while it is pending Editing the Category or proposed name while a slow Preview was in flight was a no-op in the saving phase, so the late response still became an applicable preview: the form showed the new values while Apply would submit the old source and target. An edit during a pending preview now marks it stale. Its late result returns the dialog to idle (Preview again) instead of showing an impact or offering Apply; a plain failure of a stale preview is not shown either, while a restore or conflict still is, since it describes storage. The inputs stay editable during the request, as in the recipe editor, which disables only its actions while saving. * ci: use the image's Python and Node in containerized browser jobs Inside mcr.microsoft.com/playwright:v1.64.1-noble, actions/setup-python failed before any test ran: `spawn /__t/Python/3.12.15/x64/bin/pip ENOENT`. The toolcache builds come from the runner, and their entry points name host interpreter paths that do not exist in the container. The jobs now use the image's Python 3.12 and Node 24. The image has no ensurepip and the job runs as uid 1001 without root, so a checksum-pinned pip wheel bootstraps a user-space venv for requirements-dev.txt; a step checks that the image Node is 24. The tooling test forbids setup-python and setup-node in these jobs and requires the pinned bootstrap.
104 lines
8.2 KiB
JavaScript
104 lines
8.2 KiB
JavaScript
import {test,expect} from '../../tools/vendor/node_modules/@playwright/test/index.mjs';
|
|
import {captureCanonicalState} from './history-canonical-comparison.mjs';
|
|
|
|
// Artifact-only captures of Tags & categories states that have no concept counterpart: the Manage categories
|
|
// preview, loading and 1,000-category cap notes, tag conflict and restore notes, the Delete tag confirmation (D14),
|
|
// empty lists (D12), a failed read with Retry, and Load more (D5). The page and the three concept dialogs are captured
|
|
// as concept/production pairs by workspace-vocabulary.spec.mjs. There are deliberately no pixel assertions or
|
|
// baselines: the maintainer accepts these captures visually before any baseline is added.
|
|
test.use({locale:'en-US',timezoneId:'UTC',reducedMotion:'reduce'});
|
|
const route='/prompt_manager/workspace#/tags';
|
|
const main=page=>page.locator('#workspace-main');
|
|
const rows=page=>main(page).locator('tbody tr');
|
|
const dialog=page=>page.locator('dialog.vocabulary-dialog');
|
|
const button=(scope,name)=>scope.getByRole('button',{name,exact:true});
|
|
const note=page=>dialog(page).locator('.warning-note');
|
|
const tagSurface='#workspace-main .two-col > section.surface:first-child';
|
|
const categoryOperation=(page,name)=>main(page).locator('.operation').filter({has:page.getByRole('heading',{level:3,name,exact:true})});
|
|
|
|
async function seed(request,data={}) {const response=await request.post('/__test__/vocabulary/reset',{data});await expect(response).toBeOK();return response.json();}
|
|
async function open(page,theme,count) {
|
|
await page.goto('about:blank');await page.goto(route);
|
|
await page.getByRole('combobox',{name:'Appearance',exact:true}).selectOption(theme);
|
|
if(count!==undefined)await expect(rows(page)).toHaveCount(count);
|
|
}
|
|
async function openDialog(page,trigger) {await trigger.click();await expect(dialog(page)).toBeVisible();return dialog(page);}
|
|
const empty=(manifest,kind)=>({success:true,library_epoch:manifest.epoch,total:0,has_more:false,next_cursor:null,[kind]:[]});
|
|
|
|
for(const [width,height] of [[1600,1100],[390,844]])for(const theme of ['dark','light'])test(`vocabulary state captures for maintainer acceptance ${width} ${theme}`,async({page,request},testInfo)=>{
|
|
await page.setViewportSize({width,height});
|
|
const shot=(name,selector='dialog.vocabulary-dialog')=>captureCanonicalState(page,testInfo,`production-${name}-${width}-${theme}`,selector);
|
|
let manifest=await seed(request);await open(page,theme,manifest.tags.length);
|
|
|
|
// Manage categories: preview shown (D9).
|
|
let box=await openDialog(page,categoryOperation(page,'Manage category').getByRole('button',{name:'Review',exact:true}));
|
|
await expect(button(box,'Preview')).toBeEnabled();
|
|
await box.getByLabel('Proposed new category name',{exact:true}).fill('Scenery');await button(box,'Preview').click();
|
|
await expect(box.locator('p.small')).toHaveText('“Landscapes” is used by 3 positive prompts. Apply renames it to “Scenery”.');
|
|
await shot('manage-preview');
|
|
await page.keyboard.press('Escape');await expect(box).toHaveCount(0);
|
|
|
|
// Rename or merge: conflict note, then restore note (the server answers 409; nothing is written).
|
|
for(const [name,code,text] of [['rename-conflict','vocabulary-conflict',/This tag changed since this dialog opened/],
|
|
['rename-restored','storage-changed',/Prompt storage was restored since this dialog opened/]]) {
|
|
await page.route('**/prompt_manager/vocabulary/tags/*',item=>item.request().method()==='PATCH'
|
|
?item.fulfill({status:409,json:{success:false,code,error:'Changed.',library_epoch:manifest.epoch}}):item.continue(),{times:1});
|
|
box=await openDialog(page,rows(page).first().getByRole('button',{name:'Rename / merge',exact:true}));
|
|
await box.getByLabel('New name; existing names merge',{exact:true}).fill('cinematic_light');await button(box,'Apply').click();
|
|
await expect(note(page)).toHaveText(text);await shot(name);
|
|
await page.keyboard.press('Escape');await expect(box).toHaveCount(0);
|
|
await expect(rows(page)).toHaveCount(manifest.tags.length);
|
|
}
|
|
|
|
// Delete tag confirmation (D14) with the real impact sentence.
|
|
box=await openDialog(page,rows(page).first().getByRole('button',{name:'Rename / merge',exact:true}));
|
|
await button(box,'Delete tag…').click();await expect(button(box,'Delete')).toBeEnabled();
|
|
await expect(box.locator('p.small')).toBeVisible();await shot('delete-confirmation');
|
|
await page.keyboard.press('Escape');await expect(box).toHaveCount(0);
|
|
|
|
// Manage categories while further category pages load, and at the 1,000-category cap (ledger ruling).
|
|
manifest=await seed(request,{extra_categories:150});
|
|
let release;const held=new Promise(resolve=>{release=resolve;});
|
|
await page.route('**/prompt_manager/vocabulary/categories?*',async item=>{if(new URL(item.request().url()).searchParams.has('cursor'))await held;await item.continue();});
|
|
await open(page,theme,manifest.tags.length);
|
|
box=await openDialog(page,categoryOperation(page,'Manage category').getByRole('button',{name:'Review',exact:true}));
|
|
await expect(note(page)).toHaveText('Loading categories…');await shot('manage-loading');
|
|
release();await expect(note(page)).toBeHidden();await page.keyboard.press('Escape');await expect(box).toHaveCount(0);
|
|
await page.unroute('**/prompt_manager/vocabulary/categories?*');
|
|
await page.route('**/prompt_manager/vocabulary/categories?*',item=>{
|
|
const cursor=new URL(item.request().url()).searchParams.get('cursor');const index=cursor?Number(cursor.slice(1)):0;
|
|
const categories=Array.from({length:100},(_,offset)=>({value:`many_${String(index*100+offset).padStart(5,'0')}`,prompt_count:1}));
|
|
return item.fulfill({json:{success:true,library_epoch:manifest.epoch,total:5000,has_more:true,next_cursor:`c${index+1}`,categories}});
|
|
});
|
|
await open(page,theme);await expect(categoryOperation(page,'many_00000')).toHaveCount(1);
|
|
const review=categoryOperation(page,'Manage category').getByRole('button',{name:'Review',exact:true});
|
|
// Every mocked page has more, so scrolling to Review would keep appending; click it in place.
|
|
await review.evaluate(node=>node.click());await expect(dialog(page)).toBeVisible();
|
|
await expect(note(page)).toHaveText('Only the first 1,000 categories are listed.');await shot('manage-capped');
|
|
await page.keyboard.press('Escape');await page.unroute('**/prompt_manager/vocabulary/categories?*');
|
|
|
|
// Empty lists (D12).
|
|
await page.route('**/prompt_manager/vocabulary/tags?*',item=>item.fulfill({json:empty(manifest,'tags')}));
|
|
await page.route('**/prompt_manager/vocabulary/categories?*',item=>item.fulfill({json:empty(manifest,'categories')}));
|
|
await open(page,theme);
|
|
await expect(main(page).getByText('No tags yet.',{exact:true})).toBeVisible();await expect(main(page).getByText('No categories yet.',{exact:true})).toBeVisible();
|
|
await shot('empty','#workspace-main');
|
|
await page.unroute('**/prompt_manager/vocabulary/tags?*');await page.unroute('**/prompt_manager/vocabulary/categories?*');
|
|
|
|
// A failed read shows the inline error with Retry and no zero counts (D12).
|
|
await page.route('**/prompt_manager/vocabulary/tags?*',item=>item.fulfill({status:500,json:{success:false,error:'Database is unavailable'}}));
|
|
await open(page,theme);await expect(main(page).getByRole('alert')).toHaveText('Tags could not be loaded. Nothing was changed.');
|
|
await shot('read-error',tagSurface);
|
|
await page.unroute('**/prompt_manager/vocabulary/tags?*');
|
|
|
|
// Load more while more tags remain (D5): the end of the first page.
|
|
manifest=await seed(request,{extra_tags:211});await open(page,theme,100);
|
|
const more=button(main(page),'Load more tags');await expect(more).toBeVisible();
|
|
// A full-page clip of the end of the first page: scrolling there would append the next page before the capture.
|
|
const end=await more.evaluate(node=>{const box=node.closest('.surface').getBoundingClientRect();return box.bottom+scrollY;});
|
|
const path=testInfo.outputPath(`production-load-more-${width}-${theme}.png`);
|
|
await page.screenshot({path,fullPage:true,animations:'disabled',clip:{x:0,y:Math.max(0,end-420),width,height:440}});
|
|
await testInfo.attach(`production-load-more-${width}-${theme}`,{path,contentType:'image/png'});
|
|
await expect(rows(page)).toHaveCount(100);
|
|
});
|