network logo tests

configs/envs/.env.pw

@@ -11,6 +11,8 @@ 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
+NEXT_PUBLIC_NETWORK_LOGO=
+NEXT_PUBLIC_NETWORK_SMALL_LOGO=
 
 # api config
 NEXT_PUBLIC_API_HOST=blockscout.com

playwright-ct.config.ts

@@ -96,6 +96,15 @@ const config: PlaywrightTestConfig = {
         colorScheme: 'dark',
       },
     },
+    {
+      name: 'dark color mode desktop xl',
+      grep: /\+@dark-mode-xl/,
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1600, height: 1000 },
+        colorScheme: 'dark',
+      },
+    },
   ],
 };
 

playwright/make-envs-script.sh

@@ -25,10 +25,8 @@ do
         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} = localStorage.getItem('${configName}') || '${escapedConfigValue}';" >> $targetFile;
-        fi
+        escapedConfigValue=$(echo $configValue | sed s/\'/\"/g);
+        echo "window.process.env.${configName} = localStorage.getItem('${configName}') || '${escapedConfigValue}';" >> $targetFile;
     done < $envFile
 done
 

ui/pages/Home.pw.tsx

@@ -43,5 +43,5 @@ test('default view -@default +@desktop-xl +@mobile +@dark-mode', async({ mount,
 
   await page.evaluate(insertAdText);
 
-  await expect(component).toHaveScreenshot();
+  await expect(component.locator('main')).toHaveScreenshot();
 });

ui/snippets/networkMenu/NetworkLogo.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
+import TestApp from 'playwright/TestApp';
+
+import NetworkLogo from './NetworkLogo';
+
+test('fallback logo +@desktop-xl +@dark-mode +@dark-mode-xl', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <NetworkLogo/>
+    </TestApp>,
+  );
+
+  await expect(component.locator('a')).toHaveScreenshot();
+});
+
+test.describe('placeholder logo', () => {
+  const extendedTest = test.extend({
+    context: contextWithEnvs([
+      { name: 'NEXT_PUBLIC_NETWORK_TYPE', value: 'unknown' },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ]) as any,
+  });
+
+  extendedTest('+@desktop-xl +@dark-mode +@dark-mode-xl', async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <NetworkLogo/>
+      </TestApp>,
+    );
+
+    await expect(component.locator('a')).toHaveScreenshot();
+  });
+});
+
+test.describe('custom logo', () => {
+  const LOGO_URL = 'https://example.com/my-logo.png';
+  const SMALL_LOGO_URL = 'https://example.com/my-logo-short.png';
+  const extendedTest = test.extend({
+    context: contextWithEnvs([
+      { name: 'NEXT_PUBLIC_NETWORK_LOGO', value: LOGO_URL },
+      { name: 'NEXT_PUBLIC_NETWORK_SMALL_LOGO', value: SMALL_LOGO_URL },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ]) as any,
+  });
+
+  extendedTest.only('+@desktop-xl +@dark-mode +@dark-mode-xl', async({ mount, page }) => {
+    await page.route(LOGO_URL, (route) => {
+      return route.fulfill({
+        status: 200,
+        path: './playwright/giant_duck_long.jpg',
+      });
+    });
+    await page.route(SMALL_LOGO_URL, (route) => {
+      return route.fulfill({
+        status: 200,
+        path: './playwright/image_s.jpg',
+      });
+    });
+
+    const component = await mount(
+      <TestApp>
+        <NetworkLogo/>
+      </TestApp>,
+    );
+
+    await expect(component.locator('a')).toHaveScreenshot();
+  });
+});