import { test, expect } from '@playwright/test';

test('Chart renders and updates correctly', async ({ page }) => {
  await page.goto('/test/index.html');
  
  // Wait for the test status to be set
  await page.waitForFunction(() => window.testStatus !== undefined, { timeout: 10000 });
  
  const status = await page.evaluate(() => window.testStatus);
  const renderTime = await page.evaluate(() => window.renderTime);
  console.log(`Measured Render Time: ${renderTime.toFixed(2)}ms`);
  expect(status).toBe('passed');

  // Verify canvas is present and has content
  const canvas = await page.locator('#testChart');
  await expect(canvas).toBeVisible();
  
  // Basic check for chart rendering - ensure it's not empty
  const isNotEmpty = await page.evaluate(() => {
    const canvas = document.getElementById('testChart');
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    return imageData.data.some(channel => channel !== 0);
  });
  expect(isNotEmpty).toBe(true);
});