3.4Dynamic Viewport Resizing Test

Test that layouts remain stable during continuous resizing (important for foldable devices and desktop window resizing):

// tests/responsive/layout-stability.spec.ts
import { test, expect } from '@playwright/test';

test('layout remains stable during viewport resize', async ({ page }) => {
    await page.goto('/dashboard');

    const widths = [320, 375, 414, 768, 1024, 1280, 1440, 1920];

    for (const width of widths) {
        await page.setViewportSize({ width, height: 800 });
        // Wait for CSS transitions to complete
        await page.waitForTimeout(300);

        // Verify no horizontal overflow (no horizontal scrollbar)
        const bodyWidth = await page.evaluate(() => document.body.scrollWidth);
        const viewportWidth = await page.evaluate(() => window.innerWidth);
        expect(bodyWidth).toBeLessThanOrEqual(viewportWidth + 1); // +1 for rounding

        // Verify primary content is visible
        await expect(page.locator('[data-testid="main-content"]')).toBeVisible();

        // Verify no text truncation on critical elements
        const heading = page.locator('h1').first();
        const box = await heading.boundingBox();
        if (box) {
            expect(box.width).toBeGreaterThan(50); // Not crushed to nothing
        }
    }
});

test('navigation adapts between mobile and desktop', async ({ page }) => {
    await page.goto('/');

    // Desktop: full nav visible
    await page.setViewportSize({ width: 1440, height: 900 });
    await expect(page.locator('[data-testid="desktop-nav"]')).toBeVisible();
    await expect(page.locator('[data-testid="mobile-menu-btn"]')).not.toBeVisible();

    // Mobile: hamburger menu visible
    await page.setViewportSize({ width: 375, height: 812 });
    await page.waitForTimeout(300);
    await expect(page.locator('[data-testid="mobile-menu-btn"]')).toBeVisible();
    await expect(page.locator('[data-testid="desktop-nav"]')).not.toBeVisible();

    // Open mobile menu
    await page.click('[data-testid="mobile-menu-btn"]');
    await expect(page.locator('[data-testid="mobile-drawer"]')).toBeVisible();

    // Verify all navigation items are present in mobile menu
    const mobileLinks = await page.locator('[data-testid="mobile-drawer"] a').allTextContents();
    expect(mobileLinks).toContain('Home');
    expect(mobileLinks).toContain('Products');
    expect(mobileLinks).toContain('Cart');
    expect(mobileLinks).toContain('Account');
});