// @ts-check
const { test, expect } = require('@playwright/test');

test.describe('Navigation menu', () => {
    test('desktop: inline nav visible, hamburger hidden', async ({ page }) => {
        await page.goto('/');
        await expect(page.locator('#hamburger')).toBeHidden();
        await expect(page.locator('#navLinks')).toBeVisible();
        await expect(page.locator('#navLinks a')).toHaveCount(7);
    });

    test('mobile: hamburger opens and closes the menu', async ({ page }) => {
        await page.goto('/');
        await page.setViewportSize({ width: 375, height: 812 });

        await expect(page.locator('#hamburger')).toBeVisible();
        const links = page.locator('#navLinks');
        await expect(links).toBeHidden();

        await page.locator('#hamburger').click();
        await expect(page.locator('#hamburger')).toHaveClass(/active/);
        await expect(links).toHaveClass(/active/);
        await expect(links).toBeVisible();

        // clicking a link closes the menu
        await links.locator('a[href="#about"]').click();
        await expect(links).not.toHaveClass(/active/);
    });

    test('clicking outside closes an open mobile menu', async ({ page }) => {
        await page.goto('/');
        await page.setViewportSize({ width: 375, height: 812 });

        await page.locator('#hamburger').click();
        await expect(page.locator('#navLinks')).toHaveClass(/active/);

        // click a point below the open dropdown (y≈700): outside both the
        // nav and the hamburger, so the document-level click handler closes it
        await page.mouse.click(187, 700);
        await expect(page.locator('#navLinks')).not.toHaveClass(/active/);
    });
});