39 lines
4.5 KiB
JavaScript
39 lines
4.5 KiB
JavaScript
const { chromium } = require('C:/Users/ADMIN/.cache/codex-runtimes/codex-primary-runtime/dependencies/node/node_modules/playwright');
|
|
const assert=require('node:assert/strict');
|
|
(async()=>{
|
|
const browser=await chromium.launch({headless:true});
|
|
const page=await browser.newPage({viewport:{width:1200,height:900}});const errors=[];
|
|
page.on('pageerror',e=>errors.push(e.message));await page.goto('http://localhost:4319/');
|
|
await page.waitForFunction(()=>window.TestChart && document.querySelectorAll('canvas').length===10 && [...document.querySelectorAll('canvas')].every(c=>window.TestChart.getChart(c)));
|
|
const charts=await page.evaluate(()=>[...document.querySelectorAll('canvas')].map(c=>{const chart=TestChart.getChart(c);return {type:chart.config.type,width:chart.width,height:chart.height,points:chart.getDatasetMeta(0).data.length,status:c.closest('figure').querySelector('[data-chart-status]').textContent}}));
|
|
assert.equal(charts.length,10);assert(charts.every(c=>c.width>100&&c.height===260&&c.points>0&&c.status===''));
|
|
await page.screenshot({path:'output/chartjs-verify/all-chart-types.png',fullPage:true});
|
|
await page.evaluate(()=>{window.events=[];const root=document.querySelector('figure');for(const name of ['select','dataPointClick','legendToggle'])root.addEventListener(name,e=>events.push({name,index:e.detail.index,datasetIndex:e.detail.datasetIndex,hidden:e.detail.hidden}));});
|
|
const point=await page.evaluate(()=>{const c=document.querySelector('canvas'),chart=TestChart.getChart(c),p=chart.getDatasetMeta(0).data[1],r=c.getBoundingClientRect();return {x:r.x+p.x,y:r.y+p.y+5};});
|
|
await page.mouse.click(point.x,point.y);await page.waitForTimeout(100);
|
|
const legend=await page.evaluate(()=>{const c=document.querySelector('canvas'),chart=TestChart.getChart(c),p=chart.legend.legendHitBoxes[0],r=c.getBoundingClientRect();return {x:r.x+p.left+5,y:r.y+p.top+5}});
|
|
await page.mouse.click(legend.x,legend.y);await page.waitForTimeout(100);
|
|
assert.deepEqual((await page.evaluate(()=>events)).map(e=>e.name),['dataPointClick','select','legendToggle']);
|
|
await page.evaluate(()=>{const root=document.querySelector('figure'),config=JSON.parse(root.dataset.chartConfig);config.data.datasets[0].data[0]=-50;root.dataset.chartConfig=JSON.stringify(config);});
|
|
await page.waitForFunction(()=>TestChart.getChart(document.querySelector('canvas')).data.datasets[0].data[0]===-50);
|
|
await page.evaluate(()=>{const root=document.querySelector('figure'),config=JSON.parse(root.dataset.chartConfig);config.type='doughnut';root.dataset.chartConfig=JSON.stringify(config)});
|
|
await page.waitForFunction(()=>TestChart.getChart(document.querySelector('canvas')).config.type==='doughnut');
|
|
// Arc legends toggle individual slices.
|
|
await page.evaluate(()=>{const chart=TestChart.getChart(document.querySelector('canvas'));chart.options.plugins.legend.onClick({native:null},chart.legend.legendItems[0],chart.legend)});
|
|
assert.equal(await page.evaluate(()=>TestChart.getChart(document.querySelector('canvas')).getDataVisibility(0)),false);
|
|
await page.setViewportSize({width:390,height:844});await page.waitForTimeout(250);
|
|
assert(await page.evaluate(()=>[...document.querySelectorAll('canvas')].every(c=>TestChart.getChart(c).width<=350)));
|
|
await page.screenshot({path:'output/chartjs-verify/charts-mobile.png',fullPage:true});
|
|
await page.setViewportSize({width:1200,height:900});await page.waitForTimeout(250);await page.screenshot({path:'output/chartjs-verify/charts-desktop.png',fullPage:true});
|
|
await page.evaluate(()=>{window.removed=document.querySelector('canvas');removed.closest('figure').remove()});
|
|
await page.waitForFunction(()=>!TestChart.getChart(removed));
|
|
await page.evaluate(()=>{const root=document.querySelector('figure'),config=JSON.parse(root.dataset.chartConfig);config.type='invalid';root.dataset.chartConfig=JSON.stringify(config);window.badRoot=root});
|
|
await page.waitForFunction(()=>badRoot.querySelector('[data-chart-status]').textContent.includes('Unsupported chart type'));
|
|
await page.waitForTimeout(100);
|
|
await page.evaluate(()=>{const config=JSON.parse(badRoot.dataset.chartConfig);config.type='line';config.options.plugins=false;badRoot.dataset.chartConfig=JSON.stringify(config)});
|
|
await page.waitForFunction(()=>TestChart.getChart(badRoot.querySelector('canvas'))?.config.type==='line');
|
|
assert.deepEqual(errors,[]);
|
|
console.log(JSON.stringify({rendered:charts,checks:['point outputs','legend outputs','reactive data update','chart type switch','arc legend','mobile resize','destroy on removal'],errors},null,2));
|
|
await browser.close();
|
|
})().catch(e=>{console.error(e);process.exit(1)});
|