63 lines
4.6 KiB
JavaScript
63 lines
4.6 KiB
JavaScript
// Plain HTTP consumer: only the published Core ESM and CSS, no React runtime.
|
|
import fs from 'node:fs/promises';
|
|
import path from 'node:path';
|
|
import assert from 'node:assert/strict';
|
|
import { launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
|
|
const output = path.resolve('test-results/org-chart-p11');
|
|
const fixture = path.resolve('examples/org-chart-react/dist/plain-p11');
|
|
await fs.mkdir(fixture, { recursive: true });
|
|
for (const file of ['index.js', 'style.css', 'engine.css']) await fs.copyFile(`packages/org-chart/dist/${file}`, path.join(fixture, file));
|
|
await fs.copyFile('examples/org-chart/data-expanded-small.json', path.join(fixture, 'data.json'));
|
|
const theme = (await fs.readFile('examples/org-chart-react/external-theme.css', 'utf8')).replace("@import '@hm-design/org-chart/style.css';", "@import './style.css';");
|
|
await fs.writeFile(path.join(fixture, 'external-theme.css'), theme);
|
|
await fs.writeFile(path.join(fixture, 'index.html'), '<!doctype html><html lang="ko"><meta charset="utf-8"><link rel="icon" href="data:,"><title>Plain Core P11</title><main id="root" style="height:850px"></main><script type="module" src="./app.js"></script></html>');
|
|
await fs.writeFile(path.join(fixture, 'app.js'), `import { createOrgChart, JsonOrgChartDataSource } from './index.js';
|
|
const data = await (await fetch('./data.json')).json();
|
|
window.chart = createOrgChart({ container: document.querySelector('#root'), dataSource: new JsonOrgChartDataSource(data), layoutMode: 'auto', presentationMode: 'chart-only', initialView: 'fit', wheelZoom: 'direct', stylesheetUrls: { engine: './engine.css', core: location.search ? './external-theme.css' : './style.css' } });
|
|
await window.chart.mount();`);
|
|
const browser = await launchChromium({ headless: true });
|
|
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
|
|
const requests = [], errors = [], checks = [];
|
|
page.on('request', request => requests.push(request.url()));
|
|
page.on('pageerror', error => errors.push(error.message));
|
|
page.on('console', message => { if (message.type() === 'error') errors.push(message.text()); });
|
|
try {
|
|
for (const custom of [false, true]) {
|
|
await page.goto(`http://127.0.0.1:6032/plain-p11/index.html${custom ? '?theme=1' : ''}`);
|
|
await page.locator('.hm-orgchart-employee').first().waitFor();
|
|
await page.waitForFunction(() => [...document.querySelector('.hm-orgchart-host').shadowRoot.querySelectorAll('link')].every(link => link.sheet));
|
|
for (const [id, color] of Object.entries(custom ? { hanmac: 'rgb(36, 87, 167)', saman: 'rgb(56, 92, 168)' } : { hanmac: 'rgb(203, 46, 40)', saman: 'rgb(240, 131, 0)' })) {
|
|
assert.equal(await page.locator(`.node[data-company-id="${id}"] .hm-orgchart-organization-name`).first().evaluate(el => getComputedStyle(el).backgroundColor), color);
|
|
checks.push({ name: `${custom ? 'external' : 'default'} ${id}`, status: 'PASS' });
|
|
}
|
|
if (custom) {
|
|
await page.locator('.hm-orgchart-employee').first().click();
|
|
await page.locator('.hm-orgchart-employee-dialog[open]').waitFor();
|
|
assert.equal(await page.locator('.hm-orgchart-employee-dialog').evaluate(el => getComputedStyle(el).backgroundColor), 'rgb(238, 242, 255)');
|
|
checks.push({ name: 'plain HTTP @import and native popup', status: 'PASS' });
|
|
}
|
|
}
|
|
const viewport = await page.evaluate(() => {
|
|
window.chart.fitToView(); const fit = window.chart.getViewportState();
|
|
window.chart.zoomTo(Math.min(1, fit.scale * 1.3)); const zoom = window.chart.getViewportState();
|
|
window.chart.panBy(30, 20); const pan = window.chart.getViewportState();
|
|
window.chart.fitToView(); const restored = window.chart.getViewportState();
|
|
return { fit, zoom, pan, restored };
|
|
});
|
|
assert.notEqual(viewport.fit.scale, viewport.zoom.scale);
|
|
assert.equal(viewport.pan.x - viewport.zoom.x, 30);
|
|
assert.equal(viewport.pan.y - viewport.zoom.y, 20);
|
|
assert.ok(['scale', 'x', 'y'].every(key => Math.abs(viewport.restored[key] - viewport.fit[key]) < 0.01));
|
|
checks.push({ name: 'public zoomTo / panBy / fitToView', status: 'PASS' });
|
|
await page.evaluate(() => window.chart.destroy());
|
|
assert.equal(await page.locator('.hm-orgchart-host').count(), 0);
|
|
checks.push({ name: 'public destroy cleanup', status: 'PASS' });
|
|
assert.ok(requests.every(url => !/react|node_modules/.test(new URL(url).pathname)));
|
|
assert.deepEqual(errors, []);
|
|
checks.push({ name: 'Core ESM runs without React or bundler requests', status: 'PASS' });
|
|
} finally {
|
|
await fs.writeFile(path.join(output, 'standalone-vanilla-result.json'), JSON.stringify({ checks, requests, errors }, null, 2));
|
|
await browser.close();
|
|
}
|
|
console.log(`Standalone Vanilla: ${checks.length} checks, ${errors.length} errors`);
|