Bump up Node.js to v22 (#2410)

* Bump up Node.js to v22

Fixes #2404

* update Playwright to v1.49.0

* fix tests

* one more fix

* fix screenshots

.github/workflows/chakra-npm-publisher.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: '20.17.0'
+          node-version: '22.11.0'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Update package version

.github/workflows/checks.yml

@@ -30,7 +30,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.17.0
+          node-version: 22.11.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -62,7 +62,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.17.0
+          node-version: 22.11.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -101,7 +101,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.17.0
+          node-version: 22.11.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -133,7 +133,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.17.0
+          node-version: 22.11.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -171,7 +171,7 @@ jobs:
       (needs.pw_affected_tests.result == 'success' || needs.pw_affected_tests.result == 'skipped') 
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.47.2-focal
+      image: mcr.microsoft.com/playwright:v1.49.0-noble
 
     strategy:
       fail-fast: false
@@ -190,7 +190,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.17.0
+          node-version: 22.11.0
           cache: 'yarn'
 
       - name: Cache node_modules

.github/workflows/upload-source-maps.yml

@@ -21,7 +21,7 @@ jobs:
             - name: Setup node
               uses: actions/setup-node@v4
               with:
-                node-version: 20.17.0
+                node-version: 22.11.0
                 cache: 'yarn'
 
             - name: Cache node_modules

.nvmrc

-20.17.0
+22.11.0
\ No newline at end of file

Dockerfile

 # *****************************
 # *** STAGE 1: Dependencies ***
 # *****************************
-FROM node:20.17.0-alpine AS deps
+FROM node:22.11.0-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat python3 make g++
 RUN ln -sf /usr/bin/python3 /usr/bin/python
@@ -37,7 +37,7 @@ RUN yarn --frozen-lockfile
 # *****************************
 # ****** STAGE 2: Build *******
 # *****************************
-FROM node:20.17.0-alpine AS builder
+FROM node:22.11.0-alpine AS builder
 RUN apk add --no-cache --upgrade libc6-compat bash
 
 # pass build args to env variables
@@ -91,7 +91,7 @@ COPY --from=deps /favicon-generator/node_modules ./deploy/tools/favicon-generato
 # ******* STAGE 3: Run ********
 # *****************************
 # Production image, copy all the files and run next
-FROM node:20.17.0-alpine AS runner
+FROM node:22.11.0-alpine AS runner
 RUN apk add --no-cache --upgrade bash curl jq unzip
 
 ### APP

package.json

@@ -4,8 +4,8 @@
   "private": false,
   "homepage": "https://github.com/blockscout/frontend#readme",
   "engines": {
-    "node": "20.17.0",
-    "npm": "10.8.2"
+    "node": "22.11.0",
+    "npm": "10.9.0"
   },
   "scripts": {
     "dev": "./tools/scripts/dev.sh",
@@ -26,8 +26,8 @@
     "svg:build-sprite": "icons build -i ./icons -o ./public/icons --optimize",
     "test:pw": "./tools/scripts/pw.sh",
     "test:pw:local": "export NODE_PATH=$(pwd)/node_modules && yarn test:pw",
-    "test:pw:docker": "docker run --rm --ipc=host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.47.2-focal ./tools/scripts/pw.docker.sh",
-    "test:pw:docker:deps": "docker run --rm --ipc=host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.47.2-focal ./tools/scripts/pw.docker.deps.sh",
+    "test:pw:docker": "docker run --rm --ipc=host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.49.0-noble ./tools/scripts/pw.docker.sh",
+    "test:pw:docker:deps": "docker run --rm --ipc=host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.49.0-noble ./tools/scripts/pw.docker.deps.sh",
     "test:pw:ci": "yarn test:pw --project=$PW_PROJECT",
     "test:pw:detect-affected": "node ./deploy/tools/affected-tests/index.js",
     "test:jest": "jest",
@@ -121,8 +121,8 @@
     "@eslint/compat": "1.2.2",
     "@eslint/js": "9.14.0",
     "@next/eslint-plugin-next": "15.0.3",
-    "@playwright/experimental-ct-react": "1.47.2",
-    "@playwright/test": "1.47.2",
+    "@playwright/experimental-ct-react": "1.49.0",
+    "@playwright/test": "1.49.0",
     "@stylistic/eslint-plugin": "2.10.1",
     "@svgr/webpack": "^6.5.1",
     "@tanstack/eslint-plugin-query": "5.60.1",

ui/address/AddressTokens.pw.tsx

@@ -5,6 +5,7 @@ import type { AddressTokensResponse } from 'types/api/address';
 
 import * as addressMock from 'mocks/address/address';
 import * as tokensMock from 'mocks/address/tokens';
+import * as tokenInstance from 'mocks/tokens/tokenInstance';
 import * as socketServer from 'playwright/fixtures/socketServer';
 import { test, expect, devices } from 'playwright/lib';
 
@@ -83,7 +84,9 @@ test('collections +@dark-mode', async({ render }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('nfts +@dark-mode', async({ render }) => {
+test('nfts +@dark-mode', async({ render, mockAssetResponse }) => {
+  await mockAssetResponse(tokenInstance.base.image_url as string, './playwright/mocks/image_s.jpg');
+
   const hooksConfig = {
     router: {
       query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
@@ -124,7 +127,9 @@ test.describe('mobile', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('nfts', async({ render }) => {
+  test('nfts', async({ render, mockAssetResponse }) => {
+    await mockAssetResponse(tokenInstance.base.image_url as string, './playwright/mocks/image_s.jpg');
+
     const hooksConfig = {
       router: {
         query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },

ui/address/contract/methods/ContractMethodsRegular.pw.tsx

@@ -43,6 +43,7 @@ test('all methods +@dark-mode +@mobile', async({ render }) => {
   const abi: Array<SmartContractMethod> = [ ...methodsMock.read, ...methodsMock.write ];
   const component = await render(<ContractMethodsRegular abi={ abi }/>, { hooksConfig });
   await component.getByText(/expand all/i).click();
+  await expect(component.getByText('HTTP request failed')).toBeVisible();
 
   await expect(component).toHaveScreenshot();
 });

ui/address/tokenSelect/TokenSelect.pw.tsx

@@ -38,7 +38,6 @@ test('base view +@dark-mode', async({ render, page }) => {
   );
 
   await page.getByRole('button', { name: /select/i }).click();
-  await page.getByText('USD Coin').hover();
 
   await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
 
@@ -78,6 +77,7 @@ test('sort', async({ render, page }) => {
   await page.getByRole('button', { name: /select/i }).click();
   await page.locator('a[aria-label="Sort ERC-20 tokens"]').click();
 
+  await page.mouse.wheel(0, -1000);
   await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
 
   await page.mouse.move(100, 200);

ui/token/TokenInventory.pw.tsx

@@ -2,12 +2,17 @@ import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import { tokenInfoERC721a } from 'mocks/tokens/tokenInfo';
-import { base as tokenInstanse } from 'mocks/tokens/tokenInstance';
+import { base as tokenInstance } from 'mocks/tokens/tokenInstance';
 import { test, expect } from 'playwright/lib';
 
 import TokenInventory from './TokenInventory';
 
-test('base view +@mobile', async({ render }) => {
+test('base view +@mobile', async({ render, mockAssetResponse }) => {
+
+  const item = { ...tokenInstance, image_url: null };
+
+  await mockAssetResponse(tokenInstance.image_url as string, './playwright/mocks/image_s.jpg');
+
   const component = await render(
     <Box pt={{ base: '134px', lg: 0 }}>
       <TokenInventory
@@ -15,7 +20,7 @@ test('base view +@mobile', async({ render }) => {
         // @ts-ignore:
         inventoryQuery={{
           data: {
-            items: [ tokenInstanse, tokenInstanse, tokenInstanse ],
+            items: [ tokenInstance, item, item ],
             next_page_params: { unique_token: 1 },
           },
 

yarn.lock

@@ -5176,29 +5176,29 @@
     tiny-glob "^0.2.9"
     tslib "^2.4.0"
 
-"@playwright/experimental-ct-core@1.47.2":
-  version "1.47.2"
-  resolved "https://registry.yarnpkg.com/@playwright/experimental-ct-core/-/experimental-ct-core-1.47.2.tgz#b04a7d3b6ea7577959e1fad4a8f4604f0a9bfbed"
-  integrity sha512-aTR254jpS7mpuX8Od6vt9zOOmeuZ1PPI8aaT3vxb8lOtRWoq/XsCsnlxu3eWInbDsiYyAEcxPsiGLU9PXgC4LQ==
+"@playwright/experimental-ct-core@1.49.0":
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/@playwright/experimental-ct-core/-/experimental-ct-core-1.49.0.tgz#e827ec8ad38f5fb049b2a19158489dd2a2eaba07"
+  integrity sha512-Tl/JekIQOyHIctFvzmHaSB8SuBTbOYcIdrb5HMwMc70i86XbPnQfDp65zgzAuvUiDN1u1k+aIpygJ8ZqnRYgVw==
   dependencies:
-    playwright "1.47.2"
-    playwright-core "1.47.2"
+    playwright "1.49.0"
+    playwright-core "1.49.0"
     vite "^5.2.8"
 
-"@playwright/experimental-ct-react@1.47.2":
-  version "1.47.2"
-  resolved "https://registry.yarnpkg.com/@playwright/experimental-ct-react/-/experimental-ct-react-1.47.2.tgz#45d99240be04db378183433608fc39470ea61799"
-  integrity sha512-taWSdPhbdXl6dsC2RmlfGoOy9moeBxMdV7j4n/IEXfzMWu7GshUR9kAESg3QsV03i1vU8kTX5Ko28Yt3ISnk4w==
+"@playwright/experimental-ct-react@1.49.0":
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/@playwright/experimental-ct-react/-/experimental-ct-react-1.49.0.tgz#14899cab22f48b59e4ebbf340011b596d3babe19"
+  integrity sha512-zkCKItOwMHJsyqXagYmpv/iVCjnjpT+NWvLS8HFec1HuU28kI3AhzcIhKJvZbQLiJV+fL99wFhcJnOjHZm5VAA==
   dependencies:
-    "@playwright/experimental-ct-core" "1.47.2"
+    "@playwright/experimental-ct-core" "1.49.0"
     "@vitejs/plugin-react" "^4.2.1"
 
-"@playwright/test@1.47.2":
-  version "1.47.2"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.47.2.tgz#dbe7051336bfc5cc599954214f9111181dbc7475"
-  integrity sha512-jTXRsoSPONAs8Za9QEQdyjFn+0ZQFjCiIztAIF6bi1HqhBzG9Ma7g1WotyiGqFSBRZjIEqMdT8RUlbk1QVhzCQ==
+"@playwright/test@1.49.0":
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.49.0.tgz#74227385b58317ee076b86b56d0e1e1b25cff01e"
+  integrity sha512-DMulbwQURa8rNIQrf94+jPJQ4FmOVdpE5ZppRNvWVjvhC+6sOeo28r8MgIpQRYouXRtt/FCCXU7zn20jnHR4Qw==
   dependencies:
-    playwright "1.47.2"
+    playwright "1.49.0"
 
 "@polka/url@^1.0.0-next.24":
   version "1.0.0-next.25"
@@ -14651,17 +14651,17 @@ pkg-types@^1.0.3:
     mlly "^1.2.0"
     pathe "^1.1.0"
 
-playwright-core@1.47.2:
-  version "1.47.2"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.47.2.tgz#7858da9377fa32a08be46ba47d7523dbd9460a4e"
-  integrity sha512-3JvMfF+9LJfe16l7AbSmU555PaTl2tPyQsVInqm3id16pdDfvZ8TTZ/pyzmkbDrZTQefyzU7AIHlZqQnxpqHVQ==
+playwright-core@1.49.0:
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.49.0.tgz#8e69ffed3f41855b854982f3632f2922c890afcb"
+  integrity sha512-R+3KKTQF3npy5GTiKH/T+kdhoJfJojjHESR1YEWhYuEKRVfVaxH3+4+GvXE5xyCngCxhxnykk0Vlah9v8fs3jA==
 
-playwright@1.47.2:
-  version "1.47.2"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.47.2.tgz#155688aa06491ee21fb3e7555b748b525f86eb20"
-  integrity sha512-nx1cLMmQWqmA3UsnjaaokyoUpdVaaDhJhMoxX2qj3McpjnsqFHs516QAKYhqHAgOP+oCFTEOCOAaD1RgD/RQfA==
+playwright@1.49.0:
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.49.0.tgz#df6b9e05423377a99658202844a294a8afb95d0a"
+  integrity sha512-eKpmys0UFDnfNb3vfsf8Vx2LEOtflgRebl0Im2eQQnYMA4Aqd+Zw8bEOB+7ZKvN76901mRnqdsiOGKxzVTbi7A==
   dependencies:
-    playwright-core "1.47.2"
+    playwright-core "1.49.0"
   optionalDependencies:
     fsevents "2.3.2"