44 lines
1.9 KiB
JavaScript
44 lines
1.9 KiB
JavaScript
|
import { test, expect } from '@playwright/test';
|
||
|
|
|
||
|
|
test('modular unit tests and benchmark', async ({ page }) => {
|
||
|
|
page.on('console', msg => console.log('BROWSER LOG:', msg.text()));
|
||
|
|
await page.goto('http://localhost:8081/test/index.html');
|
||
|
|
|
||
|
|
// Wait for testStatus to be set
|
||
|
|
await page.waitForFunction(() => window.testStatus !== undefined, { timeout: 10000 });
|
||
|
|
|
||
|
|
const status = await page.evaluate(() => window.testStatus);
|
||
|
|
expect(status).toBe('passed');
|
||
|
|
|
||
|
|
// Benchmark: Large list rendering
|
||
|
|
const renderTime = await page.evaluate(async () => {
|
||
|
|
const start = performance.now();
|
||
|
|
document.body.innerHTML = `
|
||
|
|
<ul id="bench-list">
|
||
|
|
<template $each="state.benchItems" as="item">
|
||
|
|
<li $text="item.val"></li>
|
||
|
|
</template>
|
||
|
|
</ul>
|
||
|
|
`;
|
||
|
|
const items = [];
|
||
|
|
for(let i=0; i<1000; i++) items.push({val: 'item ' + i});
|
||
|
|
window.state.benchItems = items;
|
||
|
|
const { RefreshState } = await import('@web/state');
|
||
|
|
RefreshState(document.documentElement);
|
||
|
|
return performance.now() - start;
|
||
|
|
});
|
||
|
|
console.log(`BENCHMARK: 1000 items initial render: ${renderTime.toFixed(2)}ms`);
|
||
|
|
|
||
|
|
// Benchmark: Large list update
|
||
|
|
const updateTime = await page.evaluate(async () => {
|
||
|
|
const start = performance.now();
|
||
|
|
window.state.benchItems[0].val = 'updated';
|
||
|
|
// Note: Shallow proxy requires reassignment or internal trigger if we modified a deep property.
|
||
|
|
// But here we modify benchItems[0], which is an object inside the array.
|
||
|
|
// Our current observer.js might not catch this if it's benchItems[0] = ...
|
||
|
|
window.state.benchItems = [...window.state.benchItems];
|
||
|
|
return performance.now() - start;
|
||
|
|
});
|
||
|
|
console.log(`BENCHMARK: 1000 items update (shallow): ${updateTime.toFixed(2)}ms`);
|
||
|
|
});
|