Merge pull request #342 from blockscout/pw-setup-pt2

pw setup, part 2

.gitignore

@@ -47,3 +47,5 @@ yarn-error.log*
 /test-results/
 /playwright-report/
 /playwright/.cache/
+/playwright/.browser/
+/playwright/envs.js

configs/envs/.env.pw

+# app config
+NEXT_PUBLIC_APP_HOST=blockscout.com
+NEXT_PUBLIC_APP_INSTANCE=pw
+NEXT_PUBLIC_APP_ENV=testing
+
+# ui config
+NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
+NEXT_PUBLIC_FOOTER_GITHUB_LINK=https://github.com/blockscout/blockscout
+NEXT_PUBLIC_FOOTER_TWITTER_LINK=https://www.twitter.com/blockscoutcom
+
+# api config
+NEXT_PUBLIC_API_HOST=blockscout.com

configs/nextjs/redirects.js

-const PATHS = require('../../lib/link/paths');
+const PATHS = require('../../lib/link/paths.json');
 
 const oldUrls = [
   {

lib/link/paths.js

-const paths = {
-  network_index: `/`,
-  watchlist: `/account/watchlist`,
-  private_tags: `/account/tag_address`,
-  public_tags: `/account/public_tags_request`,
-  api_keys: `/account/api_key`,
-  custom_abi: `/account/custom_abi`,
-  profile: `/auth/profile`,
-  txs: `/txs`,
-  tx: `/tx/:id`,
-  blocks: `/blocks`,
-  block: `/block/:id`,
-  tokens: `/tokens`,
-  token_index: `/token/:hash`,
-  token_instance_item: `/token/:hash/instance/:id`,
-  address_index: `/address/:id`,
-  address_contract_verification: `/address/:id/contract_verifications/new`,
-  apps: `/apps`,
-  app_index: `/apps/:id`,
-  search_results: `/search-results`,
-  other: `/search-results`,
-  auth: `/auth/auth0`,
-  stats: '/stats',
-};
-
-module.exports = paths;

lib/link/paths.json

+{
+  "network_index": "/",
+  "watchlist": "/account/watchlist",
+  "private_tags": "/account/tag_address",
+  "public_tags": "/account/public_tags_request",
+  "api_keys": "/account/api_key",
+  "custom_abi": "/account/custom_abi",
+  "profile": "/auth/profile",
+  "txs": "/txs",
+  "tx": "/tx/:id",
+  "blocks": "/blocks",
+  "block": "/block/:id",
+  "tokens": "/tokens",
+  "token_index": "/token/:hash",
+  "token_instance_item": "/token/:hash/instance/:id",
+  "address_index": "/address/:id",
+  "address_contract_verification": "/address/:id/contract_verifications/new",
+  "apps": "/apps",
+  "app_index": "/apps/:id",
+  "search_results": "/search-results",
+  "other": "/search-results",
+  "auth": "/auth/auth0",
+  "stats": "/stats"
+}

lib/link/routes.ts

 import appConfig from 'configs/app/config';
 
-import PATHS from './paths.js';
+import PATHS from './paths.json';
 
 export interface Route {
   pattern: string;

package.json

@@ -21,7 +21,8 @@
     "lint:tsc": "./node_modules/.bin/tsc -p ./tsconfig.json",
     "prepare": "husky install",
     "format-svg": "./node_modules/.bin/svgo -r ./icons",
-    "test:pw": "playwright test -c playwright-ct.config.ts",
+    "test:pw": "./playwright/make-envs-script.sh && playwright test -c playwright-ct.config.ts",
+    "test:pw:local": "export NODE_PATH=$(pwd)/node_modules && yarn test:pw",
     "test:pw:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.28.0-focal ./playwright/run-tests.sh",
     "test:jest": "jest",
     "test:jest:watch": "jest --watch"
@@ -84,6 +85,7 @@
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
     "typescript": "4.7.2",
+    "vite-plugin-svgr": "^2.2.2",
     "vite-tsconfig-paths": "^3.5.2"
   },
   "lint-staged": {

pages/_app.tsx

@@ -9,7 +9,7 @@ import { Chakra } from 'lib/Chakra';
 import useConfigSentry from 'lib/hooks/useConfigSentry';
 import type { ErrorType } from 'lib/hooks/useFetch';
 import theme from 'theme';
-import AppError from 'ui/shared/AppError';
+import AppError from 'ui/shared/AppError/AppError';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
 
 function MyApp({ Component, pageProps }: AppProps) {

pages/_error.tsx

@@ -27,7 +27,7 @@ import * as cookies from 'lib/cookies';
 import getNetworkTitle from 'lib/networks/getNetworkTitle';
 import type { Props as ServerSidePropsCommon } from 'lib/next/getServerSideProps';
 import { getServerSideProps as getServerSidePropsCommon } from 'lib/next/getServerSideProps';
-import AppError from 'ui/shared/AppError';
+import AppError from 'ui/shared/AppError/AppError';
 import Page from 'ui/shared/Page/Page';
 
 type Props = ServerSidePropsCommon & {

playwright-ct.config.ts

 import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react';
 import { devices } from '@playwright/experimental-ct-react';
+import react from '@vitejs/plugin-react';
+import svgr from 'vite-plugin-svgr';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 /**
@@ -42,7 +44,13 @@ const config: PlaywrightTestConfig = {
     headless: true,
 
     ctViteConfig: {
-      plugins: [ tsconfigPaths() ],
+      plugins: [
+        tsconfigPaths(),
+        react(),
+        svgr({
+          exportAsDefault: true,
+        }),
+      ],
     },
   },
 

playwright/index.html

@@ -4,9 +4,42 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Testing Page</title>
+    <style>
+      @font-face {
+        font-family: Poppins;
+        src: url(/playwright/fonts/Poppins/Poppins-SemiBold.ttf);
+        font-weight: 600;
+      }
+      @font-face {
+        font-family: Poppins;
+        src: url(/playwright/fonts/Poppins/Poppins-Medium.ttf);
+        font-weight: 500;
+      }
+      @font-face {
+        font-family: Poppins;
+        src: url(/playwright/fonts/Poppins/Poppins-Regular.ttf);
+        font-weight: 400;
+      }
+      @font-face {
+        font-family: Inter;
+        src: url(/playwright/fonts/Inter/Inter-SemiBold.ttf);
+        font-weight: 600;
+      }
+      @font-face {
+        font-family: Inter;
+        src: url(/playwright/fonts/Inter/Inter-Medium.ttf);
+        font-weight: 500;
+      }
+      @font-face {
+        font-family: Inter;
+        src: url(/playwright/fonts/Inter/Inter-Regular.ttf);
+        font-weight: 400;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>
+    <script type="module" src="/playwright/envs.js"></script>
     <script type="module" src="/playwright/index.ts"></script>
   </body>
 </html>

playwright/make-envs-script.sh

+#!/bin/bash
+
+targetFile='./playwright/envs.js'
+
+declare -a envFiles=('./configs/envs/.env.pw' './configs/envs/.env.poa_core')
+
+touch $targetFile;
+truncate -s 0 $targetFile;
+
+echo "Creating script file with envs"
+
+echo "window.process = { env: { } };" >> $targetFile;
+
+for envFile in "${envFiles[@]}"
+do
+    # read each env file
+    while read line; do
+        # if it is a comment or an empty line, continue to next one
+        if [ "${line:0:1}" == "#" ] || [ "${line}" == "" ]; then
+            continue
+        fi
+
+        # split by "=" sign to get variable name and value
+        configName="$(cut -d'=' -f1 <<<"$line")";
+        configValue="$(cut -d'=' -f2- <<<"$line")";
+
+        # if there is a value, escape it and add line to target file
+        if [ -n "$configValue" ]; then
+            escapedConfigValue=$(echo $configValue | sed s/\'/\"/g);
+            echo "window.process.env.${configName} = '${escapedConfigValue}';" >> $targetFile;
+        fi
+    done < $envFile
+done
+
+echo "Done"
\ No newline at end of file

playwright/run-tests.sh

 #!/bin/sh
-yarn install
+yarn install --modules-folder node_modules_linux
+export NODE_PATH=$(pwd)/node_modules_linux
+rm -rf ./playwright/.cache
 yarn test:pw
\ No newline at end of file

ui/shared/AppError/AppError.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import RenderWithChakra from 'playwright/RenderWithChakra';
+
+import AppError from './AppError';
+
+test.use({ viewport: { width: 900, height: 400 } });
+
+test('status code 404', async({ mount }) => {
+  const component = await mount(
+    <RenderWithChakra>
+      <AppError statusCode={ 404 }/>
+    </RenderWithChakra>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('status code 500', async({ mount }) => {
+  const component = await mount(
+    <RenderWithChakra>
+      <AppError statusCode={ 500 }/>
+    </RenderWithChakra>,
+  );
+  await expect(component).toHaveScreenshot();
+});

ui/shared/Page/Page.tsx

@@ -10,7 +10,7 @@ import useFetch from 'lib/hooks/useFetch';
 import useScrollDirection from 'lib/hooks/useScrollDirection';
 import { SocketProvider } from 'lib/socket/context';
 import ScrollDirectionContext from 'ui/ScrollDirectionContext';
-import AppError from 'ui/shared/AppError';
+import AppError from 'ui/shared/AppError/AppError';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
 import PageContent from 'ui/shared/Page/PageContent';
 import Header from 'ui/snippets/header/Header';

yarn.lock

@@ -2776,6 +2776,15 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
+"@rollup/pluginutils@^5.0.0":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.2.tgz#012b8f53c71e4f6f9cb317e311df1404f56e7a33"
+  integrity sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^2.3.1"
+
 "@rushstack/eslint-patch@^1.1.3":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728"
@@ -2968,7 +2977,7 @@
     "@svgr/babel-plugin-transform-react-native-svg" "^6.5.1"
     "@svgr/babel-plugin-transform-svg-component" "^6.5.1"
 
-"@svgr/core@^6.5.1":
+"@svgr/core@^6.4.0", "@svgr/core@^6.5.1":
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/@svgr/core/-/core-6.5.1.tgz#d3e8aa9dbe3fbd747f9ee4282c1c77a27410488a"
   integrity sha512-/xdLSWxK5QkqG524ONSjvg3V/FkNyCv538OIBdQqPNaAta3AsXj/Bd2FbvR87yMbXO2hFSWiAe/Q6IkVPDw+mw==
@@ -3357,6 +3366,11 @@
     "@types/d3-transition" "*"
     "@types/d3-zoom" "*"
 
+"@types/estree@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
+  integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
+
 "@types/geojson@*":
   version "7946.0.10"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249"
@@ -5378,7 +5392,7 @@ estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
-estree-walker@^2.0.1:
+estree-walker@^2.0.1, estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
@@ -8782,6 +8796,14 @@ v8-to-istanbul@^9.0.1:
     "@types/istanbul-lib-coverage" "^2.0.1"
     convert-source-map "^1.6.0"
 
+vite-plugin-svgr@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/vite-plugin-svgr/-/vite-plugin-svgr-2.2.2.tgz#c5c9cb573bf455bb079550531847ddc5d2e122af"
+  integrity sha512-u8Ac27uZmDHTVGawpAhvLMJMuzbGeZGhe61TGeHoRQLxVhmQfIYCefa0iLbjC0ui1zFo6XZnS8EkzPITCYp85g==
+  dependencies:
+    "@rollup/pluginutils" "^5.0.0"
+    "@svgr/core" "^6.4.0"
+
 vite-tsconfig-paths@^3.5.2:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-3.5.2.tgz#fd3232f93c426311d7e0d581187d8b63fff55fbc"