add tests for wallet menu

ui/snippets/walletMenu/WalletMenuDesktop.pw.tsx

+import React from 'react';
+
+import type { Address } from 'types/api/address';
+
+import * as addressMock from 'mocks/address/address';
+import { test, expect } from 'playwright/lib';
+
+import { WalletMenuDesktopComponent } from './WalletMenuDesktop';
+
+const props = {
+  isWalletConnected: false,
+  address: '',
+  connect: () => {},
+  disconnect: () => {},
+  isModalOpening: false,
+  isModalOpen: false,
+  openModal: () => {},
+};
+
+test.use({ viewport: { width: 1440, height: 750 } }); // xl
+
+test('wallet is not connected +@dark-mode', async({ page, render }) => {
+  await render(<WalletMenuDesktopComponent { ...props }/>);
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 50 } });
+});
+
+test('wallet is not connected (home page) +@dark-mode', async({ page, render }) => {
+  await render(<WalletMenuDesktopComponent { ...props } isHomePage/>);
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 50 } });
+});
+
+test('wallet connected +@dark-mode', async({ page, render, mockApiResponse }) => {
+  await mockApiResponse('address', addressMock.eoa, { pathParams: { hash: addressMock.hash } });
+
+  const component = await render(<WalletMenuDesktopComponent { ...props } isWalletConnected address={ addressMock.hash }/>);
+  await component.locator('button').click();
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 300 } });
+});
+
+test('wallet connected (home page) +@dark-mode', async({ page, render, mockApiResponse }) => {
+  await mockApiResponse('address', addressMock.eoa, { pathParams: { hash: addressMock.hash } });
+
+  const component = await render(<WalletMenuDesktopComponent { ...props } isHomePage isWalletConnected address={ addressMock.hash }/>);
+  await component.locator('button').click();
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 300 } });
+});
+
+test('wallet with ENS connected', async({ page, render, mockApiResponse }) => {
+  await mockApiResponse('address', { ...addressMock.eoa, ...addressMock.withEns } as Address, { pathParams: { hash: addressMock.hash } });
+
+  const component = await render(<WalletMenuDesktopComponent { ...props } isWalletConnected address={ addressMock.hash }/>);
+  await component.locator('button').click();
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 300 } });
+});

ui/snippets/walletMenu/WalletMenuDesktop.tsx

@@ -22,8 +22,20 @@ type Props = {
   size?: 'sm' | 'md';
 };
 
-const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
-  const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen, openModal } = useWallet({ source: 'Header' });
+type ComponentProps = Props & {
+  isWalletConnected: boolean;
+  address: string;
+  connect: () => void;
+  disconnect: () => void;
+  isModalOpening: boolean;
+  isModalOpen: boolean;
+  openModal: () => void;
+};
+
+export const WalletMenuDesktopComponent = ({
+  isHomePage, className, size = 'md', isWalletConnected, address, connect,
+  disconnect, isModalOpening, isModalOpen, openModal,
+}: ComponentProps) => {
   const { themedBackground, themedBackgroundOrange, themedBorderColor, themedColor } = useMenuButtonColors();
   const [ isPopoverOpen, setIsPopoverOpen ] = useBoolean(false);
   const isMobile = useIsMobile();
@@ -133,4 +145,27 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
   );
 };
 
+// separated the useWallet hook from the main component because it's hard to mock it in tests
+const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
+  const {
+    isWalletConnected, address, connect, disconnect,
+    isModalOpening, isModalOpen, openModal,
+  } = useWallet({ source: 'Header' });
+
+  return (
+    <WalletMenuDesktopComponent
+      isHomePage={ isHomePage }
+      className={ className }
+      size={ size }
+      isWalletConnected={ isWalletConnected }
+      address={ address }
+      connect={ connect }
+      disconnect={ disconnect }
+      isModalOpening={ isModalOpening }
+      isModalOpen={ isModalOpen }
+      openModal={ openModal }
+    />
+  );
+};
+
 export default chakra(WalletMenuDesktop);

ui/snippets/walletMenu/WalletMenuMobile.pw.tsx

+import React from 'react';
+
+import type { Address } from 'types/api/address';
+
+import * as addressMock from 'mocks/address/address';
+import { test, expect, devices } from 'playwright/lib';
+
+import { WalletMenuMobileComponent } from './WalletMenuMobile';
+
+const props = {
+  isWalletConnected: false,
+  address: '',
+  connect: () => {},
+  disconnect: () => {},
+  isModalOpening: false,
+  isModalOpen: false,
+  openModal: () => {},
+};
+
+test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+test('wallet is not connected +@dark-mode', async({ page, render }) => {
+  await render(<WalletMenuMobileComponent { ...props }/>);
+  await expect(page).toHaveScreenshot();
+});
+
+test('wallet connected +@dark-mode', async({ page, render, mockApiResponse }) => {
+  await mockApiResponse('address', addressMock.eoa, { pathParams: { hash: addressMock.hash } });
+
+  const component = await render(<WalletMenuMobileComponent { ...props } isWalletConnected address={ addressMock.hash }/>);
+  await component.locator('button').click();
+
+  await expect(page).toHaveScreenshot();
+});
+
+test('wallet with ENS connected', async({ page, render, mockApiResponse }) => {
+  await mockApiResponse('address', { ...addressMock.eoa, ...addressMock.withEns } as Address, { pathParams: { hash: addressMock.hash } });
+
+  const component = await render(<WalletMenuMobileComponent { ...props } isWalletConnected address={ addressMock.hash }/>);
+  await component.locator('button').click();
+
+  await expect(page).toHaveScreenshot();
+});

ui/snippets/walletMenu/WalletMenuMobile.tsx

@@ -13,9 +13,20 @@ import useMenuButtonColors from '../useMenuButtonColors';
 import WalletIdenticon from './WalletIdenticon';
 import WalletTooltip from './WalletTooltip';
 
-const WalletMenuMobile = () => {
+type ComponentProps = {
+  isWalletConnected: boolean;
+  address: string;
+  connect: () => void;
+  disconnect: () => void;
+  isModalOpening: boolean;
+  isModalOpen: boolean;
+  openModal: () => void;
+};
+
+export const WalletMenuMobileComponent = (
+  { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen, openModal }: ComponentProps,
+) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen, openModal } = useWallet({ source: 'Header' });
   const { themedBackground, themedBackgroundOrange, themedBorderColor, themedColor } = useMenuButtonColors();
   const isMobile = useIsMobile();
   const { isAutoConnectDisabled } = useMarketplaceContext();
@@ -82,4 +93,23 @@ const WalletMenuMobile = () => {
   );
 };
 
+const WalletMenuMobile = () => {
+  const {
+    isWalletConnected, address, connect, disconnect,
+    isModalOpening, isModalOpen, openModal,
+  } = useWallet({ source: 'Header' });
+
+  return (
+    <WalletMenuMobileComponent
+      isWalletConnected={ isWalletConnected }
+      address={ address }
+      connect={ connect }
+      disconnect={ disconnect }
+      isModalOpening={ isModalOpening }
+      isModalOpen={ isModalOpen }
+      openModal={ openModal }
+    />
+  );
+};
+
 export default WalletMenuMobile;