mockupAWS/frontend/e2e-v100/specs/comparison.spec.ts

import { test, expect } from '../fixtures';

/**
 * Scenario Comparison Tests
 * Covers: Multi-scenario comparison, cost analysis, chart visualization
 * Target: 100% coverage on critical paths
 */

test.describe('Scenario Comparison @comparison @critical', () => {
  
  test('should compare two scenarios', async ({ authenticatedPage, testData }) => {
    // Create two scenarios with different metrics
    const scenario1 = await testData.createScenario({
      name: 'Scenario A - High Traffic',
      region: 'us-east-1',
      tags: ['comparison-test'],
    });
    
    const scenario2 = await testData.createScenario({
      name: 'Scenario B - Low Traffic',
      region: 'eu-west-1',
      tags: ['comparison-test'],
    });
    
    // Add different amounts of data
    await testData.addScenarioLogs(scenario1.id, 100);
    await testData.addScenarioLogs(scenario2.id, 50);
    
    // Navigate to comparison
    await authenticatedPage.goto('/compare');
    
    // Select scenarios
    await authenticatedPage.click(`[data-testid="select-scenario-${scenario1.id}"]`);
    await authenticatedPage.click(`[data-testid="select-scenario-${scenario2.id}"]`);
    
    // Click compare
    await authenticatedPage.click('[data-testid="compare-button"]');
    
    // Verify comparison view
    await authenticatedPage.waitForURL(/\/compare\?scenarios=/);
    await expect(authenticatedPage.locator('[data-testid="comparison-view"]')).toBeVisible();
    await expect(authenticatedPage.locator(`[data-testid="scenario-card-${scenario1.id}"]`)).toBeVisible();
    await expect(authenticatedPage.locator(`[data-testid="scenario-card-${scenario2.id}"]`)).toBeVisible();
  });

  test('should display cost delta between scenarios', async ({ authenticatedPage, testData }) => {
    const scenario1 = await testData.createScenario({
      name: 'Expensive Scenario',
      region: 'us-east-1',
      tags: [],
    });
    
    const scenario2 = await testData.createScenario({
      name: 'Cheaper Scenario',
      region: 'eu-west-1',
      tags: [],
    });
    
    // Add cost data
    await testData.addScenarioMetrics(scenario1.id, { cost: 100.50 });
    await testData.addScenarioMetrics(scenario2.id, { cost: 50.25 });
    
    await authenticatedPage.goto(`/compare?scenarios=${scenario1.id},${scenario2.id}`);
    
    // Check cost delta
    await expect(authenticatedPage.locator('[data-testid="cost-delta"]')).toBeVisible();
    await expect(authenticatedPage.locator('[data-testid="cost-delta-value"]')).toContainText('+$50.25');
    await expect(authenticatedPage.locator('[data-testid="cost-delta-percentage"]')).toContainText('+100%');
  });

  test('should display side-by-side metrics', async ({ authenticatedPage, testData }) => {
    const scenarios = await Promise.all([
      testData.createScenario({ name: 'Metric Test 1', region: 'us-east-1', tags: [] }),
      testData.createScenario({ name: 'Metric Test 2', region: 'us-east-1', tags: [] }),
    ]);
    
    await testData.addScenarioMetrics(scenarios[0].id, {
      totalRequests: 1000,
      sqsMessages: 500,
      lambdaInvocations: 300,
    });
    
    await testData.addScenarioMetrics(scenarios[1].id, {
      totalRequests: 800,
      sqsMessages: 400,
      lambdaInvocations: 250,
    });
    
    await authenticatedPage.goto(`/compare?scenarios=${scenarios[0].id},${scenarios[1].id}`);
    
    // Verify metrics table
    await expect(authenticatedPage.locator('[data-testid="metrics-comparison-table"]')).toBeVisible();
    await expect(authenticatedPage.locator('[data-testid="metric-totalRequests"]')).toBeVisible();
    await expect(authenticatedPage.locator('[data-testid="metric-sqsMessages"]')).toBeVisible();
  });

  test('should display comparison charts', async ({ authenticatedPage, testData }) => {
    const scenarios = await Promise.all([
      testData.createScenario({ name: 'Chart Test 1', region: 'us-east-1', tags: [] }),
      testData.createScenario({ name: 'Chart Test 2', region: 'us-east-1', tags: [] }),
    ]);
    
    await authenticatedPage.goto(`/compare?scenarios=${scenarios[0].id},${scenarios[1].id}`);
    
    // Check all chart types
    await expect(authenticatedPage.locator('[data-testid="cost-comparison-chart"]')).toBeVisible();
    await expect(authenticatedPage.locator('[data-testid="requests-comparison-chart"]')).toBeVisible();
    await expect(authenticatedPage.locator('[data-testid="breakdown-comparison-chart"]')).toBeVisible();
  });

  test('should export comparison report', async ({ authenticatedPage, testData }) => {
    const scenarios = await Promise.all([
      testData.createScenario({ name: 'Export 1', region: 'us-east-1', tags: [] }),
      testData.createScenario({ name: 'Export 2', region: 'us-east-1', tags: [] }),
    ]);
    
    await authenticatedPage.goto(`/compare?scenarios=${scenarios[0].id},${scenarios[1].id}`);
    
    await authenticatedPage.click('[data-testid="export-comparison-button"]');
    
    const [download] = await Promise.all([
      authenticatedPage.waitForEvent('download'),
      authenticatedPage.click('[data-testid="export-pdf-button"]'),
    ]);
    
    expect(download.suggestedFilename()).toMatch(/comparison.*\.pdf$/i);
  });

  test('should share comparison via URL', async ({ authenticatedPage, testData }) => {
    const scenarios = await Promise.all([
      testData.createScenario({ name: 'Share 1', region: 'us-east-1', tags: [] }),
      testData.createScenario({ name: 'Share 2', region: 'us-east-1', tags: [] }),
    ]);
    
    await authenticatedPage.goto(`/compare?scenarios=${scenarios[0].id},${scenarios[1].id}`);
    
    await authenticatedPage.click('[data-testid="share-comparison-button"]');
    
    // Check URL is copied
    await expect(authenticatedPage.locator('[data-testid="share-url-copied"]')).toBeVisible();
    
    // Verify URL contains scenario IDs
    const url = authenticatedPage.url();
    expect(url).toContain(scenarios[0].id);
    expect(url).toContain(scenarios[1].id);
  });
});

