pcbjam/tests/e2e/tree.spec.ts

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

test.describe('wxTreeCtrl Tests', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/standalone/tree/tree_test.html');
    // Wait for app to initialize
    await page.waitForFunction(() => {
      return document.querySelector('canvas') !== null;
    }, { timeout: 30000 });
    await page.waitForTimeout(1000);
  });

  test('Tree test app loads successfully', async ({ page }) => {
    const consoleLogs: string[] = [];
    const pageErrors: string[] = [];

    page.on('console', msg => {
      if (msg.text().includes('[TREE_')) {
        consoleLogs.push(msg.text());
      }
    });
    page.on('pageerror', err => pageErrors.push(err.message));

    await page.waitForTimeout(500);

    const hasStartupLog = consoleLogs.some(log =>
      log.includes('TREE_TEST') && log.includes('started successfully')
    );

    console.log('Tree app loaded:', hasStartupLog);
    console.log('Tree app logs:', consoleLogs);
    console.log('Tree app errors:', pageErrors);

    await page.screenshot({ path: 'test-results/tree-01-loaded.png' });

    expect(pageErrors.length).toBe(0);
  });

  test('Tree is populated with KiCad-like hierarchy', async ({ page }) => {
    const consoleLogs: string[] = [];
    page.on('console', msg => {
      if (msg.text().includes('[TREE_EVENT]')) {
        consoleLogs.push(msg.text());
      }
    });

    await page.waitForTimeout(500);

    const hasPopulatedLog = consoleLogs.some(log =>
      log.includes('Tree populated with KiCad-like hierarchy')
    );

    console.log('Tree hierarchy logs:', consoleLogs);
    await page.screenshot({ path: 'test-results/tree-02-hierarchy.png' });

    expect(hasPopulatedLog).toBe(true);
  });

  test('Tree item can be selected', async ({ page }) => {
    const consoleLogs: string[] = [];
    page.on('console', msg => {
      if (msg.text().includes('[TREE_EVENT]')) {
        consoleLogs.push(msg.text());
      }
    });

    await page.waitForTimeout(500);

    const canvas = page.locator('canvas');

    // Click on a tree item (approximate position)
    await canvas.click({ position: { x: 100, y: 180 } });
    await page.waitForTimeout(300);

    console.log('Selection logs:', consoleLogs);
    await page.screenshot({ path: 'test-results/tree-03-selected.png' });

    const hasSelectionEvent = consoleLogs.some(log =>
      log.includes('Selection changed')
    );
    console.log('Has selection event:', hasSelectionEvent);
  });

  test('Expand All button works', async ({ page }) => {
    const consoleLogs: string[] = [];
    page.on('console', msg => {
      if (msg.text().includes('[TREE_EVENT]')) {
        consoleLogs.push(msg.text());
      }
    });

    await page.waitForTimeout(500);

    const canvas = page.locator('canvas');

    // Click Expand All button
    await canvas.click({ position: { x: 80, y: 95 } });
    await page.waitForTimeout(500);

    console.log('Expand all logs:', consoleLogs);
    await page.screenshot({ path: 'test-results/tree-04-expanded.png' });

    const hasExpandEvent = consoleLogs.some(log =>
      log.includes('All items expanded')
    );
    expect(hasExpandEvent).toBe(true);
  });

  test('Collapse All button works', async ({ page }) => {
    const consoleLogs: string[] = [];
    page.on('console', msg => {
      if (msg.text().includes('[TREE_EVENT]')) {
        consoleLogs.push(msg.text());
      }
    });

    await page.waitForTimeout(500);

    const canvas = page.locator('canvas');

    // Click Collapse All button
    await canvas.click({ position: { x: 200, y: 95 } });
    await page.waitForTimeout(500);

    console.log('Collapse all logs:', consoleLogs);
    await page.screenshot({ path: 'test-results/tree-05-collapsed.png' });

    const hasCollapseEvent = consoleLogs.some(log =>
      log.includes('All items collapsed')
    );
    expect(hasCollapseEvent).toBe(true);
  });

  test('Add Item button works with selection', async ({ page }) => {
    const consoleLogs: string[] = [];
    page.on('console', msg => {
      if (msg.text().includes('[TREE_EVENT]')) {
        consoleLogs.push(msg.text());
      }
    });

    await page.waitForTimeout(500);

    const canvas = page.locator('canvas');

    // First select an item
    await canvas.click({ position: { x: 100, y: 160 } });
    await page.waitForTimeout(300);

    // Click Add Item button
    await canvas.click({ position: { x: 310, y: 95 } });
    await page.waitForTimeout(500);

    console.log('Add item logs:', consoleLogs);
    await page.screenshot({ path: 'test-results/tree-06-added.png' });

    const hasAddEvent = consoleLogs.some(log =>
      log.includes('Added new item') || log.includes('No item selected')
    );
    expect(hasAddEvent).toBe(true);
  });

  test('Delete Item button works with selection', async ({ page }) => {
    const consoleLogs: string[] = [];
    page.on('console', msg => {
      if (msg.text().includes('[TREE_EVENT]')) {
        consoleLogs.push(msg.text());
      }
    });

    await page.waitForTimeout(500);

    const canvas = page.locator('canvas');

    // First select an item (not root)
    await canvas.click({ position: { x: 150, y: 200 } });
    await page.waitForTimeout(300);

    // Click Delete Selected button
    await canvas.click({ position: { x: 440, y: 95 } });
    await page.waitForTimeout(500);

    console.log('Delete item logs:', consoleLogs);
    await page.screenshot({ path: 'test-results/tree-07-deleted.png' });

    const hasDeleteEvent = consoleLogs.some(log =>
      log.includes('Deleted item') || log.includes('Cannot delete')
    );
    expect(hasDeleteEvent).toBe(true);
  });
});