65 lines
2.9 KiB
HTML
65 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Base.js Modular & Performance Tests</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"@web/state": "../../state/src/index.js",
|
|
"@web/base": "../src/index.js"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="d-flex flex-column vh-100">
|
|
<div id="results" class="p-2 bg-light border-bottom">Running tests...</div>
|
|
|
|
<script>
|
|
const list_data = []
|
|
for (let i = 0; i < 10000; i++) {
|
|
list_data.push({ id: i, label: `item ${i}`, index: i, group: i % 1000, summary: `item ${i} summary`, parent: Math.floor(i / 10) })
|
|
}
|
|
const group_list = []
|
|
for (let i = 0; i < 1000; i++) {
|
|
group_list.push({ id: i, label: `group ${i}`, summary: `group ${i} summary` })
|
|
}
|
|
</script>
|
|
<div class="d-flex flex-fill flex-wrap overflow-auto">
|
|
<FastList id="ll" auto-select class="p-4 h-50 w-50 d-flex flex-column gap-3 bg-body-secondary rounded" $.state.list="list_data" $onitemclick="console.log(index, item)">
|
|
<template slot="item">
|
|
<div class="d-flex justify-content-center align-items-center border border-primary rounded" $text="item.label" $.style.height="${(item.index%10)*5+40}px"></div>
|
|
</template>
|
|
</FastList>
|
|
<FastGroupedList id="gl" auto-select auto-select-group class="p-4 h-50 w-50 d-flex flex-column border border-info rounded" $.state.groups="group_list" $.state.list="list_data"
|
|
$ongroupclick="console.log(index, item)">
|
|
</FastGroupedList>
|
|
<FastTree id="tt" auto-select class="p-4 h-50 w-50 d-flex flex-column border border-info rounded" $.state.list="list_data" $onitemclick="console.log(index, item)"></FastTree>
|
|
<CollapseTree id="ct" auto-select class="p-4 h-50 w-50 d-flex flex-column border border-info rounded" $.state.list="list_data.slice(0, 1200)" $onitemclick="console.log(index, item)">
|
|
</CollapseTree>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { runTests } from './base.test.js';
|
|
|
|
async function runAll() {
|
|
const results = document.getElementById('results');
|
|
try {
|
|
// Wait for components to initialize
|
|
await new Promise(r => setTimeout(r, 500));
|
|
await runTests();
|
|
results.innerHTML = '<h1 style="color: green; font-size: 1.2rem">All Tests Passed 🎉</h1>';
|
|
window.testStatus = 'passed';
|
|
} catch (e) {
|
|
console.error(e);
|
|
results.innerHTML = '<h1 style="color: red; font-size: 1.2rem">Tests Failed: ' + e.message + '</h1>';
|
|
window.testStatus = 'failed';
|
|
}
|
|
}
|
|
runAll();
|
|
</script>
|
|
</body>
|
|
</html>
|