392 lines
19 KiB
JavaScript
392 lines
19 KiB
JavaScript
// Local editor smoke test. Uses the in-memory blank document and disables the
|
|
// project route, so it never creates an account, project, or server-side write.
|
|
import { spawn } from 'node:child_process';
|
|
import { mkdtempSync, rmSync } from 'node:fs';
|
|
import { tmpdir } from 'node:os';
|
|
import { join } from 'node:path';
|
|
import assert from 'node:assert/strict';
|
|
|
|
const url = process.env.ARTHUR_URL ?? 'http://localhost:8778/';
|
|
const profile = mkdtempSync(join(tmpdir(), 'arthur-sequence-'));
|
|
const port = 9335;
|
|
const chrome = spawn(process.env.CHROME ?? '/usr/bin/chromium', [
|
|
'--headless=new', '--no-sandbox', '--disable-gpu', '--no-first-run',
|
|
'--no-default-browser-check', '--mute-audio', '--window-size=1440,1000',
|
|
`--user-data-dir=${profile}`, `--remote-debugging-port=${port}`, url,
|
|
], { stdio: 'ignore' });
|
|
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
|
|
let ws;
|
|
try {
|
|
let target;
|
|
for (let i = 0; i < 100 && !target; i++) {
|
|
await sleep(100);
|
|
try {
|
|
target = (await fetch(`http://127.0.0.1:${port}/json/list`).then(r => r.json()))
|
|
.find(t => t.type === 'page' && t.url.startsWith(url));
|
|
} catch { /* browser starting */ }
|
|
}
|
|
assert(target, 'browser exposes the editor page');
|
|
ws = new WebSocket(target.webSocketDebuggerUrl);
|
|
await new Promise((resolve, reject) => { ws.onopen = resolve; ws.onerror = reject; });
|
|
let serial = 0;
|
|
const pending = new Map();
|
|
const errors = [];
|
|
ws.onmessage = ({ data }) => {
|
|
const msg = JSON.parse(data);
|
|
if (msg.method === 'Runtime.exceptionThrown') errors.push(msg.params.exceptionDetails);
|
|
if (msg.id && pending.has(msg.id)) {
|
|
const { resolve, reject } = pending.get(msg.id);
|
|
pending.delete(msg.id);
|
|
if (msg.error) reject(new Error(JSON.stringify(msg.error)));
|
|
else resolve(msg.result);
|
|
}
|
|
};
|
|
const send = (method, params = {}) => new Promise((resolve, reject) => {
|
|
const id = ++serial;
|
|
pending.set(id, { resolve, reject });
|
|
ws.send(JSON.stringify({ id, method, params }));
|
|
});
|
|
const evaluate = async expression => {
|
|
const r = await send('Runtime.evaluate', { expression, returnByValue: true, awaitPromise: true });
|
|
if (r.exceptionDetails) throw new Error(JSON.stringify(r.exceptionDetails));
|
|
return r.result.value;
|
|
};
|
|
await send('Runtime.enable');
|
|
for (let i = 0; i < 100; i++) {
|
|
if (await evaluate('typeof arthur !== "undefined" && !!arthur.events?.ui && !!document.querySelector("canvas.stage")')) break;
|
|
await sleep(100);
|
|
}
|
|
await evaluate(`(() => {
|
|
const k = cljs.core.keyword;
|
|
cljs.core.swap_BANG_(re_frame.db.app_db, db => cljs.core.assoc(db, k('route'), k('local-test')));
|
|
window.laneSnapshot = () => {
|
|
const db = cljs.core.deref(re_frame.db.app_db);
|
|
const entry = arthur.footage.store.entry(cljs.core.get(db, k('clip/current')));
|
|
return cljs.core.clj__GT_js(entry);
|
|
};
|
|
return true;
|
|
})()`);
|
|
await sleep(250);
|
|
// A command is named the same wherever it is drawn, and since the transport
|
|
// strip was consolidated it is drawn in one of two places: as a button in the
|
|
// strip, or as a row in one of the strip's menus. So the test asks for it by
|
|
// name and this finds it — opening each menu in turn to look — rather than the
|
|
// test knowing which menu anything ended up in. An icon button is matched on
|
|
// its `aria-label`, which is also what a screen reader is told it is.
|
|
// Two bars carry commands: the location bar says where an edit lands and holds
|
|
// what creates things there, the transport strip holds what acts on a cel.
|
|
const bars = ['.loc', '.pane.time .pane-head', '.section'];
|
|
const within = (suffix) => bars.map((b) => `${b} ${suffix}`).join(', ');
|
|
const named = label =>
|
|
`(b => b.textContent.trim() === ${JSON.stringify(label)}` +
|
|
` || b.getAttribute('aria-label') === ${JSON.stringify(label)})`;
|
|
const shut = async () => {
|
|
await evaluate(`(() => { document.querySelectorAll('.menu-scrim').forEach(s => s.click()); return true })()`);
|
|
await sleep(120);
|
|
};
|
|
// Leaves the control on screen and returns what to select it with.
|
|
const reveal = async label => {
|
|
await shut();
|
|
if (await evaluate(`![...document.querySelectorAll('${within('button')}')].find(${named(label)})`)) {
|
|
const menus = await evaluate(
|
|
`[...document.querySelectorAll('${within('.menu-wrap > button')}')].map(b => b.textContent.trim())`);
|
|
let found = false;
|
|
for (const menu of menus) {
|
|
await evaluate(`(() => { [...document.querySelectorAll('${within('.menu-wrap > button')}')]
|
|
.find(b => b.textContent.trim() === ${JSON.stringify(menu)}).click(); return true })()`);
|
|
await sleep(180);
|
|
if (await evaluate(`!![...document.querySelectorAll('.menu-item')].find(${named(label)})`)) { found = true; break; }
|
|
await shut();
|
|
}
|
|
assert(found, `a control named: ${label}`);
|
|
return '.menu-item';
|
|
}
|
|
return within('button');
|
|
};
|
|
const click = async label => {
|
|
const where = await reveal(label);
|
|
assert(await evaluate(`(() => {
|
|
const b = [...document.querySelectorAll('${where}')].find(${named(label)});
|
|
if (!b || b.disabled) return false;
|
|
b.click(); return true;
|
|
})()`), `enabled control: ${label}`);
|
|
await sleep(180);
|
|
await shut();
|
|
};
|
|
// UUIDs expose a mutable hash cache through clj->js; compare their identity,
|
|
// not that implementation detail, when asserting exact undo restoration.
|
|
const shot = async () => JSON.parse(JSON.stringify(await evaluate('laneSnapshot()'),
|
|
(_key, value) => value?.uuid ?? value));
|
|
const instances = s => Object.values(s.clip.symbols.main.nodes).filter(n => n.kind === 'instance')
|
|
.sort((a, b) => a.time.at - b.time.at);
|
|
await click('lane');
|
|
await click('new drawing');
|
|
await click('hold +');
|
|
await click('hold +');
|
|
await click('hold +');
|
|
await click('new drawing');
|
|
let s = await shot();
|
|
assert.deepEqual(instances(s).map(n => [n.time.at, n.span[1]]), [[0, 4], [4, 1]]);
|
|
assert.equal(await evaluate('document.querySelectorAll(".tl-cel").length'), 2);
|
|
assert.equal(await evaluate('document.querySelectorAll(".tl-label:not(.tl-corner)").length'), 1);
|
|
assert.equal(await evaluate(`cljs.core.get_in(cljs.core.deref(re_frame.db.app_db),
|
|
cljs.core.vector(cljs.core.keyword('playback'), cljs.core.keyword('frame')))`), 4,
|
|
'new drawing seeks to its cel');
|
|
|
|
// Shorten this test shot to the occupied extent, purely in memory.
|
|
await evaluate(`(() => {
|
|
const k = cljs.core.keyword, db = cljs.core.deref(re_frame.db.app_db);
|
|
arthur.footage.store.edit_clip_BANG_(cljs.core.get(db, k('clip/current')),
|
|
clip => cljs.core.assoc_in(clip, cljs.core.vector(k('symbols'), k('main'), k('frames')), 5));
|
|
document.querySelector('.tl-cel').click();
|
|
})()`);
|
|
await sleep(200);
|
|
const before = await shot();
|
|
await click('hold +');
|
|
s = await shot();
|
|
assert.deepEqual(s.clip, before.clip, 'refused overflow makes no document change');
|
|
assert.equal(s.history.done.length, before.history.done.length);
|
|
await click('extend shot and apply');
|
|
s = await shot();
|
|
assert.equal(s.clip.symbols.main.frames, 6);
|
|
assert.deepEqual(instances(s).map(n => [n.time.at, n.span[1]]), [[0, 5], [5, 1]]);
|
|
assert.equal(s.history.done.length, before.history.done.length + 1);
|
|
await evaluate(`document.dispatchEvent(new KeyboardEvent('keydown', {key:'z', ctrlKey:true, bubbles:true}))`);
|
|
await sleep(250);
|
|
assert.deepEqual((await shot()).clip, before.clip, 'one undo restores cel, ripple, and shot length');
|
|
|
|
// Sharing: one drawing exposed twice, then one cel decoupled. Room is
|
|
// made first so these assertions are about content and not about overflow.
|
|
await evaluate(`(() => {
|
|
const k = cljs.core.keyword, db = cljs.core.deref(re_frame.db.app_db);
|
|
arthur.footage.store.edit_clip_BANG_(cljs.core.get(db, k('clip/current')),
|
|
clip => cljs.core.assoc_in(clip, cljs.core.vector(k('symbols'), k('main'), k('frames')), 20));
|
|
document.querySelector('.tl-cel').click();
|
|
})()`);
|
|
await sleep(200);
|
|
const enabled = async label => {
|
|
const where = await reveal(label);
|
|
const yes = await evaluate(`(() => {
|
|
const b = [...document.querySelectorAll('${where}')].find(${named(label)});
|
|
return !!b && !b.disabled;
|
|
})()`);
|
|
await shut();
|
|
return yes;
|
|
};
|
|
assert.equal(await enabled('make unique'), false, 'nothing to decouple from yet');
|
|
await click('reuse');
|
|
s = await shot();
|
|
let cels = instances(s);
|
|
assert.equal(cels.length, 3);
|
|
assert.equal(cels[2].source.symbol, cels[0].source.symbol, 'reuse exposes the same drawing');
|
|
assert.equal(await evaluate('document.querySelectorAll(".tl-cel").length'), 3);
|
|
assert.equal(await evaluate('document.querySelectorAll(".tl-label:not(.tl-corner)").length'), 1,
|
|
'three cels, still one row');
|
|
assert.equal(await enabled('make unique'), true);
|
|
await click('make unique');
|
|
s = await shot();
|
|
cels = instances(s);
|
|
assert.notEqual(cels[2].source.symbol, cels[0].source.symbol, 'that cel has its own drawing');
|
|
assert.equal(await enabled('make unique'), false, 'and is not shared any more');
|
|
await click('duplicate');
|
|
s = await shot();
|
|
cels = instances(s);
|
|
assert.equal(cels.length, 4);
|
|
assert.equal(new Set(cels.map(n => n.source.symbol)).size, 4,
|
|
'four cels of four drawings: nothing is shared once every copy is made');
|
|
assert.equal(s.history.done.length, before.history.done.length + 3, 'three more commands, three more steps');
|
|
|
|
// A drawing into the middle of a hold: split, then insert. Both act at the
|
|
// playhead, and neither guesses what the other one is for.
|
|
const placed = s => instances(s)
|
|
.map(n => [n.time.at + n.span[0] / (n.time.rate ?? 1), n.time.at + n.span[1] / (n.time.rate ?? 1)])
|
|
.sort((a, b) => a[0] - b[0]);
|
|
assert.deepEqual(placed(s), [[0, 4], [4, 5], [5, 6], [6, 7]]);
|
|
await evaluate(`document.querySelector('.tl-cel').click()`);
|
|
await sleep(200);
|
|
assert.equal(await enabled('split'), false, 'the start of a cel is not inside it');
|
|
await click('+1');
|
|
await click('+1');
|
|
assert.equal(await enabled('split'), true);
|
|
await click('split');
|
|
s = await shot();
|
|
assert.deepEqual(placed(s), [[0, 2], [2, 4], [4, 5], [5, 6], [6, 7]],
|
|
'one cel became two, over the frames it had');
|
|
await click('insert');
|
|
s = await shot();
|
|
assert.deepEqual(placed(s), [[0, 2], [2, 3], [3, 5], [5, 6], [6, 7], [7, 8]],
|
|
'the new drawing took frame 2 and everything from there rippled later');
|
|
assert.equal(await evaluate('document.querySelectorAll(".tl-cel").length'), 6);
|
|
assert.equal(await evaluate('document.querySelectorAll(".tl-label:not(.tl-corner)").length'), 1,
|
|
'six cels, still one row');
|
|
assert.equal(s.history.done.length, before.history.done.length + 5);
|
|
|
|
// Trim, move and blank: three gestures that move nothing but their own
|
|
// cel, and a shot whose length does not follow what is in it.
|
|
await evaluate(`[...document.querySelectorAll('.tl-cel')][2].click()`);
|
|
await sleep(200);
|
|
assert.deepEqual(placed(await shot()).slice(2, 4), [[3, 5], [5, 6]]);
|
|
await click('+1');
|
|
assert.equal(await enabled('trim out'), true, 'the playhead is inside it');
|
|
await click('trim out');
|
|
s = await shot();
|
|
assert.deepEqual(placed(s), [[0, 2], [2, 3], [3, 4], [5, 6], [6, 7], [7, 8]],
|
|
'it ends at the playhead and every other cel stayed');
|
|
assert.equal(await enabled('move here'), true);
|
|
await click('move here');
|
|
s = await shot();
|
|
assert.deepEqual(placed(s), [[0, 2], [2, 3], [4, 5], [5, 6], [6, 7], [7, 8]],
|
|
'and moves to the playhead, into the gap it just made');
|
|
await click('blank');
|
|
s = await shot();
|
|
assert.deepEqual(placed(s), [[0, 2], [2, 3], [5, 6], [6, 7], [7, 8]],
|
|
'blanked: a gap where it was, and nothing closed it');
|
|
assert.equal(s.clip.symbols.main.frames, 20, 'the shot is as long as it was authored');
|
|
assert.equal(s.history.done.length, before.history.done.length + 8);
|
|
|
|
// The same cels with the axes turned. Selecting a sheet cell feeds the same
|
|
// action strip and therefore the same domain command and undo transaction.
|
|
await click('cel sheet');
|
|
assert.equal(await evaluate('document.querySelectorAll(".cs-head:not(.cs-frame)").length'), 1,
|
|
'one lane is one cel-sheet column');
|
|
assert.equal(await evaluate('document.querySelectorAll(".cs-cell").length'), 20,
|
|
'one cell per authored frame');
|
|
await evaluate(`document.querySelector('.cs-cell').click()`);
|
|
await sleep(180);
|
|
await click('hold +');
|
|
s = await shot();
|
|
assert.deepEqual(placed(s), [[0, 3], [3, 4], [6, 7], [7, 8], [8, 9]],
|
|
'a command selected in the sheet has the timeline command semantics');
|
|
assert.equal(s.history.done.length, before.history.done.length + 9);
|
|
|
|
// Correction authoring is reachable from the same selection. The range is
|
|
// in this cel's own frames and Apply is one isolated history transaction.
|
|
assert(await evaluate(`(() => {
|
|
const section = [...document.querySelectorAll('.section')]
|
|
.find(s => s.querySelector('h2')?.textContent.trim() === 'corrections');
|
|
const label = [...section.querySelectorAll('label')]
|
|
.find(l => l.textContent.trim().startsWith('offset (degrees)'));
|
|
const input = label?.querySelector('input');
|
|
if (!input) return false;
|
|
const set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
|
|
set.call(input, '15');
|
|
input.dispatchEvent(new Event('input', {bubbles: true}));
|
|
input.dispatchEvent(new Event('change', {bubbles: true}));
|
|
return true;
|
|
})()`), 'rotation correction value is editable');
|
|
await sleep(100);
|
|
await click('apply correction');
|
|
s = await shot();
|
|
const selectedCel = instances(s).find(n => n.time.at === 0);
|
|
const rot = Object.values(selectedCel.channels).find(c => c.over?.length);
|
|
assert.equal(rot.over.length, 1);
|
|
assert(Math.abs(rot.over[0].values.value - Math.PI / 12) < 1e-9,
|
|
'the inspector converts the authored degree offset to radians');
|
|
assert.equal(s.history.done.length, before.history.done.length + 10);
|
|
|
|
// A gap targets its column's lane. This catches the stale-selection bug that
|
|
// only appears once a sheet has more than one lane.
|
|
await click('timeline');
|
|
assert.equal(await evaluate('document.querySelectorAll(".tl-cel").length'), 5);
|
|
await click('lane');
|
|
await click('cel sheet');
|
|
assert.equal(await evaluate('document.querySelectorAll(".cs-head:not(.cs-frame)").length'), 2);
|
|
await evaluate(`([...document.querySelectorAll('.cs-cell')].slice(0, 2)
|
|
.find(c => c.textContent.trim() !== '—')).click()`);
|
|
await sleep(100);
|
|
await evaluate(`([...document.querySelectorAll('.cs-cell')].slice(0, 2)
|
|
.find(c => c.textContent.trim() === '—')).click()`);
|
|
await sleep(100);
|
|
await click('overwrite');
|
|
s = await shot();
|
|
assert(Object.values(s.clip.symbols.main.nodes)
|
|
.some(n => n.kind === 'instance' && n.parent !== 'girl' && n.time.at === 0),
|
|
'clicking a gap selects that column before overwrite');
|
|
assert.equal(s.history.done.length, before.history.done.length + 12,
|
|
'correction, lane creation, and overwrite are separate undo steps');
|
|
// Real pointer capture and keyboard events exercise the spreadsheet surface.
|
|
const cellAt = async (c, f) => evaluate(`(() => {
|
|
const el = document.querySelector('[data-cs-col="${c}"][data-cs-frame="${f}"]');
|
|
el.scrollIntoView({block: 'center'});
|
|
const r = el.getBoundingClientRect();
|
|
return {x: r.x + r.width / 2, y: r.y + r.height / 2};
|
|
})()`);
|
|
const mouse = (type, p) => send('Input.dispatchMouseEvent', {
|
|
type, ...p, button: 'left', buttons: type === 'mouseReleased' ? 0 : 1, clickCount: 1,
|
|
});
|
|
const key = async (key, extra = {}) => {
|
|
await send('Input.dispatchKeyEvent', {type: 'keyDown', key, ...extra});
|
|
await send('Input.dispatchKeyEvent', {type: 'keyUp', key, ...extra});
|
|
await sleep(120);
|
|
};
|
|
const start = await cellAt(0, 0);
|
|
await mouse('mousePressed', start);
|
|
await mouse('mouseMoved', await cellAt(1, 2));
|
|
await mouse('mouseReleased', await cellAt(1, 2));
|
|
await sleep(150);
|
|
assert.equal(await evaluate('document.querySelectorAll(".cs-cell.selected").length'), 6);
|
|
await key('c', {modifiers: 2});
|
|
const dest = await cellAt(0, 10);
|
|
await mouse('mousePressed', dest);
|
|
await mouse('mouseReleased', dest);
|
|
await sleep(120);
|
|
const beforePaste = await shot();
|
|
await key('v', {modifiers: 2});
|
|
const pasted = await shot();
|
|
assert.equal(pasted.history.done.length, beforePaste.history.done.length + 1,
|
|
'multi-lane paste is one undo step');
|
|
assert.deepEqual(Object.keys(pasted.clip.symbols), Object.keys(beforePaste.clip.symbols),
|
|
'copy reuses the drawings');
|
|
await key('z', {modifiers: 2});
|
|
assert.deepEqual((await shot()).clip, beforePaste.clip, 'undo restores the entire rectangle');
|
|
await key('ArrowDown', {modifiers: 8});
|
|
assert.equal(await evaluate('document.querySelectorAll(".cs-cell.selected").length'), 2);
|
|
const first = await cellAt(0, 0);
|
|
await mouse('mousePressed', first);
|
|
await mouse('mouseReleased', first);
|
|
await sleep(150);
|
|
const handle = await evaluate(`(() => {
|
|
const r = document.querySelector('.cs-fill-handle').getBoundingClientRect();
|
|
return {x: r.x + r.width / 2, y: r.y + r.height / 2};
|
|
})()`);
|
|
const beforeHold = await shot();
|
|
await mouse('mousePressed', handle);
|
|
await mouse('mouseMoved', await cellAt(0, 4));
|
|
await mouse('mouseReleased', await cellAt(0, 4));
|
|
await sleep(150);
|
|
const afterHold = await shot();
|
|
assert.equal(afterHold.history.done.length, beforeHold.history.done.length + 1,
|
|
'a hold drag commits once');
|
|
assert.equal(instances(afterHold).filter(n => {
|
|
const old = instances(beforeHold).find(o => o.id === n.id);
|
|
return old && n.span[1] !== old.span[1] && n.time.at + n.span[1] === 5;
|
|
}).length, 1, 'the dragged hold ends at the previewed boundary');
|
|
await key('z', {modifiers: 2});
|
|
assert.deepEqual((await shot()).clip, beforeHold.clip);
|
|
await key('Delete');
|
|
const cleared = await shot();
|
|
assert.equal(cleared.history.done.length, beforeHold.history.done.length + 1,
|
|
'Delete clears selected frames in one step, without the global node-delete handler');
|
|
assert.equal(cleared.clip.symbols.main.frames, beforeHold.clip.symbols.main.frames);
|
|
await key('z', {modifiers: 2});
|
|
assert.deepEqual((await shot()).clip, beforeHold.clip);
|
|
await key('x', {modifiers: 2});
|
|
assert.equal((await shot()).history.done.length, beforeHold.history.done.length + 1);
|
|
await key('z', {modifiers: 2});
|
|
assert.deepEqual((await shot()).clip, beforeHold.clip, 'cut is independently undoable');
|
|
assert.equal(errors.length, 0, JSON.stringify(errors));
|
|
console.log('PASS: lane commands and corrections agree from timeline and cel sheet; no server writes');
|
|
} finally {
|
|
if (ws?.readyState === WebSocket.OPEN) {
|
|
ws.send(JSON.stringify({ id: 999999, method: 'Browser.close' }));
|
|
await sleep(350);
|
|
}
|
|
ws?.close();
|
|
chrome.kill();
|
|
await new Promise(resolve => { if (chrome.exitCode !== null || chrome.signalCode !== null) resolve(); else chrome.once('exit', resolve); });
|
|
try {
|
|
rmSync(profile, { recursive: true, force: true, maxRetries: 5, retryDelay: 100 });
|
|
} catch (error) {
|
|
console.warn(`Temporary browser profile retained at ${profile}: ${error.code}`);
|
|
}
|
|
}
|