Testing System Architecture

Note: Python files (*.py) do not yet have a dedicated specialist agent. The orchestrator will route to a general-purpose agent for Python test generation.

// Watch for skeleton flash during cached navigation
await assertNeverAppears(
  page,
  '[data-testid="skeleton"]',
  async () => {
    await page.click('[data-testid="cached-link"]');
    await page.waitForSelector('[data-testid="content"]');
  },
  { checkInterval: 16 } // Check every frame (~60fps)
);

// Ensure error toast doesn't flash during successful submit
await assertNeverAppears(
  page,
  '[data-testid="error-toast"]',
  async () => {
    await page.click('[data-testid="submit-button"]');
    await page.waitForSelector('[data-testid="success-message"]');
  }
);

// Dashboard must load within 2 seconds
await withPerformanceBudget(
  page,
  { timeout: 2000 },
  async () => {
    await page.goto('/dashboard');
    await page.waitForSelector('[data-testid="dashboard-loaded"]');
  }
);

// Search should respond within 500ms with reasonable memory
await withPerformanceBudget(
  page,
  { timeout: 500, maxHeapUsage: 50 * 1024 * 1024 }, // 50MB
  async () => {
    await page.fill('[data-testid="search"]', 'query');
    await page.waitForSelector('[data-testid="results"]');
  }
);

// Verify ad loading doesn't shift article content
await assertNoLayoutShift(
  page,
  ['article', '.sidebar', '.cta-button'], // Elements to track
  async () => {
    // Wait for lazy-loaded ad to appear
    await page.waitForSelector('[data-testid="ad-loaded"]');
  }
);

// Ensure image loading doesn't shift text below
await assertNoLayoutShift(
  page,
  ['.hero-text', '.nav-button'],
  async () => {
    await page.waitForSelector('img[data-loaded="true"]');
  },
  { tolerance: 2 } // Allow 2px variance for subpixel rendering
);

// Price shouldn't flicker between different values
await assertStableRender(
  page,
  '[data-testid="price"]',
  { duration: 1000 } // Watch for 1 second
);

// Dashboard metrics should stabilize after load
await page.waitForSelector('[data-testid="dashboard-ready"]');
await assertStableRender(
  page,
  '[data-testid="total-revenue"]',
  { 
    duration: 500,
    allowedChanges: 1 // Allow one update, then must stabilize
  }
);

// Measure CLS during full page lifecycle
const cls = await measureCLS(page, async () => {
  await page.goto('/article');
  await page.waitForLoadState('networkidle');
  // Wait for all lazy content
  await page.waitForTimeout(2000);
});

// Google's "Good" threshold is < 0.1
expect(cls).toBeLessThan(0.1);

// For stricter pages, use tighter threshold
const checkoutCLS = await measureCLS(page, async () => {
  await page.goto('/checkout');
  await page.waitForSelector('[data-testid="checkout-ready"]');
});
expect(checkoutCLS).toBeLessThan(0.05);

// Once saved, the button shouldn't revert to "saving..."
await assertStateStability(
  page,
  '[data-testid="save-button"]',
  {
    desiredState: { text: 'Saved' },
    forbiddenStates: [{ text: 'Saving...' }, { text: 'Save' }],
    duration: 2000
  }
);

// Verify successful state persists after form submit
await page.click('[data-testid="submit"]');
await assertStateStability(
  page,
  '[data-testid="status"]',
  {
    desiredState: { attribute: 'data-status', value: 'success' },
    forbiddenStates: [
      { attribute: 'data-status', value: 'loading' },
      { attribute: 'data-status', value: 'error' }
    ],
    duration: 3000
  }
);

// Loading and content should never appear together
await expectMutualExclusivity(
  page,
  ['[data-testid="loading"]', '[data-testid="content"]'],
  async () => {
    await page.goto('/dashboard');
    await page.waitForSelector('[data-testid="content"]');
  }
);

// Success and error toasts are mutually exclusive
await expectMutualExclusivity(
  page,
  [
    '[data-testid="success-toast"]',
    '[data-testid="error-toast"]',
    '[data-testid="warning-toast"]'
  ],
  async () => {
    await page.click('[data-testid="submit"]');
    await page.waitForSelector('[data-testid*="toast"]');
  }
);

test('saving profile updates persists', async ({ page }) => {
  // Setup: Navigate to the profile page
  await page.goto('/profile');
  await page.waitForSelector('[name="bio"]');

  // === Stage 1: Immediate State ===
  // Assert right after the action
  await page.fill('[name="bio"]', 'New bio text');
  await page.click('button:text("Save")');
  
  // Verify the button shows loading state immediately
  await expect(page.locator('button:text("Save")'))
    .toHaveAttribute('aria-busy', 'true');
  
  // Verify optimistic update appears in form
  await expect(page.locator('[name="bio"]'))
    .toHaveValue('New bio text');

  // === Stage 2: Stable State ===
  // Assert after async operations settle
  await expect(page.locator('[role="alert"]'))
    .toHaveText('Profile saved');
  
  await expect(page.locator('button:text("Save")'))
    .not.toHaveAttribute('aria-busy', 'true');
  
  // Verify the form still shows the correct value
  await expect(page.locator('[name="bio"]'))
    .toHaveValue('New bio text');

  // === Stage 3: Persistence ===
  // Assert after page reload or re-fetch
  await page.reload();
  await page.waitForSelector('[name="bio"]');
  
  // Verify the saved data survived the refresh
  await expect(page.locator('[name="bio"]'))
    .toHaveValue('New bio text');
});

test('deleting an item removes it permanently', async ({ page }) => {
  // Stage 1: Immediate - item starts fading/strikethrough
  await page.click('[data-testid="delete-item-1"]');
  await expect(page.locator('[data-testid="item-1"]'))
    .toHaveClass(/deleting/);

  // Stage 2: Stable - item is removed from list
  await expect(page.locator('[data-testid="item-1"]'))
    .not.toBeVisible();
  await expect(page.locator('[data-testid="toast"]'))
    .toHaveText('Item deleted');

  // Stage 3: Persistence - item stays gone after reload
  await page.reload();
  await expect(page.locator('[data-testid="item-1"]'))
    .not.toBeVisible();
});

test('creating a task adds it to the list', async ({ page }) => {
  // Stage 1: Immediate - new task appears optimistically
  await page.fill('[data-testid="new-task"]', 'Buy groceries');
  await page.click('[data-testid="add-task"]');
  await expect(page.locator('text=Buy groceries')).toBeVisible();
  await expect(page.locator('[data-testid="add-task"]'))
    .toBeDisabled(); // Prevent double-submit

  // Stage 2: Stable - task gets permanent ID, button re-enabled
  await expect(page.locator('[data-testid="add-task"]'))
    .toBeEnabled();
  const task = page.locator('text=Buy groceries');
  await expect(task).toHaveAttribute('data-id', /.+/); // Has server ID

  // Stage 3: Persistence - task survives page refresh
  await page.reload();
  await expect(page.locator('text=Buy groceries')).toBeVisible();
});