leptos-shadcn-ui/tests/e2e/performance-tests/component-performance.spec.ts

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

/**
 * Component Performance Tests
 * 
 * TDD Approach: These tests define the performance requirements
 * and will guide the implementation of comprehensive performance testing.
 */

test.describe('Component Performance Tests', () => {
  let page: Page;

  test.beforeEach(async ({ page: testPage }) => {
    page = testPage;
    await page.goto('/');
    await page.waitForLoadState('networkidle');
  });

  // ===== PAGE LOAD PERFORMANCE TESTS =====
  
  test('should load within performance budget', async () => {
    const startTime = Date.now();
    
    await page.goto('/');
    await page.waitForLoadState('networkidle');
    
    const loadTime = Date.now() - startTime;
    
    // Should load within 3 seconds
    expect(loadTime).toBeLessThan(3000);
    
    // Check for performance metrics
    const performanceMetrics = await page.evaluate(() => {
      const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
      return {
        domContentLoaded: navigation.domContentLoadedEventEnd - navigation.domContentLoadedEventStart,
        loadComplete: navigation.loadEventEnd - navigation.loadEventStart,
        firstPaint: performance.getEntriesByName('first-paint')[0]?.startTime || 0,
        firstContentfulPaint: performance.getEntriesByName('first-contentful-paint')[0]?.startTime || 0
      };
    });
    
    // DOM content should be loaded within 1 second
    expect(performanceMetrics.domContentLoaded).toBeLessThan(1000);
    
    // First contentful paint should be within 1.5 seconds
    expect(performanceMetrics.firstContentfulPaint).toBeLessThan(1500);
  });

  test('should have optimal bundle size', async () => {
    // Check network requests for bundle size
    const responses = await page.evaluate(() => {
      return performance.getEntriesByType('resource')
        .filter((entry: any) => entry.name.includes('.js') || entry.name.includes('.wasm'))
        .map((entry: any) => ({
          name: entry.name,
          size: entry.transferSize || 0,
          duration: entry.duration
        }));
    });
    
    // Total JavaScript bundle should be under 500KB
    const totalJSSize = responses
      .filter(r => r.name.includes('.js'))
      .reduce((sum, r) => sum + r.size, 0);
    
    expect(totalJSSize).toBeLessThan(500 * 1024); // 500KB
    
    // WASM bundle should be under 1MB
    const totalWASMSize = responses
      .filter(r => r.name.includes('.wasm'))
      .reduce((sum, r) => sum + r.size, 0);
    
    expect(totalWASMSize).toBeLessThan(1024 * 1024); // 1MB
  });

  // ===== COMPONENT RENDER PERFORMANCE TESTS =====
  
  test('should render components within 16ms (60fps)', async () => {
    const components = [
      'button',
      'input',
      'card',
      'badge',
      'alert',
      'skeleton',
      'progress',
      'toast',
      'table',
      'calendar'
    ];
    
    for (const component of components) {
      const startTime = Date.now();
      
      // Navigate to component page
      await page.goto(`/components/${component}`);
      await page.waitForLoadState('networkidle');
      
      const renderTime = Date.now() - startTime;
      
      // Each component should render within 16ms for 60fps
      expect(renderTime).toBeLessThan(16);
    }
  });

  test('should handle rapid state changes efficiently', async () => {
    await page.goto('/components/button');
    
    const button = page.locator('[data-testid="button-performance"]');
    const startTime = Date.now();
    
    // Perform 100 rapid clicks
    for (let i = 0; i < 100; i++) {
      await button.click();
    }
    
    const totalTime = Date.now() - startTime;
    
    // 100 clicks should complete within 2 seconds
    expect(totalTime).toBeLessThan(2000);
    
    // Check that all clicks were registered
    const clickCounter = page.locator('[data-testid="click-counter"]');
    await expect(clickCounter).toHaveText('100');
  });

  test('should handle large datasets efficiently', async () => {
    await page.goto('/components/table');
    
    const table = page.locator('[data-testid="large-table"]');
    const startTime = Date.now();
    
    // Load large dataset
    await page.click('[data-testid="load-large-dataset"]');
    await page.waitForSelector('[data-testid="table-row-999"]');
    
    const loadTime = Date.now() - startTime;
    
    // Large dataset should load within 1 second
    expect(loadTime).toBeLessThan(1000);
    
    // Check that all rows are rendered
    const rows = table.locator('tbody tr');
    const rowCount = await rows.count();
    expect(rowCount).toBe(1000);
  });

  // ===== MEMORY PERFORMANCE TESTS =====
  
  test('should not have memory leaks', async () => {
    await page.goto('/components/memory-test');
    
    // Get initial memory usage
    const initialMemory = await page.evaluate(() => {
      return (performance as any).memory?.usedJSHeapSize || 0;
    });
    
    // Perform memory-intensive operations
    for (let i = 0; i < 100; i++) {
      await page.click('[data-testid="create-component"]');
      await page.click('[data-testid="destroy-component"]');
    }
    
    // Force garbage collection
    await page.evaluate(() => {
      if ((window as any).gc) {
        (window as any).gc();
      }
    });
    
    // Get final memory usage
    const finalMemory = await page.evaluate(() => {
      return (performance as any).memory?.usedJSHeapSize || 0;
    });
    
    // Memory usage should not increase significantly
    const memoryIncrease = finalMemory - initialMemory;
    expect(memoryIncrease).toBeLessThan(10 * 1024 * 1024); // 10MB
  });

  test('should handle component unmounting efficiently', async () => {
    await page.goto('/components/unmount-test');
    
    const startTime = Date.now();
    
    // Create and destroy components rapidly
    for (let i = 0; i < 50; i++) {
      await page.click('[data-testid="mount-component"]');
      await page.waitForSelector('[data-testid="mounted-component"]');
      await page.click('[data-testid="unmount-component"]');
      await page.waitForSelector('[data-testid="mounted-component"]', { state: 'hidden' });
    }
    
    const totalTime = Date.now() - startTime;
    
    // 50 mount/unmount cycles should complete within 1 second
    expect(totalTime).toBeLessThan(1000);
  });

  // ===== ANIMATION PERFORMANCE TESTS =====
  
  test('should maintain 60fps during animations', async () => {
    await page.goto('/components/animation-test');
    
    const animationElement = page.locator('[data-testid="animated-element"]');
    
    // Start animation
    await page.click('[data-testid="start-animation"]');
    
    // Measure frame rate
    const frameRates = await page.evaluate(() => {
      const frameRates: number[] = [];
      let lastTime = performance.now();
      let frameCount = 0;
      
      const measureFrame = (currentTime: number) => {
        frameCount++;
        if (currentTime - lastTime >= 1000) { // Measure for 1 second
          frameRates.push(frameCount);
          frameCount = 0;
          lastTime = currentTime;
        }
        requestAnimationFrame(measureFrame);
      };
      
      requestAnimationFrame(measureFrame);
      
      // Stop after 3 seconds
      setTimeout(() => {
        window.stopAnimation = true;
      }, 3000);
      
      return new Promise<number[]>((resolve) => {
        const checkStop = () => {
          if ((window as any).stopAnimation) {
            resolve(frameRates);
          } else {
            setTimeout(checkStop, 100);
          }
        };
        checkStop();
      });
    });
    
    // Average frame rate should be close to 60fps
    const averageFrameRate = frameRates.reduce((sum, rate) => sum + rate, 0) / frameRates.length;
    expect(averageFrameRate).toBeGreaterThan(55); // Allow some tolerance
  });

  // ===== NETWORK PERFORMANCE TESTS =====
  
  test('should handle slow network conditions gracefully', async () => {
    // Simulate slow network
    await page.route('**/*', (route) => {
      setTimeout(() => route.continue(), 100); // 100ms delay
    });
    
    const startTime = Date.now();
    
    await page.goto('/');
    await page.waitForLoadState('networkidle');
    
    const loadTime = Date.now() - startTime;
    
    // Should still load within reasonable time even with slow network
    expect(loadTime).toBeLessThan(5000);
    
    // Check that loading states are shown
    const loadingIndicator = page.locator('[data-testid="loading-indicator"]');
    await expect(loadingIndicator).toBeVisible();
  });

  test('should handle network failures gracefully', async () => {
    // Simulate network failure
    await page.route('**/api/**', (route) => {
      route.abort('failed');
    });
    
    await page.goto('/components/network-test');
    
    // Should show error state
    const errorMessage = page.locator('[data-testid="error-message"]');
    await expect(errorMessage).toBeVisible();
    
    // Should allow retry
    const retryButton = page.locator('[data-testid="retry-button"]');
    await expect(retryButton).toBeVisible();
    await expect(retryButton).toBeEnabled();
  });

  // ===== MOBILE PERFORMANCE TESTS =====
  
  test('should perform well on mobile devices', async () => {
    // Set mobile viewport
    await page.setViewportSize({ width: 375, height: 667 });
    
    const startTime = Date.now();
    
    await page.goto('/');
    await page.waitForLoadState('networkidle');
    
    const loadTime = Date.now() - startTime;
    
    // Should load within 3 seconds on mobile
    expect(loadTime).toBeLessThan(3000);
    
    // Test touch interactions
    const button = page.locator('[data-testid="mobile-button"]');
    await button.tap();
    
    const clickCounter = page.locator('[data-testid="click-counter"]');
    await expect(clickCounter).toHaveText('1');
  });

  // ===== ACCESSIBILITY PERFORMANCE TESTS =====
  
  test('should maintain performance with accessibility features', async () => {
    await page.goto('/components/accessibility-test');
    
    const startTime = Date.now();
    
    // Enable accessibility features
    await page.click('[data-testid="enable-screen-reader"]');
    await page.click('[data-testid="enable-high-contrast"]');
    await page.click('[data-testid="enable-large-text"]');
    
    const enableTime = Date.now() - startTime;
    
    // Accessibility features should enable within 100ms
    expect(enableTime).toBeLessThan(100);
    
    // Test that components still render efficiently
    const component = page.locator('[data-testid="accessible-component"]');
    await expect(component).toBeVisible();
    
    // Test keyboard navigation performance
    await component.focus();
    await page.keyboard.press('Tab');
    await page.keyboard.press('Tab');
    await page.keyboard.press('Tab');
    
    // Should not cause performance issues
    const finalTime = Date.now() - startTime;
    expect(finalTime).toBeLessThan(500);
  });

  // ===== STRESS TESTS =====
  
  test('should handle stress testing', async () => {
    await page.goto('/components/stress-test');
    
    const startTime = Date.now();
    
    // Perform stress test operations
    for (let i = 0; i < 1000; i++) {
      await page.click('[data-testid="stress-button"]');
    }
    
    const totalTime = Date.now() - startTime;
    
    // 1000 operations should complete within 5 seconds
    expect(totalTime).toBeLessThan(5000);
    
    // Check that all operations were processed
    const operationCounter = page.locator('[data-testid="operation-counter"]');
    await expect(operationCounter).toHaveText('1000');
  });

  test('should handle concurrent operations', async () => {
    await page.goto('/components/concurrent-test');
    
    const startTime = Date.now();
    
    // Start multiple concurrent operations
    const promises = [];
    for (let i = 0; i < 10; i++) {
      promises.push(page.click('[data-testid="concurrent-button"]'));
    }
    
    await Promise.all(promises);
    
    const totalTime = Date.now() - startTime;
    
    // 10 concurrent operations should complete within 1 second
    expect(totalTime).toBeLessThan(1000);
    
    // Check that all operations completed
    const concurrentCounter = page.locator('[data-testid="concurrent-counter"]');
    await expect(concurrentCounter).toHaveText('10');
  });
});