Commit 2ddea2d3 authored by tom's avatar tom

tests for logo and network menu

parent 3583f6c6
import type { FeaturedNetwork } from 'types/networks'; import type { FeaturedNetwork } from 'types/networks';
const FEATURED_NETWORKS: Array<FeaturedNetwork> = [ const FEATURED_NETWORKS: Array<FeaturedNetwork> = [
{ title: 'Gnosis Chain', url: 'https://blockscout.com/xdai/mainnet', group: 'Mainnets' }, { title: 'Gnosis Chain', url: 'https://blockscout.com/xdai/mainnet', group: 'Mainnets', isActive: true },
{ title: 'Arbitrum on xDai', url: 'https://blockscout.com/xdai/aox', group: 'Mainnets' }, { title: 'Arbitrum on xDai', url: 'https://blockscout.com/xdai/aox', group: 'Mainnets' },
{ title: 'Ethereum', url: 'https://blockscout.com/eth/mainnet', group: 'Mainnets' }, { title: 'Ethereum', url: 'https://blockscout.com/eth/mainnet', group: 'Mainnets' },
{ title: 'Ethereum Classic', url: 'https://blockscout.com/etx/mainnet', group: 'Mainnets', icon: 'https://example.com/my-logo.png' }, { title: 'Ethereum Classic', url: 'https://blockscout.com/etx/mainnet', group: 'Mainnets', icon: 'https://example.com/my-logo.png' },
...@@ -14,4 +14,4 @@ const FEATURED_NETWORKS: Array<FeaturedNetwork> = [ ...@@ -14,4 +14,4 @@ const FEATURED_NETWORKS: Array<FeaturedNetwork> = [
{ title: 'Astar', url: 'https://blockscout.com/astar', group: 'Other' }, { title: 'Astar', url: 'https://blockscout.com/astar', group: 'Other' },
]; ];
export const FEATURED_NETWORKS_MOCK = JSON.stringify(FEATURED_NETWORKS).replaceAll('"', '\''); export const FEATURED_NETWORKS_MOCK = JSON.stringify(FEATURED_NETWORKS);
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 209.322 209.322">
<path d="M105.572 101.811c9.889-6.368 27.417-16.464 28.106-42.166.536-20.278-9.971-49.506-49.155-50.878C53.041 7.659 39.9 28.251 36.071 46.739l-.928-.126c-1.932 0-3.438 1.28-5.34 2.889-2.084 1.784-4.683 3.979-7.792 4.308-3.573.361-8.111-1.206-11.698-2.449-4.193-1.431-6.624-2.047-8.265-.759C.545 51.765-.13 53.864.02 56.828c.331 6.326 4.971 18.917 16.016 25.778 7.67 4.765 16.248 5.482 20.681 5.482h.006c2.37 0 4.945-.239 7.388-.726 2.741 4.218 5.228 7.476 6.037 9.752 2.054 5.851-27.848 25.087-27.848 55.01 0 29.916 22.013 48.475 56.727 48.475h55.004c30.593 0 70.814-29.908 75.291-92.48-28.541 24.072-42.294-9.969-103.75-6.308zM18.941 77.945C8.775 71.617 4.992 58.922 5.294 55.525c.897.24 2.194.689 3.228 1.042 4.105 1.415 9.416 3.228 14.068 2.707 4.799-.499 8.253-3.437 10.778-5.574.607-.509 1.393-1.176 1.872-1.491.87.315.962.693 1.176 3.14.196 2.26.473 5.37 2.362 9.006 1.437 2.761 3.581 5.705 5.646 8.542 1.701 2.336 4.278 5.871 4.535 6.404-.445 1.184-4.907 3.282-12.229 3.282-6.553.008-13.04-1.679-17.789-4.638zM56.86 49.368c0-4.938 4.001-8.943 8.931-8.943a8.942 8.942 0 0 1 8.942 8.943c0 4.931-4.001 8.942-8.942 8.942-4.937.001-8.931-4.011-8.931-8.942zm92.299 106.03-20.63 11.169 13.408 9.293s-49.854 15.813-72.198-6.885c-11.006-11.16-13.06-28.533 4.124-38.84 17.184-10.312 84.609 3.943 84.609 3.943L134.295 147.8l14.864 7.598z" fill="#ffef07"/>
</svg>
import type { test } from '@playwright/experimental-ct-react'; import type { test } from '@playwright/experimental-ct-react';
import type { Browser } from '@playwright/test';
interface Env { interface Env {
name: string; name: string;
...@@ -6,18 +7,22 @@ interface Env { ...@@ -6,18 +7,22 @@ interface Env {
} }
// keep in mind that all passed variables here should be present in env config files (.env.pw or .env.poa) // 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'] { export default function contextWithEnvs(envs: Array<Env>): Parameters<typeof test.extend>[0]['context'] {
return async({ browser }, use) => { return async({ browser }, use) => {
const context = await browser.newContext({ const context = await createContextWithEnvs(browser, envs);
storageState: {
origins: [
{ origin: 'http://localhost:3100', localStorage: envs },
],
cookies: [],
},
});
await use(context); await use(context);
await context.close(); await context.close();
}; };
} }
export async function createContextWithEnvs(browser: Browser, envs: Array<Env>) {
return browser.newContext({
storageState: {
origins: [
{ origin: 'http://localhost:3100', localStorage: envs },
],
cookies: [],
},
});
}
...@@ -26,7 +26,7 @@ do ...@@ -26,7 +26,7 @@ do
# if there is a value, escape it and add line to target file # if there is a value, escape it and add line to target file
escapedConfigValue=$(echo $configValue | sed s/\'/\"/g); escapedConfigValue=$(echo $configValue | sed s/\'/\"/g);
echo "window.process.env.${configName} = localStorage.getItem('${configName}') || '${escapedConfigValue}';" >> $targetFile; echo "window.process.env.${configName} = localStorage.getItem('${configName}') ?? '${escapedConfigValue}';" >> $targetFile;
done < $envFile done < $envFile
done done
......
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 123 24">
<g clip-path="url(#network-logo_svg__a)">
<mask id="network-logo_svg__b" width="123" height="22" x="0" y="1" maskUnits="userSpaceOnUse" style="mask-type:luminance">
<path fill="#fff" d="M122.375 1H0v22h122.375V1Z"/>
</mask>
<g fill="#51AA8F" mask="url(#network-logo_svg__b)">
<path d="M22.28 18.796V4.093h6.204c1.1 0 2.038.169 2.798.506.759.337 1.338.803 1.728 1.398.39.595.58 1.289.58 2.082 0 .615-.11 1.16-.34 1.656-.23.495-.57.902-1.03 1.239-.459.337-1.008.565-1.668.694v.129c.5.119.92.317 1.26.595.339.277.619.614.838 1.001.23.396.43.872.61 1.447l1.269 3.946h-3.157l-1.12-3.51c-.16-.564-.35-1-.569-1.318a1.82 1.82 0 0 0-.86-.684c-.359-.139-.819-.218-1.398-.218h-2.058v5.72h-3.088v.02Zm5.674-8.09c.52 0 .97-.08 1.36-.228.379-.149.679-.387.889-.704.21-.317.32-.714.32-1.17 0-.466-.11-.852-.32-1.16a1.795 1.795 0 0 0-.89-.674 3.98 3.98 0 0 0-1.358-.218h-2.588v4.164h2.587v-.01Zm12.691 8.338c-1.12 0-2.128-.248-3.028-.733a5.355 5.355 0 0 1-2.138-2.073c-.52-.892-.779-1.913-.779-3.063 0-1.14.26-2.162.77-3.054a5.443 5.443 0 0 1 2.127-2.092c.91-.505 1.929-.753 3.068-.753s2.158.248 3.057.753c.9.496 1.609 1.2 2.118 2.092.51.893.77 1.914.77 3.064 0 1.14-.26 2.161-.78 3.053a5.486 5.486 0 0 1-2.128 2.082c-.909.476-1.928.724-3.057.724Zm0-2.449a2.85 2.85 0 0 0 1.528-.416c.45-.278.81-.674 1.08-1.19.26-.515.4-1.12.4-1.814 0-.684-.13-1.29-.39-1.815a2.937 2.937 0 0 0-1.07-1.2 2.892 2.892 0 0 0-1.538-.425c-.57 0-1.08.138-1.529.426-.45.277-.81.684-1.069 1.2-.26.515-.39 1.13-.39 1.824 0 .684.13 1.289.4 1.804.26.516.62.912 1.07 1.19.429.277.938.416 1.508.416Zm12.748 2.449c-1.119 0-2.128-.248-3.027-.733a5.354 5.354 0 0 1-2.138-2.073c-.52-.892-.78-1.913-.78-3.063 0-1.14.26-2.162.77-3.054a5.442 5.442 0 0 1 2.128-2.092c.909-.505 1.928-.753 3.067-.753 1.14 0 2.158.248 3.058.753a5.426 5.426 0 0 1 2.118 2.092c.51.893.769 1.914.769 3.064 0 1.14-.26 2.161-.78 3.053a5.485 5.485 0 0 1-2.128 2.082c-.909.476-1.928.724-3.057.724Zm0-2.449c.57 0 1.08-.139 1.529-.416a2.98 2.98 0 0 0 1.079-1.19c.26-.515.4-1.12.4-1.814 0-.684-.13-1.29-.39-1.815a2.937 2.937 0 0 0-1.07-1.2 2.892 2.892 0 0 0-1.538-.425c-.57 0-1.079.138-1.529.426-.45.277-.809.684-1.069 1.2-.26.515-.39 1.13-.39 1.824 0 .684.13 1.289.4 1.804.26.516.62.912 1.07 1.19.43.277.939.416 1.508.416Zm12.06 2.38c-.949 0-1.708-.149-2.258-.446-.56-.298-.949-.704-1.169-1.2-.23-.506-.34-1.1-.34-1.785v-5.74h-2.008v-2.31h2.009V4.668h2.927v2.826h2.638v2.3h-2.638v5.592c0 .386.12.684.36.892.24.208.63.307 1.169.307.34 0 .699-.04 1.079-.109v2.221a5.416 5.416 0 0 1-1.769.278Zm7.355.079c-1.259 0-2.308-.278-3.147-.833-.84-.555-1.409-1.348-1.709-2.39l2.398-.802c.2.585.51 1.04.92 1.358.41.317.919.476 1.508.476.6 0 1.05-.11 1.36-.317.309-.209.459-.496.459-.833 0-.278-.07-.506-.21-.664-.14-.169-.38-.308-.71-.437-.329-.119-.809-.248-1.418-.386-.96-.208-1.719-.446-2.268-.714-.55-.268-.96-.605-1.219-1.031-.26-.426-.4-.952-.4-1.606 0-.724.19-1.349.56-1.894.37-.545.899-.962 1.598-1.269.7-.297 1.499-.446 2.408-.446.8 0 1.509.109 2.128.337.62.228 1.12.565 1.519 1.011.4.446.68.992.83 1.626l-2.379.793a2.55 2.55 0 0 0-.789-1.17 2.056 2.056 0 0 0-1.289-.426c-.35 0-.65.04-.91.129-.258.09-.459.218-.599.387a.904.904 0 0 0-.21.595c0 .257.06.466.19.614.12.149.35.278.67.387.32.109.79.228 1.399.357 1.008.218 1.808.456 2.378.724.57.257.999.604 1.268 1.02.27.427.41.962.41 1.637 0 .763-.18 1.417-.55 1.982-.369.556-.909.992-1.618 1.31-.709.316-1.568.475-2.578.475Zm10.918-.079c-.95 0-1.709-.149-2.258-.446-.56-.298-.95-.704-1.17-1.2-.229-.506-.339-1.1-.339-1.785v-5.74h-2.008v-2.31h2.008V4.668h2.927v2.826h2.638v2.3h-2.638v5.592c0 .386.12.684.36.892.24.208.63.307 1.17.307.34 0 .699-.04 1.078-.109v2.221a5.401 5.401 0 0 1-1.768.278Zm8.454.069c-1.119 0-2.128-.248-3.027-.733a5.357 5.357 0 0 1-2.138-2.073c-.52-.892-.78-1.913-.78-3.063 0-1.14.26-2.162.77-3.054a5.44 5.44 0 0 1 2.128-2.092c.91-.505 1.928-.753 3.068-.753 1.139 0 2.158.248 3.057.753.9.496 1.609 1.2 2.118 2.092.51.893.77 1.914.77 3.064 0 1.14-.26 2.161-.78 3.053a5.482 5.482 0 0 1-2.128 2.082c-.91.476-1.919.724-3.057.724Zm0-2.449a2.85 2.85 0 0 0 1.529-.416c.45-.278.81-.674 1.08-1.19.26-.515.399-1.12.399-1.814 0-.684-.13-1.29-.39-1.815a2.919 2.919 0 0 0-1.07-1.2 2.89 2.89 0 0 0-1.538-.425c-.569 0-1.078.138-1.528.426-.45.277-.81.684-1.07 1.2-.259.515-.389 1.13-.389 1.824 0 .684.13 1.289.4 1.804.26.516.619.912 1.069 1.19.44.277.939.416 1.509.416Zm13.01 2.459c-1.059 0-2.038-.218-2.937-.664-.91-.446-1.629-1.11-2.178-1.993-.55-.882-.82-1.943-.82-3.173 0-1.219.26-2.27.789-3.172a5.42 5.42 0 0 1 2.138-2.072c.9-.486 1.899-.724 2.988-.724.9 0 1.709.169 2.428.506.72.337 1.329.793 1.809 1.378a5.274 5.274 0 0 1 1.028 1.992l-2.527.724a3.355 3.355 0 0 0-.55-1.1 2.723 2.723 0 0 0-.889-.764c-.35-.188-.76-.277-1.209-.277-.6 0-1.139.148-1.608.436a2.91 2.91 0 0 0-1.1 1.22 4.043 4.043 0 0 0-.399 1.804c0 .704.139 1.309.419 1.824.28.516.66.912 1.129 1.18.47.268.98.406 1.539.406.449 0 .85-.089 1.209-.267.36-.179.659-.427.909-.724.25-.307.44-.644.57-1.011l2.518.743a5.096 5.096 0 0 1-.959 1.854c-.46.565-1.06 1.021-1.799 1.369-.729.327-1.559.505-2.498.505Zm6.685-.258V4.093h2.927v7.912l4.596-4.511h3.387l-4.896 4.7 4.866 6.602h-3.417l-3.527-4.838-1.019.952v3.886h-2.917ZM9.06 6.82a2.747 2.747 0 0 0 2.758-2.737 2.747 2.747 0 0 0-2.757-2.736 2.747 2.747 0 0 0-2.758 2.736A2.747 2.747 0 0 0 9.061 6.82Z"/>
<path d="M16.724 12.54c-1.319-.753-3.007-.307-3.766 1.002a2.72 2.72 0 0 0-.37 1.427c.03 1.21-1.07 1.835-2.108 1.21-.04-.02-.08-.05-.13-.07-1.05-.584-1.05-1.824 0-2.399a2.744 2.744 0 0 0 1.449-2.409v-.06c-.03-1.209 1.069-1.834 2.108-1.209.83.506 1.908.545 2.807.03a2.726 2.726 0 0 0 1.01-3.738 2.77 2.77 0 0 0-3.767-1.001 2.74 2.74 0 0 0-1.379 2.429c.03 1.21-1.07 1.834-2.098 1.21a2.732 2.732 0 0 0-1.439-.407c-.53 0-1.02.148-1.439.396-1.039.615-2.128-.01-2.098-1.21a2.73 2.73 0 0 0-1.379-2.428A2.774 2.774 0 0 0 .358 6.324a2.73 2.73 0 0 0 1.02 3.738 2.785 2.785 0 0 0 2.807-.03c1.04-.625 2.128 0 2.098 1.21v.059c0 1.041.58 1.943 1.45 2.41 1.048.584 1.048 1.823 0 2.399-.04.02-.08.05-.12.069-1.04.615-2.129-.01-2.099-1.21.01-.486-.11-.981-.37-1.437-.759-1.309-2.448-1.755-3.766-1.002-1.32.774-1.769 2.45-1.01 3.758a2.77 2.77 0 0 0 3.767 1.001c.02-.01.03-.02.05-.03 1.04-.624 2.128 0 2.098 1.21v.07c0 1.506 1.24 2.736 2.758 2.736 1.519 0 2.758-1.23 2.758-2.736v-.06c-.03-1.21 1.069-1.834 2.108-1.21.02.01.04.02.06.04 1.319.754 3.007.307 3.766-1.001.76-1.339.31-3.014-1.009-3.768Z"/>
</g>
</g>
<defs>
<clipPath id="network-logo_svg__a">
<path fill="#fff" d="M0 1h122.375v22H0z"/>
</clipPath>
</defs>
</svg>
import { test, expect, devices } from '@playwright/experimental-ct-react'; import { test as base, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react'; import React from 'react';
import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network';
import authFixture from 'playwright/fixtures/auth'; import authFixture from 'playwright/fixtures/auth';
import contextWithEnvs, { createContextWithEnvs } from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp'; import TestApp from 'playwright/TestApp';
import Burger from './Burger'; import Burger from './Burger';
test.use({ viewport: devices['iPhone 13 Pro'].viewport }); const FEATURED_NETWORKS_URL = 'https://example.com/featured-networks.json';
const LOGO_URL = 'https://example.com/my-logo.png';
base.use({ viewport: devices['iPhone 13 Pro'].viewport });
const hooksConfig = { const hooksConfig = {
router: { router: {
...@@ -16,7 +21,26 @@ const hooksConfig = { ...@@ -16,7 +21,26 @@ const hooksConfig = {
}, },
}; };
const test = base.extend({
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
});
test('base view', async({ mount, page }) => { test('base view', async({ mount, page }) => {
await page.route(FEATURED_NETWORKS_URL, (route) => {
return route.fulfill({
body: FEATURED_NETWORKS_MOCK,
});
});
await page.route(LOGO_URL, (route) => {
return route.fulfill({
status: 200,
path: './playwright/image_s.jpg',
});
});
const component = await mount( const component = await mount(
<TestApp> <TestApp>
<Burger/> <Burger/>
...@@ -35,6 +59,18 @@ test.describe('dark mode', () => { ...@@ -35,6 +59,18 @@ test.describe('dark mode', () => {
test.use({ colorScheme: 'dark' }); test.use({ colorScheme: 'dark' });
test('base view', async({ mount, page }) => { test('base view', async({ mount, page }) => {
await page.route(FEATURED_NETWORKS_URL, (route) => {
return route.fulfill({
body: FEATURED_NETWORKS_MOCK,
});
});
await page.route(LOGO_URL, (route) => {
return route.fulfill({
status: 200,
path: './playwright/image_s.jpg',
});
});
const component = await mount( const component = await mount(
<TestApp> <TestApp>
<Burger/> <Burger/>
...@@ -64,8 +100,11 @@ test('submenu', async({ mount, page }) => { ...@@ -64,8 +100,11 @@ test('submenu', async({ mount, page }) => {
}); });
test.describe('auth', () => { test.describe('auth', () => {
const extendedTest = test.extend({ const extendedTest = base.extend({
context: ({ context }, use) => { context: async({ browser }, use) => {
const context = await createContextWithEnvs(browser, [
{ name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
]);
authFixture(context); authFixture(context);
use(context); use(context);
}, },
......
...@@ -6,18 +6,16 @@ import TestApp from 'playwright/TestApp'; ...@@ -6,18 +6,16 @@ import TestApp from 'playwright/TestApp';
import NetworkLogo from './NetworkLogo'; 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', () => { test.describe('placeholder logo', () => {
test('+@desktop-xl +@dark-mode +@dark-mode-xl', async({ mount }) => { const extendedTest = test.extend({
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_NETWORK_LOGO', value: '' },
{ name: 'NEXT_PUBLIC_NETWORK_ICON', value: '' },
// 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( const component = await mount(
<TestApp> <TestApp>
<NetworkLogo/> <NetworkLogo/>
...@@ -40,6 +38,43 @@ test.describe('custom logo', () => { ...@@ -40,6 +38,43 @@ test.describe('custom logo', () => {
}); });
extendedTest('+@desktop-xl +@dark-mode +@dark-mode-xl', async({ mount, page }) => { extendedTest('+@desktop-xl +@dark-mode +@dark-mode-xl', async({ mount, page }) => {
await page.route(LOGO_URL, (route) => {
return route.fulfill({
status: 200,
path: './playwright/network-logo.svg',
});
});
await page.route(ICON_URL, (route) => {
return route.fulfill({
status: 200,
path: './playwright/duck.svg',
});
});
const component = await mount(
<TestApp>
<NetworkLogo/>
</TestApp>,
);
await expect(component.locator('a')).toHaveScreenshot();
});
});
test.describe('custom logo with dark option', () => {
const LOGO_URL = 'https://example.com/my-logo.png';
const ICON_URL = 'https://example.com/my-icon.png';
const extendedTest = test.extend({
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_NETWORK_LOGO', value: LOGO_URL },
{ name: 'NEXT_PUBLIC_NETWORK_LOGO_DARK', value: LOGO_URL },
{ name: 'NEXT_PUBLIC_NETWORK_ICON', value: ICON_URL },
{ name: 'NEXT_PUBLIC_NETWORK_ICON_DARK', value: ICON_URL },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
});
extendedTest('-@default +@dark-mode +@dark-mode-xl', async({ mount, page }) => {
await page.route(LOGO_URL, (route) => { await page.route(LOGO_URL, (route) => {
return route.fulfill({ return route.fulfill({
status: 200, status: 200,
......
...@@ -29,7 +29,7 @@ extendedTest('base view +@dark-mode', async({ mount, page }) => { ...@@ -29,7 +29,7 @@ extendedTest('base view +@dark-mode', async({ mount, page }) => {
await page.route(FEATURED_NETWORKS_URL, (route) => { await page.route(FEATURED_NETWORKS_URL, (route) => {
return route.fulfill({ return route.fulfill({
status: 200, status: 200,
body: JSON.stringify(FEATURED_NETWORKS_MOCK), body: FEATURED_NETWORKS_MOCK,
}); });
}); });
...@@ -47,6 +47,6 @@ extendedTest('base view +@dark-mode', async({ mount, page }) => { ...@@ -47,6 +47,6 @@ extendedTest('base view +@dark-mode', async({ mount, page }) => {
await component.locator('button[aria-label="Network menu"]').click(); await component.locator('button[aria-label="Network menu"]').click();
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 450, height: 550 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 450, height: 550 } });
await component.getByText(/optimism/i).hover(); await component.getByText(/poa/i).hover();
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 450, height: 550 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 450, height: 550 } });
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment