Testing Responsive

// Only tested in Chrome DevTools device mode
// "Looks good at iPhone 14 Pro dimensions"

// Issues missed:
// - Touch interactions (hover states)
// - Safe area insets (notch)
// - Mobile browser chrome (URL bar height)
// - Virtual keyboard behavior
// - Scroll performance

// Multi-layer testing strategy:
// 1. Chrome DevTools for quick iteration
// 2. Responsive viewer for side-by-side comparison
// 3. BrowserStack/real devices for:
//    - Touch interaction testing
//    - Safari-specific CSS bugs
//    - Virtual keyboard behavior
//    - Performance on low-end devices
//    - Safe area inset verification

// Manual testing workflow:
// 1. Open site in browser
// 2. Drag browser window to different widths
// 3. Try to remember what it looked like
//    at other sizes
// 4. Repeat for each change

// Responsive viewer workflow:
// 1. Open site in responsive viewer
// 2. Add target devices: iPhone SE, iPad, Desktop
// 3. See all viewports simultaneously
// 4. Scroll sync shows alignment issues
// 5. Test URL changes across all devices
// 6. Iterate with instant visual feedback

test("shows mobile layout", async ({ page }) => {
  await page.goto("/dashboard");

  const sidebar = page.locator(".sidebar");
  // This passes because sidebar exists in DOM
  // even when hidden with CSS display: none
  await expect(sidebar).toBeAttached();
});

test("shows mobile layout", async ({ page }) => {
  await page.setViewportSize({
    width: 375,
    height: 667,
  });
  await page.goto("/dashboard");

  const sidebar = page.locator(".sidebar");
  await expect(sidebar).not.toBeVisible();

  const hamburger = page.locator("[aria-label='Menu']");
  await expect(hamburger).toBeVisible();

  await hamburger.click();
  await expect(sidebar).toBeVisible();
});

// Only test at one viewport width
test("homepage looks correct", async ({ page }) => {
  await page.goto("/");
  await expect(page).toHaveScreenshot("home.png");
});

const viewports = [
  { width: 375, height: 667, name: "mobile" },
  { width: 768, height: 1024, name: "tablet" },
  { width: 1440, height: 900, name: "desktop" },
];

for (const vp of viewports) {
  test(`homepage - ${vp.name}`, async ({ page }) => {
    await page.setViewportSize({
      width: vp.width,
      height: vp.height,
    });
    await page.goto("/");
    await expect(page).toHaveScreenshot(
      `home-${vp.name}.png`,
    );
  });
}

test("sidebar is responsive", async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto("/app");

  const sidebar = page.locator(".sidebar");
  const box = await sidebar.boundingBox();

  // Brittle: exact pixel assertions
  expect(box?.width).toBe(0);
  expect(box?.height).toBe(0);
});

test("sidebar is responsive", async ({ page }) => {
  // Mobile: sidebar hidden, hamburger visible
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto("/app");
  await expect(page.getByRole("complementary")).not.toBeVisible();
  await expect(page.getByRole("button", { name: /menu/i })).toBeVisible();

  // Desktop: sidebar visible, no hamburger
  await page.setViewportSize({ width: 1280, height: 800 });
  await expect(page.getByRole("complementary")).toBeVisible();
  await expect(page.getByRole("button", { name: /menu/i })).not.toBeVisible();
});