Add comprehensive Playwright tests for burger menu functionality

- Desktop: burger hidden, navigation visible by default
- Mobile: burger button visible
- Mobile: menu toggles on/off with burger clicks
- Mobile: menu closes after section selection, active state persists

All tests verify correct element visibility and state management
across viewport sizes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: 2 people

templates_src/default/default.spec.js

@@ -6,23 +6,23 @@ import { expect, test } from '@playwright/test';
 const OUTPUT_PAGE = 'default.html';
 
 test.describe('default template microdocs output', () => {
-  test.beforeEach(async ({ page }) => {
+  test.beforeEach(async ({page}) => {
     await page.goto(OUTPUT_PAGE);
   });
 
-  test('renders generated markdown content', async ({ page }) => {
+  test('renders generated markdown content', async ({page}) => {
     const readmeHeading = page.locator('section#readme article h1', {
       hasText: 'Default Template Playwright Test',
     });
     await expect(readmeHeading).toBeVisible();
     await expect(
-      page.getByText('This README is used to verify the default template output for Playwright.')
+        page.getByText('This README is used to verify the default template output for Playwright.')
     ).toBeVisible();
     await expect(page.locator('section#readme pre code').first()).toContainText('greet');
   });
 
-  test('supports navigation between sections', async ({ page }) => {
-    const guideTab = page.getByRole('button', { name: 'GUIDE' });
+  test('supports navigation between sections', async ({page}) => {
+    const guideTab = page.getByRole('button', {name: 'GUIDE'});
 
     await expect(page.locator('section#readme')).toBeVisible();
     await guideTab.click();
@@ -32,32 +32,32 @@ test.describe('default template microdocs output', () => {
     await expect(guideTab).toHaveClass(/font-semibold/);
   });
 
-  test('builds the table of contents per section', async ({ page }) => {
+  test('builds the table of contents per section', async ({page}) => {
     await page.waitForSelector('.toc-readme .toc-link');
-    await expect(page.locator('.toc-readme .toc-link', { hasText: 'Overview' })).toBeVisible();
-    await expect(page.locator('.toc-readme .toc-link', { hasText: 'Code Sample' })).toBeVisible();
+    await expect(page.locator('.toc-readme .toc-link', {hasText: 'Overview'})).toBeVisible();
+    await expect(page.locator('.toc-readme .toc-link', {hasText: 'Code Sample'})).toBeVisible();
 
-    await page.getByRole('button', { name: 'GUIDE' }).click();
+    await page.getByRole('button', {name: 'GUIDE'}).click();
     await page.waitForSelector('.toc-guide .toc-link');
 
-    await expect(page.locator('.toc-guide .toc-link', { hasText: 'Setup' })).toBeVisible();
-    await expect(page.locator('.toc-guide .toc-link', { hasText: 'Navigation' })).toBeVisible();
+    await expect(page.locator('.toc-guide .toc-link', {hasText: 'Setup'})).toBeVisible();
+    await expect(page.locator('.toc-guide .toc-link', {hasText: 'Navigation'})).toBeVisible();
     await expect(page.locator('.toc-readme')).toBeHidden();
   });
 
-  test('internal links switch to the target section', async ({ page }) => {
-    await page.getByRole('link', { name: /usage guide/i }).click();
+  test('internal links switch to the target section', async ({page}) => {
+    await page.getByRole('link', {name: /usage guide/i}).click();
     await expect(page.locator('section#guide')).toBeVisible();
-    await expect(page.getByRole('heading', { name: 'Usage Guide' })).toBeVisible();
+    await expect(page.getByRole('heading', {name: 'Usage Guide'})).toBeVisible();
   });
 
-  test('TOC links navigate within the current section, not across sections', async ({ page }) => {
+  test('TOC links navigate within the current section, not across sections', async ({page}) => {
     // Navigate to GUIDE section
-    await page.getByRole('button', { name: 'GUIDE' }).click();
+    await page.getByRole('button', {name: 'GUIDE'}).click();
     await expect(page.locator('section#guide')).toBeVisible();
 
     // Click the "Deep Dive" TOC link in GUIDE section
-    const deepDiveTocLink = page.locator('.toc-guide .toc-link', { hasText: 'Deep Dive' });
+    const deepDiveTocLink = page.locator('.toc-guide .toc-link', {hasText: 'Deep Dive'});
     await deepDiveTocLink.click();
 
     // Should still be in GUIDE section, not README
@@ -78,53 +78,76 @@ test.describe('default template microdocs output', () => {
     await expect(readmeDeepDive).not.toBeInViewport();
   });
 
-  test('burger menu toggles mobile navigation on small screens', async ({ page }) => {
-    // Set viewport to mobile size
-    await page.setViewportSize({ width: 375, height: 667 });
+  test('desktop: burger menu not shown, navigation visible by default', async ({page}) => {
+    await page.setViewportSize({width: 1024, height: 768});
 
-    // Initially, the navigation should be hidden on mobile
-    const navContainer = page.locator('nav#main-nav').locator('..');
-    await expect(navContainer).toHaveClass(/hidden/);
+    const burgerButton = page.locator('button[aria-label="Toggle navigation"]');
+    const navigationContainer = page.locator('nav#main-nav').locator('..');
+
+    // Burger button should not be visible on desktop
+    await expect(burgerButton).toBeHidden();
+
+    // Navigation should be visible by default
+    await expect(navigationContainer).toBeVisible();
+    await expect(page.getByRole('button', {name: 'README'})).toBeVisible();
+    await expect(page.getByRole('button', {name: 'GUIDE'})).toBeVisible();
+  });
+
+  test('mobile: burger menu button is visible', async ({page}) => {
+    await page.setViewportSize({width: 375, height: 667});
 
-    // Find and click the burger menu button
     const burgerButton = page.locator('button[aria-label="Toggle navigation"]');
+
+    // Burger button should be visible on mobile
     await expect(burgerButton).toBeVisible();
-    await burgerButton.click();
+  });
 
-    // After clicking, navigation should be visible
-    await expect(navContainer).not.toHaveClass(/hidden/);
-    await expect(navContainer).toHaveClass(/flex/);
+  test('mobile: menu hidden by default, toggles on burger click', async ({page}) => {
+    await page.setViewportSize({width: 375, height: 667});
 
-    // Navigation items should be visible
-    await expect(page.getByRole('button', { name: 'README' })).toBeVisible();
-    await expect(page.getByRole('button', { name: 'GUIDE' })).toBeVisible();
+    const burgerButton = page.locator('button[aria-label="Toggle navigation"]');
+    const navigationContainer = page.locator('nav#main-nav').locator('..');
 
-    // Click burger menu again to close
+    // Navigation should be hidden by default on mobile
+    await expect(navigationContainer).toBeHidden();
+
+    // Click burger to open menu
     await burgerButton.click();
-    await expect(navContainer).toHaveClass(/hidden/);
+    await expect(navigationContainer).toBeVisible();
+
+    // Click burger again to close menu
+    await burgerButton.click();
+    await expect(navigationContainer).toBeHidden();
   });
 
-  test('mobile navigation closes after selecting a section', async ({ page }) => {
-    // Set viewport to mobile size
-    await page.setViewportSize({ width: 375, height: 667 });
+  test('mobile: menu closes after section link click, burger resets', async ({page}) => {
+    await page.setViewportSize({width: 375, height: 667});
 
-    // Open mobile menu
     const burgerButton = page.locator('button[aria-label="Toggle navigation"]');
-    await burgerButton.click();
+    const navigationContainer = page.locator('nav#main-nav').locator('..');
+    const guideTab = page.getByRole('button', {name: 'GUIDE'});
 
-    // Navigation should be visible
-    const navContainer = page.locator('nav#main-nav').locator('..');
-    await expect(navContainer).toHaveClass(/flex/);
+    // Open menu
+    await burgerButton.click();
+    await expect(navigationContainer).toBeVisible();
 
-    // Click on a navigation item
-    const guideButton = page.getByRole('button', { name: 'GUIDE' });
-    await guideButton.click();
+    // Click on GUIDE section link
+    await guideTab.click();
 
-    // Navigation should close automatically
-    await expect(navContainer).toHaveClass(/hidden/);
+    // Menu should close automatically
+    await expect(navigationContainer).toBeHidden();
 
-    // Section should have changed
+    // GUIDE section should be active and visible
     await expect(page.locator('section#guide')).toBeVisible();
     await expect(page.locator('section#readme')).toBeHidden();
+
+    // Burger should be in closed state (can be clicked to open again)
+    await expect(burgerButton).toBeVisible();
+
+    // Reopen menu to verify GUIDE is still active
+    await burgerButton.click();
+    await expect(navigationContainer).toBeVisible();
+    await expect(guideTab).toHaveClass(/font-semibold/);
   });
-});
+
+})