mobile nav tests

playwright/fixtures/auth.ts

+import type { BrowserContext } from '@playwright/test';
+
+export default function authFixture(context: BrowserContext) {
+  context.addCookies([ { name: '_explorer_key', value: 'foo', domain: 'localhost', path: '/' } ]);
+}

ui/snippets/header/Burger.pw.tsx

+import { test, expect, devices } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import authFixture from 'playwright/fixtures/auth';
+import TestApp from 'playwright/TestApp';
+
+import Burger from './Burger';
+
+test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+test('base view', async({ mount, page }) => {
+  const component = await mount(
+    <TestApp>
+      <Burger/>
+    </TestApp>,
+  );
+
+  await component.locator('svg[aria-label="Menu button"]').click();
+  await expect(page).toHaveScreenshot();
+
+  await page.locator('button[aria-label="Network menu"]').click();
+  await expect(page).toHaveScreenshot();
+});
+
+test.describe('dark mode', () => {
+  test.use({ colorScheme: 'dark' });
+
+  test('base view', async({ mount, page }) => {
+    const component = await mount(
+      <TestApp>
+        <Burger/>
+      </TestApp>,
+    );
+
+    await component.locator('svg[aria-label="Menu button"]').click();
+    await expect(page).toHaveScreenshot();
+
+    await page.locator('button[aria-label="Network menu"]').click();
+    await expect(page).toHaveScreenshot();
+  });
+});
+
+test.describe('auth', () => {
+  const extendedTest = test.extend({
+    context: ({ context }, use) => {
+      authFixture(context);
+      use(context);
+    },
+  });
+
+  extendedTest('base view', async({ mount, page }) => {
+    const component = await mount(
+      <TestApp>
+        <Burger/>
+      </TestApp>,
+    );
+
+    await component.locator('svg[aria-label="Menu button"]').click();
+    await expect(page).toHaveScreenshot();
+  });
+});

ui/snippets/header/Burger.tsx

@@ -29,6 +29,7 @@ const Burger = () => {
           boxSize={ 6 }
           display="block"
           color={ iconColor }
+          aria-label="Menu button"
         />
       </Box>
       <Drawer

ui/snippets/navigation/NavigationDesktop.pw.tsx

@@ -2,6 +2,7 @@ import { Box, Flex } from '@chakra-ui/react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import authFixture from 'playwright/fixtures/auth';
 import TestApp from 'playwright/TestApp';
 
 import NavigationDesktop from './NavigationDesktop';
@@ -30,7 +31,7 @@ test('no auth +@desktop-xl +@dark-mode-xl', async({ mount }) => {
 test.describe('auth', () => {
   const extendedTest = test.extend({
     context: ({ context }, use) => {
-      context.addCookies([ { name: '_explorer_key', value: 'foo', domain: 'localhost', path: '/' } ]);
+      authFixture(context);
       use(context);
     },
   });