jason.woltje
fa9bedb09a
The requirements page drew project-request-select, project-north-star and project-prd with fixed ids, so the same project in both panes put each id in the document twice. mountContent takes the pane's idPrefix (pane-a-, pane-b-) and every id and id lookup on the page follows it; the full view passes none and keeps its ids. The dashboard was already prefixed and the Agents page draws no ids. A new browser test opens the same dashboard, Agents page and project pages in both panes and checks for duplicate ids and for labels, ARIA references and in-page links that leave their pane.
408 lines
36 KiB
JavaScript
408 lines
36 KiB
JavaScript
// U5 (#1873, sample 07): Side by side shows two panes, each holding one page of any organization.
|
|
import { test } from 'node:test';
|
|
import assert from 'node:assert/strict';
|
|
import { startServer } from '../src/serve.mjs';
|
|
import { createDevOwner } from '../src/dev-owner.mjs';
|
|
import { browser } from './browser.mjs';
|
|
import { close } from './fixture.mjs';
|
|
|
|
const waitFor = b => expression => b.evaluate(`(async()=>{for(let i=0;i<200;i++){if(${expression})return;await new Promise(r=>setTimeout(r,30))}throw Error(${JSON.stringify(expression)})})()`);
|
|
|
|
// Three organizations: two running buses and one stopped (home). `state.flip` changes what the
|
|
// running organizations report, so a refresh repaints both panes.
|
|
function orgs(state = { flip: false, seen: [] }) {
|
|
const ORGS = [
|
|
{ id: 'ddigital', label: 'Distinctly Digital', theme: 'rosewood', busHealthy: true },
|
|
{ id: 'forge', label: 'Forge', theme: 'cobalt', busHealthy: true },
|
|
{ id: 'home', label: 'Home', theme: 'grove', busHealthy: false },
|
|
];
|
|
const PROJECTS = { ddigital: [{ id: 'spring-launch', name: 'Spring launch' }, { id: 'brand-refresh', name: 'Brand refresh' }], forge: [{ id: 'api-gateway', name: 'API gateway' }], home: [] };
|
|
const INSTANCES = { ddigital: ['chief', 'copywriter', 'producer', 'editor', 'researcher', 'designer', 'analyst', 'scheduler'], forge: ['chief', 'builder', 'tester', 'reviewer', 'operator', 'scribe'] };
|
|
const THREADS = { ddigital: [{ id: 't0', name: 'Kickoff notes', project: 'spring-launch', instance: 'chief' }, { id: 't1', name: 'Launch email', project: 'spring-launch', instance: 'copywriter' }], forge: [{ id: 'f0', name: 'Gateway auth', project: 'api-gateway', instance: 'chief' }] };
|
|
const instances = id => ({ business: id, revision: 'a'.repeat(64), launch: true, noHire: [], retired: [], definitions: {},
|
|
instances: Object.fromEntries(INSTANCES[id].map((n, i) => [n, { definition: n, vars: {}, launched: true, launcher: false, protected: false, kept: false, running: [`r${i}`], alive: [] }])) });
|
|
const agents = id => INSTANCES[id].map((role, i) => ({ role, holder_run: `r${i}`, state: (i % 2 === 0) === state.flip ? 'working' : 'waiting' }));
|
|
const business = id => ({ business: { id, human: 'jason', arbiters: ['chief'], projects: PROJECTS[id].map(p => p.id), vars: {}, instances: INSTANCES[id].map(n => ({ instance: n, vars: {} })), appearance: { theme: ORGS.find(o => o.id === id).theme } } });
|
|
return {
|
|
list: async () => ORGS,
|
|
resolve: async id => {
|
|
state.seen.push(id);
|
|
const org = ORGS.find(o => o.id === id); if (!org) return null;
|
|
if (!org.busHealthy) return { busHealthy: false, reads: null, bus: {}, chat: { projects: async () => [], threads: async () => [] } };
|
|
return {
|
|
busHealthy: true,
|
|
reads: { business: async () => business(id), settings: async () => ({ release: '0.0.42', launch: { limits: { total: 4 } } }), queue: async () => ({ rows: [] }), busStatus: async () => ({}) },
|
|
bus: { instances: async () => instances(id), messages: async () => ({ messages: [], unread: 0 }), agents: async () => agents(id), 'thread.claims': async () => [], inbox: async () => [], tasks: async () => [] },
|
|
chat: { projects: async () => PROJECTS[id], threads: async () => THREADS[id] },
|
|
projectFiles: async () => ({ head: 'a'.repeat(40), files: [] }),
|
|
};
|
|
},
|
|
};
|
|
}
|
|
|
|
async function open(t, { width = 1440, height = 900, hash = '#/orgs/ddigital/side-by-side', state } = {}) {
|
|
const server = await startServer({ port: 0, sso: createDevOwner(), organizations: orgs(state), log: () => {} }); t.after(() => close(server));
|
|
const b = await browser({ machine: false }); t.after(() => b.close());
|
|
await b.viewport(width, height);
|
|
const base = `http://127.0.0.1:${server.address().port}/`;
|
|
await b.navigate(base + hash);
|
|
return { b, base, wait: waitFor(b) };
|
|
}
|
|
const text = key => `(document.querySelector("#pane-${key} [data-pane-body]")?.innerText || "")`;
|
|
const title = key => `(document.querySelector("#pane-${key} [data-pane-ttl]")?.textContent || "")`;
|
|
const query = '(() => Object.fromEntries(new URLSearchParams(location.hash.split("?")[1] || "")))()';
|
|
const pick = (b, key, value) => b.evaluate(`(() => { const s = document.querySelector("#pane-${key}-pick"); s.value = ${JSON.stringify(value)}; if (s.value !== ${JSON.stringify(value)}) throw Error("no option " + ${JSON.stringify(value)}); s.dispatchEvent(new Event("change", { bubbles: true })); })()`);
|
|
|
|
test('the Side by side nav item opens two panes with different organizations, and the URL restores both after a reload', async t => {
|
|
const state = { flip: false, seen: [] };
|
|
const { b, base, wait } = await open(t, { hash: '#/orgs/ddigital/organization', state });
|
|
await wait('document.querySelector("[data-org-dashboard]")');
|
|
await b.evaluate('[...document.querySelectorAll("#sections > li > a")].find(a => a.textContent.trim() === "Side by side").click()');
|
|
await wait(`document.querySelectorAll(".panes > .pane:not([hidden])").length === 2 && ${title('a')}.includes("Distinctly Digital") && ${title('b')}.includes("Forge")`);
|
|
assert.doesNotMatch(await b.evaluate('document.getElementById("bus-view").innerText'), /Side by side is not built yet/i);
|
|
assert.equal(await b.evaluate('document.querySelector("#bus-view h1").textContent'), 'Side by side');
|
|
assert.equal(await b.evaluate('document.title'), 'Side by side · Mosaic Console');
|
|
assert.deepEqual(await b.evaluate(query), { a: 'ddigital/organization', b: 'forge/organization', w: '50', show: 'a' });
|
|
await wait(`${text('a')}.includes("Distinctly Digital") && ${text('b')}.includes("Forge")`);
|
|
// Each pane's links name its own organization.
|
|
assert.equal(await b.evaluate('[...document.querySelectorAll("#pane-b [data-pane-body] a[href^=\\"#/\\"]")].every(a => a.getAttribute("href").startsWith("#/orgs/forge/"))'), true);
|
|
assert.equal(await b.evaluate('document.querySelectorAll("#pane-a [data-pane-body] h1[aria-level=\\"2\\"]").length > 0'), true);
|
|
// The picker lists every organization and its projects.
|
|
const groups = await b.evaluate('[...document.querySelectorAll("#pane-b-pick optgroup")].map(g => g.label)');
|
|
assert.deepEqual(groups, ['Distinctly Digital', 'Forge', 'Home · bus unavailable']);
|
|
assert.deepEqual(await b.evaluate('[...document.querySelectorAll("#pane-b-pick option")].map(o => o.value).filter(Boolean)'),
|
|
['ddigital/organization', 'ddigital/agents', 'ddigital/projects/spring-launch', 'ddigital/projects/brand-refresh', 'forge/organization', 'forge/agents', 'forge/projects/api-gateway', 'home/organization', 'home/agents']);
|
|
// Pick a project in the right pane; the left keeps its page.
|
|
await pick(b, 'b', 'forge/projects/api-gateway');
|
|
await wait(`${title('b')}.startsWith("API gateway") && ${text('b')}.includes("API gateway") && location.hash.includes("b=forge/projects/api-gateway")`);
|
|
assert.match(await b.evaluate(title('a')), /^Dashboard/);
|
|
// A project tab opens in the pane, not the full view.
|
|
await b.evaluate('[...document.querySelectorAll("#pane-b nav.project-tabs a")].find(a => /Tasks/.test(a.textContent)).click()');
|
|
await wait(`location.hash.includes("b=forge/projects/api-gateway/tasks") && ${title('b')}.includes("Tasks")`);
|
|
assert.match(await b.evaluate('location.hash'), /^#\/orgs\/ddigital\/side-by-side\?/);
|
|
// Reload: both panes come back from the URL.
|
|
await b.call('Page.reload');
|
|
await wait('document.readyState === "complete"');
|
|
await wait(`${title('a')}.startsWith("Dashboard") && ${title('a')}.includes("Distinctly Digital") && ${title('b')}.includes("API gateway") && ${title('b')}.includes("Tasks")`);
|
|
assert.deepEqual(await b.evaluate(query), { a: 'ddigital/organization', b: 'forge/projects/api-gateway/tasks', w: '50', show: 'a' });
|
|
// A shared link opens exactly what it names, whatever this browser remembered.
|
|
await b.navigate(`${base}#/orgs/forge/side-by-side?a=forge/agents&b=ddigital/projects/spring-launch&w=40&show=b`);
|
|
await wait(`${title('a')}.startsWith("Agents") && ${title('a')}.includes("Forge") && ${title('b')}.startsWith("Spring launch")`);
|
|
assert.equal(await b.evaluate('document.querySelector("[data-sbs-divider]").getAttribute("aria-valuenow")'), '40');
|
|
// A link with a route a pane does not draw falls back to the remembered layout or the default.
|
|
await b.navigate(`${base}#/orgs/ddigital/side-by-side?a=ddigital/settings&b=nope!/organization`);
|
|
await wait(`document.querySelectorAll(".panes > .pane:not([hidden])").length === 2 && ${title('a')}.length > 0 && !location.hash.includes("settings")`);
|
|
// Leaving the page stops both panes reading.
|
|
await b.evaluate('location.hash = "#/orgs/ddigital/agents"');
|
|
await wait('!document.querySelector("[data-side-by-side]") && [...document.querySelectorAll("#bus-view h1")].some(h => h.textContent.trim() === "Agents")');
|
|
assert.ok(state.seen.includes('forge') && state.seen.includes('ddigital'));
|
|
});
|
|
|
|
test('the divider resizes the panes by mouse and by keyboard', async t => {
|
|
const { b, wait } = await open(t);
|
|
await wait(`${title('a')}.length > 0 && ${title('b')}.length > 0`);
|
|
const sep = '[role=separator][data-sbs-divider]';
|
|
assert.deepEqual(await b.evaluate(`(() => { const d = document.querySelector("${sep}"); return [d.getAttribute("aria-valuenow"), d.getAttribute("aria-valuemin"), d.getAttribute("aria-valuemax"), d.getAttribute("aria-orientation"), d.tabIndex]; })()`), ['50', '25', '75', 'vertical', 0]);
|
|
const ratio = `(() => { const a = document.getElementById("pane-a").getBoundingClientRect().width, b = document.getElementById("pane-b").getBoundingClientRect().width; return Math.round(a / (a + b) * 100); })()`;
|
|
// Mouse: drag the divider to 30% of the panes' width.
|
|
const box = await b.evaluate(`(() => { const p = document.querySelector("[data-sbs-panes]").getBoundingClientRect(), d = document.querySelector("${sep}").getBoundingClientRect(); return { left: p.left, width: p.width, x: d.left + d.width / 2, y: d.top + 200 }; })()`);
|
|
const target = box.left + box.width * 0.3;
|
|
await b.call('Input.dispatchMouseEvent', { type: 'mouseMoved', x: box.x, y: box.y });
|
|
await b.call('Input.dispatchMouseEvent', { type: 'mousePressed', x: box.x, y: box.y, button: 'left', buttons: 1, clickCount: 1 });
|
|
for (const step of [0.25, 0.5, 0.75, 1]) await b.call('Input.dispatchMouseEvent', { type: 'mouseMoved', x: box.x + (target - box.x) * step, y: box.y, button: 'left', buttons: 1 });
|
|
await b.call('Input.dispatchMouseEvent', { type: 'mouseReleased', x: target, y: box.y, button: 'left', buttons: 0, clickCount: 1 });
|
|
await wait(`document.querySelector("${sep}").getAttribute("aria-valuenow") === "30" && location.hash.includes("w=30")`);
|
|
assert.ok(Math.abs(await b.evaluate(ratio) - 30) <= 1);
|
|
// Keyboard: the separator has focus after the drag; arrows step by 5, Home and End reach the limits.
|
|
assert.equal(await b.evaluate('document.activeElement.getAttribute("role")'), 'separator');
|
|
await b.call('Input.dispatchKeyEvent', { type: 'keyDown', key: 'ArrowRight', code: 'ArrowRight', windowsVirtualKeyCode: 39 });
|
|
await b.call('Input.dispatchKeyEvent', { type: 'keyUp', key: 'ArrowRight', code: 'ArrowRight', windowsVirtualKeyCode: 39 });
|
|
await wait(`document.querySelector("${sep}").getAttribute("aria-valuenow") === "35"`);
|
|
await b.call('Input.dispatchKeyEvent', { type: 'keyDown', key: 'ArrowLeft', code: 'ArrowLeft', windowsVirtualKeyCode: 37 });
|
|
await b.call('Input.dispatchKeyEvent', { type: 'keyUp', key: 'ArrowLeft', code: 'ArrowLeft', windowsVirtualKeyCode: 37 });
|
|
await b.call('Input.dispatchKeyEvent', { type: 'keyDown', key: 'ArrowLeft', code: 'ArrowLeft', windowsVirtualKeyCode: 37 });
|
|
await b.call('Input.dispatchKeyEvent', { type: 'keyUp', key: 'ArrowLeft', code: 'ArrowLeft', windowsVirtualKeyCode: 37 });
|
|
await wait(`document.querySelector("${sep}").getAttribute("aria-valuenow") === "25"`);
|
|
await b.call('Input.dispatchKeyEvent', { type: 'keyDown', key: 'ArrowLeft', code: 'ArrowLeft', windowsVirtualKeyCode: 37 });
|
|
await b.call('Input.dispatchKeyEvent', { type: 'keyUp', key: 'ArrowLeft', code: 'ArrowLeft', windowsVirtualKeyCode: 37 });
|
|
assert.equal(await b.evaluate(`document.querySelector("${sep}").getAttribute("aria-valuenow")`), '25');
|
|
await b.call('Input.dispatchKeyEvent', { type: 'keyDown', key: 'End', code: 'End', windowsVirtualKeyCode: 35 });
|
|
await b.call('Input.dispatchKeyEvent', { type: 'keyUp', key: 'End', code: 'End', windowsVirtualKeyCode: 35 });
|
|
await wait(`document.querySelector("${sep}").getAttribute("aria-valuenow") === "75" && location.hash.includes("w=75")`);
|
|
assert.ok(Math.abs(await b.evaluate(ratio) - 75) <= 1);
|
|
// Closing a pane goes back to one; the divider leaves with it. Add pane brings a second back.
|
|
await b.evaluate('document.querySelector("#pane-a [data-pane-close]").click()');
|
|
await wait(`document.getElementById("pane-b").hidden && document.querySelector("${sep}").hidden && !new URLSearchParams(location.hash.split("?")[1]).has("b") && ${title('a')}.includes("Forge")`);
|
|
assert.equal(await b.evaluate('document.activeElement.id'), 'pane-a-pick');
|
|
assert.equal(await b.evaluate('document.querySelector("#pane-a [data-pane-close]").hidden'), true);
|
|
assert.match(await b.evaluate('document.querySelector("[data-sbs-note]").textContent'), /^1 pane ·/);
|
|
await b.evaluate('document.querySelector("[data-pane-add]").click()');
|
|
await wait(`!document.getElementById("pane-b").hidden && ${title('b')}.length > 0 && new URLSearchParams(location.hash.split("?")[1]).has("b")`);
|
|
assert.equal(await b.evaluate('document.querySelector("[data-pane-add]").disabled'), true);
|
|
});
|
|
|
|
test('each pane keeps its own focus and scroll through a refresh', async t => {
|
|
const state = { flip: false, seen: [] };
|
|
const { b, wait } = await open(t, { height: 520, state, hash: '#/orgs/ddigital/side-by-side?a=ddigital/agents&b=forge/agents' });
|
|
await wait(`${text('a')}.includes("copywriter") && ${text('b')}.includes("builder")`);
|
|
const scrollable = await b.evaluate('[...document.querySelectorAll("[data-pane-body]")].map(el => el.scrollHeight - el.clientHeight)');
|
|
assert.ok(scrollable.every(n => n > 60), `both panes scroll: ${scrollable}`);
|
|
const focused = await b.evaluate('(() => { const a = document.querySelector("#pane-a [data-pane-body] a[href]"); a.focus(); return a.getAttribute("href"); })()');
|
|
await b.evaluate('document.querySelector("#pane-a [data-pane-body]").scrollTop = 40; document.querySelector("#pane-b [data-pane-body]").scrollTop = 60;');
|
|
const before = await b.evaluate(`[${text('a')}, ${text('b')}]`);
|
|
state.flip = true;
|
|
await b.evaluate('document.getElementById("refresh").click()');
|
|
await wait(`${text('a')} !== ${JSON.stringify(before[0])} && ${text('b')} !== ${JSON.stringify(before[1])}`);
|
|
assert.equal(await b.evaluate('document.querySelector("#pane-a").contains(document.activeElement) && document.activeElement.getAttribute("href")'), focused);
|
|
assert.deepEqual(await b.evaluate('[...document.querySelectorAll("[data-pane-body]")].map(el => el.scrollTop)'), [40, 60]);
|
|
// Focus in the right pane stays there while the left repaints.
|
|
const right = await b.evaluate('(() => { const a = document.querySelector("#pane-b [data-pane-body] a[href]"); a.focus({ preventScroll: true }); return a.getAttribute("href"); })()');
|
|
state.flip = false;
|
|
await b.evaluate('document.getElementById("refresh").click()');
|
|
await wait(`${text('a')} === ${JSON.stringify(before[0])}`);
|
|
assert.equal(await b.evaluate('document.querySelector("#pane-b").contains(document.activeElement) && document.activeElement.getAttribute("href")'), right);
|
|
assert.deepEqual(await b.evaluate('[...document.querySelectorAll("[data-pane-body]")].map(el => el.scrollTop)'), [40, 60]);
|
|
});
|
|
|
|
test('a pane whose organization is down shows its state and the other pane still works', async t => {
|
|
const { b, wait } = await open(t, { hash: '#/orgs/ddigital/side-by-side?a=home/organization&b=forge/organization' });
|
|
await wait(`${title('a')}.includes("Home") && ${title('b')}.includes("Forge") && ${text('b')}.includes("Forge")`);
|
|
await wait('/Home: bus unavailable/.test(document.querySelector("#pane-a [data-pane-line]").textContent)');
|
|
assert.equal(await b.evaluate('document.querySelector("#pane-a [data-pane-line]").getAttribute("role")'), 'status');
|
|
assert.equal(await b.evaluate('document.querySelector("#pane-a [data-pane-state]").innerText.trim().length > 0'), true);
|
|
assert.equal(await b.evaluate('document.querySelector("#pane-b [data-pane-line]").hidden'), true);
|
|
await pick(b, 'b', 'forge/agents');
|
|
await wait(`${title('b')}.startsWith("Agents") && ${text('b')}.includes("builder")`);
|
|
await pick(b, 'b', 'forge/projects/api-gateway');
|
|
await wait(`${title('b')}.startsWith("API gateway") && ${text('b')}.includes("API gateway")`);
|
|
assert.match(await b.evaluate(title('a')), /Home/);
|
|
// An organization that is not on the list is one honest line; nothing is read for it.
|
|
await b.evaluate('location.hash = "#/orgs/ddigital/side-by-side?a=ghost/organization&b=forge/agents"');
|
|
await wait(`/ghost is not on your organization list/.test(document.querySelector("#pane-a [data-pane-line]").textContent) && ${text('b')}.includes("builder")`);
|
|
});
|
|
|
|
test('on a phone one pane shows at a time, switched from the bar, with no horizontal scroll', async t => {
|
|
const { b, wait } = await open(t, { width: 390, height: 844 });
|
|
await wait(`${title('a')}.length > 0 && ${title('b')}.length > 0 && ${text('a')}.length > 0`);
|
|
const visible = '[...document.querySelectorAll(".panes > .pane")].filter(p => p.getBoundingClientRect().height > 0).map(p => p.id)';
|
|
assert.deepEqual(await b.evaluate(visible), ['pane-a']);
|
|
assert.notEqual(await b.evaluate('getComputedStyle(document.querySelector("[data-sbs-tabs]")).display'), 'none');
|
|
assert.equal(await b.evaluate('getComputedStyle(document.querySelector("[data-sbs-divider]")).display'), 'none');
|
|
assert.equal(await b.evaluate('getComputedStyle(document.querySelector("[data-pane-add]")).display'), 'none');
|
|
assert.deepEqual(await b.evaluate('[...document.querySelectorAll("[data-sbs-tabs] button")].map(x => x.getAttribute("aria-pressed"))'), ['true', 'false']);
|
|
assert.ok(await b.evaluate('document.documentElement.scrollWidth <= innerWidth'), 'no horizontal scroll');
|
|
await b.evaluate('document.querySelector("[data-sbs-tabs] [data-pane-show=b]").click()');
|
|
await wait(`JSON.stringify(${visible}) === '["pane-b"]' && location.hash.includes("show=b")`);
|
|
assert.deepEqual(await b.evaluate('[...document.querySelectorAll("[data-sbs-tabs] button")].map(x => x.getAttribute("aria-pressed"))'), ['false', 'true']);
|
|
assert.ok(await b.evaluate('document.documentElement.scrollWidth <= innerWidth'), 'no horizontal scroll on the second pane');
|
|
await pick(b, 'b', 'ddigital/projects/spring-launch');
|
|
await wait(`${text('b')}.includes("Spring launch")`);
|
|
assert.ok(await b.evaluate('document.documentElement.scrollWidth <= innerWidth'), 'no horizontal scroll on a project page');
|
|
});
|
|
|
|
// Review fixes (#1873 U5 review, findings 1-4). `hold(url)` makes the page's next read of that URL
|
|
// wait until `release()`; the test then changes the pane while the read is pending.
|
|
const hold = url => `(() => { const real = window.fetch; window.held = { url: ${JSON.stringify(url)}, pending: false };
|
|
window.fetch = async (u, o) => { if (window.held?.url === u && !window.held.done) { window.held.pending = true; await new Promise(r => { window.held.release = () => { window.held.done = true; r(); }; }); } return real(u, o); }; })()`;
|
|
const settled = b => b.evaluate('new Promise(r => setTimeout(r, 400))');
|
|
|
|
test('a pane closed and opened again rewrites new links for its current organization only', async t => {
|
|
const { b, wait } = await open(t);
|
|
await wait(`${title('b')}.includes("Forge") && document.querySelector("#pane-b-pick")?.options.length > 4`);
|
|
await b.evaluate('document.querySelector("#pane-b [data-pane-close]").click()');
|
|
await wait('document.querySelector("#pane-b").hidden && !document.querySelector("[data-pane-add]").disabled');
|
|
await b.evaluate('document.querySelector("[data-pane-add]").click()');
|
|
await wait(`!document.querySelector("#pane-b").hidden && ${title('b')}.length > 0`);
|
|
await pick(b, 'b', 'ddigital/organization');
|
|
await wait(`${title('b')}.includes("Distinctly Digital") && location.hash.includes("b=ddigital/organization")`);
|
|
// Content a page appends after its own reads (projects.js does this) gets the pane's organization.
|
|
await b.evaluate(`document.querySelector("#pane-b [data-pane-body]").insertAdjacentHTML("beforeend", '<a data-late href="#/docs/example">late</a><a data-late-api href="/api/files/x">file</a>')`);
|
|
await wait('document.querySelector("#pane-b [data-late]").getAttribute("href").startsWith("#/orgs/")');
|
|
assert.equal(await b.evaluate('document.querySelector("#pane-b [data-late]").getAttribute("href")'), '#/orgs/ddigital/docs/example');
|
|
assert.equal(await b.evaluate('document.querySelector("#pane-b [data-late-api]").getAttribute("href")'), '/api/orgs/ddigital/files/x');
|
|
// Leaving the page stops every pane observer: later content in the old element is left alone.
|
|
await b.evaluate('location.hash = "#/orgs/ddigital/agents"');
|
|
await wait('!document.querySelector("[data-side-by-side]")');
|
|
});
|
|
|
|
test('a slow project read never paints over the page or organization chosen since', async t => {
|
|
const { b, wait } = await open(t);
|
|
await wait(`${title('b')}.includes("Forge") && document.querySelector("#pane-b-pick")?.options.length > 4`);
|
|
// Page change while the project's thread read is pending.
|
|
await b.evaluate(hold('/api/orgs/forge/chat/threads'));
|
|
await pick(b, 'b', 'forge/projects/api-gateway');
|
|
await wait('window.held.pending');
|
|
await pick(b, 'b', 'forge/agents');
|
|
await wait(`${title('b')}.startsWith("Agents") && ${text('b')}.includes("builder")`);
|
|
await b.evaluate('window.held.release()');
|
|
await settled(b);
|
|
assert.equal(await b.evaluate(`${text('b')}.includes("API gateway")`), false, 'the old project did not replace Agents');
|
|
assert.match(await b.evaluate(title('b')), /^Agents/);
|
|
// Organization change while the read is pending: the old organization's project is not painted.
|
|
await b.evaluate(hold('/api/orgs/forge/chat/threads'));
|
|
await pick(b, 'b', 'forge/projects/api-gateway');
|
|
await wait('window.held.pending');
|
|
await pick(b, 'b', 'ddigital/projects/spring-launch');
|
|
await wait(`${title('b')}.startsWith("Spring launch") && ${text('b')}.includes("Spring launch")`);
|
|
await b.evaluate('window.held.release()');
|
|
await settled(b);
|
|
assert.equal(await b.evaluate(`${text('b')}.includes("API gateway")`), false, 'the old organization did not replace Spring launch');
|
|
assert.equal(await b.evaluate('[...document.querySelectorAll("#pane-b [data-pane-body] a[href^=\\"#/orgs/\\"]")].every(a => a.getAttribute("href").startsWith("#/orgs/ddigital/"))'), true);
|
|
});
|
|
|
|
test('the same project in both panes keeps a request choice per pane', async t => {
|
|
const { b, wait } = await open(t);
|
|
await wait(`${title('b')}.includes("Forge")`);
|
|
const { stub, P } = await import('./helpers/projects-review-fixture.mjs');
|
|
// The fixture answers the project reads of both organizations; the organization list stays real.
|
|
await b.evaluate(stub.replace('const path=String(url),method', `if(url==='/api/orgs'||url==='/api/themes')return real(url,init);const path=String(url).replace(/^\\/api\\/orgs\\/(?:ddigital|forge)\\//,'/api/'),method`));
|
|
await b.evaluate('window.MosaicPanes.refresh()');
|
|
await wait(`document.querySelector('#pane-a-pick option[value="ddigital/projects/${P}"]')`);
|
|
await b.evaluate(`location.hash = '#/orgs/ddigital/side-by-side?a=ddigital/projects/${P}/requirements&b=forge/projects/${P}/requirements'`);
|
|
const values = `[...document.querySelectorAll('[data-pane-body] select[id$="-project-request-select"]')].map(e => e.value)`;
|
|
await wait(`document.querySelectorAll('[data-pane-body] select[id$="-project-request-select"]').length === 2`);
|
|
assert.deepEqual(await b.evaluate(values), ['request-1', 'request-1']);
|
|
await b.evaluate(`(() => { const e = document.querySelector('#pane-a-project-request-select'); e.value = 'request-2'; e.dispatchEvent(new Event('change', { bubbles: true })); })()`);
|
|
await wait(`${values}[0] === 'request-2'`);
|
|
// The redrawn select gets focus back through the pane's own id.
|
|
assert.equal(await b.evaluate('document.activeElement.id'), 'pane-a-project-request-select');
|
|
await b.evaluate('window.MosaicPanes.refresh()');
|
|
await settled(b);
|
|
await wait(`document.querySelectorAll('[data-pane-body] select[id$="-project-request-select"]').length === 2`);
|
|
assert.deepEqual(await b.evaluate(values), ['request-2', 'request-1']);
|
|
});
|
|
|
|
test('a pane keeps its request choice and PRD disclosure when a new conversation repaints the project', async t => {
|
|
const { b, wait } = await open(t);
|
|
await wait(`${title('b')}.includes("Forge")`);
|
|
const { stub, P } = await import('./helpers/projects-review-fixture.mjs');
|
|
await b.evaluate(stub.replace('const path=String(url),method', `if(url==='/api/orgs'||url==='/api/themes')return real(url,init);const path=String(url).replace(/^\\/api\\/orgs\\/(?:ddigital|forge)\\//,'/api/'),method`));
|
|
await b.evaluate('window.MosaicPanes.refresh()');
|
|
await wait(`document.querySelector('#pane-a-pick option[value="ddigital/projects/${P}"]')`);
|
|
// The same organization and project in both panes.
|
|
await b.evaluate(`location.hash = '#/orgs/ddigital/side-by-side?a=ddigital/projects/${P}/requirements&b=ddigital/projects/${P}/requirements'`);
|
|
await wait(`document.querySelectorAll('[data-pane-body] select[id$="-project-request-select"]').length === 2 && document.querySelectorAll('[data-pane-body] .project-prd-toggle').length === 2`);
|
|
const state = `({ selected: [...document.querySelectorAll('[data-pane-body] select[id$="-project-request-select"]')].map(e => e.value), expanded: [...document.querySelectorAll('[data-pane-body] [data-prd]')].map(e => e.classList.contains('expanded')) })`;
|
|
await b.evaluate(`(() => { const e = document.querySelector('#pane-a-project-request-select'); e.value = 'request-2'; e.dispatchEvent(new Event('change', { bubbles: true })); })()`);
|
|
await wait(`document.querySelector('#pane-a-project-request-select').value === 'request-2'`);
|
|
await b.evaluate(`document.querySelector('#pane-a .project-prd-toggle').click()`);
|
|
await wait(`document.querySelector('#pane-a [data-prd]')?.classList.contains('expanded')`);
|
|
// A new conversation changes the header's count, so each pane replaces its project content.
|
|
const before = await b.evaluate(`document.querySelector('#pane-a .project-header p')?.textContent || ''`);
|
|
await b.evaluate(`window.fixtureThreads.push({ ...window.fixtureThreads[0], id: '20000000-0000-4000-8000-000000000004', name: 'A new conversation' }); window.MosaicPanes.refresh()`);
|
|
await wait(`(() => { const t = document.querySelector('#pane-a .project-header p')?.textContent || ''; return t !== ${JSON.stringify(before)} && /4 conversations/.test(t) && /4 conversations/.test(document.querySelector('#pane-b .project-header p')?.textContent || ''); })()`);
|
|
await settled(b);
|
|
await wait(`document.querySelectorAll('[data-pane-body] select[id$="-project-request-select"]').length === 2 && document.querySelectorAll('[data-pane-body] [data-prd]').length === 2`);
|
|
assert.deepEqual(await b.evaluate(state), { selected: ['request-2', 'request-1'], expanded: [true, false] });
|
|
});
|
|
|
|
test('a pane navigation that finishes late does not take focus from the other pane', async t => {
|
|
const { b, wait } = await open(t);
|
|
await wait(`document.querySelector('#pane-a [data-focus-key="agents-all"]') && document.querySelector('#pane-b-pick')?.options.length > 4`);
|
|
await b.evaluate(hold('/api/orgs/ddigital/bus/instances'));
|
|
await b.evaluate(`document.querySelector('#pane-a [data-focus-key="agents-all"]').click()`);
|
|
await wait('window.held.pending');
|
|
await b.evaluate(`document.querySelector('#pane-b-pick').focus(); window.held.release()`);
|
|
await wait(`${title('a')}.startsWith('Agents')`);
|
|
await settled(b);
|
|
assert.equal(await b.evaluate('document.activeElement.id'), 'pane-b-pick');
|
|
// Without a move elsewhere, the same navigation still lands on the new page's heading.
|
|
await pick(b, 'a', 'ddigital/organization');
|
|
await wait(`document.querySelector('#pane-a [data-focus-key="agents-all"]')`);
|
|
await b.evaluate(`document.querySelector('#pane-a [data-focus-key="agents-all"]').click()`);
|
|
await wait(`${title('a')}.startsWith('Agents') && document.activeElement?.tagName === 'H1' && document.querySelector('#pane-a').contains(document.activeElement)`);
|
|
});
|
|
|
|
// A1's "Available in a project" chooser, with an Agents pane per organization: each pane's choice
|
|
// redraws its own table and survives a refresh, keyed by that pane's organization.
|
|
test('each Agents pane keeps its own project choice for its organization', async t => {
|
|
const { b, wait } = await open(t, { hash: '#/orgs/ddigital/side-by-side?a=ddigital/agents&b=forge/agents' });
|
|
const a = (name, level = 'org', definition = name) => ({ name, level, definition, model: null, scope: { kind: 'org' }, overrides: [], narrowed: [] });
|
|
const set = agents => ({ state: 'ok', agents, excluded: [] });
|
|
const levels = { root: { state: 'ok', assistant: null, agents: [] }, orgs: [
|
|
{ id: 'ddigital', state: 'ok', base: set([a('chief')]), defined: { 'spring-launch': [{ name: 'social-scheduler', form: 'define' }] },
|
|
projects: { 'spring-launch': set([a('chief'), a('social-scheduler', 'project', 'coder')]), 'brand-refresh': set([a('chief')]) } },
|
|
{ id: 'forge', state: 'ok', base: set([a('chief')]), defined: { 'api-gateway': [{ name: 'load-tester', form: 'define' }] },
|
|
projects: { 'api-gateway': set([a('chief'), a('load-tester', 'project', 'coder')]), ops: set([a('chief')]) } },
|
|
] };
|
|
await b.evaluate(`(() => { const real = window.fetch; window.fetch = (url, init) => String(url).endsWith('/api/agents/levels') ? Promise.resolve(new Response(${JSON.stringify(JSON.stringify(levels))}, { headers: { 'content-type': 'application/json' } })) : real(url, init); })()`);
|
|
await b.evaluate('window.MosaicPanes.refresh()');
|
|
const select = key => `document.querySelector('#pane-${key} [data-agents-project]')`;
|
|
const rows = key => `[...document.querySelectorAll('#pane-${key} [data-agents-available] tr[data-agent]')].map(r => r.dataset.agent)`;
|
|
await wait(`${select('a')} && ${select('b')} && ${rows('a')}.includes('social-scheduler') && ${rows('b')}.includes('load-tester')`);
|
|
await b.evaluate(`(() => { const s = ${select('b')}; s.value = 'ops'; s.dispatchEvent(new Event('change', { bubbles: true })); })()`);
|
|
await wait(`!${rows('b')}.includes('load-tester')`);
|
|
assert.equal(await b.evaluate(`${rows('a')}.includes('social-scheduler')`), true);
|
|
assert.equal(await b.evaluate(`${rows('a')}.includes('load-tester')`), false);
|
|
await b.evaluate('window.MosaicPanes.refresh()');
|
|
await settled(b);
|
|
await wait(`${select('a')} && ${select('b')}`);
|
|
assert.deepEqual(await b.evaluate(`[${select('a')}.value, ${select('b')}.value]`), ['spring-launch', 'ops']);
|
|
assert.equal(await b.evaluate(`!${rows('b')}.includes('load-tester') && ${rows('a')}.includes('social-scheduler')`), true);
|
|
});
|
|
|
|
// Polish 1 (#1873): every id a pane draws is its own. With the same page in both panes no id
|
|
// appears twice, and every label, ARIA reference and in-page link resolves inside its own pane.
|
|
const idAudit = `(() => {
|
|
const count = new Map();
|
|
for (const el of document.querySelectorAll('[id]')) count.set(el.id, (count.get(el.id) || 0) + 1);
|
|
const duplicates = [...count].filter(([, n]) => n > 1).map(([id]) => id).sort();
|
|
const stray = [];
|
|
for (const pane of document.querySelectorAll('.panes > .pane:not([hidden])')) {
|
|
for (const attr of ['for', 'aria-labelledby', 'aria-describedby', 'aria-controls']) {
|
|
for (const el of pane.querySelectorAll('[' + attr + ']')) {
|
|
for (const id of el.getAttribute(attr).split(/\\s+/).filter(Boolean)) {
|
|
const target = document.getElementById(id);
|
|
if (!target || !pane.contains(target)) stray.push(pane.id + ' ' + attr + '=' + id);
|
|
}
|
|
}
|
|
}
|
|
for (const a of pane.querySelectorAll('a[href^="#"]:not([href^="#/"])')) {
|
|
const id = decodeURIComponent(a.getAttribute('href').slice(1));
|
|
const target = id && document.getElementById(id);
|
|
if (id && (!target || !pane.contains(target))) stray.push(pane.id + ' href=#' + id);
|
|
}
|
|
}
|
|
return { duplicates, stray: stray.sort() };
|
|
})()`;
|
|
|
|
test('the same project, dashboard and Agents page in both panes draw no duplicate ids, and every reference stays in its pane', async t => {
|
|
const { b, wait } = await open(t);
|
|
await wait(`${title('b')}.includes("Forge")`);
|
|
const { stub, P } = await import('./helpers/projects-review-fixture.mjs');
|
|
await b.evaluate(stub.replace('const path=String(url),method', `if(url==='/api/orgs'||url==='/api/themes')return real(url,init);const path=String(url).replace(/^\\/api\\/orgs\\/(?:ddigital|forge)\\//,'/api/'),method`));
|
|
const a = (name, level = 'org', definition = name) => ({ name, level, definition, model: null, scope: { kind: 'org' }, overrides: [], narrowed: [] });
|
|
const set = agents => ({ state: 'ok', agents, excluded: [] });
|
|
const levels = { root: { state: 'ok', assistant: null, agents: [] }, orgs: [
|
|
{ id: 'ddigital', state: 'ok', base: set([a('chief')]), defined: { [P]: [{ name: 'social-scheduler', form: 'define' }] },
|
|
projects: { [P]: set([a('chief'), a('social-scheduler', 'project', 'coder')]) } },
|
|
] };
|
|
await b.evaluate(`(() => { const real = window.fetch; window.fetch = (url, init) => String(url).endsWith('/api/agents/levels') ? Promise.resolve(new Response(${JSON.stringify(JSON.stringify(levels))}, { headers: { 'content-type': 'application/json' } })) : real(url, init); })()`);
|
|
await b.evaluate('window.MosaicPanes.refresh()');
|
|
await wait(`document.querySelector('#pane-a-pick option[value="ddigital/projects/${P}"]')`);
|
|
const both = route => `location.hash = '#/orgs/ddigital/side-by-side?a=ddigital${route}&b=ddigital${route}'`;
|
|
const pages = [
|
|
['/organization', `${title('a')}.startsWith('Dashboard') && ${title('b')}.startsWith('Dashboard') && document.querySelectorAll('[data-pane-body] [data-system-types-heading]').length === 2`],
|
|
['/agents', `${title('a')}.startsWith('Agents') && ${title('b')}.startsWith('Agents') && document.querySelectorAll('[data-pane-body] [data-agents-available] tr[data-agent]').length >= 2`],
|
|
[`/projects/${P}`, `${title('a')}.startsWith('Pomodoro Timer') && ${title('b')}.startsWith('Pomodoro Timer') && !${text('a')}.includes('Reading…') && !${text('b')}.includes('Reading…')`],
|
|
[`/projects/${P}/conversations`, `${title('a')}.includes('Conversations') && ${title('b')}.includes('Conversations')`],
|
|
[`/projects/${P}/tasks`, `${title('a')}.includes('Tasks') && ${title('b')}.includes('Tasks') && !${text('a')}.includes('Reading…') && !${text('b')}.includes('Reading…')`],
|
|
[`/projects/${P}/requirements`, `document.querySelectorAll('[data-pane-body] [data-prd]').length === 2 && document.querySelectorAll('[data-pane-body] select').length >= 2`],
|
|
[`/projects/${P}/files`, `${title('a')}.includes('Files') && ${title('b')}.includes('Files') && !${text('a')}.includes('Reading…') && !${text('b')}.includes('Reading…')`],
|
|
];
|
|
const found = {}, drawn = {};
|
|
for (const [route, ready] of pages) {
|
|
await b.evaluate(both(route));
|
|
await wait(ready);
|
|
await settled(b);
|
|
const page = route.replace(P, 'P');
|
|
found[page] = await b.evaluate(idAudit);
|
|
drawn[page] = await b.evaluate(`[...document.querySelectorAll('#pane-a [data-pane-body] [id]')].map(e => e.id)`);
|
|
}
|
|
assert.deepEqual(found, Object.fromEntries(pages.map(([route]) => [route.replace(P, 'P'), { duplicates: [], stray: [] }])));
|
|
// The audit is not vacuous: the dashboard draws its system types heading and the requirements page
|
|
// its request select, north star and PRD headings, each with the pane's prefix.
|
|
assert.deepEqual(drawn['/organization'], ['pane-a-ws-reload-why', 'pane-a-ws-types-h']);
|
|
assert.deepEqual(drawn['/projects/P/requirements'], ['pane-a-project-request-select', 'pane-a-project-north-star', 'pane-a-project-prd']);
|
|
});
|