network menu test

mocks/config/network.ts

+import type { FeaturedNetwork } from 'types/networks';
+
+const FEATURED_NETWORKS: Array<FeaturedNetwork> = [
+  { title: 'Gnosis Chain', url: 'https://blockscout.com/xdai/mainnet', group: 'mainnets', type: 'xdai_mainnet' },
+  { title: 'Optimism on Gnosis Chain', url: 'https://blockscout.com/xdai/optimism', group: 'mainnets', type: 'xdai_optimism' },
+  { title: 'Arbitrum on xDai', url: 'https://blockscout.com/xdai/aox', group: 'mainnets' },
+  { title: 'Ethereum', url: 'https://blockscout.com/eth/mainnet', group: 'mainnets', type: 'eth_mainnet' },
+  { title: 'Ethereum Classic', url: 'https://blockscout.com/etx/mainnet', group: 'mainnets', type: 'etc_mainnet', icon: 'https://example.com/my-logo.png' },
+  { title: 'POA', url: 'https://blockscout.com/poa/core', group: 'mainnets', type: 'poa_core' },
+  { title: 'RSK', url: 'https://blockscout.com/rsk/mainnet', group: 'mainnets', type: 'rsk_mainnet' },
+  { title: 'Gnosis Chain Testnet', url: 'https://blockscout.com/xdai/testnet', group: 'testnets', type: 'xdai_testnet' },
+  { title: 'POA Sokol', url: 'https://blockscout.com/poa/sokol', group: 'testnets', type: 'poa_sokol' },
+  { title: 'ARTIS Σ1', url: 'https://blockscout.com/artis/sigma1', group: 'other', type: 'artis_sigma1' },
+  { title: 'LUKSO L14', url: 'https://blockscout.com/lukso/l14', group: 'other', type: 'lukso_l14' },
+  { title: 'Astar', url: 'https://blockscout.com/astar', group: 'other', type: 'astar' },
+];
+
+export const FEATURED_NETWORKS_MOCK = JSON.stringify(FEATURED_NETWORKS).replaceAll('"', '\'');

ui/snippets/networkMenu/NetworkMenu.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network';
+import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
+import TestApp from 'playwright/TestApp';
+
+import NetworkMenu from './NetworkMenu';
+
+const extendedTest = test.extend({
+  context: contextWithEnvs([
+    { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_MOCK },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ]) as any,
+});
+
+extendedTest.use({ viewport: { width: 1600, height: 1000 } });
+
+extendedTest('base view +@dark-mode', async({ mount, page }) => {
+  const LOGO_URL = 'https://example.com/my-logo.png';
+  await page.route(LOGO_URL, (route) => {
+    return route.fulfill({
+      status: 200,
+      path: './playwright/image_s.jpg',
+    });
+  });
+
+  const component = await mount(
+    <TestApp>
+      <NetworkMenu/>
+    </TestApp>,
+  );
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 36, height: 36 } });
+
+  await component.locator('button[aria-label="Network menu"]').hover();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 36, height: 36 } });
+
+  await component.locator('button[aria-label="Network menu"]').click();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 450, height: 550 } });
+
+  await component.getByText(/optimism/i).hover();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 450, height: 550 } });
+});

ui/snippets/networkMenu/NetworkMenu.tsx

-import { Popover, PopoverTrigger, Box } from '@chakra-ui/react';
+import { Popover, PopoverTrigger } from '@chakra-ui/react';
 import React from 'react';
 
 import NetworkMenuButton from './NetworkMenuButton';
@@ -9,17 +9,16 @@ interface Props {
 
 const NetworkMenu = ({ isCollapsed }: Props) => {
   return (
-    <Popover openDelay={ 300 } placement="right-start" gutter={ 22 } isLazy>
+    <Popover openDelay={ 300 } placement="right-start" gutter={ 8 } isLazy>
       { ({ isOpen }) => (
         <>
           <PopoverTrigger>
-            <Box
+            <NetworkMenuButton
               marginLeft="auto"
               overflow="hidden"
               width={{ base: 'auto', lg: isCollapsed === false ? 'auto' : '0px', xl: isCollapsed ? '0px' : 'auto' }}
-            >
-              <NetworkMenuButton isActive={ isOpen }/>
-            </Box>
+              isActive={ isOpen }
+            />
           </PopoverTrigger>
           <NetworkMenuContentDesktop/>
         </>

ui/snippets/networkMenu/NetworkMenuButton.tsx

-import { Icon, useColorModeValue, Button } from '@chakra-ui/react';
+import { Icon, useColorModeValue, Button, forwardRef, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import networksIcon from 'icons/networks.svg';
@@ -8,15 +8,17 @@ interface Props {
   isMobile?: boolean;
   isActive?: boolean;
   onClick?: () => void;
+  className?: string;
 }
 
-const NetworkMenuButton = ({ isMobile, isActive, onClick }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const NetworkMenuButton = ({ isMobile, isActive, onClick, className }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   const defaultIconColor = useColorModeValue('gray.600', 'gray.400');
   const bgColorMobile = useColorModeValue('blue.50', 'gray.800');
   const iconColorMobile = useColorModeValue('blue.700', 'blue.50');
 
   return (
     <Button
+      className={ className }
       variant="unstyled"
       display="inline-flex"
       alignSelf="stretch"
@@ -43,4 +45,4 @@ const NetworkMenuButton = ({ isMobile, isActive, onClick }: Props, ref: React.Fo
   );
 };
 
-export default React.forwardRef(NetworkMenuButton);
+export default chakra(forwardRef(NetworkMenuButton));