reassign envs in pw tests

configs/envs/.env.pw

@@ -9,6 +9,8 @@ NEXT_PUBLIC_APP_ENV=testing
 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
+NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME=true
+NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER=true
 
 # api config
 NEXT_PUBLIC_API_HOST=blockscout.com

playwright/fixtures/contextWithEnvs.ts

+import type { test } from '@playwright/experimental-ct-react';
+
+interface Env {
+  name: string;
+  value: string;
+}
+
+// keep in mind that all passed variables here should be present in env config files (.env.pw or .env.poa)
+export default function createContextWithEnvs(envs: Array<Env>): Parameters<typeof test.extend>[0]['context'] {
+  return async({ browser }, use) => {
+    const context = await browser.newContext({
+      storageState: {
+        origins: [
+          { origin: 'http://localhost:3100', localStorage: envs },
+        ],
+        cookies: [],
+      },
+    });
+
+    await use(context);
+    await context.close();
+  };
+}

playwright/fixtures/socketServer.ts

-import type { TestFixture } from '@playwright/test';
+import type { TestFixture, Page } from '@playwright/test';
 import type { WebSocket } from 'ws';
 import { WebSocketServer } from 'ws';
 
 import type { NewBlockSocketResponse } from 'types/api/block';
 
 type ReturnType = () => Promise<WebSocket>;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type ArgsType = any;
 
 type Channel = [string, string, string];
 
@@ -17,7 +15,7 @@ export interface SocketServerFixture {
 export const PORT = 3200;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const createSocket: TestFixture<ReturnType, ArgsType> = async({ page }, use) => {
+export const createSocket: TestFixture<ReturnType, { page: Page}> = async({ page }, use) => {
   const socketServer = new WebSocketServer({ port: PORT });
 
   const connectionPromise = new Promise<WebSocket>((resolve) => {

playwright/make-envs-script.sh

@@ -27,7 +27,7 @@ do
         # 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;
+            echo "window.process.env.${configName} = localStorage.getItem('${configName}') || '${escapedConfigValue}';" >> $targetFile;
         fi
     done < $envFile
 done

ui/home/Stats.pw.tsx

@@ -2,6 +2,7 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as statsMock from 'mocks/stats/index';
+import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
 
 import Stats from './Stats';
@@ -19,7 +20,55 @@ test('all items +@mobile +@dark-mode +@desktop-xl', async({ mount, page }) => {
       <Stats/>
     </TestApp>,
   );
-  await page.waitForResponse(API_URL),
 
   await expect(component).toHaveScreenshot();
 });
+
+test.describe('4 items', () => {
+  const extendedTest = test.extend({
+    context: contextWithEnvs([
+      { name: 'NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME', value: 'false' },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ]) as any,
+  });
+
+  extendedTest('default view +@mobile -@default', async({ mount, page }) => {
+    await page.route(API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(statsMock.base),
+    }));
+
+    const component = await mount(
+      <TestApp>
+        <Stats/>
+      </TestApp>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});
+
+test.describe('3 items', () => {
+  const extendedTest = test.extend({
+    context: contextWithEnvs([
+      { name: 'NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME', value: 'false' },
+      { name: 'NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER', value: 'false' },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ]) as any,
+  });
+
+  extendedTest('default view +@mobile -@default', async({ mount, page }) => {
+    await page.route(API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(statsMock.base),
+    }));
+
+    const component = await mount(
+      <TestApp>
+        <Stats/>
+      </TestApp>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});