feat(org-chart): add core cards and fixed-layout integration
This commit is contained in:
shkim4 committed
1 parent
d18e3c3380
commit
61c6f8d1f1
161 files changed
+13044
-1
No files matched your search
@@ -0,0 +1,338 @@
|
||||
import http from 'node:http';
|
||||
import path from 'node:path';
|
||||
import { readFile, mkdir, writeFile } from 'node:fs/promises';
|
||||
import { createHash } from 'node:crypto';
|
||||
import { fileURLToPath, pathToFileURL } from 'node:url';
|
||||
|
||||
// P2-only browser evidence. Existing v0/P1 expectations and reports are retained.
|
||||
// ESM HTML and React use HTTP; the classic HTML is opened directly with file://.
|
||||
// No Chrome file-access flag is used, so classic portability is tested honestly.
|
||||
const root = fileURLToPath(new URL('../../', import.meta.url));
|
||||
const output = path.join(root, 'test-results/org-chart-p2');
|
||||
await mkdir(output, { recursive: true });
|
||||
const fixturePath = path.join(root, 'examples/org-chart/data-p1.json');
|
||||
const fixtureBytes = await readFile(fixturePath);
|
||||
const fixtureHash = createHash('sha256').update(fixtureBytes).digest('hex');
|
||||
const fixture = JSON.parse(fixtureBytes.toString('utf8'));
|
||||
const bundledPlaywright = 'C:\\Users\\user\\.cache\\codex-runtimes\\codex-primary-runtime\\dependencies\\node\\node_modules\\playwright\\index.mjs';
|
||||
const { chromium } = await import(pathToFileURL(process.env.ORGCHART_PLAYWRIGHT_MODULE ?? bundledPlaywright).href);
|
||||
const viewports = [{ width: 1920, height: 1080 }, { width: 1440, height: 900 }, { width: 1280, height: 800 }, { width: 768, height: 1024 }, { width: 390, height: 844 }];
|
||||
const expectedArrows = [[194.15, 311.75, 66.25, 19.8], [430.4, 311.75, 66.25, 19.8], [666.65, 302, 183.75, 42], [1044, 302, 258.92, 42], [1520.55, 305, 135.35, 36]];
|
||||
const results = [], measurements = [], errors = [], screenshots = [], servers = [];
|
||||
const check = (condition, name, detail) => results.push({ name, status: condition ? 'PASS' : 'FAIL', ...(detail === undefined ? {} : { detail }) });
|
||||
const near = (actual, expected, tolerance = 0.2) => Number.isFinite(actual) && Math.abs(actual - expected) <= tolerance;
|
||||
const spacedKorean = text => text.replace(/([가-힣])(?=[가-힣])/g, '$1 ');
|
||||
const mime = { '.html': 'text/html', '.js': 'text/javascript', '.json': 'application/json', '.css': 'text/css', '.svg': 'image/svg+xml', '.png': 'image/png', '.ttf': 'font/ttf', '.woff2': 'font/woff2' };
|
||||
async function serve(directory) {
|
||||
const server = http.createServer(async (request, response) => {
|
||||
try {
|
||||
const url = new URL(request.url, 'http://127.0.0.1');
|
||||
const file = path.resolve(directory, '.' + decodeURIComponent(url.pathname === '/' ? '/index.html' : url.pathname));
|
||||
const relative = path.relative(directory, file);
|
||||
if (relative.startsWith('..') || path.isAbsolute(relative)) return response.writeHead(403).end();
|
||||
response.setHeader('Content-Type', mime[path.extname(file)] ?? 'application/octet-stream');
|
||||
response.end(await readFile(file));
|
||||
} catch { response.writeHead(404).end(); }
|
||||
});
|
||||
await new Promise(resolve => server.listen(0, '127.0.0.1', resolve));
|
||||
servers.push(server);
|
||||
return `http://127.0.0.1:${server.address().port}`;
|
||||
}
|
||||
function captureErrors(page, route) {
|
||||
page.on('pageerror', error => errors.push({ route, type: 'pageerror', message: error.message }));
|
||||
page.on('console', message => { if (message.type() === 'error') errors.push({ route, type: 'console', message: message.text() }); });
|
||||
}
|
||||
async function ready(page, mode = 'readOnly') {
|
||||
await page.waitForFunction(expectedMode => {
|
||||
const shadow = document.querySelector('.hm-orgchart-host')?.shadowRoot;
|
||||
return shadow?.querySelector(`.hm-orgchart-composition[data-display-mode="${expectedMode}"] [data-card-asset]`)
|
||||
&& !shadow.querySelector('.hm-orgchart-state')?.textContent
|
||||
&& [...shadow.querySelectorAll('link[rel=stylesheet]')].every(link => !!link.sheet);
|
||||
}, mode, { timeout: 20000 });
|
||||
await page.evaluate(async () => {
|
||||
await document.fonts.ready;
|
||||
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
|
||||
await Promise.all([...shadow.querySelectorAll('img')].map(image => image.decode().catch(() => {})));
|
||||
await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
|
||||
});
|
||||
}
|
||||
async function measure(page) {
|
||||
return page.evaluate(async () => {
|
||||
const host = document.querySelector('.hm-orgchart-host');
|
||||
const shadow = host.shadowRoot;
|
||||
const composition = shadow.querySelector('.hm-orgchart-composition');
|
||||
const stage = shadow.querySelector('.hm-orgchart-stage');
|
||||
const origin = stage.getBoundingClientRect();
|
||||
// dataset.scale is rounded to four digits; measured transform is required
|
||||
// to recover the small cards accurately at the 390px viewport.
|
||||
const scale = origin.width / stage.offsetWidth;
|
||||
const rect = element => {
|
||||
const box = element.getBoundingClientRect();
|
||||
return { x: (box.left - origin.left) / scale, y: (box.top - origin.top) / scale, width: box.width / scale, height: box.height / scale };
|
||||
};
|
||||
const dimensions = element => element ? { clientWidth: element.clientWidth, scrollWidth: element.scrollWidth, clientHeight: element.clientHeight, scrollHeight: element.scrollHeight, overflowX: getComputedStyle(element).overflowX, overflowY: getComputedStyle(element).overflowY } : null;
|
||||
const text = element => element?.textContent?.replace(/\s+/g, ' ').trim() ?? '';
|
||||
const overlaps = (a, b) => Math.min(a.x + a.width, b.x + b.width) - Math.max(a.x, b.x) > 0.75 && Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y) > 0.75;
|
||||
const fingerprint = source => {
|
||||
let hash = 2166136261;
|
||||
for (let index = 0; index < source.length; index++) hash = Math.imul(hash ^ source.charCodeAt(index), 16777619);
|
||||
return (hash >>> 0).toString(16);
|
||||
};
|
||||
const cards = [...shadow.querySelectorAll('.hm-orgchart-employee[data-card-asset]')].map(card => {
|
||||
const node = card.closest('.node[data-organization-id]');
|
||||
const background = card.querySelector('.hm-orgchart-card-background');
|
||||
const css = getComputedStyle(card);
|
||||
const personName = card.querySelector('.hm-orgchart-person-name');
|
||||
const cardBox = rect(card), avatarBox = rect(card.querySelector('.hm-orgchart-avatar'));
|
||||
const logoBox = card.querySelector('.hm-orgchart-affiliation-mark') ? rect(card.querySelector('.hm-orgchart-affiliation-mark')) : null;
|
||||
const contentIssues = [], textBoxes = [], fontRangeOverlaps = [];
|
||||
const personText = card.querySelector('.hm-orgchart-person-text');
|
||||
const positionLine = personText?.firstElementChild;
|
||||
const lineBoxes = { position: positionLine ? rect(positionLine) : null, name: rect(personName) };
|
||||
const role = card.querySelector('.hm-orgchart-person-role');
|
||||
const badge = card.querySelector('.hm-orgchart-position-row .hm-orgchart-job-title');
|
||||
const horizontalRoleBadgeGap = badge ? rect(badge).x - rect(role).x - rect(role).width : null;
|
||||
if (lineBoxes.position && lineBoxes.position.y + lineBoxes.position.height > lineBoxes.name.y + 0.3) contentIssues.push('position/name: actual line-box overlap');
|
||||
if (horizontalRoleBadgeGap !== null && horizontalRoleBadgeGap < -0.3) contentIssues.push('role/badge: horizontal element-box overlap');
|
||||
const contained = box => box.x >= cardBox.x - 0.5 && box.y >= cardBox.y - 0.5 && box.x + box.width <= cardBox.x + cardBox.width + 0.5 && box.y + box.height <= cardBox.y + cardBox.height + 0.5;
|
||||
for (const element of card.querySelectorAll('.hm-orgchart-person-name, .hm-orgchart-person-role, .hm-orgchart-job-title')) {
|
||||
if (element.clientWidth > 0 && element.scrollWidth > element.clientWidth + 1) contentIssues.push(`${element.className}: horizontal text overflow`);
|
||||
const range = document.createRange(); range.selectNodeContents(element);
|
||||
for (const box of range.getClientRects()) {
|
||||
const textBox = { x: (box.left - origin.left) / scale, y: (box.top - origin.top) / scale, width: box.width / scale, height: box.height / scale };
|
||||
if (!contained(textBox)) contentIssues.push(`${element.className}: text outside card`);
|
||||
if (overlaps(textBox, avatarBox)) contentIssues.push(`${element.className}: avatar overlap`);
|
||||
if (logoBox && overlaps(textBox, logoBox)) contentIssues.push(`${element.className}: logo overlap`);
|
||||
textBoxes.push({ className: element.className, box: textBox });
|
||||
}
|
||||
}
|
||||
// Range rectangles contain the font ascent/descent envelope, including
|
||||
// unpainted space. Noto Sans KR can make adjacent 0-gap line envelopes
|
||||
// intersect despite distinct element line boxes and non-overlapping ink.
|
||||
// Retain these metrics for visual review; never classify them as glyph
|
||||
// collisions or silently claim that screenshot pixels were verified.
|
||||
for (const [index, a] of textBoxes.entries()) for (const b of textBoxes.slice(index + 1)) if (a.className !== b.className && overlaps(a.box, b.box)) fontRangeOverlaps.push({ a: a.className, b: b.className, horizontal: Math.min(a.box.x + a.box.width, b.box.x + b.box.width) - Math.max(a.box.x, b.box.x), vertical: Math.min(a.box.y + a.box.height, b.box.y + b.box.height) - Math.max(a.box.y, b.box.y) });
|
||||
if (!contained(avatarBox)) contentIssues.push('avatar outside card');
|
||||
if (logoBox && !contained(logoBox)) contentIssues.push('logo outside card');
|
||||
return {
|
||||
employeeId: card.dataset.employeeId, organizationId: node?.dataset.organizationId ?? null,
|
||||
depth: node ? Number(node.dataset.organizationDepth ?? node.dataset.depth) : null,
|
||||
kind: card.dataset.cardKind, asset: card.dataset.cardAsset, size: card.dataset.cardAssetSize,
|
||||
topSlot: !!card.closest('.hm-orgchart-top-leaders'), box: rect(card),
|
||||
naturalWidth: background?.naturalWidth ?? 0, naturalHeight: background?.naturalHeight ?? 0,
|
||||
embedded: !!background?.src.startsWith('data:image/svg+xml'), loaded: !!background?.complete && background.naturalWidth > 0,
|
||||
name: text(personName), role: text(card.querySelector('.hm-orgchart-person-role')), badge: text(card.querySelector('.hm-orgchart-job-title')),
|
||||
nameAccessible: personName.getAttribute('aria-label'), roleAccessible: card.querySelector('.hm-orgchart-person-role')?.getAttribute('aria-label'), badgeAccessible: card.querySelector('.hm-orgchart-job-title')?.getAttribute('aria-label'),
|
||||
nameStyle: { fontSize: getComputedStyle(personName).fontSize, fontWeight: getComputedStyle(personName).fontWeight, textOverflow: getComputedStyle(personName).textOverflow },
|
||||
contentIssues, textBoxes, lineBoxes, horizontalRoleBadgeGap, fontRangeOverlaps,
|
||||
radius: css.borderRadius, border: css.borderWidth, fill: css.backgroundColor,
|
||||
};
|
||||
});
|
||||
const headers = [...shadow.querySelectorAll('.node[data-organization-id] .hm-orgchart-organization-name')].map(header => {
|
||||
const node = header.closest('.node');
|
||||
const card = node.querySelector('.hm-orgchart-employee');
|
||||
const box = rect(header);
|
||||
const wrapperCss = getComputedStyle(header.parentElement);
|
||||
return { organizationId: node.dataset.organizationId, depth: Number(node.dataset.organizationDepth ?? node.dataset.depth), text: text(header), box,
|
||||
firstCardKind: card?.dataset.cardKind ?? null, headerCardGap: card ? rect(card).y - box.y - box.height : null,
|
||||
wrapperBorder: wrapperCss.borderWidth, wrapperFill: wrapperCss.backgroundColor, wrapperShadow: wrapperCss.boxShadow };
|
||||
});
|
||||
const overlay = shadow.querySelector('.hm-orgchart-workdesk-overlay');
|
||||
const arrows = await Promise.all([...shadow.querySelectorAll('.hm-orgchart-workdesk-overlay image[data-arrow]')].map(async element => {
|
||||
const source = element.getAttribute('href') ?? element.getAttributeNS('http://www.w3.org/1999/xlink', 'href') ?? '';
|
||||
const image = new Image(); image.src = source;
|
||||
await image.decode().catch(() => {});
|
||||
return { id: element.dataset.arrow, x: Number(element.getAttribute('x')), y: Number(element.getAttribute('y')), width: Number(element.getAttribute('width')), height: Number(element.getAttribute('height')),
|
||||
box: rect(element), embedded: source.startsWith('data:image/png'), fingerprint: fingerprint(source), loaded: image.complete && image.naturalWidth > 0, naturalWidth: image.naturalWidth, naturalHeight: image.naturalHeight,
|
||||
preserveAspectRatio: element.getAttribute('preserveAspectRatio') };
|
||||
}));
|
||||
const decorations = [...shadow.querySelectorAll('img[data-workdesk-asset]')].map(image => ({ asset: image.dataset.workdeskAsset, box: rect(image), embedded: image.src.startsWith('data:image/'), fingerprint: fingerprint(image.src), loaded: image.complete && image.naturalWidth > 0, naturalWidth: image.naturalWidth, naturalHeight: image.naturalHeight }));
|
||||
const connectors = [...shadow.querySelectorAll('.hm-orgchart-workdesk-overlay path[data-connector]')].map(element => ({ id: element.dataset.connector, path: element.getAttribute('d'), stroke: getComputedStyle(element).stroke, strokeWidth: getComputedStyle(element).strokeWidth, dasharray: getComputedStyle(element).strokeDasharray, fill: getComputedStyle(element).fill, box: rect(element) }));
|
||||
const physical = [...cards.map(card => ({ type: 'card', id: card.employeeId, box: card.box })), ...headers.map(header => ({ type: 'header', id: header.organizationId, box: header.box }))];
|
||||
const collisions = [];
|
||||
for (const [index, a] of physical.entries()) for (const b of physical.slice(index + 1)) if (overlaps(a.box, b.box)) collisions.push({ a: `${a.type}:${a.id}`, b: `${b.type}:${b.id}` });
|
||||
const arrowCollisions = arrows.flatMap(arrow => physical.filter(item => overlaps(arrow.box, item.box)).map(item => ({ arrow: arrow.id, item: `${item.type}:${item.id}` })));
|
||||
const summaries = [...shadow.querySelectorAll('.hm-orgchart-organization-totals, .hm-orgchart-affiliation-bar')].map(element => ({ className: element.className, box: rect(element), text: text(element) }));
|
||||
const summaryCollisions = summaries.flatMap(summary => physical.filter(item => overlaps(summary.box, item.box)).map(item => ({ summary: summary.className, item: `${item.type}:${item.id}` })));
|
||||
const pseudo = selector => [...shadow.querySelectorAll(selector)].map(element => {
|
||||
const before = getComputedStyle(element, '::before'), after = getComputedStyle(element, '::after');
|
||||
return { className: element.className, before: { content: before.content, display: before.display }, after: { content: after.content, display: after.display } };
|
||||
});
|
||||
return {
|
||||
scale, recordedScale: composition.dataset.scale, baseWidth: origin.width / scale, baseHeight: origin.height / scale,
|
||||
stageTransform: getComputedStyle(stage).transform, displayMode: composition.dataset.displayMode,
|
||||
document: dimensions(document.documentElement), viewport: dimensions(shadow.querySelector('.hm-orgchart-viewport')),
|
||||
cards, headers, arrows, decorations, connectors, overlayViewBox: overlay?.getAttribute('viewBox') ?? null,
|
||||
presentationNames: [...shadow.querySelectorAll('.hm-orgchart-employee .hm-orgchart-person-name')].map(element => ({ text: text(element), accessible: element.getAttribute('aria-label'), overflow: element.scrollWidth > element.clientWidth })),
|
||||
presentationPeople: [...shadow.querySelectorAll('.hm-orgchart-employee')].map(card => ({ employeeId: card.dataset.employeeId,
|
||||
role: text(card.querySelector('.hm-orgchart-person-role')), roleAccessible: card.querySelector('.hm-orgchart-person-role')?.getAttribute('aria-label'),
|
||||
badge: text(card.querySelector('.hm-orgchart-job-title')), badgeAccessible: card.querySelector('.hm-orgchart-job-title')?.getAttribute('aria-label') })),
|
||||
collisions, arrowCollisions, summaryCollisions, summaries,
|
||||
debugCount: shadow.querySelectorAll('.hm-orgchart-toggle, .hm-orgchart-kind, .hm-orgchart-domain-id, .hm-orgchart-node-count, .hm-orgchart-vacancy, .hm-orgchart-description, .hm-orgchart-policy').length,
|
||||
hostControls: document.querySelectorAll('.hm-orgchart-story-controls').length,
|
||||
largeMatrixCount: shadow.querySelectorAll('.hm-orgchart-position-table, .hm-orgchart-position-summary').length,
|
||||
totalsCount: shadow.querySelectorAll('.hm-orgchart-organization-totals').length,
|
||||
affiliationBarCount: shadow.querySelectorAll('.hm-orgchart-affiliation-bar').length,
|
||||
affiliationBarRows: [...shadow.querySelectorAll('.hm-orgchart-affiliation-bar-item')].map(element => rect(element).y),
|
||||
affiliationTotal: text(shadow.querySelector('.hm-orgchart-affiliation-bar-total dd')),
|
||||
statusGroups: [...shadow.querySelectorAll('.hm-orgchart-status-group')].map(element => ({ status: element.dataset.workStatus, text: text(element.querySelector('h3')), box: rect(element), border: getComputedStyle(element).borderWidth })),
|
||||
originalBranchPseudos: pseudo('.hm-orgchart-axis, .hm-orgchart-hub, .hm-orgchart-forest, .hm-orgchart-tree'),
|
||||
};
|
||||
});
|
||||
}
|
||||
function verify(value, label, viewport) {
|
||||
const top = value.cards.filter(card => card.kind === 'topLeader');
|
||||
const depth1 = value.cards.filter(card => card.kind === 'leader' && card.depth === 1);
|
||||
const deeper = value.cards.filter(card => card.kind === 'leader' && card.depth >= 2);
|
||||
const sizeMatches = (card, size, width, height) => card.size === size && near(card.box.width, width) && near(card.box.height, height) && card.naturalWidth === width && card.naturalHeight === height;
|
||||
check(top.length === 1 && top[0].topSlot && sizeMatches(top[0], 'representative', 146, 74), `${label}: representative alone uses 146×74 card`);
|
||||
check(depth1.length === 6 && depth1.every(card => sizeMatches(card, 'leader', 146, 68)), `${label}: all six actual Depth 1 leaders use 146×68 cards`, depth1.map(card => ({ id: card.employeeId, size: card.size, box: card.box })));
|
||||
check(deeper.length > 0 && deeper.every(card => sizeMatches(card, 'employee', 108, 52)), `${label}: every actual Depth ≥2 leader uses 108×52 card`, deeper.map(card => ({ id: card.employeeId, depth: card.depth, size: card.size, box: card.box })));
|
||||
check(deeper.every(card => spacedKorean(fixture.employees.find(employee => employee.id === card.employeeId)?.jobTitle ?? '') === card.badge && card.badge), `${label}: small leader cards preserve supplied job-title badges with requested Korean spacing`, deeper.map(card => ({ id: card.employeeId, badge: card.badge })));
|
||||
check(value.presentationNames.length > 0 && value.presentationNames.every(name => name.text === '홍 길 동' && name.accessible === '홍길동' && !name.overflow), `${label}: every displayed person name is 홍 길 동, fits, and retains an unspaced accessible name`, value.presentationNames);
|
||||
check(value.presentationPeople.every(card => {
|
||||
const employee = fixture.employees.find(employee => employee.id === card.employeeId);
|
||||
return employee && card.role === spacedKorean(employee.position) && card.roleAccessible === employee.position && card.badge === spacedKorean(employee.jobTitle ?? '') && (!employee.jobTitle || card.badgeAccessible === employee.jobTitle);
|
||||
}), `${label}: positions and job-title badges use one normal inter-Korean space while accessible labels retain original text`);
|
||||
check(value.cards.every(card => card.contentIssues.length === 0), `${label}: text stays within card/avatar/logo boundaries; actual line boxes and horizontal role/badge boxes do not overlap`, value.cards.filter(card => card.contentIssues.length).map(card => ({ id: card.employeeId, issues: card.contentIssues, textBoxes: card.textBoxes, lineBoxes: card.lineBoxes, horizontalRoleBadgeGap: card.horizontalRoleBadgeGap })));
|
||||
check(value.cards.every(card => card.loaded && card.embedded), `${label}: original embedded card SVG assets load`);
|
||||
const leaders = value.headers.filter(header => header.firstCardKind === 'leader');
|
||||
check(leaders.filter(header => header.depth === 1).length === 6 && leaders.every(header => near(header.headerCardGap, header.depth === 1 ? 8 : 10, 0.3)), `${label}: header-to-leader boundingRect gap is 8px at Depth 1 and 10px below`, leaders.map(header => ({ id: header.organizationId, depth: header.depth, gap: header.headerCardGap })));
|
||||
check(value.displayMode === 'readOnly' && value.debugCount === 0 && value.hostControls === 0, `${label}: read-only composition has no collapse/test/debug content`);
|
||||
check(value.headers.every(header => header.wrapperBorder === '0px' && header.wrapperFill === 'rgba(0, 0, 0, 0)' && header.wrapperShadow === 'none'), `${label}: organization groups retain unframed presentation`);
|
||||
check(value.totalsCount === 1 && value.affiliationBarCount === 1 && value.largeMatrixCount === 0, `${label}: compact organization totals and untitled affiliation bar are retained`);
|
||||
check(value.affiliationTotal === `${new Set(fixture.employees.map(employee => employee.id)).size}명` && Math.max(...value.affiliationBarRows) - Math.min(...value.affiliationBarRows) < 1, `${label}: affiliation counts retain one base-canvas row and fixture total`);
|
||||
check(value.statusGroups.length === 2 && value.statusGroups.every(group => group.border === '0px' && !group.text.includes('·')), `${label}: dispatched/on-leave groups retain compact presentation`);
|
||||
check(near(value.baseWidth, 1920, 0.3) && near(value.baseHeight, 914.5, 1) && value.scale > 0 && value.scale <= 1, `${label}: entire 1920×914.5 base stage scales uniformly`, { width: value.baseWidth, height: value.baseHeight, scale: value.scale });
|
||||
check(value.document.scrollWidth <= viewport.width + 1, `${label}: document has no horizontal overflow`, value.document);
|
||||
check(value.overlayViewBox?.replace(/\s+/g, ' ').trim() === '0 0 1920 914.5', `${label}: connectors and arrows share stage coordinates`);
|
||||
check(value.arrows.length === 5 && value.arrows.every((arrow, index) => [arrow.x, arrow.y, arrow.width, arrow.height].every((number, coordinate) => near(number, expectedArrows[index][coordinate], 0.05)) && arrow.preserveAspectRatio === 'none' && arrow.embedded && arrow.loaded), `${label}: five embedded collaboration arrows retain source placement`, value.arrows);
|
||||
check(value.decorations.length === 5 && value.decorations.every(asset => asset.embedded && asset.loaded), `${label}: five Workdesk decorations load without external URLs`, value.decorations);
|
||||
check(value.connectors.length === 5 && value.connectors.some(connector => /[Cc]/.test(connector.path ?? '')) && value.connectors.every(connector => connector.path && connector.fill === 'none' && connector.stroke === 'rgb(69, 99, 159)' && near(parseFloat(connector.strokeWidth), 0.893, 0.03) && connector.dasharray.split(/[ ,]+/).every(number => near(parseFloat(number), 1.79, 0.03))), `${label}: source overlay curves retain stroke, fill, width and dash pattern`, value.connectors);
|
||||
check(value.collisions.length === 0, `${label}: card/header rectangles do not overlap`, value.collisions);
|
||||
check(value.arrowCollisions.length === 0, `${label}: collaboration arrow rectangles do not intersect cards/headers`, value.arrowCollisions);
|
||||
check(value.summaryCollisions.length === 0, `${label}: compact summary rectangles do not intersect cards/headers`, value.summaryCollisions);
|
||||
}
|
||||
async function tooltip(page, transport) {
|
||||
const lowerOrganization = fixture.organizations.find(organization => organization.parentId && fixture.organizations.find(parent => parent.id === organization.parentId)?.parentId && organization.leaderId);
|
||||
const employeeId = lowerOrganization.leaderId;
|
||||
const fullName = '홍 길 동';
|
||||
const name = page.locator(`.hm-orgchart-employee[data-employee-id="${employeeId}"] .hm-orgchart-person-name`);
|
||||
await name.waitFor({ state: 'visible' });
|
||||
// All requested default names must fit. Induce a narrow name box locally to
|
||||
// exercise overflow behavior without altering fixture or presentation text.
|
||||
const originalInlineStyle = await name.getAttribute('style');
|
||||
await name.evaluate(element => { element.style.width = '8px'; element.style.maxWidth = '8px'; });
|
||||
await page.waitForFunction(id => document.querySelector('.hm-orgchart-host').shadowRoot.querySelector(`.hm-orgchart-employee[data-employee-id="${id}"] .hm-orgchart-person-name`)?.dataset.nameOverflow === 'true', employeeId);
|
||||
const before = await page.evaluate(id => {
|
||||
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
|
||||
const name = shadow.querySelector(`.hm-orgchart-employee[data-employee-id="${id}"] .hm-orgchart-person-name`);
|
||||
const tip = shadow.getElementById(name.getAttribute('aria-describedby'));
|
||||
return { fullText: name.textContent, tabIndex: name.tabIndex, ellipsis: getComputedStyle(name).textOverflow, tipHidden: tip.hidden, documentHeight: document.documentElement.scrollHeight, viewportHeight: shadow.querySelector('.hm-orgchart-viewport').scrollHeight };
|
||||
}, employeeId);
|
||||
check(before.fullText === fullName && before.tabIndex === 0 && before.ellipsis === 'ellipsis' && before.tipHidden, `${transport}: induced overflow preserves 홍 길 동 and exposes focusable ellipsis`, before);
|
||||
await name.hover();
|
||||
const tip = page.locator('.hm-orgchart-person-name-tooltip:not([hidden])');
|
||||
await tip.waitFor({ state: 'visible' });
|
||||
check(await tip.textContent() === fullName, `${transport}: hover exposes complete requested name in tooltip`);
|
||||
await tip.hover();
|
||||
check(await tip.isVisible(), `${transport}: tooltip remains hoverable`);
|
||||
await page.mouse.move(0, 0);
|
||||
await page.waitForFunction(() => [...document.querySelector('.hm-orgchart-host').shadowRoot.querySelectorAll('[role=tooltip]')].every(tip => tip.hidden));
|
||||
// The only overflowed name is in the normal tab order: use the keyboard,
|
||||
// rather than locator.focus(), to prove actual Tab activation.
|
||||
await page.evaluate(() => document.activeElement?.blur());
|
||||
let reached = false;
|
||||
for (let step = 0; step < 100 && !reached; step++) {
|
||||
await page.keyboard.press('Tab');
|
||||
reached = await page.evaluate(id => document.querySelector('.hm-orgchart-host').shadowRoot.activeElement?.closest(`[data-employee-id="${id}"]`)?.dataset.employeeId === id, employeeId);
|
||||
}
|
||||
check(reached && await tip.isVisible(), `${transport}: keyboard Tab focus opens complete tooltip`);
|
||||
await page.keyboard.press('Escape');
|
||||
check(!(await tip.isVisible()), `${transport}: Escape dismisses tooltip while focus stays on name`);
|
||||
const after = await page.evaluate(() => {
|
||||
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
|
||||
return { documentHeight: document.documentElement.scrollHeight, viewportHeight: shadow.querySelector('.hm-orgchart-viewport').scrollHeight, activeClass: shadow.activeElement?.className };
|
||||
});
|
||||
check(before.documentHeight === after.documentHeight && before.viewportHeight === after.viewportHeight && after.activeClass === 'hm-orgchart-person-name', `${transport}: hidden tooltip does not inflate scroll extents or lose focus`, { before, after });
|
||||
await page.keyboard.press('Tab');
|
||||
check(!(await tip.isVisible()), `${transport}: moving focus keeps tooltip dismissed`);
|
||||
await name.evaluate((element, originalInlineStyle) => originalInlineStyle === null ? element.removeAttribute('style') : element.setAttribute('style', originalInlineStyle), originalInlineStyle);
|
||||
await page.waitForFunction(id => document.querySelector('.hm-orgchart-host').shadowRoot.querySelector(`.hm-orgchart-employee[data-employee-id="${id}"] .hm-orgchart-person-name`)?.dataset.nameOverflow === 'false', employeeId);
|
||||
check(await name.getAttribute('tabindex') === null && await name.getAttribute('aria-describedby') === null, `${transport}: restoring the name box removes overflow-only focus and tooltip attributes`);
|
||||
}
|
||||
function sameGeometry(a, b) {
|
||||
if (a.cards.length !== b.cards.length || a.headers.length !== b.headers.length) return false;
|
||||
const boxesEqual = (first, second) => ['x', 'y', 'width', 'height'].every(key => near(first[key], second[key], 0.4));
|
||||
return a.cards.every((card, index) => {
|
||||
const other = b.cards[index];
|
||||
return ['employeeId', 'organizationId', 'depth', 'kind', 'asset', 'size', 'badge', 'name', 'role'].every(key => card[key] === other[key]) && boxesEqual(card.box, other.box);
|
||||
}) && a.headers.every((header, index) => header.organizationId === b.headers[index].organizationId && boxesEqual(header.box, b.headers[index].box))
|
||||
&& JSON.stringify(a.connectors.map(({ id, path }) => ({ id, path }))) === JSON.stringify(b.connectors.map(({ id, path }) => ({ id, path })))
|
||||
&& JSON.stringify(a.arrows.map(({ fingerprint, x, y, width, height }) => ({ fingerprint, x, y, width, height }))) === JSON.stringify(b.arrows.map(({ fingerprint, x, y, width, height }) => ({ fingerprint, x, y, width, height })));
|
||||
}
|
||||
let browser;
|
||||
try {
|
||||
const [htmlOrigin, reactOrigin] = await Promise.all([serve(path.join(root, 'examples/org-chart/dist')), serve(path.join(root, 'examples/org-chart-react/dist'))]);
|
||||
const storybookOrigin = process.env.ORGCHART_STORYBOOK_URL?.replace(/\/$/, '') ?? await serve(path.join(root, 'storybook-static'));
|
||||
browser = await chromium.launch({ executablePath: process.env.ORGCHART_CHROME ?? 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe', headless: true });
|
||||
const context = await browser.newContext({ deviceScaleFactor: 1, reducedMotion: 'reduce' });
|
||||
const routes = [
|
||||
{ label: 'html', transport: 'html', url: `${htmlOrigin}/p1.html?mode=readOnly` },
|
||||
{ label: 'file-classic', transport: 'html', url: `${pathToFileURL(path.join(root, 'examples/org-chart/dist/p1-classic.html')).href}?mode=readOnly` },
|
||||
{ label: 'react', transport: 'react', url: `${reactOrigin}/p1.html?mode=readOnly` },
|
||||
{ label: 'storybook', transport: null, url: `${storybookOrigin}/iframe.html?id=orgchart--full-composition&viewMode=story` },
|
||||
];
|
||||
for (const route of routes) {
|
||||
const page = await context.newPage(); captureErrors(page, route.label);
|
||||
try {
|
||||
await page.setViewportSize(viewports[0]);
|
||||
await page.goto(route.url); await ready(page);
|
||||
for (const viewport of viewports) {
|
||||
await page.setViewportSize(viewport); await ready(page);
|
||||
const value = await measure(page);
|
||||
measurements.push({ route: route.label, ...viewport, ...value });
|
||||
verify(value, `${route.label}/${viewport.width}×${viewport.height}`, viewport);
|
||||
const filename = `${route.label}-${viewport.width}x${viewport.height}.png`;
|
||||
await page.screenshot({ path: path.join(output, filename), fullPage: true }); screenshots.push(filename);
|
||||
}
|
||||
if (route.transport && route.label !== 'file-classic') {
|
||||
await page.setViewportSize(viewports[1]); await ready(page);
|
||||
await tooltip(page, route.transport);
|
||||
}
|
||||
} catch (error) { check(false, `${route.label}: browser verification completed`, { message: error.message }); }
|
||||
finally { await page.close(); }
|
||||
}
|
||||
for (const viewport of viewports) {
|
||||
const values = ['html', 'file-classic', 'react', 'storybook'].map(route => measurements.find(item => item.route === route && item.width === viewport.width));
|
||||
check(values.every(Boolean) && values.slice(1).every(value => sameGeometry(values[0], value)), `HTML/React/classic/Story shared Core geometry and asset parity/${viewport.width}`, { routes: values.map(value => value?.route ?? 'missing'), toleranceInBasePixels: 0.4 });
|
||||
}
|
||||
const interactive = await context.newPage(); captureErrors(interactive, 'interactive');
|
||||
await interactive.goto(`${htmlOrigin}/p1.html`); await ready(interactive, 'interactive');
|
||||
const preserved = await interactive.evaluate(() => {
|
||||
const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
|
||||
const node = [...shadow.querySelectorAll('.node')].find(node => Number(node.dataset.organizationDepth ?? node.dataset.depth) >= 2 && node.querySelector('[data-card-kind=leader]'));
|
||||
const card = node?.querySelector('[data-card-kind=leader]');
|
||||
return { organizationId: node?.dataset.organizationId, size: card?.dataset.cardAssetSize, width: card?.offsetWidth, height: card?.offsetHeight, toggleCount: shadow.querySelectorAll('.hm-orgchart-toggle').length, overlayCount: shadow.querySelectorAll('.hm-orgchart-workdesk-overlay').length };
|
||||
});
|
||||
check(preserved.size === 'leader' && preserved.width === 146 && preserved.height === 68 && preserved.toggleCount > 0 && preserved.overlayCount === 0, 'interactive default preserves existing lower-leader large-card policy and controls', preserved);
|
||||
await interactive.close();
|
||||
check(createHash('sha256').update(await readFile(fixturePath)).digest('hex') === fixtureHash, 'P2 browser verifier preserves original employee fixture bytes and IDs', { sha256: fixtureHash });
|
||||
check(errors.length === 0, 'P2 routes have no browser console/runtime errors', errors);
|
||||
} catch (error) { check(false, 'P2 verifier setup/completion', { message: error.message }); }
|
||||
finally {
|
||||
await writeFile(path.join(output, 'browser.json'), JSON.stringify({
|
||||
browser: browser?.version(), scope: 'P2 only; no existing v0/P1 suite expectation changes',
|
||||
transportPolicy: 'HTTP for ESM/React; true file:// classic without file-access browser flag',
|
||||
tooltipMethod: 'Induced 8px name width on one rendered 홍 길 동, restored after real hover/Tab/Escape. Fixture and displayed text are unchanged.',
|
||||
fixtureSha256: fixtureHash,
|
||||
connectorCollisionVerification: 'NOT VERIFIED by automation: path bounding boxes do not represent curved segments. Review saved full-page screenshots for routing and overlap.',
|
||||
textInkCollisionVerification: 'NOT VERIFIED by automation: font Range ascent/descent envelopes may overlap at the confirmed 0px internal row gap. Actual element line boxes, horizontal role/badge boxes, horizontal overflow and card/avatar/logo boundaries are checked; fontRangeOverlaps retain raw envelopes for screenshot pixel review.',
|
||||
results, errors, measurements, screenshots,
|
||||
}, null, 2));
|
||||
await browser?.close();
|
||||
for (const server of servers) await new Promise(resolve => server.close(resolve));
|
||||
}
|
||||
const failures = results.filter(result => result.status === 'FAIL');
|
||||
console.log(JSON.stringify({ output, checks: results.length, failureCount: failures.length, failures: failures.slice(0, 20).map(result => result.name), ...(failures.length > 20 ? { additionalFailures: failures.length - 20 } : {}) }, null, 2));
|
||||
if (failures.length) process.exitCode = 1;
|
||||
Reference in new issue
Block a user