114 lines
4.3 KiB
HTML
114 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Chart.js ESM Tests</title>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"@apigo.cc/chart": "../src/index.js"
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.chart-container {
|
|
width: 400px;
|
|
height: 400px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="results">Running tests...</div>
|
|
<div class="chart-container">
|
|
<canvas id="testChart"></canvas>
|
|
</div>
|
|
<hr>
|
|
<h3>Component Test</h3>
|
|
<div id="componentTestContainer" class="chart-container">
|
|
<!-- Will inject component here -->
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { DataChart } from '@apigo.cc/chart';
|
|
|
|
// Mock globalThis.Component and globalThis.Util for testing if not present
|
|
if (!globalThis.Component) {
|
|
globalThis.Component = {
|
|
register: (name, setup, tpl) => {
|
|
globalThis._registeredComponents = globalThis._registeredComponents || {};
|
|
globalThis._registeredComponents[name] = { setup, tpl };
|
|
}
|
|
};
|
|
globalThis.Util = {
|
|
makeDom: (html) => {
|
|
const template = document.createElement('template');
|
|
template.innerHTML = html;
|
|
return template.content.firstChild;
|
|
}
|
|
};
|
|
}
|
|
|
|
async function runTests() {
|
|
const results = document.getElementById('results');
|
|
try {
|
|
const t0 = performance.now();
|
|
// ... (existing JS API tests)
|
|
const canvas = document.getElementById('testChart');
|
|
const dc = new DataChart(canvas, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['Jan', 'Feb', 'Mar'],
|
|
datasets: [{
|
|
label: 'Test Data',
|
|
data: [10, 20, 30]
|
|
}]
|
|
}
|
|
});
|
|
|
|
if (!dc.chart) throw new Error('Chart instance not created');
|
|
|
|
// Test mapping feature
|
|
const mappedCanvas = document.createElement('canvas');
|
|
document.body.appendChild(mappedCanvas);
|
|
const dcMapped = new DataChart(mappedCanvas, {
|
|
type: 'bar',
|
|
map: { labels: 'name', values: 'score', label: 'Scores' },
|
|
data: [
|
|
{ name: 'Alice', score: 85 },
|
|
{ name: 'Bob', score: 92 }
|
|
]
|
|
});
|
|
|
|
if (dcMapped.chart.data.labels[0] !== 'Alice') throw new Error('Mapping failed: labels');
|
|
|
|
// Test Component Registration
|
|
if (!globalThis._registeredComponents || !globalThis._registeredComponents['DataChart']) {
|
|
throw new Error('DataChart component not registered');
|
|
}
|
|
|
|
// Manually trigger component setup for verification
|
|
const compContainer = document.getElementById('componentTestContainer');
|
|
const compEl = document.createElement('DataChart');
|
|
compEl.state = {
|
|
__watch: (p, cb) => { compEl._watchers = compEl._watchers || {}; compEl._watchers[p] = cb; },
|
|
data: [{ x: 1, y: 10 }, { x: 2, y: 20 }]
|
|
};
|
|
compEl.appendChild(globalThis._registeredComponents['DataChart'].tpl.cloneNode(true));
|
|
compContainer.appendChild(compEl);
|
|
globalThis._registeredComponents['DataChart'].setup(compEl);
|
|
|
|
if (!compEl.chartInstance) throw new Error('Component failed to initialize chartInstance');
|
|
|
|
window.renderTime = performance.now() - t0;
|
|
results.innerHTML = '<h1 style="color: green">All Tests Passed 🎉</h1>';
|
|
window.testStatus = 'passed';
|
|
} catch (e) {
|
|
console.error(e);
|
|
results.innerHTML = '<h1 style="color: red">Tests Failed: ' + e.message + '</h1>';
|
|
window.testStatus = 'failed';
|
|
}
|
|
}
|
|
runTests();
|
|
</script>
|
|
</body>
|
|
</html>
|