mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-04 18:34:02 +00:00
Sameh Khamis
ec4c55e78c
SceneControls no longer takes element handles or writes the Scene panel's button states, PLAY label, status line, progress bar or runtime chip: it presents them to the gev-scenes store, and the panel's buttons, scene select and IMPORT chooser call its actions there. The chooser opens only while an owner presents the panel and is cleared once its import settles. On destroy the panel keeps its last status and buttons, without shots or the runtime chip, as before.
489 lines
17 KiB
JavaScript
489 lines
17 KiB
JavaScript
#!/usr/bin/env node
|
|
/** Exercise installed Scene controls and real project/playback operations. */
|
|
import fs from 'node:fs';
|
|
import path from 'node:path';
|
|
import puppeteer from 'puppeteer';
|
|
|
|
const shots = path.resolve('qa-shots/scene-controls');
|
|
fs.mkdirSync(shots, { recursive: true });
|
|
const browser = await puppeteer.launch({
|
|
headless: true,
|
|
args: [
|
|
'--no-sandbox',
|
|
...(process.platform === 'darwin'
|
|
? ['--use-angle=metal', '--enable-gpu']
|
|
: ['--use-gl=angle', '--use-angle=swiftshader']),
|
|
],
|
|
});
|
|
const page = await browser.newPage();
|
|
const errors = [];
|
|
page.on('pageerror', (error) => errors.push(error.message));
|
|
let promptValue = 'QA Scene';
|
|
page.on('dialog', async (dialog) => {
|
|
await dialog.accept(dialog.type() === 'prompt' ? promptValue : undefined);
|
|
});
|
|
let failures = 0;
|
|
function check(name, ok) {
|
|
console.log(`[${ok ? 'PASS' : 'FAIL'}] ${name}`);
|
|
if (!ok) failures++;
|
|
}
|
|
try {
|
|
await page.setViewport({ width: 1440, height: 900 });
|
|
await page.goto(
|
|
`${process.env.QA_BASE_URL || 'http://localhost:4173'}/?welcome=0`,
|
|
{ waitUntil: 'domcontentloaded' },
|
|
);
|
|
await page.waitForFunction(
|
|
() =>
|
|
window.__godsEyeView?.sceneDirector?._controls &&
|
|
document.getElementById('loading-screen')?.classList.contains('hidden'),
|
|
{ timeout: 60000 },
|
|
);
|
|
await page.evaluate(() => {
|
|
window.__qaSceneState = [];
|
|
window.__godsEyeView.sceneDirector.subscribe((notification) =>
|
|
window.__qaSceneState.push(notification),
|
|
);
|
|
});
|
|
await page.click('[data-collapse-target="scene-panel"]');
|
|
await page.click('#scene-new-btn');
|
|
await page.waitForFunction(
|
|
() =>
|
|
document.querySelector('#scene-select option:checked')?.textContent ===
|
|
'QA Scene',
|
|
);
|
|
check(
|
|
'New creates and selects a persisted empty scene',
|
|
await page.evaluate(() => {
|
|
const director = window.__godsEyeView.sceneDirector;
|
|
const saved = JSON.parse(
|
|
localStorage.getItem('godsEyeView.sceneProject.v2'),
|
|
);
|
|
return (
|
|
director._getSelectedScene().shots.length === 0 &&
|
|
!!document.querySelector('.scene-shot-empty') &&
|
|
saved.scenes.some((scene) => scene.title === 'QA Scene')
|
|
);
|
|
}),
|
|
);
|
|
await page.focus('#scene-capture-btn');
|
|
await page.keyboard.press('Space');
|
|
await page.waitForFunction(
|
|
() => document.querySelectorAll('.scene-shot-row').length === 1,
|
|
);
|
|
check(
|
|
'Capture stores the actual camera and visual state',
|
|
await page.evaluate(() => {
|
|
const director = window.__godsEyeView.sceneDirector;
|
|
const shot = director._getSelectedScene().shots[0];
|
|
const current = director.styleManager.getCameraState();
|
|
return (
|
|
Number.isFinite(shot.camera.lat) &&
|
|
Math.abs(shot.camera.lat - current.lat) < 0.01 &&
|
|
shot.visual.style === director.styleManager.getVisualState().style
|
|
);
|
|
}),
|
|
);
|
|
promptValue = '<b>QA shot</b>';
|
|
await page.click('.scene-shot-label', { count: 2 });
|
|
await page.waitForSelector('.scene-shot-rename', { visible: true });
|
|
await page.type('.scene-shot-rename', promptValue);
|
|
await page.keyboard.press('Enter');
|
|
await page.waitForFunction(
|
|
() =>
|
|
document.querySelector('.scene-shot-label')?.textContent ===
|
|
'<b>QA shot</b>',
|
|
);
|
|
check(
|
|
'Rename persists literal text without interpreting markup',
|
|
await page.evaluate(
|
|
() =>
|
|
!document.querySelector('.scene-shot-label b') &&
|
|
JSON.parse(
|
|
localStorage.getItem('godsEyeView.sceneProject.v2'),
|
|
).scenes.some((scene) =>
|
|
scene.shots.some((shot) => shot.title === '<b>QA shot</b>'),
|
|
),
|
|
),
|
|
);
|
|
// A long rename keeps its editor visible inside the shot row.
|
|
await page.click('.scene-shot-label', { count: 2 });
|
|
await page.waitForSelector('.scene-shot-rename', { visible: true });
|
|
await page.type(
|
|
'.scene-shot-rename',
|
|
' with a much longer title that runs well past the shot row',
|
|
);
|
|
await page.keyboard.press('End');
|
|
check(
|
|
'A long rename keeps the editor visible inside its shot row',
|
|
await page.evaluate(() => {
|
|
// The label clips with an ellipsis, which hides an editor that
|
|
// overflows it, so its content must fit its width.
|
|
const input = document.querySelector('.scene-shot-rename');
|
|
const label = input?.closest('.scene-shot-label');
|
|
const box = input?.getBoundingClientRect();
|
|
const style = input && getComputedStyle(input);
|
|
return (
|
|
!!box &&
|
|
box.width > 120 &&
|
|
box.height > 10 &&
|
|
label.scrollWidth <= label.clientWidth + 1 &&
|
|
style.visibility === 'visible' &&
|
|
style.borderTopWidth !== '0px' &&
|
|
document.activeElement === input
|
|
);
|
|
}),
|
|
);
|
|
await page.keyboard.press('Escape');
|
|
await page.waitForFunction(
|
|
() => !document.querySelector('.scene-shot-rename'),
|
|
);
|
|
|
|
await page.click('#scene-capture-btn');
|
|
await page.waitForFunction(
|
|
() => document.querySelectorAll('.scene-shot-row').length === 2,
|
|
);
|
|
await page.click('.scene-shot-label');
|
|
check(
|
|
'Shot selection and Update use the selected shot',
|
|
await page.evaluate(() => {
|
|
const director = window.__godsEyeView.sceneDirector;
|
|
const scene = director._getSelectedScene();
|
|
const count = scene.shots.length;
|
|
document.getElementById('scene-update-shot-btn').click();
|
|
return (
|
|
director._selectedShotId === scene.shots[0].id &&
|
|
scene.shots.length === count &&
|
|
document.querySelector('.scene-shot-row.active .scene-shot-label')
|
|
.textContent === scene.shots[0].title
|
|
);
|
|
}),
|
|
);
|
|
await page.evaluate(() => {
|
|
window.__sceneExports = [];
|
|
const create = URL.createObjectURL.bind(URL);
|
|
URL.createObjectURL = (blob) => {
|
|
if (blob.type === 'application/json')
|
|
window.__sceneExports.push(blob.text());
|
|
return create(blob);
|
|
};
|
|
});
|
|
await page.click('#scene-export-btn');
|
|
const exported = await page.evaluate(async () =>
|
|
JSON.parse(await window.__sceneExports[0]),
|
|
);
|
|
check(
|
|
'Export produces the current project JSON',
|
|
exported.scenes.some(
|
|
(scene) => scene.title === 'QA Scene' && scene.shots.length === 2,
|
|
),
|
|
);
|
|
// Keep real camera/style playback while isolating this control check from
|
|
// live provider availability. Layer transactions are covered by their suites.
|
|
const scene = exported.scenes.find((item) => item.title === 'QA Scene');
|
|
scene.shots = scene.shots
|
|
.slice(0, 1)
|
|
.map((shot) => ({ ...shot, durationSec: 0.4, holdSec: 10, layers: {} }));
|
|
const fixture = { ...exported, scenes: [scene] };
|
|
const projectFile = path.join(shots, 'project.json');
|
|
fs.writeFileSync(projectFile, JSON.stringify(fixture));
|
|
const input = await page.$('#scene-import-file');
|
|
const beforePreview = await page.evaluate(() =>
|
|
JSON.stringify(window.__godsEyeView.sceneDirector._project),
|
|
);
|
|
await input.uploadFile(projectFile);
|
|
await page.waitForSelector('[data-director-apply-import]');
|
|
check(
|
|
'Import preview leaves the current project untouched',
|
|
await page.evaluate(
|
|
(saved) =>
|
|
JSON.stringify(window.__godsEyeView.sceneDirector._project) === saved,
|
|
beforePreview,
|
|
),
|
|
);
|
|
await page.click('[data-director-apply-import]');
|
|
await page.waitForFunction(
|
|
() =>
|
|
document.getElementById('scene-status').textContent ===
|
|
'Imported project.json',
|
|
);
|
|
check(
|
|
'Import replaces the project and clears the file input',
|
|
await page.evaluate(
|
|
() =>
|
|
window.__godsEyeView.sceneDirector._project.scenes.length === 1 &&
|
|
document.querySelectorAll('.scene-shot-row').length === 1 &&
|
|
document.getElementById('scene-import-file').value === '',
|
|
),
|
|
);
|
|
await page.click('.scene-shot-btn');
|
|
await page.waitForFunction(
|
|
() =>
|
|
document.getElementById('scene-status').textContent.startsWith('Loaded:'),
|
|
{ timeout: 30000 },
|
|
);
|
|
check(
|
|
'LOAD completes the real visual and camera operation',
|
|
await page.evaluate(
|
|
() =>
|
|
!window.__godsEyeView.sceneDirector.running &&
|
|
document
|
|
.getElementById('scene-status')
|
|
.textContent.includes('<b>QA shot</b>'),
|
|
),
|
|
);
|
|
await page.click('#scene-start-btn');
|
|
await page.waitForFunction(
|
|
() =>
|
|
window.__godsEyeView.sceneDirector.running &&
|
|
document.body.classList.contains('scene-playback-mode'),
|
|
);
|
|
check(
|
|
'Playback enters recording presentation and disables editing',
|
|
await page.evaluate(
|
|
() =>
|
|
document.getElementById('scene-capture-btn').disabled &&
|
|
document.getElementById('scene-start-btn').disabled &&
|
|
!document.getElementById('scene-stop-btn').disabled &&
|
|
window.__godsEyeView.styleManager.getControlState().recording,
|
|
),
|
|
);
|
|
// A focused panel owns Escape to collapse one level. Release panel focus
|
|
// before testing the global playback shortcut; the canvas is not tabbable.
|
|
await page.evaluate(() => document.activeElement?.blur());
|
|
check(
|
|
'global playback shortcut has document focus',
|
|
await page.evaluate(() => document.activeElement === document.body),
|
|
);
|
|
await page.keyboard.press('Escape');
|
|
await page.waitForFunction(
|
|
() =>
|
|
!window.__godsEyeView.sceneDirector.running &&
|
|
!document.body.classList.contains('scene-playback-mode'),
|
|
);
|
|
check(
|
|
'Escape ends playback and restores idle/recording controls',
|
|
await page.evaluate(
|
|
() =>
|
|
!document.getElementById('scene-start-btn').disabled &&
|
|
document.getElementById('scene-stop-btn').disabled &&
|
|
!document.getElementById('scene-download-btn').disabled &&
|
|
!window.__godsEyeView.styleManager.getControlState().recording,
|
|
),
|
|
);
|
|
// Escape can also collapse the Scene accordion. Reopen it through its
|
|
// installed disclosure before testing the next visible user action.
|
|
if (
|
|
await page.$eval('#scene-panel', (panel) =>
|
|
panel.classList.contains('collapsed'),
|
|
)
|
|
)
|
|
await page.click('[data-collapse-target="scene-panel"]');
|
|
await page.waitForSelector('#scene-download-btn', { visible: true });
|
|
await page.click('#scene-download-btn');
|
|
const metadata = await page.evaluate(async () =>
|
|
JSON.parse(await window.__sceneExports.at(-1)),
|
|
);
|
|
check(
|
|
'Run download contains the completed cancelled run',
|
|
Boolean(
|
|
metadata.endedAt &&
|
|
metadata.wasCancelled &&
|
|
Array.isArray(metadata.events),
|
|
),
|
|
);
|
|
await page.click('#scene-start-btn');
|
|
await page.waitForFunction(() => window.__godsEyeView.sceneDirector.running);
|
|
await page.$eval('#scene-stop-btn', (button) => button.click());
|
|
await page.waitForFunction(() => !window.__godsEyeView.sceneDirector.running);
|
|
check(
|
|
'The installed Stop control also completes playback cleanup',
|
|
await page.evaluate(
|
|
() =>
|
|
!document.body.classList.contains('scene-playback-mode') &&
|
|
!document.getElementById('scene-start-btn').disabled,
|
|
),
|
|
);
|
|
const badFile = path.join(shots, 'invalid.json');
|
|
fs.writeFileSync(badFile, '{invalid');
|
|
await input.uploadFile(badFile);
|
|
await page.waitForFunction(() =>
|
|
document
|
|
.querySelector('[data-director-dialog] [role=status]')
|
|
?.textContent.includes('invalid JSON'),
|
|
);
|
|
check(
|
|
'Invalid import reports failure and preserves the current project',
|
|
await page.evaluate(
|
|
() =>
|
|
window.__godsEyeView.sceneDirector._project.scenes.length === 1 &&
|
|
window.__godsEyeView.sceneDirector._getSelectedScene().title ===
|
|
'QA Scene',
|
|
),
|
|
);
|
|
const savedBefore = await page.evaluate(() =>
|
|
localStorage.getItem('godsEyeView.sceneProject.v2'),
|
|
);
|
|
const futureFile = path.join(shots, 'future.json');
|
|
fs.writeFileSync(futureFile, JSON.stringify({ version: 99, scenes: [] }));
|
|
await input.uploadFile(futureFile);
|
|
await page.waitForFunction(() =>
|
|
document
|
|
.querySelector('[data-director-dialog] [role=status]')
|
|
?.textContent.includes('$.version'),
|
|
);
|
|
check(
|
|
'Unsupported versions leave authored state and saved bytes unchanged',
|
|
await page.evaluate(
|
|
(saved) =>
|
|
localStorage.getItem('godsEyeView.sceneProject.v2') === saved &&
|
|
window.__godsEyeView.sceneDirector._getSelectedScene().title ===
|
|
'QA Scene',
|
|
savedBefore,
|
|
),
|
|
);
|
|
const malformed = structuredClone(fixture);
|
|
malformed.scenes[0].shots[0].camera.lat = 91;
|
|
const malformedFile = path.join(shots, 'malformed.json');
|
|
fs.writeFileSync(malformedFile, JSON.stringify(malformed));
|
|
await input.uploadFile(malformedFile);
|
|
await page.waitForFunction(() =>
|
|
document
|
|
.querySelector('[data-director-dialog] [role=status]')
|
|
?.textContent.includes('camera.lat'),
|
|
);
|
|
check(
|
|
'Invalid camera field identifies its path without replacing the project',
|
|
await page.evaluate(
|
|
(saved) => localStorage.getItem('godsEyeView.sceneProject.v2') === saved,
|
|
savedBefore,
|
|
),
|
|
);
|
|
await page.keyboard.press('Escape');
|
|
await page.screenshot({ path: path.join(shots, 'desktop.png') });
|
|
await page.setViewport({ width: 390, height: 844 });
|
|
// Phones present Scenes in the Layers tab's sheet.
|
|
await page.click('#mobile-tab-bar [data-mobile-sheet="layers"]');
|
|
await new Promise((resolve) => setTimeout(resolve, 400));
|
|
await page.screenshot({ path: path.join(shots, 'narrow.png') });
|
|
check(
|
|
'Scene controls stay inside the narrow viewport',
|
|
await page.$eval('#scene-select', (element) => {
|
|
const rect = element.getBoundingClientRect();
|
|
return rect.width > 0 && rect.left >= 0 && rect.right <= innerWidth;
|
|
}),
|
|
);
|
|
await page.setViewport({ width: 1440, height: 900 });
|
|
await page.click('.scene-shot-danger');
|
|
await page.waitForFunction(
|
|
() => !!document.querySelector('.scene-shot-empty'),
|
|
);
|
|
check(
|
|
'Delete shot leaves the empty-state presentation',
|
|
await page.evaluate(
|
|
() =>
|
|
window.__godsEyeView.sceneDirector._getSelectedScene().shots.length ===
|
|
0,
|
|
),
|
|
);
|
|
await page.click('#scene-delete-btn');
|
|
await page.waitForFunction(
|
|
() =>
|
|
!window.__godsEyeView.sceneDirector._project.scenes.some(
|
|
(item) => item.title === 'QA Scene',
|
|
),
|
|
);
|
|
check(
|
|
'Deleting the final scene restores the built-in recipes',
|
|
await page.evaluate(
|
|
() =>
|
|
window.__godsEyeView.sceneDirector._project.scenes.length > 0 &&
|
|
document.querySelectorAll('#scene-select option').length > 0,
|
|
),
|
|
);
|
|
check(
|
|
'Scene subscriptions include current state and the completed native editing actions',
|
|
await page.evaluate(() => {
|
|
const seen = window.__qaSceneState;
|
|
const types = new Set(seen.map(({ change }) => change?.type));
|
|
return (
|
|
seen[0].initial &&
|
|
Object.isFrozen(seen[0].state) &&
|
|
[
|
|
'scene-created',
|
|
'shot-captured',
|
|
'shot-renamed',
|
|
'shot-updated',
|
|
'project-exported',
|
|
'project-imported',
|
|
'shot-deleted',
|
|
'scene-deleted',
|
|
'run-event',
|
|
].every((type) => types.has(type)) &&
|
|
seen
|
|
.filter(({ change }) => change?.shot)
|
|
.every(({ change }) => Object.isFrozen(change.shot))
|
|
);
|
|
}),
|
|
);
|
|
const teardown = await page.evaluate(async () => {
|
|
const director = window.__godsEyeView.sceneDirector;
|
|
const controls = director._controls;
|
|
const previousStatus = document.getElementById('scene-status').textContent;
|
|
const project = director._project;
|
|
let finish;
|
|
const gate = new Promise((resolve) => {
|
|
finish = resolve;
|
|
});
|
|
const pending = controls.run('import', {
|
|
name: 'late.json',
|
|
text: async () => {
|
|
await gate;
|
|
return '{"scenes":[]}';
|
|
},
|
|
});
|
|
// A shot row held across disposal must not act once it is revoked.
|
|
const retainedLabel = document.querySelector('.scene-shot-label');
|
|
const stopping = director.destroy();
|
|
const notificationsAtStop = window.__qaSceneState.length;
|
|
const stoppedSynchronously = controls.destroyed;
|
|
retainedLabel?.click();
|
|
document.getElementById('scene-new-btn').click();
|
|
controls.run('capture');
|
|
finish();
|
|
await pending;
|
|
await stopping;
|
|
await director.destroy();
|
|
return {
|
|
stoppedSynchronously,
|
|
heldRowAction: Boolean(retainedLabel),
|
|
stateStopped: window.__qaSceneState.length === notificationsAtStop,
|
|
sameProject: director._project === project,
|
|
noLateStatus:
|
|
document.getElementById('scene-status').textContent === previousStatus,
|
|
rowsGone: !document.querySelector('.scene-shot-row'),
|
|
};
|
|
});
|
|
check(
|
|
'Disposal revokes fixed and row actions before waiting for scene work',
|
|
teardown.stoppedSynchronously &&
|
|
teardown.heldRowAction &&
|
|
teardown.rowsGone,
|
|
);
|
|
check(
|
|
'Late import completion cannot replace the disposed project or status',
|
|
teardown.sameProject && teardown.noLateStatus,
|
|
);
|
|
check(
|
|
'Scene subscriptions stop before late imports settle',
|
|
teardown.stateStopped,
|
|
);
|
|
check(
|
|
'Scene control interaction produces no uncaught browser errors',
|
|
errors.length === 0,
|
|
);
|
|
} finally {
|
|
await browser.close();
|
|
}
|
|
if (failures) process.exitCode = 1;
|