Vito
b2cc489fd4
* feat(inspect): copy settings summary in the full inspector The legacy metadata page's COPY ALL (LI-4) becomes "Copy settings summary" after the six facts of the shared full inspector, so the Images viewer, the recorded history's current file and Inspect all offer it; the Images side panel keeps the concept's footer. The text is the legacy copyAllData template with its placeholders, filled from what the inspector shows. A unit test runs the template read from web/metadata.html on the legacy parse of every parity PNG: 22 of 25 are byte-equal, and the other three differ only by the ZeroOut guard (#249) or facts the legacy parse missed. Copying follows the concept's prompt copy: the toast "Settings summary copied.", or the select-to-copy dialog (now titled per copy) without a clipboard. The concept comparisons map the button as D-NEW-1. * feat(inspect): local execution evidence and prompt tracing A browser port of the server's inspection resolver for one sampler (PR L3 Task 8, LI-1). local-resolver.mjs answers inspect_prompt_evidence's {prompts, resolution} for a local read's records: execution evidence (read_pair_execution and its per-node match), every traced strategy (encoders, strings, concatenations, PromptManager and its historical classes, passthrough, zeroed, selector branches, composites, guiders), the latent stage walk, the R1 overwritten-text guard and the inspection profile's visit, depth, text, path, built and scanned bounds, with the same reason codes and outcome lines. py-json.mjs reads the records as CPython's json.loads does (dict order and last-wins keys, int versus float, BigInt past 2^53, NaN) and measures and strips text as str does. Several sampler candidates, detailer stages and A1111 parameters raise LocalResolverGap until Task 9. Nothing is wired into Inspect yet. Python is the oracle: test_local_inspect_parity compares the port with the server on the parity corpus, 107 named record sets, every work bound at its edge and 600 seeded fuzzed graphs, and requires gaps to be exactly the Task 9 paths. Sixteen porting mutations each fail the suite. The Node unit test replays committed server answers, which the Python suite keeps current. * fix(inspect): a list or object workflow node type answers malformed The R1 overwritten-text check looked every UI workflow node's `type` up among the subgraph IDs. A `type` that is a JSON list or object raised TypeError there, so the inspect route answered 500 "Prompt inspection failed". Such a workflow is now malformed evidence: the resolution is unresolved with reason_code `malformed` and the inspector's own "Prompt evidence is malformed" line, never exception text. The browser port answers the same, and the parity corpus gains the list, object, nested-subgraph and skipped-ID shapes. * fix(inspect): a list or object graph class_type is never a preview output With several sampler candidates the inspector first drops stages whose outputs reach only previews. That pass looked each API graph node's `class_type` up in the preview class set, so a list or object `class_type` raised TypeError and the inspect route answered 500. Only a string names a class now; such a node is an ordinary terminal, as the rest of the resolver already treats it. * feat(inspect): local candidate selection matching the inspector The browser port of the inspection resolver now answers every record set the server does, so no path is left to the server any more: - several sampler candidates, with the identical-branch rule (#270): a compare grid whose branches all resolve to one pair (text and recipe) is resolved, any other mix is ambiguous; - stages whose outputs reach only previews are dropped first; - detailer stages are judged with the samplers in their image ancestry (multistage-differs, cycles, depth and the per-stage visit budgets), and a sampler that only feeds detailers is not a candidate of its own; - A1111 `parameters`, with Python's multiline anchors, `\s` and Unicode `\d`, the bare footer and Template trailers, counted in code points. The parity corpus gains the selection cases and a seeded fuzzer, and every inspection vector now gives the server's prompts, resolution and facts locally. 16 of 17 mutations are caught; the uncaught one (not flattening an ambiguous upstream stage) cannot change any answer. * feat(inspect): local prompts resolved like the server's A file chosen on the Inspect page now shows the prompts and resolution the server's inspector gives the same records: buildLocalPayload takes its roles from the local resolver instead of the interim open roles, so the legacy fill applies exactly where it does for Images. The resolver reads the server's own node table. The page fetches web/js/inspection-semantics.json once through the API client as it mounts, before any selection; the static route serves that one JSON file by exact path (every other JSON stays forbidden). A table that cannot be fetched answers "The inspector's node table is unavailable." as the server does, and a later selection asks again. The Copy settings summary deviation is numbered D117. * fix(inspect): skip a workflow node whose type is a list or object The overwritten-PromptManager walk now skips such a node, on the server and in the browser port, instead of marking the whole file malformed. A prompt that resolves still resolves; the other nodes still feed the check. * fix(inspect): one JSON depth cap for both browser parsers py-json.mjs and local-video.mjs now refuse past the same 1,000 nested arrays or objects, counting every container as CPython's scanner does. Boundary vectors at 999, 1,000 and 1,001 for a deep prompt and a deep workflow run through the Python oracle, and TESTING.md gives the measured per-version server limits and both divergence directions. * fix(inspect): realpath containment for the exact-path node table route inspection-semantics.json now goes through the same realpath check as every other static file, so a symlink out of web/ is refused. The forbidden-path test asserts exactly 403. * fix(inspect): abortable, stepped local reads with a busy state The wait for the node table now ends with the selection's signal. A local read resolves and projects in bounded steps with a turn of the event loop between them, and the inspector carries aria-busy while it loads. A budget test covers maximal 2 MiB graphs and checks the stepped read is byte-identical to one synchronous build. The D117 wrap rule now targets only the summary button, and TESTING.md scopes the restart line to PRs L1 and L2. * fix(inspect): record the two CPython-JSON emulations as a follow-up
313 lines
20 KiB
JavaScript
313 lines
20 KiB
JavaScript
import { writeFile } from 'node:fs/promises';
|
||
import { startCoverage, saveCoverage } from '../../tools/vendor/browser-coverage.mjs';
|
||
import { test, expect } from './fixtures.mjs';
|
||
import { captureCanonicalState } from './history-canonical-comparison.mjs';
|
||
import { SIZES, THEMES, seedConcept, openConcept, openProduction, diffInventory, mutate } from './concept-inventory.mjs';
|
||
import { parityPng } from './local-inspect-files.mjs';
|
||
|
||
// PR L2 Task 7 of the local-Inspect plan (#249): the native "Inspect a file" page against the immutable concept's
|
||
// `#metadata` (docs/concepts/workspace/app.js renderMetadata 740–748, selection 1715–1729, style.css 709–722,
|
||
// 1180–1194, 1543–1545, 1559–1564), at 1600x1100 and 390x844 in both themes, in three states: initial, selected (the
|
||
// same synthetic PNG set into both `#local-file` inputs) and viewer-open. The concept is never edited: the recorded
|
||
// differences D60–D66 (TESTING.md) are applied to its measurement, and, where they change copy, to its page before it
|
||
// is measured, so the browser lays the concept out with production's words. After that the diff must be empty.
|
||
// Paired captures are artifacts only; there are no PNG baselines.
|
||
test.use({ locale: 'en-US', timezoneId: 'UTC', reducedMotion: 'reduce' });
|
||
|
||
const FILE = 'f02.png';
|
||
/** D60 and D61, the maintainer's LI-3 copy, keyed by the concept's own copy. */
|
||
const COPY = {
|
||
action: ['Open sample metadata', 'Open file metadata'],
|
||
intro: ['Keep the existing local-file inspection workflow. Only add the file to your library when you choose to import it.',
|
||
'Read embedded metadata in this browser. The file is not uploaded or added to your library.'],
|
||
chooser: ['Choose an image for a local preview', 'Choose an image or video for a local preview'],
|
||
note: ['This mock previews your file locally. Sample metadata is available with “Open sample metadata”.',
|
||
'Your file stays in this browser. Its metadata opens with “Open file metadata”.'],
|
||
toast: ['Local preview only. No file uploaded; sample metadata is available above.',
|
||
'Local preview only. No file uploaded; metadata is available above.'],
|
||
};
|
||
/** D62: the concept's image list plus the videos the local readers support. */
|
||
const ACCEPT = ['image/png,image/jpeg,image/webp', 'image/png,image/jpeg,image/webp,video/*,.mp4,.mov,.m4v,.webm,.mkv,.avi,.wmv'];
|
||
|
||
test.beforeEach(async ({ page, browserName }) => {
|
||
await startCoverage(page, browserName);
|
||
page.conceptErrors = [];
|
||
page.on('pageerror', error => page.conceptErrors.push(error.message));
|
||
});
|
||
|
||
test.afterEach(async ({ page, browserName }) => {
|
||
await saveCoverage(page, browserName);
|
||
expect(page.conceptErrors).toEqual([]);
|
||
});
|
||
|
||
/** Runs in the page: the Inspect surface below the heading, and the heading's actions. Self-contained. */
|
||
function measureInspect(scope) {
|
||
const main = document.querySelector(scope);
|
||
const css = (node, ...keys) => node ? Object.fromEntries(keys.map(key => [key, getComputedStyle(node)[key]])) : null;
|
||
const name = node => [node.localName, ...[...node.classList].sort()].join('.');
|
||
const font = node => css(node, 'fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'color');
|
||
const origin = main.querySelector(':scope > section.surface');
|
||
const box = node => {
|
||
if (!node || !origin) return null;
|
||
const a = node.getBoundingClientRect(), b = origin.getBoundingClientRect();
|
||
return { left: Math.round(a.left - b.left), top: Math.round(a.top - b.top), width: Math.round(a.width), height: Math.round(a.height) };
|
||
};
|
||
const text = node => node ? node.textContent.replace(/\s+/g, ' ').trim() : null;
|
||
const heading = main.querySelector(':scope > .heading');
|
||
const surface = origin;
|
||
const drop = surface?.querySelector(':scope > .file-drop');
|
||
const input = drop?.querySelector('input#local-file');
|
||
const preview = surface?.querySelector(':scope > #local-preview');
|
||
const media = preview?.querySelector('.local-file-preview');
|
||
return {
|
||
heading: {
|
||
title: text(heading?.querySelector('h1')),
|
||
description: text(heading?.querySelector('p')),
|
||
actions: [...(heading?.querySelectorAll('.heading-actions > *') ?? [])].map(node => ({ name: name(node), text: text(node),
|
||
...css(node, 'backgroundColor', 'color', 'fontSize', 'paddingTop', 'paddingLeft', 'borderTopLeftRadius'), box: box(node) })),
|
||
},
|
||
surface: surface && {
|
||
children: [...surface.children].map(name), box: box(surface),
|
||
...css(surface, 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'borderTopWidth', 'borderTopStyle',
|
||
'borderTopColor', 'borderTopLeftRadius', 'backgroundColor'),
|
||
h2: { text: text(surface.querySelector(':scope > h2')), ...font(surface.querySelector(':scope > h2')), box: box(surface.querySelector(':scope > h2')) },
|
||
p: { text: text(surface.querySelector(':scope > p')), ...font(surface.querySelector(':scope > p')),
|
||
...css(surface.querySelector(':scope > p'), 'marginTop'), box: box(surface.querySelector(':scope > p')) },
|
||
},
|
||
drop: drop && {
|
||
children: [...drop.children].map(name), box: box(drop),
|
||
...css(drop, 'display', 'placeItems', 'textAlign', 'minHeight', 'rowGap', 'columnGap', 'marginTop', 'paddingTop',
|
||
'paddingRight', 'paddingBottom', 'paddingLeft', 'borderTopWidth', 'borderTopStyle', 'borderTopColor',
|
||
'borderBottomStyle', 'borderLeftStyle', 'borderRightStyle', 'borderTopLeftRadius', 'backgroundColor'),
|
||
icon: { box: box(drop.querySelector(':scope > svg.icon')), viewBox: drop.querySelector(':scope > svg.icon')?.getAttribute('viewBox'),
|
||
d: drop.querySelector(':scope > svg.icon path')?.getAttribute('d') ?? null,
|
||
...css(drop.querySelector(':scope > svg.icon'), 'color', 'strokeWidth') },
|
||
label: { text: text(drop.querySelector(':scope > label')), for: drop.querySelector(':scope > label')?.htmlFor ?? null,
|
||
...font(drop.querySelector(':scope > label')), box: box(drop.querySelector(':scope > label')) },
|
||
input: input && { type: input.type, accept: input.accept, multiple: input.multiple, ...css(input, 'maxWidth', 'fontSize', 'color'),
|
||
box: box(input) },
|
||
note: { text: text(drop.querySelector(':scope > span.small')), ...font(drop.querySelector(':scope > span.small')),
|
||
box: box(drop.querySelector(':scope > span.small')) },
|
||
},
|
||
preview: preview && {
|
||
children: [...preview.children].map(name), box: box(preview),
|
||
media: media && { tag: media.localName, alt: media.getAttribute('alt'), blob: media.src.startsWith('blob:'),
|
||
...css(media, 'width', 'maxHeight', 'objectFit', 'marginTop', 'display'), box: box(media) },
|
||
},
|
||
// The chooser's displayed name: a file input shows the last path segment of its value.
|
||
chosen: input ? { name: input.value.split(/[\\/]/).pop(), files: [...input.files].map(file => file.name) } : null,
|
||
};
|
||
}
|
||
|
||
/** Runs in the page: the open viewer's dialog box, its toolbar controls in order and its rail's sections in order. */
|
||
function measureViewer() {
|
||
const dialog = document.querySelector('dialog#viewer-dialog[open]');
|
||
if (!dialog) return null;
|
||
const css = (node, ...keys) => node ? Object.fromEntries(keys.map(key => [key, getComputedStyle(node)[key]])) : null;
|
||
const rect = node => { const b = node.getBoundingClientRect(); return { left: Math.round(b.left), top: Math.round(b.top), width: Math.round(b.width), height: Math.round(b.height) }; };
|
||
const text = node => node.textContent.replace(/\s+/g, ' ').trim();
|
||
const rail = dialog.querySelector('#viewer-details');
|
||
// The rail's sections in document order, whatever wraps them.
|
||
const SECTIONS = [
|
||
['.panel-heading', () => 'heading'],
|
||
['.panel-heading + p.small', () => 'filename'],
|
||
['.tags', node => node.querySelector('button.chip') ? 'tag chips' : 'badges'],
|
||
['section.prompt-section.positive', () => 'positive'],
|
||
['section.prompt-section.negative', () => 'negative'],
|
||
['dl.meta-grid', node => node.closest('details') ? null : 'facts'],
|
||
['details > summary', node => text(node)],
|
||
['button.send', node => node.closest('.prompt-section') ? `send ${node.closest('.prompt-section').matches('.positive') ? 'positive' : 'negative'}` : 'send pair'],
|
||
['button', node => /Prompt history/.test(node.textContent) ? 'Prompt history' : text(node) === 'Copy settings summary' ? 'settings summary' : null],
|
||
];
|
||
const sections = [...rail.querySelectorAll('*')].map(node => {
|
||
for (const [selector, label] of SECTIONS) if (node.matches(selector)) return label(node);
|
||
return null;
|
||
}).filter(Boolean);
|
||
return {
|
||
dialog: rect(dialog),
|
||
// The layout below the header; the header's height follows the title (D66) and the rail's height its content.
|
||
layout: (() => {
|
||
const header = dialog.querySelector('.dialog-header').getBoundingClientRect().bottom;
|
||
const left = rect(dialog.querySelector('.viewer-left')), side = rect(rail);
|
||
return { left: { ...left, top: Math.round(left.top - header) }, rail: { left: side.left, width: side.width },
|
||
...css(dialog.querySelector('.viewer-layout'), 'display', 'gridTemplateColumns') };
|
||
})(),
|
||
title: text(dialog.querySelector('#viewer-title')),
|
||
subtitle: text(dialog.querySelector('.dialog-header p')),
|
||
toolbar: [...dialog.querySelectorAll('#viewer-toolbar > button, #viewer-toolbar > a')].map(text),
|
||
railTitle: text(rail.querySelector('.panel-heading h2')),
|
||
sections,
|
||
};
|
||
}
|
||
|
||
/**
|
||
* D60–D62 applied to the open concept page before it is measured: production's action label, copy and accept list,
|
||
* so the browser lays out what follows them. The concept file itself is never touched.
|
||
*/
|
||
async function withProductionCopy(page) {
|
||
await page.evaluate(({ COPY, ACCEPT }) => {
|
||
const main = document.querySelector('#main');
|
||
const swap = (node, [from, to]) => { if (node.textContent !== from) throw new Error(`concept copy changed: ${node.textContent}`); node.textContent = to; };
|
||
swap(main.querySelector('.heading-actions > button'), COPY.action);
|
||
swap(main.querySelector('section.surface > p'), COPY.intro);
|
||
swap(main.querySelector('.file-drop > label'), COPY.chooser);
|
||
swap(main.querySelector('.file-drop > span.small'), COPY.note);
|
||
const input = main.querySelector('#local-file');
|
||
if (input.accept !== ACCEPT[0]) throw new Error(`concept accept changed: ${input.accept}`);
|
||
input.accept = ACCEPT[1];
|
||
}, { COPY, ACCEPT });
|
||
}
|
||
|
||
/**
|
||
* D66: the viewer of a local file is titled by its filename and has no tag chips and no Prompt history. D117 (LI-4):
|
||
* "Copy settings summary" follows the six facts.
|
||
*/
|
||
function mapViewerConcept(reference) {
|
||
const sections = reference.sections.filter(section => section !== 'tag chips' && section !== 'Prompt history');
|
||
const facts = sections.indexOf('facts');
|
||
return {
|
||
...reference,
|
||
title: FILE,
|
||
railTitle: FILE,
|
||
sections: [...sections.slice(0, facts + 1), 'settings summary', ...sections.slice(facts + 1)],
|
||
};
|
||
}
|
||
|
||
// Two frames, then every running transition finished.
|
||
const settle = page => page.evaluate(async () => {
|
||
await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
|
||
await Promise.all(document.getAnimations().map(animation => animation.finished.catch(() => {})));
|
||
});
|
||
|
||
async function conceptStates(page, theme, testInfo, tag) {
|
||
await openConcept(page, 'metadata', theme);
|
||
await page.mouse.move(0, 0);
|
||
await withProductionCopy(page);
|
||
await settle(page);
|
||
const initial = await page.evaluate(measureInspect, '#main');
|
||
await captureCanonicalState(page, testInfo, `concept-initial-${tag}`);
|
||
await page.locator('#main #local-file').setInputFiles(parityPng(FILE));
|
||
await expect(page.locator('#main #local-preview img.local-file-preview')).toBeVisible();
|
||
await page.locator('#main #local-preview img').evaluate(image => image.decode().catch(() => {}));
|
||
await expect(page.locator('#toast')).toHaveText(COPY.toast[0]);
|
||
await settle(page);
|
||
const selected = await page.evaluate(measureInspect, '#main');
|
||
await captureCanonicalState(page, testInfo, `concept-selected-${tag}`);
|
||
await page.locator('#main .heading-actions > button').click();
|
||
await expect(page.locator('dialog#viewer-dialog[open] #viewer-details .panel-heading')).toBeVisible();
|
||
await page.mouse.move(0, 0);
|
||
await settle(page);
|
||
const viewer = await page.evaluate(measureViewer);
|
||
await captureCanonicalState(page, testInfo, `concept-viewer-${tag}`);
|
||
return { initial, selected, viewer };
|
||
}
|
||
|
||
async function productionStates(page, theme, testInfo, tag) {
|
||
await openProduction(page, 'inspect', theme);
|
||
await page.mouse.move(0, 0);
|
||
const action = page.locator('#workspace-main .heading-actions').getByRole('button', { name: COPY.action[1], exact: true });
|
||
// D60: unavailable, and described by the drop note, until a classified file is chosen.
|
||
await expect(action).toHaveAttribute('aria-disabled', 'true');
|
||
await expect(action).toHaveAttribute('aria-describedby', 'local-file-note');
|
||
await settle(page);
|
||
const initial = await page.evaluate(measureInspect, '#workspace-main');
|
||
await captureCanonicalState(page, testInfo, `production-initial-${tag}`);
|
||
await page.locator('#workspace-main #local-file').setInputFiles(parityPng(FILE));
|
||
await expect(page.locator('#workspace-main #local-preview img.local-file-preview')).toBeVisible();
|
||
await page.locator('#workspace-main #local-preview img').evaluate(image => image.decode().catch(() => {}));
|
||
await expect(page.locator('#workspace-toast')).toHaveText(COPY.toast[1]);
|
||
await expect(action).toHaveAttribute('aria-disabled', 'false');
|
||
// D63: a readable PNG shows no status line.
|
||
await expect(page.locator('#workspace-main #local-preview p.small')).toHaveCount(0);
|
||
await settle(page);
|
||
const selected = await page.evaluate(measureInspect, '#workspace-main');
|
||
await captureCanonicalState(page, testInfo, `production-selected-${tag}`);
|
||
await action.click();
|
||
await expect(page.locator('dialog#viewer-dialog[open] #viewer-details .panel-heading')).toBeVisible();
|
||
await expect(page.locator('dialog#viewer-dialog[open] #viewer-details .meta-grid').first()).toBeVisible();
|
||
await page.mouse.move(0, 0);
|
||
await settle(page);
|
||
const viewer = await page.evaluate(measureViewer);
|
||
await captureCanonicalState(page, testInfo, `production-viewer-${tag}`);
|
||
return { initial, selected, viewer };
|
||
}
|
||
|
||
/** The concept's fixed CSS values (style.css 709–722, 1180–1194, 1543–1545, 1559–1564), restated as the plan pins them. */
|
||
function expectPinnedValues(state) {
|
||
expect(state.surface).toMatchObject({ paddingTop: '22px', paddingLeft: '22px', borderTopLeftRadius: '7px', borderTopStyle: 'solid' });
|
||
expect(state.surface.h2).toMatchObject({ fontSize: '17px', fontWeight: '600' });
|
||
expect(state.surface.p).toMatchObject({ fontSize: '12px' });
|
||
expect(state.drop).toMatchObject({ display: 'grid', textAlign: 'center', minHeight: '170px', rowGap: '12px', columnGap: '12px',
|
||
marginTop: '20px', paddingTop: '22px', paddingLeft: '22px', borderTopStyle: 'dashed', borderBottomStyle: 'dashed',
|
||
borderLeftStyle: 'dashed', borderRightStyle: 'dashed', borderTopWidth: '1px', borderTopLeftRadius: '7px' });
|
||
expect(state.drop.input).toMatchObject({ maxWidth: '100%', fontSize: '12px' });
|
||
}
|
||
|
||
for (const [width, height] of SIZES) for (const theme of THEMES) {
|
||
test(`inspect surface matches the concept ${width}x${height} ${theme}`, async ({ page, request }, testInfo) => {
|
||
await page.setViewportSize({ width, height });
|
||
await seedConcept(request);
|
||
const tag = `${theme}-${width}`;
|
||
const concept = await conceptStates(page, theme, testInfo, tag);
|
||
const production = await productionStates(page, theme, testInfo, tag);
|
||
const mappedViewer = mapViewerConcept(concept.viewer);
|
||
const diff = {
|
||
initial: diffInventory(concept.initial, production.initial),
|
||
selected: diffInventory(concept.selected, production.selected),
|
||
viewer: diffInventory(mappedViewer, production.viewer),
|
||
};
|
||
const path = testInfo.outputPath('inspect-geometry.json');
|
||
await writeFile(path, JSON.stringify({ concept, production, diff }, null, 2));
|
||
await testInfo.attach('inspect-geometry', { path, contentType: 'application/json' });
|
||
|
||
// The concept is what this comparison assumes: its structure, its own copy (swapped above) and its chooser.
|
||
expect(concept.initial.surface.children).toEqual(['h2', 'p', 'div.file-drop.spaced-20', 'div']);
|
||
expect(concept.initial.drop.children).toEqual(['svg.icon', 'label', 'input', 'span.small']);
|
||
expect(concept.selected.preview.children).toEqual(['img.local-file-preview']);
|
||
expect(concept.selected.chosen).toEqual({ name: FILE, files: [FILE] });
|
||
expect(concept.viewer.toolbar).toEqual(['← Previous', '−', '+', 'Fit', 'Rotate', 'Flip', 'Play', 'Download', 'Next →']);
|
||
|
||
expect(diff).toEqual({ initial: [], selected: [], viewer: [] });
|
||
for (const state of [production.initial, production.selected]) expectPinnedValues(state);
|
||
expect(production.selected.preview.media).toMatchObject({ tag: 'img', alt: 'Local file preview', blob: true,
|
||
maxHeight: '400px', objectFit: 'contain', marginTop: '20px' });
|
||
// The chooser names the chosen file after a real setInputFiles, as the concept's does.
|
||
expect(production.initial.chosen).toEqual({ name: '', files: [] });
|
||
expect(production.selected.chosen).toEqual({ name: FILE, files: [FILE] });
|
||
// D66 in the rail: no tag chips and no Prompt history; the title is the filename. D117 follows the facts.
|
||
expect(production.viewer.sections).toEqual(['heading', 'filename', 'badges', 'positive', 'send positive', 'negative',
|
||
'send negative', 'facts', 'settings summary', 'File & provenance', 'Workflow & raw metadata', 'send pair']);
|
||
});
|
||
}
|
||
|
||
test('mutation is noticed', async ({ page, request }, testInfo) => {
|
||
await page.setViewportSize({ width: 1600, height: 1100 });
|
||
await seedConcept(request);
|
||
await openConcept(page, 'metadata', 'dark');
|
||
await withProductionCopy(page);
|
||
const concept = await page.evaluate(measureInspect, '#main');
|
||
await openProduction(page, 'inspect', 'dark');
|
||
await page.mouse.move(0, 0);
|
||
expect(diffInventory(concept, await page.evaluate(measureInspect, '#workspace-main'))).toEqual([]);
|
||
|
||
// A solid border on the drop area is noticed on every side and nowhere else.
|
||
const undoCss = await mutate(page, { css: '#workspace-main .file-drop { border-style: solid; }' });
|
||
expect(diffInventory(concept, await page.evaluate(measureInspect, '#workspace-main')).map(item => item.path))
|
||
.toEqual(['drop.borderTopStyle', 'drop.borderBottomStyle', 'drop.borderLeftStyle', 'drop.borderRightStyle']);
|
||
await undoCss();
|
||
// A renamed label is noticed (its text; its box only if the new words lay out differently).
|
||
const label = page.locator('#workspace-main .file-drop > label');
|
||
await label.evaluate(node => { node.dataset.original = node.textContent; node.textContent = 'Choose a file'; });
|
||
const renamed = diffInventory(concept, await page.evaluate(measureInspect, '#workspace-main')).map(item => item.path);
|
||
expect(renamed).toContain('drop.label.text');
|
||
expect(renamed.every(path => path.startsWith('drop.label.'))).toBe(true);
|
||
await label.evaluate(node => { node.textContent = node.dataset.original; delete node.dataset.original; });
|
||
// A removed note is noticed by its path.
|
||
const undoDom = await mutate(page, { remove: ['#workspace-main .file-drop > span.small'] });
|
||
expect(diffInventory(concept, await page.evaluate(measureInspect, '#workspace-main')).map(item => item.path))
|
||
.toEqual(expect.arrayContaining(['drop.children.3', 'drop.note.text']));
|
||
await undoDom();
|
||
expect(diffInventory(concept, await page.evaluate(measureInspect, '#workspace-main'))).toEqual([]);
|
||
await captureCanonicalState(page, testInfo, 'production-after-mutations');
|
||
});
|