test.describe('Multi-Scenario Comparison @comparison', () => {
  
  test('should compare up to 4 scenarios', async ({ authenticatedPage, testData }) => {
    // Create 4 scenarios
    const scenarios = await Promise.all([
      testData.createScenario({ name: 'Multi 1', region: 'us-east-1', tags: [] }),
      testData.createScenario({ name: 'Multi 2', region: 'eu-west-1', tags: [] }),
      testData.createScenario({ name: 'Multi 3', region: 'ap-south-1', tags: [] }),
      testData.createScenario({ name: 'Multi 4', region: 'us-west-2', tags: [] }),
    ]);
    
    await authenticatedPage.goto('/compare');
    
    // Select all 4
    for (const scenario of scenarios) {
      await authenticatedPage.click(`[data-testid="select-scenario-${scenario.id}"]`);
    }
    
    await authenticatedPage.click('[data-testid="compare-button"]');
    
    // Verify all 4 are displayed
    await expect(authenticatedPage.locator('[data-testid="scenario-card"]')).toHaveCount(4);
  });

  test('should prevent selecting more than 4 scenarios', async ({ authenticatedPage, testData }) => {
    // Create 5 scenarios
    const scenarios = await Promise.all(
      Array(5).fill(null).map((_, i) => 
        testData.createScenario({ name: `Limit ${i}`, region: 'us-east-1', tags: [] })
      )
    );
    
    await authenticatedPage.goto('/compare');
    
    // Select 4
    for (let i = 0; i < 4; i++) {
      await authenticatedPage.click(`[data-testid="select-scenario-${scenarios[i].id}"]`);
    }
    
    // Try to select 5th
    await authenticatedPage.click(`[data-testid="select-scenario-${scenarios[4].id}"]`);
    
    // Check warning
    await expect(authenticatedPage.locator('[data-testid="max-selection-warning"]')).toBeVisible();
    await expect(authenticatedPage.locator('[data-testid="max-selection-warning"]')).toContainText('maximum of 4');
  });
});

test.describe('Comparison Filters @comparison', () => {
  
  test('should filter comparison by metric type', async ({ authenticatedPage, testData }) => {
    const scenarios = await Promise.all([
      testData.createScenario({ name: 'Filter 1', region: 'us-east-1', tags: [] }),
      testData.createScenario({ name: 'Filter 2', region: 'us-east-1', tags: [] }),
    ]);
    
    await authenticatedPage.goto(`/compare?scenarios=${scenarios[0].id},${scenarios[1].id}`);
    
    // Show only cost metrics
    await authenticatedPage.click('[data-testid="filter-cost-only"]');
    await expect(authenticatedPage.locator('[data-testid="cost-metric"]')).toBeVisible();
    
    // Show all metrics
    await authenticatedPage.click('[data-testid="filter-all"]');
    await expect(authenticatedPage.locator('[data-testid="all-metrics"]')).toBeVisible();
  });

  test('should sort comparison results', async ({ authenticatedPage, testData }) => {
    const scenarios = await Promise.all([
      testData.createScenario({ name: 'Sort A', region: 'us-east-1', tags: [] }),
      testData.createScenario({ name: 'Sort B', region: 'us-east-1', tags: [] }),
    ]);
    
    await authenticatedPage.goto(`/compare?scenarios=${scenarios[0].id},${scenarios[1].id}`);
    
    await authenticatedPage.click('[data-testid="sort-by-cost"]');
    await expect(authenticatedPage.locator('[data-testid="sort-indicator-cost"]')).toBeVisible();
    
    await authenticatedPage.click('[data-testid="sort-by-requests"]');
    await expect(authenticatedPage.locator('[data-testid="sort-indicator-requests"]')).toBeVisible();
  });
});