Add tests for mobile menu

Author: nolannbiron

packages/gitbook/e2e/internal.spec.ts

@@ -1621,6 +1621,61 @@ const testCases: TestsCase[] = [
             ]),
         ],
     },
+    {
+        name: 'Mobile menu',
+        contentBaseURL: 'https://gitbook-open-e2e-sites.gitbook.io/',
+        tests: [
+            {
+                name: 'Mobile menu open',
+                viewports: ['iphone-x'],
+                url: '',
+                run: async (page) => {
+                    // Set mobile viewport size to ensure mobile menu is visible
+                    await page.setViewportSize({ width: 375, height: 812 }); // iPhone X dimensions
+
+                    await waitForCookiesDialog(page);
+
+                    await page.locator('[data-testid="mobile-menu-button"]').click();
+
+                    // Wait for table of contents to appear
+                    const tableOfContents = page.locator('[data-testid="table-of-contents"]');
+                    await tableOfContents.waitFor({ state: 'visible', timeout: 5000 });
+                    await expect(tableOfContents).toBeVisible();
+                },
+            },
+            {
+                name: 'Mobile menu with dropdown menu',
+                viewports: ['iphone-x'],
+                url: 'multi-variants/',
+                run: async (page) => {
+                    // Set mobile viewport size to ensure mobile menu is visible
+                    await page.setViewportSize({ width: 375, height: 812 }); // iPhone X dimensions
+
+                    await waitForCookiesDialog(page);
+
+                    await page.locator('[data-testid="mobile-menu-button"]').click();
+
+                    // Wait for table of contents to appear
+                    const tableOfContents = page.locator('[data-testid="table-of-contents"]');
+                    await tableOfContents.waitFor({ state: 'visible', timeout: 5000 });
+                    await expect(tableOfContents).toBeVisible();
+
+                    // Wait for space dropdown button to be visible
+                    const spaceDropdownButton = tableOfContents.locator(
+                        '[data-testid="space-dropdown-button"]'
+                    );
+                    await spaceDropdownButton.waitFor({ state: 'visible', timeout: 5000 });
+                    await expect(spaceDropdownButton).toBeVisible();
+                    await spaceDropdownButton.click();
+
+                    // Wait for space dropdown to appear
+                    const spaceDropdown = page.locator('[data-testid="dropdown-menu"]');
+                    await spaceDropdown.waitFor({ state: 'visible', timeout: 5000 });
+                    await expect(spaceDropdown).toBeVisible();
+                },
+            },
+        ],
+    },
 ];
 
 runTestCases(testCases);

packages/gitbook/e2e/util.ts

@@ -64,6 +64,10 @@ export interface Test {
      * Whether to only run this test.
      */
     only?: boolean;
+    /**
+     * Viewport to use for the test.
+     */
+    viewports?: ('macbook-16' | 'macbook-13' | 'ipad-2' | 'iphone-x')[];
 }
 
 export type TestsCase = {
@@ -159,7 +163,7 @@ export function runTestCases(testCases: TestsCase[]) {
 
         test.describe(testCase.name, () => {
             for (const testEntry of testCase.tests) {
-                const { mode = 'page' } = testEntry;
+                const { mode = 'page', viewports } = testEntry;
                 const testFn = testEntry.only ? test.only : test;
                 testFn(testEntry.name, async ({ page, context }) => {
                     const testEntryPathname =
@@ -204,13 +208,18 @@ export function runTestCases(testCases: TestsCase[]) {
                         const screenshotName = `${testCase.name} - ${testEntry.name}`;
                         if (mode === 'image') {
                             await argosScreenshot(page, screenshotName, {
-                                viewports: ['macbook-13'],
+                                viewports: viewports ?? ['macbook-13'],
                                 threshold: screenshotOptions?.threshold ?? undefined,
                                 fullPage: true,
                             });
                         } else {
                             await argosScreenshot(page, screenshotName, {
-                                viewports: ['macbook-16', 'macbook-13', 'ipad-2', 'iphone-x'],
+                                viewports: viewports ?? [
+                                    'macbook-16',
+                                    'macbook-13',
+                                    'ipad-2',
+                                    'iphone-x',
+                                ],
                                 argosCSS: `
                             /* Hide Intercom */
                             .intercom-lightweight-app {

packages/gitbook/src/components/Header/HeaderMobileMenuButton.tsx

@@ -23,6 +23,7 @@ export function HeaderMobileMenuButton(
         <button
             {...props}
             aria-label={tString(language, 'table_of_contents_button_label')}
+            data-testid="mobile-menu-button"
             onClick={toggleNavigation}
             className={tcls(
                 'flex flex-row items-center rounded straight-corners:rounded-sm px-2 py-1',

packages/gitbook/src/components/TableOfContents/TableOfContents.tsx

@@ -50,7 +50,7 @@ export function TableOfContents(props: {
                     'max-lg:[html.sidebar-filled.theme-muted_&]:bg-tint-base',
                     'max-lg:[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base',
 
-                    'max-lg:py-2',
+                    'max-lg:pb-2',
                     'max-lg:w-10/12',
                     'max-lg:shadow-lg',
                     'max-lg:depth-flat:shadow-none',
@@ -107,7 +107,7 @@ export function TableOfContents(props: {
                         icon="close"
                         iconOnly
                         autoFocus={false}
-                        className="absolute top-2 right-2 z-50 bg-transparent text-tint opacity-8 shadow-none ring-transparent"
+                        className="absolute top-2 right-2 z-50 bg-transparent text-tint opacity-8 shadow-none ring-transparent lg:hidden"
                         onClick={() => setOpen(false)}
                     >
                         <span className="sr-only">Close</span>