tests for desktop navigation

playwright/TestApp.tsx

@@ -2,6 +2,8 @@ import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 
+import { AppContextProvider } from 'lib/appContext';
+import type { Props as PageProps } from 'lib/next/getServerSideProps';
 import { SocketProvider } from 'lib/socket/context';
 import { PORT } from 'playwright/fixtures/socketServer';
 import theme from 'theme';
@@ -9,9 +11,19 @@ import theme from 'theme';
 type Props = {
   children: React.ReactNode;
   withSocket?: boolean;
+  appContext?: {
+    pageProps: PageProps;
+  };
 }
 
-const TestApp = ({ children, withSocket }: Props) => {
+const defaultAppContext = {
+  pageProps: {
+    cookies: '',
+    referrer: '',
+  },
+};
+
+const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props) => {
   const [ queryClient ] = React.useState(() => new QueryClient({
     defaultOptions: {
       queries: {
@@ -25,7 +37,9 @@ const TestApp = ({ children, withSocket }: Props) => {
     <ChakraProvider theme={ theme }>
       <QueryClientProvider client={ queryClient }>
         <SocketProvider url={ withSocket ? `ws://localhost:${ PORT }` : undefined }>
+          <AppContextProvider { ...appContext }>
             { children }
+          </AppContextProvider>
         </SocketProvider>
       </QueryClientProvider>
     </ChakraProvider>

ui/snippets/navigation/NavLink.tsx

@@ -33,6 +33,7 @@ const NavLink = ({ text, url, icon, isCollapsed, isActive, px, isNewUi }: Props)
       _hover={{ color: isActive ? colors.text.active : colors.text.hover }}
       borderRadius="base"
       whiteSpace="nowrap"
+      aria-label={ `${ text } link` }
       { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
     >
       <Tooltip

ui/snippets/navigation/NavigationDesktop.pw.tsx

+import { Box, Flex } from '@chakra-ui/react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+import NavigationDesktop from './NavigationDesktop';
+
+const hooksConfig = {
+  router: {
+    route: '/blocks',
+    query: { id: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859' },
+  },
+};
+
+test('no auth +@desktop-xl +@dark-mode-xl', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('auth', () => {
+  const extendedTest = test.extend({
+    context: ({ context }, use) => {
+      context.addCookies([ { name: '_explorer_key', value: 'foo', domain: 'localhost', path: '/' } ]);
+      use(context);
+    },
+  });
+
+  extendedTest('+@desktop-xl +@dark-mode-xl', async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <Flex w="100%" minH="100vh" alignItems="stretch">
+          <NavigationDesktop/>
+          <Box bgColor="lightpink" w="100%"/>
+        </Flex>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});
+
+test('with tooltips +@desktop-xl -@default', async({ mount, page }) => {
+  const component = await mount(
+    <TestApp>
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await page.locator('svg[aria-label="Expand/Collapse menu"]').click();
+  await page.locator('a[aria-label="Tokens link"]').hover();
+
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('cookie set to false', () => {
+  const extendedTest = test.extend({
+    context: ({ context }, use) => {
+      context.addCookies([ { name: 'nav_bar_collapsed', value: 'false', domain: 'localhost', path: '/' } ]);
+      use(context);
+    },
+  });
+
+  extendedTest('navbar is opened +@desktop-xl', async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <Flex w="100%" minH="100vh" alignItems="stretch">
+          <NavigationDesktop/>
+          <Box bgColor="lightpink" w="100%"/>
+        </Flex>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    const txLink = component.getByText(/transactions/i);
+    expect(await txLink.isVisible()).toBe(true);
+  });
+});
+
+test.describe('cookie set to true', () => {
+  const extendedTest = test.extend({
+    context: ({ context }, use) => {
+      context.addCookies([ { name: 'nav_bar_collapsed', value: 'true', domain: 'localhost', path: '/' } ]);
+      use(context);
+    },
+  });
+
+  extendedTest('navbar is collapsed +@desktop-xl', async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <Flex w="100%" minH="100vh" alignItems="stretch">
+          <NavigationDesktop/>
+          <Box bgColor="lightpink" w="100%"/>
+        </Flex>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    const txLink = component.getByText(/transactions/i);
+    expect(await txLink.isVisible()).toBe(false);
+  });
+});

ui/snippets/navigation/NavigationDesktop.tsx

@@ -105,6 +105,7 @@ const NavigationDesktop = () => {
         left={{ lg: isExpanded ? '216px' : '80px', xl: isCollapsed ? '80px' : '216px' }}
         cursor="pointer"
         onClick={ handleTogglerClick }
+        aria-label="Expand/Collapse menu"
       />
     </Flex>
   );