refactor and fix pw tests

.eslintrc.js

@@ -289,7 +289,7 @@ module.exports = {
       },
     },
     {
-      files: [ 'configs/**/*.js', 'configs/**/*.ts', '*.config.ts' ],
+      files: [ 'configs/**/*.js', 'configs/**/*.ts', '*.config.ts', 'playwright/**/*.ts' ],
       rules: {
         // for configs allow to consume env variables from process.env directly
         'no-restricted-properties': [ 0 ],

package.json

@@ -25,7 +25,7 @@
     "lint:tsc": "./node_modules/.bin/tsc -p ./tsconfig.json",
     "prepare": "husky install",
     "format-svg": "./node_modules/.bin/svgo -r ./icons",
-    "test:pw": "./playwright/make-envs-script.sh && NODE_OPTIONS=\"--max-old-space-size=4096\" playwright test -c playwright-ct.config.ts",
+    "test:pw": "./playwright/make-envs-script.sh && NODE_OPTIONS=\"--max-old-space-size=4096\" ./node_modules/.bin/dotenv -e ./configs/envs/.env.pw -- playwright test -c playwright-ct.config.ts",
     "test:pw:local": "export NODE_PATH=$(pwd)/node_modules && rm -rf ./playwright/.cache && yarn test:pw",
     "test:pw:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.32.0-focal ./playwright/run-tests.sh",
     "test:jest": "jest",

playwright/TestApp.tsx

@@ -8,7 +8,7 @@ import { mainnet } from 'wagmi/chains';
 import { AppContextProvider } from 'lib/contexts/app';
 import type { Props as PageProps } from 'lib/next/getServerSideProps';
 import { SocketProvider } from 'lib/socket/context';
-import { PORT } from 'playwright/fixtures/socketServer';
+import * as app from 'playwright/utils/app';
 import theme from 'theme';
 
 type Props = {
@@ -54,7 +54,7 @@ const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props
   return (
     <ChakraProvider theme={ theme }>
       <QueryClientProvider client={ queryClient }>
-        <SocketProvider url={ withSocket ? `ws://localhost:${ PORT }` : undefined }>
+        <SocketProvider url={ withSocket ? `ws://${ app.domain }:${ app.socketPort }` : undefined }>
           <AppContextProvider { ...appContext }>
             <WagmiConfig config={ wagmiConfig }>
               { children }

playwright/fixtures/auth.ts

 import type { BrowserContext } from '@playwright/test';
 
 import * as cookies from 'lib/cookies';
+import { domain } from 'playwright/utils/app';
 
 export default function authFixture(context: BrowserContext) {
-  context.addCookies([ { name: cookies.NAMES.API_TOKEN, value: 'foo', domain: 'localhost', path: '/' } ]);
+  context.addCookies([ { name: cookies.NAMES.API_TOKEN, value: 'foo', domain, path: '/' } ]);
 }

playwright/fixtures/contextWithEnvs.ts

 import type { test } from '@playwright/experimental-ct-react';
 import type { Browser } from '@playwright/test';
 
+import * as app from 'playwright/utils/app';
+
 interface Env {
   name: string;
   value: string;
@@ -20,7 +22,7 @@ export async function createContextWithEnvs(browser: Browser, envs: Array<Env>)
   return browser.newContext({
     storageState: {
       origins: [
-        { origin: 'http://localhost:3100', localStorage: envs },
+        { origin: app.url, localStorage: envs },
       ],
       cookies: [],
     },

playwright/fixtures/socketServer.ts

@@ -8,6 +8,8 @@ import type { SmartContractVerificationResponse } from 'types/api/contract';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 import type { Transaction } from 'types/api/transaction';
 
+import * as app from 'playwright/utils/app';
+
 type ReturnType = () => Promise<WebSocket>;
 
 type Channel = [string, string, string];
@@ -16,11 +18,9 @@ export interface SocketServerFixture {
   createSocket: ReturnType;
 }
 
-export const PORT = 3200;
-
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const createSocket: TestFixture<ReturnType, { page: Page}> = async({ page }, use) => {
-  const socketServer = new WebSocketServer({ port: PORT });
+  const socketServer = new WebSocketServer({ port: app.socketPort });
 
   const connectionPromise = new Promise<WebSocket>((resolve) => {
     socketServer.on('connection', (socket: WebSocket) => {

playwright/utils/app.ts

+export const url = `${ process.env.NEXT_PUBLIC_APP_PROTOCOL }://${ process.env.NEXT_PUBLIC_APP_HOST }:${ process.env.NEXT_PUBLIC_APP_PORT }`;
+
+export const domain = process.env.NEXT_PUBLIC_APP_HOST;
+
+export const socketPort = 3200;

playwright/utils/buildApiUrl.ts

@@ -5,5 +5,7 @@ import { RESOURCES } from 'lib/api/resources';
 
 export default function buildApiUrl<R extends ResourceName>(resourceName: R, pathParams?: ResourcePathParams<R>) {
   const resource = RESOURCES[resourceName];
-  return compile('/node-api/proxy' + resource.path)(pathParams);
+  const defaultApi = 'https://' + process.env.NEXT_PUBLIC_API_HOST + ':' + process.env.NEXT_PUBLIC_API_PORT;
+  const origin = 'endpoint' in resource ? resource.endpoint + resource.basePath : defaultApi;
+  return origin + compile(resource.path)(pathParams);
 }

ui/snippets/navigation/NavigationDesktop.pw.tsx

@@ -6,6 +6,7 @@ import * as cookies from 'lib/cookies';
 import authFixture from 'playwright/fixtures/auth';
 import contextWithEnvs, { createContextWithEnvs } from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
+import * as app from 'playwright/utils/app';
 
 import NavigationDesktop from './NavigationDesktop';
 
@@ -104,7 +105,7 @@ base.describe('cookie set to false', () => {
       const context = await createContextWithEnvs(browser, [
         { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
       ]);
-      context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'false', domain: 'localhost', path: '/' } ]);
+      context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'false', domain: app.domain, path: '/' } ]);
       use(context);
     },
   });

ui/snippets/profileMenu/ProfileMenuDesktop.pw.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import * as profileMock from 'mocks/user/profile';
 import authFixture from 'playwright/fixtures/auth';
 import TestApp from 'playwright/TestApp';
+import * as app from 'playwright/utils/app';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import ProfileMenuDesktop from './ProfileMenuDesktop';
@@ -23,7 +24,7 @@ test('no auth', async({ mount, page }) => {
   );
 
   await component.locator('.identicon').click();
-  expect(page.url()).toBe('http://localhost:3100/auth/auth0?path=%2F');
+  expect(page.url()).toBe(`${ app.url }/auth/auth0?path=%2F`);
 });
 
 test.describe('auth', () => {

ui/snippets/profileMenu/ProfileMenuMobile.pw.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import * as profileMock from 'mocks/user/profile';
 import authFixture from 'playwright/fixtures/auth';
 import TestApp from 'playwright/TestApp';
+import * as app from 'playwright/utils/app';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import ProfileMenuMobile from './ProfileMenuMobile';
@@ -23,7 +24,7 @@ test('no auth', async({ mount, page }) => {
   );
 
   await component.locator('.identicon').click();
-  expect(page.url()).toBe('http://localhost:3100/auth/auth0?path=%2F');
+  expect(page.url()).toBe(`${ app.url }/auth/auth0?path=%2F`);
 });
 
 test.use({ viewport: devices['iPhone 13 Pro'].viewport });

ui/token/TokenInventory.pw.tsx

@@ -21,7 +21,7 @@ test('base view +@mobile', async({ mount }) => {
           },
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore:
-          pagination: { page: 1 },
+          pagination: { page: 1, isVisible: true },
         }}
       />
     </TestApp>,

ui/token/TokenTransfer/TokenTransfer.pw.tsx

@@ -21,7 +21,7 @@ test('erc20 +@mobile', async({ mount }) => {
           },
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore:
-          pagination: { page: 1 },
+          pagination: { page: 1, isVisible: true },
         }}
       />
     </TestApp>,
@@ -44,7 +44,7 @@ test('erc721 +@mobile', async({ mount }) => {
           },
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore:
-          pagination: { page: 1 },
+          pagination: { page: 1, isVisible: true },
         }}
       />
     </TestApp>,
@@ -72,7 +72,7 @@ test('erc1155 +@mobile', async({ mount }) => {
           },
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore:
-          pagination: { page: 1 },
+          pagination: { page: 1, isVisible: true },
         }}
       />
     </TestApp>,