Skip to content

F
frontend
Commit 6bfc4955 authored by tom goriunov's avatar tom goriunov Committed by GitHub
Browse files
Options

Playwright tests refactoring, pt.2 (#1787) 

* create storageState fixture

* remove auth fixture

* renaming

* migrate bridge tokens and shibarium rollup tests

* migrate to common app config

* update screenshots

* re-implement fixtures for mocking envs, features and auth state

* update screenshot
parent d1f7e165
Show whitespace changes
Inline Side-by-side
Showing with 775 additions and 1617 deletions
playwright/TestApp.tsx
View file @ 6bfc4955
...@@ -6,6 +6,7 @@ import { WagmiProvider } from 'wagmi'; ...@@ -6,6 +6,7 @@ import { WagmiProvider } from 'wagmi';
import type { Props as PageProps } from 'nextjs/getServerSideProps'; import type { Props as PageProps } from 'nextjs/getServerSideProps';
import config from 'configs/app';
import { AppContextProvider } from 'lib/contexts/app'; import { AppContextProvider } from 'lib/contexts/app';
import { SocketProvider } from 'lib/socket/context'; import { SocketProvider } from 'lib/socket/context';
import wagmiConfig from 'lib/web3/wagmiConfig'; import wagmiConfig from 'lib/web3/wagmiConfig';
...@@ -43,7 +44,7 @@ const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props ...@@ -43,7 +44,7 @@ const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props
return ( return (
<ChakraProvider theme={ theme }> <ChakraProvider theme={ theme }>
<QueryClientProvider client={ queryClient }> <QueryClientProvider client={ queryClient }>
<SocketProvider url={ withSocket ? `ws://${ app.domain }:${ app.socketPort }` : undefined }> <SocketProvider url={ withSocket ? `ws://${ config.app.host }:${ app.socketPort }` : undefined }>
<AppContextProvider { ...appContext }> <AppContextProvider { ...appContext }>
<GrowthBookProvider> <GrowthBookProvider>
<WagmiProvider config={ wagmiConfig! }> <WagmiProvider config={ wagmiConfig! }>
......
playwright/fixtures/auth.ts
View file @ 6bfc4955
import type { BrowserContext } from '@playwright/test'; import type { BrowserContext, TestFixture } from '@playwright/test';
import config from 'configs/app';
import * as cookies from 'lib/cookies'; import * as cookies from 'lib/cookies';
import { domain } from 'playwright/utils/app';
export default function authFixture(context: BrowserContext) { export function authenticateUser(context: BrowserContext) {
context.addCookies([ { name: cookies.NAMES.API_TOKEN, value: 'foo', domain, path: '/' } ]); context.addCookies([ { name: cookies.NAMES.API_TOKEN, value: 'foo', domain: config.app.host, path: '/' } ]);
} }
export const contextWithAuth: TestFixture<BrowserContext, { context: BrowserContext }> = async({ context }, use) => {
authenticateUser(context);
use(context);
};
playwright/fixtures/contextWithEnvs.ts
View file @ 6bfc4955
...@@ -7,7 +7,13 @@ interface Env { ...@@ -7,7 +7,13 @@ interface Env {
value: string; value: string;
} }
// keep in mind that all passed variables here should be present in env config files (.env.pw or .env.poa) /**
* @deprecated please use mockEnvs fixture
*
* @export
* @param {Array<Env>} envs
* @return {*} {Parameters<typeof test.extend>[0]['context']}
*/
export default function contextWithEnvsFixture(envs: Array<Env>): Parameters<typeof test.extend>[0]['context'] { export default function contextWithEnvsFixture(envs: Array<Env>): Parameters<typeof test.extend>[0]['context'] {
return async({ browser }, use) => { return async({ browser }, use) => {
const context = await createContextWithStorage(browser, envs); const context = await createContextWithStorage(browser, envs);
......
playwright/fixtures/contextWithFeatures.ts
View file @ 6bfc4955
...@@ -7,6 +7,13 @@ interface Feature { ...@@ -7,6 +7,13 @@ interface Feature {
value: unknown; value: unknown;
} }
/**
* @deprecated please use mockFeatures fixture
*
* @export
* @param {Array<Feature>} envs
* @return {*} {Parameters<typeof test.extend>[0]['context']}
*/
export default function contextWithFeaturesFixture(envs: Array<Feature>): Parameters<typeof test.extend>[0]['context'] { export default function contextWithFeaturesFixture(envs: Array<Feature>): Parameters<typeof test.extend>[0]['context'] {
return async({ browser }, use) => { return async({ browser }, use) => {
const storageItems = envs.map(({ id, value }) => ({ name: `pw_feature:${ id }`, value: JSON.stringify(value) })); const storageItems = envs.map(({ id, value }) => ({ name: `pw_feature:${ id }`, value: JSON.stringify(value) }));
......
playwright/fixtures/createContextWithStorage.ts
View file @ 6bfc4955
import type { Browser } from '@playwright/test'; import type { Browser } from '@playwright/test';
import * as app from 'playwright/utils/app'; import config from 'configs/app';
/**
* @deprecated please use mockEnvs or mockFeatures fixture
*
* @export
* @param {Browser} browser
* @param {Array<{ name: string; value: string }>} localStorage
* @return {*}
*/
export default async function createContextWithEnvs(browser: Browser, localStorage: Array<{ name: string; value: string }>) { export default async function createContextWithEnvs(browser: Browser, localStorage: Array<{ name: string; value: string }>) {
return browser.newContext({ return browser.newContext({
storageState: { storageState: {
origins: [ origins: [
{ origin: app.url, localStorage }, { origin: config.app.baseUrl, localStorage },
], ],
cookies: [], cookies: [],
}, },
......
playwright/fixtures/injectMetaMaskProvider.ts 0 → 100644
View file @ 6bfc4955
import type { TestFixture, Page } from '@playwright/test';
import type { WalletProvider } from 'types/web3';
export type InjectMetaMaskProvider = () => Promise<void>;
const fixture: TestFixture<InjectMetaMaskProvider, { page: Page }> = async({ page }, use) => {
await use(async() => {
await page.evaluate(() => {
window.ethereum = {
isMetaMask: true,
_events: {},
} as WalletProvider;
});
});
};
export default fixture;
playwright/fixtures/mockConfigResponse.ts 0 → 100644
View file @ 6bfc4955
import type { TestFixture, Page } from '@playwright/test';
import config from 'configs/app';
import { buildExternalAssetFilePath } from 'configs/app/utils';
export type MockConfigResponseFixture = (envName: string, envValue: string, content: string, isImage?: boolean) => Promise<void>;
const fixture: TestFixture<MockConfigResponseFixture, { page: Page }> = async({ page }, use) => {
await use(async(envName, envValue, content, isImage) => {
const url = config.app.baseUrl + buildExternalAssetFilePath(envName, envValue);
if (isImage) {
await page.route(url, (route) => route.fulfill({
status: 200,
path: content,
}));
} else {
await page.route(url, (route) => route.fulfill({
status: 200,
body: content,
}));
}
});
};
export default fixture;
playwright/fixtures/mockEnvs.ts 0 → 100644
View file @ 6bfc4955
/* eslint-disable max-len */
import type { TestFixture, Page } from '@playwright/test';
export type MockEnvsFixture = (envs: Array<[string, string]>) => Promise<void>;
const fixture: TestFixture<MockEnvsFixture, { page: Page }> = async({ page }, use) => {
await use(async(envs) => {
for (const [ name, value ] of envs) {
await page.evaluate(({ name, value }) => {
window.localStorage.setItem(name, value);
}, { name, value });
}
});
};
export default fixture;
export const ENVS_MAP: Record<string, Array<[string, string]>> = {
shibariumRollup: [
[ 'NEXT_PUBLIC_ROLLUP_TYPE', 'shibarium' ],
[ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
],
bridgedTokens: [
[ 'NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS', '[{"id":"1","title":"Ethereum","short_title":"ETH","base_url":"https://eth.blockscout.com/token/"},{"id":"56","title":"Binance Smart Chain","short_title":"BSC","base_url":"https://bscscan.com/token/"},{"id":"99","title":"POA","short_title":"POA","base_url":"https://blockscout.com/poa/core/token/"}]' ],
[ 'NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES', '[{"type":"omni","title":"OmniBridge","short_title":"OMNI"},{"type":"amb","title":"Arbitrary Message Bridge","short_title":"AMB"}]' ],
],
userOps: [
[ 'NEXT_PUBLIC_HAS_USER_OPS', 'true' ],
],
};
playwright/fixtures/mockFeatures.ts 0 → 100644
View file @ 6bfc4955
/* eslint-disable max-len */
import type { TestFixture, Page } from '@playwright/test';
export type MockFeaturesFixture = (features: Array<[string, unknown]>) => Promise<void>;
const fixture: TestFixture<MockFeaturesFixture, { page: Page }> = async({ page }, use) => {
await use(async(features) => {
for (const [ name, value ] of features) {
await page.evaluate(({ name, value }) => {
window.localStorage.setItem(`pw_feature:${ name }`, JSON.stringify(value));
}, { name, value });
}
});
};
export default fixture;
playwright/lib.tsx
View file @ 6bfc4955
...@@ -3,27 +3,35 @@ import { test as base } from '@playwright/experimental-ct-react'; ...@@ -3,27 +3,35 @@ import { test as base } from '@playwright/experimental-ct-react';
import * as textAdMock from 'mocks/ad/textAd'; import * as textAdMock from 'mocks/ad/textAd';
import type { MockApiResponseFixture } from './fixtures/mockApiResponse'; import * as injectMetaMaskProvider from './fixtures/injectMetaMaskProvider';
import mockApiResponseFixture from './fixtures/mockApiResponse'; import * as mockApiResponse from './fixtures/mockApiResponse';
import type { MockAssetResponseFixture } from './fixtures/mockAssetResponse'; import * as mockAssetResponse from './fixtures/mockAssetResponse';
import mockAssetResponseFixture from './fixtures/mockAssetResponse'; import * as mockConfigResponse from './fixtures/mockConfigResponse';
import type { RenderFixture } from './fixtures/render'; import * as mockEnvs from './fixtures/mockEnvs';
import renderFixture from './fixtures/render'; import * as mockFeatures from './fixtures/mockFeatures';
import type { CreateSocketFixture } from './fixtures/socketServer'; import * as render from './fixtures/render';
import { createSocket as createSocketFixture } from './fixtures/socketServer'; import * as socketServer from './fixtures/socketServer';
interface Fixtures { interface Fixtures {
render: RenderFixture; render: render.RenderFixture;
mockApiResponse: MockApiResponseFixture; mockApiResponse: mockApiResponse.MockApiResponseFixture;
mockAssetResponse: MockAssetResponseFixture; mockAssetResponse: mockAssetResponse.MockAssetResponseFixture;
createSocket: CreateSocketFixture; mockConfigResponse: mockConfigResponse.MockConfigResponseFixture;
mockEnvs: mockEnvs.MockEnvsFixture;
mockFeatures: mockFeatures.MockFeaturesFixture;
createSocket: socketServer.CreateSocketFixture;
injectMetaMaskProvider: injectMetaMaskProvider.InjectMetaMaskProvider;
} }
const test = base.extend<Fixtures>({ const test = base.extend<Fixtures>({
render: renderFixture, render: render.default,
mockApiResponse: mockApiResponseFixture, mockApiResponse: mockApiResponse.default,
mockAssetResponse: mockAssetResponseFixture, mockAssetResponse: mockAssetResponse.default,
createSocket: createSocketFixture, mockConfigResponse: mockConfigResponse.default,
mockEnvs: mockEnvs.default,
mockFeatures: mockFeatures.default,
createSocket: socketServer.createSocket,
injectMetaMaskProvider: injectMetaMaskProvider.default,
}); });
test.beforeEach(async({ page }) => { test.beforeEach(async({ page }) => {
......
playwright/mocks/banner.html deleted 100644 → 0
View file @ d1f7e165
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
}
.container {
border-radius: 12px;
background: linear-gradient(295deg, #DFE4FC 14.43%, #FEFEFF 50.15%, #D3E4FF 84.97%);
width: 100%;
height: 136px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
padding: 0 20px;
box-sizing: border-box;
position: relative;
}
.title {
color: #5353D3;
text-align: center;
font-family: Poppins;
font-size: 15px;
font-style: normal;
font-weight: 700;
z-index: 1;
@media(min-width: 480px) {
font-size: 20px;
}
@media(min-width: 836px) {
font-size: 24px;
line-height: 32px;
}
}
.image {
height: 40px;
z-index: 1;
@media(min-width: 480px) {
height: 42px;
}
}
.bg-image-left, .bg-image-right {
position: absolute;
width: 200px;
height: 100%;
bottom: 0;
background-position: bottom;
background-repeat: no-repeat;
}
.bg-image-left {
left: 0;
background-image: url('data:image/png;base64,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');
}
.bg-image-right {
right: 0;
background-image: url('data:image/png;base64,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');
}
</style>
<div class="container">
<div class="bg-image-left"></div>
<div class="bg-image-right"></div>
<span class="title">
Get your Base domain name now to earn BNS reward points
</span>
<svg class="image" width="256" height="42" viewBox="0 0 256 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.000244141 10C0.000244141 4.47717 4.4774 0 10.0002 0H32C37.5229 0 42.0001 4.47715 42.0001 10V31.9998C42.0001 37.5226 37.5229 41.9998 32.0001 41.9998H10.0003C4.47741 41.9998 0.000244141 37.5227 0.000244141 31.9998V10Z" fill="#5353D3"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.359 9.63004C18.359 8.74638 17.6427 8.03003 16.759 8.03003H14.3718C13.4882 8.03003 12.7718 8.74638 12.7718 9.63004V11.8466C12.7718 12.7303 12.0555 13.4466 11.1719 13.4466H9.67421C8.79056 13.4466 8.07422 14.163 8.07422 15.0466V32.43C8.07422 33.3137 8.79056 34.03 9.67421 34.03H12.0614C12.9451 34.03 13.6614 33.3137 13.6614 32.43V15.0467C13.6614 14.1631 14.3777 13.4467 15.2614 13.4467H16.759C17.6427 13.4467 18.359 12.7304 18.359 11.8467V9.63004ZM29.5713 9.63004C29.5713 8.74638 28.8549 8.03003 27.9713 8.03003H25.5841C24.7004 8.03003 23.9841 8.74638 23.9841 9.63003V11.8467C23.9841 12.7304 24.7004 13.4467 25.5841 13.4467H26.8871C27.7707 13.4467 28.487 14.1631 28.487 15.0467V32.43C28.487 33.3137 29.2034 34.03 30.087 34.03H32.4742C33.3579 34.03 34.0742 33.3137 34.0742 32.43V15.0466C34.0742 14.163 33.3579 13.4466 32.4742 13.4466H31.1713C30.2876 13.4466 29.5713 12.7303 29.5713 11.8466V9.63004ZM23.9064 19.9992C23.9064 19.1155 23.1901 18.3992 22.3064 18.3992H19.9192C19.0356 18.3992 18.3193 19.1155 18.3193 19.9992V27.323C18.3193 28.2067 19.0356 28.923 19.9192 28.923H22.3064C23.1901 28.923 23.9064 28.2067 23.9064 27.323V19.9992Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M50.4645 24.5354C51.4021 25.4731 52.6739 25.9999 54 25.9999C54.2652 25.9999 54.5196 25.8945 54.7071 25.707C54.8946 25.5194 55 25.2651 55 24.9999C55 24.7347 54.8946 24.4803 54.7071 24.2928C54.5196 24.1052 54.2652 23.9999 54 23.9999C53.2044 23.9999 52.4413 23.6838 51.8787 23.1212C51.3161 22.5586 51 21.7955 51 20.9999C51 20.2042 51.3161 19.4412 51.8787 18.8786C52.4413 18.3159 53.2044 17.9999 54 17.9999H57C57.7957 17.9999 58.5587 18.3159 59.1213 18.8786C59.6839 19.4412 60 20.2042 60 20.9999C60 21.2651 60.1054 21.5194 60.2929 21.707C60.4804 21.8945 60.7348 21.9999 61 21.9999C61.2652 21.9999 61.5196 21.8945 61.7071 21.707C61.8946 21.5194 62 21.2651 62 20.9999C62 19.6738 61.4732 18.402 60.5355 17.4643C59.5979 16.5267 58.3261 15.9999 57 15.9999H54C52.6739 15.9999 51.4021 16.5267 50.4645 17.4643C49.5268 18.402 49 19.6738 49 20.9999C49 22.326 49.5268 23.5977 50.4645 24.5354ZM60.9998 25.9999H63.9998C65.3259 25.9999 66.5976 25.4731 67.5353 24.5354C68.473 23.5977 68.9998 22.326 68.9998 20.9999C68.9998 19.6738 68.473 18.402 67.5353 17.4643C66.5976 16.5267 65.3259 15.9999 63.9998 15.9999C63.7346 15.9999 63.4802 16.1052 63.2927 16.2928C63.1051 16.4803 62.9998 16.7347 62.9998 16.9999C62.9998 17.2651 63.1051 17.5194 63.2927 17.707C63.4802 17.8945 63.7346 17.9999 63.9998 17.9999C64.7954 17.9999 65.5585 18.3159 66.1211 18.8786C66.6837 19.4412 66.9998 20.2042 66.9998 20.9999C66.9998 21.7955 66.6837 22.5586 66.1211 23.1212C65.5585 23.6838 64.7954 23.9999 63.9998 23.9999H60.9998C60.2041 23.9999 59.4411 23.6838 58.8785 23.1212C58.3159 22.5586 57.9998 21.7955 57.9998 20.9999C57.9998 20.7347 57.8944 20.4803 57.7069 20.2928C57.5194 20.1052 57.265 19.9999 56.9998 19.9999C56.7346 19.9999 56.4802 20.1052 56.2927 20.2928C56.1051 20.4803 55.9998 20.7347 55.9998 20.9999C55.9998 22.326 56.5266 23.5977 57.4643 24.5354C58.4019 25.4731 59.6737 25.9999 60.9998 25.9999Z" fill="url(#paint0_linear_19983_79007)"/>
<path d="M75.9998 9.99988C75.9998 4.47703 80.4769 -0.00012207 85.9998 -0.00012207H246C251.523 -0.00012207 256 4.47703 256 9.99988V31.9999C256 37.5227 251.523 41.9999 246 41.9999H85.9998C80.4769 41.9999 75.9998 37.5227 75.9998 31.9999V9.99988Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M98.4635 34.9371C106.441 34.9371 112.922 28.6924 112.922 20.9943C112.922 13.3076 106.441 7.06287 98.4635 7.06287C90.8985 7.06287 84.7003 12.6491 84.0522 19.7794H94.0211C94.575 17.9173 96.3543 16.5548 98.4635 16.5548C101.009 16.5548 103.083 18.5418 103.083 20.9943C103.083 23.4581 101.009 25.4451 98.4635 25.4451C96.3543 25.4451 94.575 24.0826 94.0211 22.2205H84.0522C84.7003 29.3509 90.8985 34.9371 98.4635 34.9371ZM238.242 18.5467C238.56 18.0991 238.996 17.728 239.55 17.4334C240.115 17.1271 240.758 16.974 241.476 16.974C242.313 16.974 243.067 17.1801 243.738 17.5925C244.421 18.0048 244.957 18.5939 245.346 19.3596C245.747 20.1136 245.947 20.9913 245.947 21.9927C245.947 22.9941 245.747 23.8835 245.346 24.6611C244.957 25.4268 244.421 26.0218 243.738 26.4459C243.067 26.87 242.313 27.082 241.476 27.082C240.758 27.082 240.121 26.9348 239.568 26.6403C239.026 26.3457 238.584 25.9746 238.242 25.527V31.5883H235.768V17.133H238.242V18.5467ZM243.42 21.9927C243.42 21.4036 243.296 20.897 243.049 20.4729C242.813 20.037 242.495 19.7072 242.095 19.4833C241.706 19.2595 241.282 19.1476 240.822 19.1476C240.375 19.1476 239.951 19.2654 239.55 19.501C239.161 19.7248 238.843 20.0547 238.596 20.4906C238.36 20.9265 238.242 21.439 238.242 22.028C238.242 22.6171 238.36 23.1295 238.596 23.5654C238.843 24.0013 239.161 24.3371 239.55 24.5727C239.951 24.7965 240.375 24.9085 240.822 24.9085C241.282 24.9085 241.706 24.7906 242.095 24.555C242.495 24.3194 242.813 23.9837 243.049 23.5478C243.296 23.1119 243.42 22.5935 243.42 21.9927ZM227.573 17.4334C227.02 17.728 226.584 18.0991 226.266 18.5467V17.133H223.792V31.5883H226.266V25.527C226.607 25.9746 227.049 26.3457 227.591 26.6403C228.145 26.9348 228.781 27.082 229.5 27.082C230.336 27.082 231.09 26.87 231.762 26.4459C232.445 26.0218 232.981 25.4268 233.37 24.6611C233.77 23.8835 233.97 22.9941 233.97 21.9927C233.97 20.9913 233.77 20.1136 233.37 19.3596C232.981 18.5939 232.445 18.0048 231.762 17.5925C231.09 17.1801 230.336 16.974 229.5 16.974C228.781 16.974 228.139 17.1271 227.573 17.4334ZM231.072 20.4729C231.32 20.897 231.443 21.4036 231.443 21.9927C231.443 22.5935 231.32 23.1119 231.072 23.5478C230.837 23.9837 230.519 24.3194 230.118 24.555C229.729 24.7906 229.305 24.9085 228.846 24.9085C228.398 24.9085 227.974 24.7965 227.573 24.5727C227.185 24.3371 226.867 24.0013 226.619 23.5654C226.384 23.1295 226.266 22.6171 226.266 22.028C226.266 21.439 226.384 20.9265 226.619 20.4906C226.867 20.0547 227.185 19.7248 227.573 19.501C227.974 19.2654 228.398 19.1476 228.846 19.1476C229.305 19.1476 229.729 19.2595 230.118 19.4833C230.519 19.7072 230.837 20.037 231.072 20.4729ZM211.179 21.9927C211.179 21.0031 211.373 20.1254 211.762 19.3596C212.163 18.5939 212.699 18.0048 213.37 17.5925C214.054 17.1801 214.813 16.974 215.65 16.974C216.38 16.974 217.016 17.1212 217.558 17.4158C218.112 17.7103 218.554 18.0814 218.884 18.5291V17.133H221.375V26.923H218.884V25.4916C218.566 25.9511 218.124 26.334 217.558 26.6403C217.005 26.9348 216.363 27.082 215.632 27.082C214.808 27.082 214.054 26.87 213.37 26.4459C212.699 26.0218 212.163 25.4268 211.762 24.6611C211.373 23.8835 211.179 22.9941 211.179 21.9927ZM218.884 22.028C218.884 21.4272 218.766 20.9147 218.53 20.4906C218.295 20.0547 217.977 19.7248 217.576 19.501C217.176 19.2654 216.746 19.1476 216.286 19.1476C215.827 19.1476 215.403 19.2595 215.014 19.4833C214.625 19.7072 214.307 20.037 214.059 20.4729C213.824 20.897 213.706 21.4036 213.706 21.9927C213.706 22.5817 213.824 23.1001 214.059 23.5478C214.307 23.9837 214.625 24.3194 215.014 24.555C215.414 24.7906 215.838 24.9085 216.286 24.9085C216.746 24.9085 217.176 24.7965 217.576 24.5727C217.977 24.3371 218.295 24.0072 218.53 23.5831C218.766 23.1472 218.884 22.6288 218.884 22.028ZM198.762 26.6049C199.457 26.8994 200.235 27.0467 201.095 27.0467C202.002 27.0467 202.785 26.8818 203.445 26.5519C204.105 26.2103 204.605 25.7567 204.947 25.1912C205.289 24.6257 205.46 24.0131 205.46 23.3534C205.46 22.5876 205.277 21.9691 204.912 21.4979C204.547 21.0266 204.111 20.6732 203.604 20.4376C203.097 20.202 202.444 19.9663 201.643 19.7307C201.053 19.554 200.594 19.4009 200.264 19.2713C199.946 19.1299 199.675 18.9532 199.451 18.7411C199.239 18.5173 199.133 18.2404 199.133 17.9106C199.133 17.4393 199.275 17.08 199.557 16.8326C199.852 16.5852 200.241 16.4615 200.724 16.4615C201.277 16.4615 201.719 16.6029 202.049 16.8856C202.391 17.1566 202.573 17.5041 202.597 17.9282H205.318C205.236 16.8208 204.794 15.9608 203.993 15.3482C203.203 14.7238 202.173 14.4116 200.9 14.4116C200.052 14.4116 199.298 14.5589 198.638 14.8534C197.979 15.1361 197.466 15.5485 197.101 16.0904C196.736 16.6323 196.553 17.2685 196.553 17.9989C196.553 18.7765 196.73 19.4009 197.083 19.8721C197.449 20.3316 197.879 20.6791 198.373 20.9147C198.88 21.1385 199.534 21.3683 200.335 21.6039C200.924 21.7688 201.383 21.922 201.713 22.0634C202.055 22.1929 202.338 22.3755 202.561 22.6112C202.785 22.8468 202.897 23.1472 202.897 23.5124C202.897 23.9601 202.732 24.3253 202.402 24.608C202.073 24.879 201.619 25.0145 201.042 25.0145C200.476 25.0145 200.029 24.8672 199.699 24.5727C199.381 24.2782 199.204 23.8776 199.169 23.371H196.518C196.53 24.125 196.736 24.7789 197.136 25.3326C197.537 25.8863 198.079 26.3104 198.762 26.6049ZM194.391 26.923H191.917L186.315 18.4584V26.923H183.841V14.5707H186.315L191.917 23.053V14.5707H194.391V26.923ZM181.198 21.6392C180.75 21.0738 180.179 20.7262 179.484 20.5966C180.12 20.3963 180.627 20.0547 181.004 19.5717C181.392 19.0887 181.587 18.4878 181.587 17.7692C181.587 17.1566 181.428 16.6088 181.11 16.1258C180.803 15.6427 180.344 15.2657 179.731 14.9948C179.13 14.7238 178.412 14.5883 177.575 14.5883H172.486V26.923H177.805C178.641 26.923 179.366 26.7816 179.979 26.4989C180.591 26.2161 181.057 25.8274 181.375 25.3326C181.704 24.826 181.869 24.2428 181.869 23.5831C181.869 22.8527 181.646 22.2047 181.198 21.6392ZM177.222 19.6777H174.96V16.5852H177.222C177.811 16.5852 178.264 16.7207 178.583 16.9917C178.901 17.2626 179.06 17.6455 179.06 18.1403C179.06 18.6351 178.901 19.018 178.583 19.2889C178.264 19.5481 177.811 19.6777 177.222 19.6777ZM178.848 24.4843C178.518 24.7671 178.052 24.9085 177.452 24.9085H174.96V21.5862H177.399C177.999 21.5862 178.477 21.7394 178.83 22.0457C179.183 22.3402 179.36 22.7525 179.36 23.2827C179.36 23.801 179.189 24.2016 178.848 24.4843ZM162.017 16.9917C163.183 16.9917 164.126 17.3628 164.845 18.105C165.563 18.8354 165.922 19.8603 165.922 21.1798V26.923H163.448V21.5155C163.448 20.738 163.254 20.1431 162.865 19.7307C162.477 19.3066 161.946 19.0946 161.275 19.0946C160.592 19.0946 160.05 19.3066 159.649 19.7307C159.26 20.1431 159.066 20.738 159.066 21.5155V26.923H156.592V17.133H159.066V18.3524C159.396 17.9282 159.814 17.5984 160.321 17.3628C160.839 17.1154 161.404 16.9917 162.017 16.9917ZM154.715 22.7702C154.763 22.4875 154.786 22.1694 154.786 21.816C154.786 20.8617 154.58 20.0194 154.168 19.2889C153.767 18.5467 153.196 17.9754 152.454 17.5748C151.723 17.1743 150.893 16.974 149.962 16.974C148.996 16.974 148.142 17.1801 147.399 17.5925C146.657 18.0048 146.08 18.5939 145.668 19.3596C145.255 20.1254 145.049 21.0148 145.049 22.028C145.049 23.0294 145.255 23.913 145.668 24.6787C146.092 25.4445 146.675 26.0394 147.417 26.4635C148.171 26.8759 149.019 27.082 149.962 27.082C151.128 27.082 152.112 26.7816 152.913 26.1808C153.714 25.5682 154.256 24.7906 154.539 23.8482H151.87C151.482 24.6375 150.828 25.0322 149.909 25.0322C149.273 25.0322 148.737 24.8319 148.301 24.4313C147.865 24.0308 147.617 23.4771 147.559 22.7702H154.715ZM151.535 19.5894C151.982 19.9663 152.212 20.4729 152.224 21.1091H147.576C147.67 20.4494 147.924 19.9369 148.336 19.5717C148.76 19.1947 149.279 19.0062 149.891 19.0062C150.539 19.0062 151.087 19.2006 151.535 19.5894ZM136.183 18.5467C136.501 18.0991 136.937 17.728 137.491 17.4334C138.056 17.1271 138.698 16.974 139.417 16.974C140.253 16.974 141.007 17.1801 141.679 17.5925C142.362 18.0048 142.898 18.5939 143.287 19.3596C143.687 20.1136 143.888 20.9913 143.888 21.9927C143.888 22.9941 143.687 23.8835 143.287 24.6611C142.898 25.4268 142.362 26.0218 141.679 26.4459C141.007 26.87 140.253 27.082 139.417 27.082C138.698 27.082 138.062 26.9348 137.508 26.6403C136.966 26.3457 136.524 25.9746 136.183 25.527V31.5883H133.709V17.133H136.183V18.5467ZM141.361 21.9927C141.361 21.4036 141.237 20.897 140.989 20.4729C140.754 20.037 140.436 19.7072 140.035 19.4833C139.646 19.2595 139.222 19.1476 138.763 19.1476C138.315 19.1476 137.891 19.2654 137.491 19.501C137.102 19.7248 136.784 20.0547 136.536 20.4906C136.301 20.9265 136.183 21.439 136.183 22.028C136.183 22.6171 136.301 23.1295 136.536 23.5654C136.784 24.0013 137.102 24.3371 137.491 24.5727C137.891 24.7965 138.315 24.9085 138.763 24.9085C139.222 24.9085 139.646 24.7906 140.035 24.555C140.436 24.3194 140.754 23.9837 140.989 23.5478C141.237 23.1119 141.361 22.5935 141.361 21.9927ZM122.379 26.2338C123.345 26.7757 124.405 27.0467 125.56 27.0467C126.714 27.0467 127.774 26.7757 128.74 26.2338C129.706 25.6919 130.466 24.9438 131.02 23.9895C131.585 23.0235 131.868 21.9338 131.868 20.7203C131.868 19.5187 131.585 18.4407 131.02 17.4865C130.466 16.5204 129.706 15.7664 128.74 15.2245C127.786 14.6826 126.726 14.4116 125.56 14.4116C124.405 14.4116 123.345 14.6826 122.379 15.2245C121.413 15.7664 120.647 16.5204 120.081 17.4865C119.516 18.4407 119.233 19.5187 119.233 20.7203C119.233 21.9338 119.516 23.0235 120.081 23.9895C120.647 24.9438 121.413 25.6919 122.379 26.2338ZM127.521 24.343C126.956 24.6728 126.302 24.8378 125.56 24.8378C124.817 24.8378 124.158 24.6728 123.58 24.343C123.015 24.0013 122.573 23.5183 122.255 22.8939C121.937 22.2695 121.778 21.545 121.778 20.7203C121.778 19.8957 121.937 19.177 122.255 18.5644C122.573 17.94 123.015 17.4629 123.58 17.133C124.158 16.8032 124.817 16.6382 125.56 16.6382C126.302 16.6382 126.956 16.8032 127.521 17.133C128.087 17.4629 128.528 17.94 128.846 18.5644C129.165 19.177 129.324 19.8957 129.324 20.7203C129.324 21.545 129.165 22.2695 128.846 22.8939C128.528 23.5183 128.087 24.0013 127.521 24.343Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_19983_79007" x1="74.9858" y1="29" x2="42.4858" y2="29" gradientUnits="userSpaceOnUse">
<stop/>
<stop offset="1" stop-color="#5353D3"/>
</linearGradient>
</defs>
</svg>
</div>
playwright/utils/app.ts
View file @ 6bfc4955
export const url = `${ process.env.NEXT_PUBLIC_APP_PROTOCOL }://${ process.env.NEXT_PUBLIC_APP_HOST }:${ process.env.NEXT_PUBLIC_APP_PORT }`;
export const domain = process.env.NEXT_PUBLIC_APP_HOST;
export const socketPort = 3200; export const socketPort = 3200;
playwright/utils/buildApiUrl.ts
View file @ 6bfc4955
...@@ -4,8 +4,6 @@ import config from 'configs/app'; ...@@ -4,8 +4,6 @@ import config from 'configs/app';
import type { ResourceName, ResourcePathParams } from 'lib/api/resources'; import type { ResourceName, ResourcePathParams } from 'lib/api/resources';
import { RESOURCES } from 'lib/api/resources'; import { RESOURCES } from 'lib/api/resources';
// DEPRECATED
/** /**
* @deprecated please use fixture mockApiResponse from playwright/lib.tsx for rendering test suite * @deprecated please use fixture mockApiResponse from playwright/lib.tsx for rendering test suite
* *
......
playwright/utils/configs.ts
View file @ 6bfc4955
...@@ -20,20 +20,6 @@ export const featureEnvs = { ...@@ -20,20 +20,6 @@ export const featureEnvs = {
{ name: 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', value: 'https://localhost:3101' }, { name: 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', value: 'https://localhost:3101' },
{ name: 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL', value: 'https://localhost:3102' }, { name: 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL', value: 'https://localhost:3102' },
], ],
shibariumRollup: [
{ name: 'NEXT_PUBLIC_ROLLUP_TYPE', value: 'shibarium' },
{ name: 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', value: 'https://localhost:3101' },
],
bridgedTokens: [
{
name: 'NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS',
value: '[{"id":"1","title":"Ethereum","short_title":"ETH","base_url":"https://eth.blockscout.com/token/"},{"id":"56","title":"Binance Smart Chain","short_title":"BSC","base_url":"https://bscscan.com/token/"},{"id":"99","title":"POA","short_title":"POA","base_url":"https://blockscout.com/poa/core/token/"}]',
},
{
name: 'NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES',
value: '[{"type":"omni","title":"OmniBridge","short_title":"OMNI"},{"type":"amb","title":"Arbitrary Message Bridge","short_title":"AMB"}]',
},
],
txInterpretation: [ txInterpretation: [
{ name: 'NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER', value: 'blockscout' }, { name: 'NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER', value: 'blockscout' },
], ],
......
types/api/tokens.ts
View file @ 6bfc4955
...@@ -8,7 +8,7 @@ export type TokensResponse = { ...@@ -8,7 +8,7 @@ export type TokensResponse = {
items_count: number; items_count: number;
name: string; name: string;
market_cap: string | null; market_cap: string | null;
}; } | null;
} }
export type TokensFilters = { q: string; type: Array<TokenType> | undefined }; export type TokensFilters = { q: string; type: Array<TokenType> | undefined };
......
ui/pages/Marketplace.pw.tsx
View file @ 6bfc4955
import { test as base, devices, expect } from '@playwright/experimental-ct-react';
import React from 'react'; import React from 'react';
import { buildExternalAssetFilePath } from 'configs/app/utils';
import { apps as appsMock } from 'mocks/apps/apps'; import { apps as appsMock } from 'mocks/apps/apps';
import { securityReports as securityReportsMock } from 'mocks/apps/securityReports'; import { securityReports as securityReportsMock } from 'mocks/apps/securityReports';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs'; import { test, expect, devices } from 'playwright/lib';
import TestApp from 'playwright/TestApp';
import * as app from 'playwright/utils/app';
import Marketplace from './Marketplace'; import Marketplace from './Marketplace';
const MARKETPLACE_CONFIG_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', 'https://marketplace-config.json') || ''; const MARKETPLACE_CONFIG_URL = 'http://localhost/marketplace-config.json';
const MARKETPLACE_SECURITY_REPORTS_URL =
app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', 'https://marketplace-security-reports.json') || ''; test.beforeEach(async({ mockConfigResponse, mockEnvs, mockAssetResponse }) => {
const MARKETPLACE_BANNER_CONTENT_URL = await mockEnvs([
app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL', 'https://marketplace-banner.html') || ''; [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'true' ],
const MARKETPLACE_BANNER_LINK_URL = 'https://example.com'; [ 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL ],
]);
const test = base.extend({ await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, JSON.stringify(appsMock));
context: contextWithEnvs([ await Promise.all(appsMock.map(app => mockAssetResponse(app.logo, './playwright/mocks/image_s.jpg')));
{ name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
}); });
const testFn: Parameters<typeof test>[1] = async({ mount, page }) => { test('base view +@dark-mode', async({ render }) => {
await page.route(MARKETPLACE_CONFIG_URL, (route) => route.fulfill({ const component = await render(<Marketplace/>);
status: 200,
body: JSON.stringify(appsMock),
}));
await Promise.all(appsMock.map(app =>
page.route(app.logo, (route) =>
route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
}),
),
));
await page.route(MARKETPLACE_BANNER_CONTENT_URL, (route) => route.fulfill({
status: 200,
path: './playwright/mocks/banner.html',
}));
const component = await mount(
<TestApp>
<Marketplace/>
</TestApp>,
);
await expect(component).toHaveScreenshot(); await expect(component).toHaveScreenshot();
};
test('base view +@dark-mode', testFn);
const testWithFeaturedApp = test.extend({
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL },
{ name: 'NEXT_PUBLIC_MARKETPLACE_FEATURED_APP', value: 'hop-exchange' },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
}); });
testWithFeaturedApp('with featured app +@dark-mode', testFn); test('with featured app +@dark-mode', async({ render, mockEnvs }) => {
await mockEnvs([
[ 'NEXT_PUBLIC_MARKETPLACE_FEATURED_APP', 'hop-exchange' ],
]);
const component = await render(<Marketplace/>);
const testWithBanner = test.extend({ await expect(component).toHaveScreenshot();
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL },
{ name: 'NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL', value: MARKETPLACE_BANNER_CONTENT_URL },
{ name: 'NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL', value: MARKETPLACE_BANNER_LINK_URL },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
}); });
testWithBanner('with banner +@dark-mode', testFn); test('with banner +@dark-mode', async({ render, mockEnvs, mockConfigResponse }) => {
const MARKETPLACE_BANNER_CONTENT_URL = 'https://localhost/marketplace-banner.html';
const MARKETPLACE_BANNER_LINK_URL = 'https://example.com';
const testWithScoreFeature = test.extend({ await mockEnvs([
context: contextWithEnvs([ [ 'NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL', MARKETPLACE_BANNER_CONTENT_URL ],
{ name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL }, [ 'NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL', MARKETPLACE_BANNER_LINK_URL ],
{ name: 'NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', value: MARKETPLACE_SECURITY_REPORTS_URL }, ]);
{ name: 'pw_feature:security_score_exp', value: 'true' }, await mockConfigResponse('MARKETPLACE_BANNER_CONTENT_URL', MARKETPLACE_BANNER_CONTENT_URL, './playwright/mocks/page.html', true);
// eslint-disable-next-line @typescript-eslint/no-explicit-any const component = await render(<Marketplace/>);
]) as any,
});
testWithScoreFeature('with scores +@dark-mode', async({ mount, page }) => { await expect(component).toHaveScreenshot();
await page.route(MARKETPLACE_CONFIG_URL, (route) => route.fulfill({ });
status: 200,
body: JSON.stringify(appsMock),
}));
await page.route(MARKETPLACE_SECURITY_REPORTS_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(securityReportsMock),
}));
await Promise.all(appsMock.map(app =>
page.route(app.logo, (route) =>
route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
}),
),
));
const component = await mount(
<TestApp>
<Marketplace/>
</TestApp>,
);
test('with scores +@dark-mode', async({ render, mockConfigResponse, mockEnvs, mockFeatures }) => {
const MARKETPLACE_SECURITY_REPORTS_URL = 'https://marketplace-security-reports.json';
await mockEnvs([
[ 'NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', MARKETPLACE_SECURITY_REPORTS_URL ],
]);
await mockFeatures([
[ 'security_score_exp', true ],
]);
await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', MARKETPLACE_SECURITY_REPORTS_URL, JSON.stringify(securityReportsMock));
const component = await render(<Marketplace/>);
await component.getByText('Apps scores').click(); await component.getByText('Apps scores').click();
await expect(component).toHaveScreenshot(); await expect(component).toHaveScreenshot();
...@@ -121,36 +66,45 @@ testWithScoreFeature('with scores +@dark-mode', async({ mount, page }) => { ...@@ -121,36 +66,45 @@ testWithScoreFeature('with scores +@dark-mode', async({ mount, page }) => {
test.describe('mobile', () => { test.describe('mobile', () => {
test.use({ viewport: devices['iPhone 13 Pro'].viewport }); test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('base view', testFn); test('base view', async({ render }) => {
testWithFeaturedApp('with featured app', testFn); const component = await render(<Marketplace/>);
testWithBanner('with banner', testFn);
await expect(component).toHaveScreenshot();
testWithScoreFeature('with scores', async({ mount, page }) => { });
await page.route(MARKETPLACE_CONFIG_URL, (route) => route.fulfill({
status: 200, test('with featured app', async({ render, mockEnvs }) => {
body: JSON.stringify(appsMock), await mockEnvs([
})); [ 'NEXT_PUBLIC_MARKETPLACE_FEATURED_APP', 'hop-exchange' ],
]);
await page.route(MARKETPLACE_SECURITY_REPORTS_URL, (route) => route.fulfill({ const component = await render(<Marketplace/>);
status: 200,
body: JSON.stringify(securityReportsMock), await expect(component).toHaveScreenshot();
})); });
await Promise.all(appsMock.map(app => test('with banner', async({ render, mockEnvs, mockConfigResponse }) => {
page.route(app.logo, (route) => const MARKETPLACE_BANNER_CONTENT_URL = 'https://localhost/marketplace-banner.html';
route.fulfill({ const MARKETPLACE_BANNER_LINK_URL = 'https://example.com';
status: 200,
path: './playwright/mocks/image_s.jpg', await mockEnvs([
}), [ 'NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL', MARKETPLACE_BANNER_CONTENT_URL ],
), [ 'NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL', MARKETPLACE_BANNER_LINK_URL ],
)); ]);
await mockConfigResponse('MARKETPLACE_BANNER_CONTENT_URL', MARKETPLACE_BANNER_CONTENT_URL, './playwright/mocks/page.html', true);
const component = await mount( const component = await render(<Marketplace/>);
<TestApp>
<Marketplace/> await expect(component).toHaveScreenshot();
</TestApp>, });
);
test('with scores', async({ render, mockConfigResponse, mockEnvs, mockFeatures }) => {
const MARKETPLACE_SECURITY_REPORTS_URL = 'https://marketplace-security-reports.json';
await mockEnvs([
[ 'NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', MARKETPLACE_SECURITY_REPORTS_URL ],
]);
await mockFeatures([
[ 'security_score_exp', true ],
]);
await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', MARKETPLACE_SECURITY_REPORTS_URL, JSON.stringify(securityReportsMock));
const component = await render(<Marketplace/>);
await component.getByText('Apps scores').click(); await component.getByText('Apps scores').click();
await expect(component).toHaveScreenshot(); await expect(component).toHaveScreenshot();
......
ui/pages/MarketplaceApp.pw.tsx
View file @ 6bfc4955
import { Flex } from '@chakra-ui/react'; import { Flex } from '@chakra-ui/react';
import { test as base, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react'; import React from 'react';
import { buildExternalAssetFilePath } from 'configs/app/utils';
import { apps as appsMock } from 'mocks/apps/apps'; import { apps as appsMock } from 'mocks/apps/apps';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs'; import { test, expect, devices } from 'playwright/lib';
import TestApp from 'playwright/TestApp';
import * as app from 'playwright/utils/app';
import MarketplaceApp from './MarketplaceApp'; import MarketplaceApp from './MarketplaceApp';
const MARKETPLACE_CONFIG_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', 'https://marketplace-config.json') || '';
const hooksConfig = { const hooksConfig = {
router: { router: {
query: { id: appsMock[0].id }, query: { id: appsMock[0].id },
...@@ -19,39 +13,26 @@ const hooksConfig = { ...@@ -19,39 +13,26 @@ const hooksConfig = {
}, },
}; };
const testFn: Parameters<typeof test>[1] = async({ mount, page }) => { const MARKETPLACE_CONFIG_URL = 'https://marketplace-config.json';
await page.route(MARKETPLACE_CONFIG_URL, (route) => route.fulfill({
status: 200, const testFn: Parameters<typeof test>[1] = async({ render, mockConfigResponse, mockAssetResponse, mockEnvs }) => {
body: JSON.stringify(appsMock), await mockEnvs([
})); [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'true' ],
[ 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL ],
await page.route(appsMock[0].url, (route) => ]);
route.fulfill({ await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, JSON.stringify(appsMock));
status: 200, await mockAssetResponse(appsMock[0].url, './mocks/apps/app.html');
path: './mocks/apps/app.html',
}),
);
const component = await mount( const component = await render(
<TestApp>
{ /* added Flex as a Layout because the iframe has negative margins */ }
<Flex flexDirection="column" mx={{ base: 4, lg: 6 }} h="100vh"> <Flex flexDirection="column" mx={{ base: 4, lg: 6 }} h="100vh">
<MarketplaceApp/> <MarketplaceApp/>
</Flex> </Flex>,
</TestApp>,
{ hooksConfig }, { hooksConfig },
); );
await expect(component).toHaveScreenshot(); await expect(component).toHaveScreenshot();
}; };
const test = base.extend({
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
});
test('base view +@dark-mode', testFn); test('base view +@dark-mode', testFn);
test.describe('mobile', () => { test.describe('mobile', () => {
......
ui/pages/SearchResults.pw.tsx
View file @ 6bfc4955
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react'; import React from 'react';
import { buildExternalAssetFilePath } from 'configs/app/utils';
import { apps as appsMock } from 'mocks/apps/apps'; import { apps as appsMock } from 'mocks/apps/apps';
import * as searchMock from 'mocks/search/index'; import * as searchMock from 'mocks/search/index';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs'; import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import TestApp from 'playwright/TestApp'; import { test, expect } from 'playwright/lib';
import * as app from 'playwright/utils/app';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import SearchResults from './SearchResults'; import SearchResults from './SearchResults';
test.describe('search by name ', () => { test.describe('search by name ', () => {
const extendedTest = test.extend({ test('+@mobile +@dark-mode', async({ render, mockApiResponse, mockAssetResponse, mockEnvs }) => {
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: '' },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
});
extendedTest('+@mobile +@dark-mode', async({ mount, page }) => {
const hooksConfig = { const hooksConfig = {
router: { router: {
query: { q: 'o' }, query: { q: 'o' },
}, },
}; };
await page.route(buildApiUrl('search') + '?q=o', (route) => route.fulfill({ const data = {
status: 200,
body: JSON.stringify({
items: [ items: [
searchMock.token1, searchMock.token1,
searchMock.token2, searchMock.token2,
...@@ -36,258 +22,163 @@ test.describe('search by name ', () => { ...@@ -36,258 +22,163 @@ test.describe('search by name ', () => {
searchMock.address2, searchMock.address2,
searchMock.label1, searchMock.label1,
], ],
}), next_page_params: null,
})); };
await page.route(searchMock.token1.icon_url as string, (route) => { await mockEnvs([
return route.fulfill({ [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'false' ],
status: 200, ]);
path: './playwright/mocks/image_s.jpg', await mockApiResponse('search', data, { queryParams: { q: 'o' } });
}); await mockAssetResponse(searchMock.token1.icon_url as string, './playwright/mocks/image_s.jpg');
}); const component = await render(<SearchResults/>, { hooksConfig });
const component = await mount(
<TestApp>
<SearchResults/>
</TestApp>,
{ hooksConfig },
);
await expect(component.locator('main')).toHaveScreenshot(); await expect(component.locator('main')).toHaveScreenshot();
}); });
}); });
test('search by address hash +@mobile', async({ mount, page }) => { test('search by address hash +@mobile', async({ render, mockApiResponse }) => {
const hooksConfig = { const hooksConfig = {
router: { router: {
query: { q: searchMock.address1.address }, query: { q: searchMock.address1.address },
}, },
}; };
await page.route(buildApiUrl('search') + `?q=${ searchMock.address1.address }`, (route) => route.fulfill({ const data = {
status: 200, items: [ searchMock.address1 ],
body: JSON.stringify({ next_page_params: null,
items: [ };
searchMock.address1, await mockApiResponse('search', data, { queryParams: { q: searchMock.address1.address } });
],
}),
}));
const component = await mount( const component = await render(<SearchResults/>, { hooksConfig });
<TestApp>
<SearchResults/>
</TestApp>,
{ hooksConfig },
);
await expect(component.locator('main')).toHaveScreenshot(); await expect(component.locator('main')).toHaveScreenshot();
}); });
test('search by block number +@mobile', async({ mount, page }) => { test('search by block number +@mobile', async({ render, mockApiResponse }) => {
const hooksConfig = { const hooksConfig = {
router: { router: {
query: { q: String(searchMock.block1.block_number) }, query: { q: String(searchMock.block1.block_number) },
}, },
}; };
await page.route(buildApiUrl('search') + `?q=${ searchMock.block1.block_number }`, (route) => route.fulfill({ const data = {
status: 200, items: [ searchMock.block1, searchMock.block2, searchMock.block3 ],
body: JSON.stringify({ next_page_params: null,
items: [ };
searchMock.block1, await mockApiResponse('search', data, { queryParams: { q: searchMock.block1.block_number } });
searchMock.block2, const component = await render(<SearchResults/>, { hooksConfig });
searchMock.block3,
],
}),
}));
const component = await mount(
<TestApp>
<SearchResults/>
</TestApp>,
{ hooksConfig },
);
await expect(component.locator('main')).toHaveScreenshot(); await expect(component.locator('main')).toHaveScreenshot();
}); });
test('search by block hash +@mobile', async({ mount, page }) => { test('search by block hash +@mobile', async({ render, mockApiResponse }) => {
const hooksConfig = { const hooksConfig = {
router: { router: {
query: { q: searchMock.block1.block_hash }, query: { q: searchMock.block1.block_hash },
}, },
}; };
await page.route(buildApiUrl('search') + `?q=${ searchMock.block1.block_hash }`, (route) => route.fulfill({ const data = {
status: 200, items: [ searchMock.block1 ],
body: JSON.stringify({ next_page_params: null,
items: [ };
searchMock.block1, await mockApiResponse('search', data, { queryParams: { q: searchMock.block1.block_hash } });
], const component = await render(<SearchResults/>, { hooksConfig });
}),
}));
const component = await mount(
<TestApp>
<SearchResults/>
</TestApp>,
{ hooksConfig },
);
await expect(component.locator('main')).toHaveScreenshot(); await expect(component.locator('main')).toHaveScreenshot();
}); });
test('search by tx hash +@mobile', async({ mount, page }) => { test('search by tx hash +@mobile', async({ render, mockApiResponse }) => {
const hooksConfig = { const hooksConfig = {
router: { router: {
query: { q: searchMock.tx1.tx_hash }, query: { q: searchMock.tx1.tx_hash },
}, },
}; };
await page.route(buildApiUrl('search') + `?q=${ searchMock.tx1.tx_hash }`, (route) => route.fulfill({ const data = {
status: 200, items: [ searchMock.tx1 ],
body: JSON.stringify({ next_page_params: null,
items: [ };
searchMock.tx1, await mockApiResponse('search', data, { queryParams: { q: searchMock.tx1.tx_hash } });
], const component = await render(<SearchResults/>, { hooksConfig });
}),
}));
const component = await mount(
<TestApp>
<SearchResults/>
</TestApp>,
{ hooksConfig },
);
await expect(component.locator('main')).toHaveScreenshot(); await expect(component.locator('main')).toHaveScreenshot();
}); });
test('search by blob hash +@mobile', async({ mount, page }) => { test('search by blob hash +@mobile', async({ render, mockApiResponse }) => {
const hooksConfig = { const hooksConfig = {
router: { router: {
query: { q: searchMock.blob1.blob_hash }, query: { q: searchMock.blob1.blob_hash },
}, },
}; };
await page.route(buildApiUrl('search') + `?q=${ searchMock.blob1.blob_hash }`, (route) => route.fulfill({ const data = {
status: 200, items: [ searchMock.blob1 ],
body: JSON.stringify({ next_page_params: null,
items: [ };
searchMock.blob1, await mockApiResponse('search', data, { queryParams: { q: searchMock.blob1.blob_hash } });
], const component = await render(<SearchResults/>, { hooksConfig });
}),
}));
const component = await mount(
<TestApp>
<SearchResults/>
</TestApp>,
{ hooksConfig },
);
await expect(component.locator('main')).toHaveScreenshot(); await expect(component.locator('main')).toHaveScreenshot();
}); });
test('search by domain name +@mobile', async({ mount, page }) => { test('search by domain name +@mobile', async({ render, mockApiResponse }) => {
const hooksConfig = { const hooksConfig = {
router: { router: {
query: { q: searchMock.domain1.ens_info.name }, query: { q: searchMock.domain1.ens_info.name },
}, },
}; };
await page.route(buildApiUrl('search') + `?q=${ searchMock.domain1.ens_info.name }`, (route) => route.fulfill({ const data = {
status: 200, items: [ searchMock.domain1 ],
body: JSON.stringify({ next_page_params: null,
items: [ };
searchMock.domain1, await mockApiResponse('search', data, { queryParams: { q: searchMock.domain1.ens_info.name } });
], const component = await render(<SearchResults/>, { hooksConfig });
}),
}));
const component = await mount(
<TestApp>
<SearchResults/>
</TestApp>,
{ hooksConfig },
);
await expect(component.locator('main')).toHaveScreenshot(); await expect(component.locator('main')).toHaveScreenshot();
}); });
const testWithUserOps = test.extend({ test('search by user op hash +@mobile', async({ render, mockApiResponse, mockEnvs }) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.userOps) as any,
});
testWithUserOps('search by user op hash +@mobile', async({ mount, page }) => {
const hooksConfig = { const hooksConfig = {
router: { router: {
query: { q: searchMock.userOp1.user_operation_hash }, query: { q: searchMock.userOp1.user_operation_hash },
}, },
}; };
await page.route(buildApiUrl('search') + `?q=${ searchMock.userOp1.user_operation_hash }`, (route) => route.fulfill({ const data = {
status: 200, items: [ searchMock.userOp1 ],
body: JSON.stringify({ next_page_params: null,
items: [ };
searchMock.userOp1, await mockEnvs(ENVS_MAP.userOps);
], await mockApiResponse('search', data, { queryParams: { q: searchMock.userOp1.user_operation_hash } });
}), const component = await render(<SearchResults/>, { hooksConfig });
}));
const component = await mount(
<TestApp>
<SearchResults/>
</TestApp>,
{ hooksConfig },
);
await expect(component.locator('main')).toHaveScreenshot(); await expect(component.locator('main')).toHaveScreenshot();
}); });
test.describe('with apps', () => { test.describe('with apps', () => {
const MARKETPLACE_CONFIG_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', 'https://marketplace-config.json') || ''; test('default view +@mobile', async({ render, mockApiResponse, mockConfigResponse, mockAssetResponse, mockEnvs }) => {
const extendedTest = test.extend({ const MARKETPLACE_CONFIG_URL = 'https://marketplace-config.json';
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
});
extendedTest('default view +@mobile', async({ mount, page }) => {
const hooksConfig = { const hooksConfig = {
router: { router: {
query: { q: 'o' }, query: { q: 'o' },
}, },
}; };
const API_URL = buildApiUrl('search') + '?q=o'; const data = {
await page.route(API_URL, (route) => route.fulfill({ items: [ searchMock.token1 ],
status: 200, next_page_params: {
body: JSON.stringify({ address_hash: null,
items: [ block_hash: null,
searchMock.token1, holder_count: null,
], inserted_at: null,
next_page_params: { foo: 'bar' }, item_type: 'token' as const,
}), items_count: 1,
})); name: 'foo',
q: 'o',
await page.route(MARKETPLACE_CONFIG_URL, (route) => route.fulfill({ tx_hash: null,
status: 200, },
body: JSON.stringify(appsMock), };
})); await mockEnvs([
[ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'true' ],
await page.route(appsMock[0].logo, (route) => { [ 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL ],
return route.fulfill({ ]);
status: 200, await mockApiResponse('search', data, { queryParams: { q: 'o' } });
path: './playwright/mocks/image_s.jpg', await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, JSON.stringify(appsMock));
}); await mockAssetResponse(appsMock[0].logo, './playwright/mocks/image_s.jpg');
}); await mockAssetResponse(appsMock[1].logo, './playwright/mocks/image_s.jpg');
await page.route(appsMock[1].logo as string, (route) => { const component = await render(<SearchResults/>, { hooksConfig });
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
const component = await mount(
<TestApp>
<SearchResults/>
</TestApp>,
{ hooksConfig },
);
await expect(component.locator('main')).toHaveScreenshot(); await expect(component.locator('main')).toHaveScreenshot();
}); });
......
ui/pages/ShibariumDeposits.pw.tsx
View file @ 6bfc4955
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react'; import React from 'react';
import { data as depositsData } from 'mocks/shibarium/deposits'; import { data as depositsData } from 'mocks/shibarium/deposits';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs'; import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import TestApp from 'playwright/TestApp'; import { test, expect } from 'playwright/lib';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import ShibariumDeposits from './ShibariumDeposits'; import ShibariumDeposits from './ShibariumDeposits';
const DEPOSITS_API_URL = buildApiUrl('shibarium_deposits'); test('base view +@mobile', async({ render, mockApiResponse, mockEnvs }) => {
const DEPOSITS_COUNT_API_URL = buildApiUrl('shibarium_deposits_count'); await mockEnvs(ENVS_MAP.shibariumRollup);
await mockApiResponse('shibarium_deposits', depositsData);
await mockApiResponse('shibarium_deposits_count', 3971111);
const test = base.extend({ const component = await render(<ShibariumDeposits/>);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.shibariumRollup) as any,
});
test('base view +@mobile', async({ mount, page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: '',
}));
await page.route(DEPOSITS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(depositsData),
}));
await page.route(DEPOSITS_COUNT_API_URL, (route) => route.fulfill({
status: 200,
body: '3971111',
}));
const component = await mount(
<TestApp>
<ShibariumDeposits/>
</TestApp>,
);
await expect(component).toHaveScreenshot(); await expect(component).toHaveScreenshot();
}); });
ui/pages/ShibariumWithdrawals.pw.tsx
View file @ 6bfc4955
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react'; import React from 'react';
import { data as withdrawalsData } from 'mocks/shibarium/withdrawals'; import { data as withdrawalsData } from 'mocks/shibarium/withdrawals';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs'; import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import TestApp from 'playwright/TestApp'; import { test, expect } from 'playwright/lib';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import ShibariuWithdrawals from './ShibariumWithdrawals'; import ShibariumWithdrawals from './ShibariumWithdrawals';
const test = base.extend({ test('base view +@mobile', async({ render, mockApiResponse, mockEnvs }) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.shibariumRollup) as any,
});
const WITHDRAWALS_API_URL = buildApiUrl('shibarium_withdrawals');
const WITHDRAWALS_COUNT_API_URL = buildApiUrl('shibarium_withdrawals_count');
test('base view +@mobile', async({ mount, page }) => {
// test on mobile is flaky // test on mobile is flaky
// my assumption is there is not enough time to calculate hashes truncation so component is unstable // my assumption is there is not enough time to calculate hashes truncation so component is unstable
// so I raised the test timeout to check if it helps // so I raised the test timeout to check if it helps
test.slow(); test.slow();
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: '',
}));
await page.route(WITHDRAWALS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(withdrawalsData),
}));
await page.route(WITHDRAWALS_COUNT_API_URL, (route) => route.fulfill({ await mockEnvs(ENVS_MAP.shibariumRollup);
status: 200, await mockApiResponse('shibarium_withdrawals', withdrawalsData);
body: '397', await mockApiResponse('shibarium_withdrawals_count', 397);
}));
const component = await mount( const component = await render(<ShibariumWithdrawals/>);
<TestApp>
<ShibariuWithdrawals/>
</TestApp>,
);
await expect(component).toHaveScreenshot({ timeout: 10_000 }); await expect(component).toHaveScreenshot({ timeout: 10_000 });
}); });
ui/pages/Token.pw.tsx
View file @ 6bfc4955
import { test as base, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react'; import React from 'react';
import * as verifiedAddressesMocks from 'mocks/account/verifiedAddresses'; import * as verifiedAddressesMocks from 'mocks/account/verifiedAddresses';
import { token as contract } from 'mocks/address/address'; import { token as contract } from 'mocks/address/address';
import { tokenInfo, tokenCounters, bridgedTokenA } from 'mocks/tokens/tokenInfo'; import { tokenInfo, tokenCounters, bridgedTokenA } from 'mocks/tokens/tokenInfo';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs'; import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import * as socketServer from 'playwright/fixtures/socketServer'; import * as socketServer from 'playwright/fixtures/socketServer';
import TestApp from 'playwright/TestApp'; import { test, expect, devices } from 'playwright/lib';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs'; import * as configs from 'playwright/utils/configs';
import Token from './Token'; import Token from './Token';
const TOKEN_API_URL = buildApiUrl('token', { hash: '1' });
const TOKEN_COUNTERS_API_URL = buildApiUrl('token_counters', { hash: '1' });
const TOKEN_TRANSFERS_API_URL = buildApiUrl('token_transfers', { hash: '1' });
const ADDRESS_API_URL = buildApiUrl('address', { hash: '1' });
const hooksConfig = { const hooksConfig = {
router: { router: {
query: { hash: '1', tab: 'token_transfers' }, query: { hash: '1', tab: 'token_transfers' },
...@@ -23,45 +17,19 @@ const hooksConfig = { ...@@ -23,45 +17,19 @@ const hooksConfig = {
}, },
}; };
const test = base.extend<socketServer.SocketServerFixture>({
createSocket: socketServer.createSocket,
});
// FIXME // FIXME
// test cases which use socket cannot run in parallel since the socket server always run on the same port // test cases which use socket cannot run in parallel since the socket server always run on the same port
test.describe.configure({ mode: 'serial' }); test.describe.configure({ mode: 'serial' });
test.beforeEach(async({ page }) => { test.beforeEach(async({ mockApiResponse }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({ await mockApiResponse('token', tokenInfo, { pathParams: { hash: '1' } });
status: 200, await mockApiResponse('address', contract, { pathParams: { hash: '1' } });
body: '', await mockApiResponse('token_counters', tokenCounters, { pathParams: { hash: '1' } });
})); await mockApiResponse('token_transfers', { items: [], next_page_params: null }, { pathParams: { hash: '1' } });
await page.route(TOKEN_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(tokenInfo),
}));
await page.route(ADDRESS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(contract),
}));
await page.route(TOKEN_COUNTERS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(tokenCounters),
}));
await page.route(TOKEN_TRANSFERS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({}),
}));
}); });
test('base view', async({ mount, page, createSocket }) => { test('base view', async({ render, page, createSocket }) => {
const component = await mount( const component = await render(<Token/>, { hooksConfig }, { withSocket: true });
<TestApp withSocket>
<Token/>
</TestApp>,
{ hooksConfig },
);
const socket = await createSocket(); const socket = await createSocket();
const channel = await socketServer.joinChannel(socket, 'tokens:1'); const channel = await socketServer.joinChannel(socket, 'tokens:1');
...@@ -73,24 +41,11 @@ test('base view', async({ mount, page, createSocket }) => { ...@@ -73,24 +41,11 @@ test('base view', async({ mount, page, createSocket }) => {
}); });
}); });
test('with verified info', async({ mount, page, createSocket }) => { test('with verified info', async({ render, page, createSocket, mockApiResponse, mockAssetResponse }) => {
const VERIFIED_INFO_URL = buildApiUrl('token_verified_info', { chainId: '1', hash: '1' }); await mockApiResponse('token_verified_info', verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED, { pathParams: { chainId: '1', hash: '1' } });
await page.route(VERIFIED_INFO_URL, (route) => route.fulfill({ await mockAssetResponse(tokenInfo.icon_url as string, './playwright/mocks/image_s.jpg');
body: JSON.stringify(verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED),
}));
await page.route(tokenInfo.icon_url as string, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
const component = await mount( const component = await render(<Token/>, { hooksConfig }, { withSocket: true });
<TestApp withSocket>
<Token/>
</TestApp>,
{ hooksConfig },
);
const socket = await createSocket(); const socket = await createSocket();
const channel = await socketServer.joinChannel(socket, 'tokens:1'); const channel = await socketServer.joinChannel(socket, 'tokens:1');
...@@ -104,55 +59,16 @@ test('with verified info', async({ mount, page, createSocket }) => { ...@@ -104,55 +59,16 @@ test('with verified info', async({ mount, page, createSocket }) => {
}); });
}); });
const bridgedTokenTest = base.extend<socketServer.SocketServerFixture>({ test('bridged token', async({ render, page, createSocket, mockApiResponse, mockAssetResponse, mockEnvs }) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any await mockEnvs(ENVS_MAP.bridgedTokens);
context: contextWithEnvs(configs.featureEnvs.bridgedTokens) as any, await mockApiResponse('token', bridgedTokenA, { pathParams: { hash: '1' } });
createSocket: socketServer.createSocket, await mockApiResponse('address', contract, { pathParams: { hash: '1' } });
}); await mockApiResponse('token_counters', tokenCounters, { pathParams: { hash: '1' } });
await mockApiResponse('token_transfers', { items: [], next_page_params: null }, { pathParams: { hash: '1' } });
bridgedTokenTest('bridged token', async({ mount, page, createSocket }) => { await mockApiResponse('token_verified_info', verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED, { pathParams: { chainId: '1', hash: '1' } });
await mockAssetResponse(tokenInfo.icon_url as string, './playwright/mocks/image_s.jpg');
const VERIFIED_INFO_URL = buildApiUrl('token_verified_info', { chainId: '1', hash: '1' });
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: '',
}));
await page.route(TOKEN_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(bridgedTokenA),
}));
await page.route(ADDRESS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(contract),
}));
await page.route(TOKEN_COUNTERS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(tokenCounters),
}));
await page.route(TOKEN_TRANSFERS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({}),
}));
await page.route(VERIFIED_INFO_URL, (route) => route.fulfill({
body: JSON.stringify(verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED),
}));
await page.route(tokenInfo.icon_url as string, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
const component = await mount(
<TestApp withSocket>
<Token/>
</TestApp>,
{ hooksConfig },
);
const component = await render(<Token/>, { hooksConfig }, { withSocket: true });
const socket = await createSocket(); const socket = await createSocket();
const channel = await socketServer.joinChannel(socket, 'tokens:1'); const channel = await socketServer.joinChannel(socket, 'tokens:1');
socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 }); socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
...@@ -165,14 +81,9 @@ bridgedTokenTest('bridged token', async({ mount, page, createSocket }) => { ...@@ -165,14 +81,9 @@ bridgedTokenTest('bridged token', async({ mount, page, createSocket }) => {
test.describe('mobile', () => { test.describe('mobile', () => {
test.use({ viewport: devices['iPhone 13 Pro'].viewport }); test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('base view', async({ mount, page, createSocket }) => {
const component = await mount(
<TestApp withSocket>
<Token/>
</TestApp>,
{ hooksConfig },
);
test('base view', async({ render, page, createSocket }) => {
const component = await render(<Token/>, { hooksConfig }, { withSocket: true });
const socket = await createSocket(); const socket = await createSocket();
const channel = await socketServer.joinChannel(socket, 'tokens:1'); const channel = await socketServer.joinChannel(socket, 'tokens:1');
socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 }); socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
...@@ -183,25 +94,11 @@ test.describe('mobile', () => { ...@@ -183,25 +94,11 @@ test.describe('mobile', () => {
}); });
}); });
test('with verified info', async({ mount, page, createSocket }) => { test('with verified info', async({ render, page, createSocket, mockApiResponse, mockAssetResponse }) => {
const VERIFIED_INFO_URL = buildApiUrl('token_verified_info', { chainId: '1', hash: '1' }); await mockApiResponse('token_verified_info', verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED, { pathParams: { chainId: '1', hash: '1' } });
await page.route(VERIFIED_INFO_URL, (route) => route.fulfill({ await mockAssetResponse(tokenInfo.icon_url as string, './playwright/mocks/image_s.jpg');
body: JSON.stringify(verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED),
}));
await page.route(tokenInfo.icon_url as string, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
const component = await mount(
<TestApp withSocket>
<Token/>
</TestApp>,
{ hooksConfig },
);
const component = await render(<Token/>, { hooksConfig }, { withSocket: true });
const socket = await createSocket(); const socket = await createSocket();
const channel = await socketServer.joinChannel(socket, 'tokens:1'); const channel = await socketServer.joinChannel(socket, 'tokens:1');
socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 }); socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
......
ui/pages/Tokens.pw.tsx
View file @ 6bfc4955
import { Box } from '@chakra-ui/react'; import { Box } from '@chakra-ui/react';
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react'; import React from 'react';
import * as textAdMock from 'mocks/ad/textAd';
import * as tokens from 'mocks/tokens/tokenInfo'; import * as tokens from 'mocks/tokens/tokenInfo';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs'; import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
import TestApp from 'playwright/TestApp'; import { test, expect } from 'playwright/lib';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import Tokens from './Tokens'; import Tokens from './Tokens';
base.beforeEach(async({ page }) => { test('base view +@mobile +@dark-mode', async({ render, mockApiResponse }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: JSON.stringify(textAdMock.duck),
}));
await page.route(textAdMock.duck.ad.thumbnail, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
});
base('base view +@mobile +@dark-mode', async({ mount, page }) => {
const allTokens = { const allTokens = {
items: [ items: [
tokens.tokenInfoERC20a, tokens.tokenInfoERC20b, tokens.tokenInfoERC20c, tokens.tokenInfoERC20d, tokens.tokenInfoERC20a, tokens.tokenInfoERC20b, tokens.tokenInfoERC20c, tokens.tokenInfoERC20d,
...@@ -35,6 +18,7 @@ base('base view +@mobile +@dark-mode', async({ mount, page }) => { ...@@ -35,6 +18,7 @@ base('base view +@mobile +@dark-mode', async({ mount, page }) => {
holder_count: 1, holder_count: 1,
items_count: 1, items_count: 1,
name: 'a', name: 'a',
market_cap: '0',
}, },
}; };
const filteredTokens = { const filteredTokens = {
...@@ -44,40 +28,25 @@ base('base view +@mobile +@dark-mode', async({ mount, page }) => { ...@@ -44,40 +28,25 @@ base('base view +@mobile +@dark-mode', async({ mount, page }) => {
next_page_params: null, next_page_params: null,
}; };
const ALL_TOKENS_API_URL = buildApiUrl('tokens'); await mockApiResponse('tokens', allTokens);
const FILTERED_TOKENS_API_URL = buildApiUrl('tokens') + '?q=foo'; await mockApiResponse('tokens', filteredTokens, { queryParams: { q: 'foo' } });
await page.route(ALL_TOKENS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(allTokens),
}));
await page.route(FILTERED_TOKENS_API_URL, (route) => route.fulfill({ const component = await render(
status: 200, <div>
body: JSON.stringify(filteredTokens),
}));
const component = await mount(
<TestApp>
<Box h={{ base: '134px', lg: 6 }}/> <Box h={{ base: '134px', lg: 6 }}/>
<Tokens/> <Tokens/>
</TestApp>, </div>,
); );
await expect(component).toHaveScreenshot(); await expect(component).toHaveScreenshot();
await component.getByRole('textbox', { name: 'Token name or symbol' }).focus(); await component.getByRole('textbox', { name: 'Token name or symbol' }).focus();
await component.getByRole('textbox', { name: 'Token name or symbol' }).type('foo'); await component.getByRole('textbox', { name: 'Token name or symbol' }).fill('foo');
await expect(component).toHaveScreenshot(); await expect(component).toHaveScreenshot();
}); });
base.describe('bridged tokens', async() => { test.describe('bridged tokens', async() => {
const test = base.extend({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context: contextWithEnvs(configs.featureEnvs.bridgedTokens) as any,
});
const bridgedTokens = { const bridgedTokens = {
items: [ items: [
tokens.bridgedTokenA, tokens.bridgedTokenA,
...@@ -88,6 +57,7 @@ base.describe('bridged tokens', async() => { ...@@ -88,6 +57,7 @@ base.describe('bridged tokens', async() => {
holder_count: 1, holder_count: 1,
items_count: 1, items_count: 1,
name: 'a', name: 'a',
market_cap: null,
}, },
}; };
const bridgedFilteredTokens = { const bridgedFilteredTokens = {
...@@ -101,26 +71,17 @@ base.describe('bridged tokens', async() => { ...@@ -101,26 +71,17 @@ base.describe('bridged tokens', async() => {
query: { tab: 'bridged' }, query: { tab: 'bridged' },
}, },
}; };
const BRIDGED_TOKENS_API_URL = buildApiUrl('tokens_bridged');
test.beforeEach(async({ page }) => {
await page.route(BRIDGED_TOKENS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(bridgedTokens),
}));
});
test('base view', async({ mount, page }) => { test('base view', async({ render, page, mockApiResponse, mockEnvs }) => {
await page.route(BRIDGED_TOKENS_API_URL + '?chain_ids=99', (route) => route.fulfill({ await mockEnvs(ENVS_MAP.bridgedTokens);
status: 200, await mockApiResponse('tokens_bridged', bridgedTokens);
body: JSON.stringify(bridgedFilteredTokens), await mockApiResponse('tokens_bridged', bridgedFilteredTokens, { queryParams: { chain_ids: '99' } });
}));
const component = await mount( const component = await render(
<TestApp> <div>
<Box h={{ base: '134px', lg: 6 }}/> <Box h={{ base: '134px', lg: 6 }}/>
<Tokens/> <Tokens/>
</TestApp>, </div>,
{ hooksConfig }, { hooksConfig },
); );
......
ui/pages/Validators.pw.tsx
View file @ 6bfc4955
import type { BrowserContext } from '@playwright/test';
import React from 'react'; import React from 'react';
import * as validatorsMock from 'mocks/validators/index'; import * as validatorsMock from 'mocks/validators/index';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs'; import { test, expect } from 'playwright/lib';
import { test as base, expect } from 'playwright/lib';
import * as configs from 'playwright/utils/configs';
import Validators from './Validators'; import Validators from './Validators';
const test = base.extend<{ context: BrowserContext }>({ const chainType = 'stability';
context: contextWithEnvs(configs.featureEnvs.validators),
});
test('base view +@mobile', async({ render, mockApiResponse }) => { test('base view +@mobile', async({ render, mockApiResponse, mockEnvs }) => {
await mockApiResponse('validators', validatorsMock.validatorsResponse, { pathParams: { chainType: 'stability' } }); await mockEnvs([
await mockApiResponse('validators_counters', validatorsMock.validatorsCountersResponse, { pathParams: { chainType: 'stability' } }); [ 'NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE', chainType ],
]);
await mockApiResponse('validators', validatorsMock.validatorsResponse, { pathParams: { chainType } });
await mockApiResponse('validators_counters', validatorsMock.validatorsCountersResponse, { pathParams: { chainType } });
const component = await render(<Validators/>); const component = await render(<Validators/>);
......
ui/pages/VerifiedAddresses.pw.tsx
View file @ 6bfc4955
import type { BrowserContext } from '@playwright/test';
import React from 'react'; import React from 'react';
import * as mocks from 'mocks/account/verifiedAddresses'; import * as mocks from 'mocks/account/verifiedAddresses';
import * as profileMock from 'mocks/user/profile'; import * as profileMock from 'mocks/user/profile';
import authFixture from 'playwright/fixtures/auth'; import { contextWithAuth } from 'playwright/fixtures/auth';
import { test as base, expect } from 'playwright/lib'; import { test as base, expect } from 'playwright/lib';
import VerifiedAddresses from './VerifiedAddresses'; import VerifiedAddresses from './VerifiedAddresses';
const test = base.extend({ const test = base.extend<{ context: BrowserContext }>({
context: ({ context }, use) => { context: contextWithAuth,
authFixture(context);
use(context);
},
}); });
test.beforeEach(async({ mockAssetResponse }) => { test.beforeEach(async({ mockAssetResponse }) => {
......
ui/shared/AccountActionsMenu/AccountActionsMenu.pw.tsx
View file @ 6bfc4955
import { test as base, expect } from '@playwright/experimental-ct-react'; import type { BrowserContext } from '@playwright/test';
import React from 'react'; import React from 'react';
import * as profileMock from 'mocks/user/profile'; import * as profileMock from 'mocks/user/profile';
import authFixture from 'playwright/fixtures/auth'; import { contextWithAuth } from 'playwright/fixtures/auth';
import TestApp from 'playwright/TestApp'; import { test as base, expect } from 'playwright/lib';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import AccountActionsMenu from './AccountActionsMenu'; import AccountActionsMenu from './AccountActionsMenu';
const USER_INFO_URL = buildApiUrl('user_info'); const test = base.extend<{ context: BrowserContext }>({
context: contextWithAuth,
const test = base.extend({
context: ({ context }, use) => {
authFixture(context);
use(context);
},
}); });
test.use({ viewport: { width: 200, height: 200 } }); test.use({ viewport: { width: 200, height: 200 } });
...@@ -28,56 +22,32 @@ test.describe('with multiple items', async() => { ...@@ -28,56 +22,32 @@ test.describe('with multiple items', async() => {
}, },
}; };
test.beforeEach(async({ page }) => { test.beforeEach(async({ mockApiResponse }) => {
await page.route(USER_INFO_URL, (route) => route.fulfill({ mockApiResponse('user_info', profileMock.base);
body: JSON.stringify(profileMock.base),
}));
}); });
test('base view', async({ mount, page }) => { test('base view', async({ render, page }) => {
const component = await mount( const component = await render(<AccountActionsMenu/>, { hooksConfig });
<TestApp>
<AccountActionsMenu/>
</TestApp>,
{ hooksConfig },
);
await component.getByRole('button').click(); await component.getByRole('button').click();
await expect(page).toHaveScreenshot(); await expect(page).toHaveScreenshot();
}); });
test('base view with styles', async({ mount, page }) => { test('base view with styles', async({ render, page }) => {
const component = await mount( const component = await render(<AccountActionsMenu m={ 2 } outline="1px solid lightpink"/>, { hooksConfig });
<TestApp>
<AccountActionsMenu m={ 2 } outline="1px solid lightpink"/>
</TestApp>,
{ hooksConfig },
);
await component.getByRole('button').click(); await component.getByRole('button').click();
await expect(page).toHaveScreenshot(); await expect(page).toHaveScreenshot();
}); });
test('loading', async({ mount }) => { test('loading', async({ render }) => {
const component = await mount( const component = await render(<AccountActionsMenu isLoading/>, { hooksConfig });
<TestApp>
<AccountActionsMenu isLoading/>
</TestApp>,
{ hooksConfig },
);
await expect(component).toHaveScreenshot(); await expect(component).toHaveScreenshot();
}); });
test('loading with styles', async({ mount }) => { test('loading with styles', async({ render }) => {
const component = await mount( const component = await render(<AccountActionsMenu isLoading m={ 2 } outline="1px solid lightpink"/>, { hooksConfig });
<TestApp>
<AccountActionsMenu isLoading m={ 2 } outline="1px solid lightpink"/>
</TestApp>,
{ hooksConfig },
);
await expect(component).toHaveScreenshot(); await expect(component).toHaveScreenshot();
}); });
...@@ -92,39 +62,22 @@ test.describe('with one item', async() => { ...@@ -92,39 +62,22 @@ test.describe('with one item', async() => {
}, },
}; };
test('base view', async({ mount, page }) => { test('base view', async({ render, page }) => {
const component = await mount( const component = await render(<AccountActionsMenu/>, { hooksConfig });
<TestApp>
<AccountActionsMenu/>
</TestApp>,
{ hooksConfig },
);
await component.getByRole('button').hover(); await component.getByRole('button').hover();
await expect(page).toHaveScreenshot(); await expect(page).toHaveScreenshot();
}); });
test('base view with styles', async({ mount, page }) => { test('base view with styles', async({ render, page }) => {
const component = await mount( const component = await render(<AccountActionsMenu m={ 2 } outline="1px solid lightpink"/>, { hooksConfig });
<TestApp>
<AccountActionsMenu m={ 2 } outline="1px solid lightpink"/>
</TestApp>,
{ hooksConfig },
);
await component.getByRole('button').hover(); await component.getByRole('button').hover();
await expect(page).toHaveScreenshot(); await expect(page).toHaveScreenshot();
}); });
test('loading', async({ mount }) => { test('loading', async({ render }) => {
const component = await mount( const component = await render(<AccountActionsMenu isLoading/>, { hooksConfig });
<TestApp>
<AccountActionsMenu isLoading/>
</TestApp>,
{ hooksConfig },
);
await expect(component).toHaveScreenshot(); await expect(component).toHaveScreenshot();
}); });
......
ui/snippets/footer/Footer.pw.tsx
View file @ 6bfc4955
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react'; import React from 'react';
import type { WalletProvider } from 'types/web3';
import { buildExternalAssetFilePath } from 'configs/app/utils';
import { FOOTER_LINKS } from 'mocks/config/footerLinks'; import { FOOTER_LINKS } from 'mocks/config/footerLinks';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs'; import { test, expect } from 'playwright/lib';
import TestApp from 'playwright/TestApp';
import * as app from 'playwright/utils/app';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs'; import * as configs from 'playwright/utils/configs';
import Footer from './Footer'; import Footer from './Footer';
const FOOTER_LINKS_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_FOOTER_LINKS', 'https://localhost:3000/footer-links.json') || ''; const FOOTER_LINKS_URL = 'https://localhost:3000/footer-links.json';
const BACKEND_VERSION_API_URL = buildApiUrl('config_backend_version');
const INDEXING_ALERT_API_URL = buildApiUrl('homepage_indexing_status');
base.describe('with custom links, max cols', () => {
const test = base.extend({
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_FOOTER_LINKS', value: FOOTER_LINKS_URL },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
});
test.beforeEach(async({ page, mount }) => { test.describe('with custom links, max cols', () => {
await page.route(FOOTER_LINKS_URL, (route) => { test.beforeEach(async({ render, mockApiResponse, mockConfigResponse, injectMetaMaskProvider, mockEnvs }) => {
return route.fulfill({ await mockEnvs([
body: JSON.stringify(FOOTER_LINKS), [ 'NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL ],
}); ]);
await mockConfigResponse('NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL, JSON.stringify(FOOTER_LINKS));
await injectMetaMaskProvider();
await mockApiResponse('homepage_indexing_status', {
finished_indexing: false,
finished_indexing_blocks: false,
indexed_internal_transactions_ratio: '0.1',
indexed_blocks_ratio: '0.1',
}); });
await page.evaluate(() => { await render(<Footer/>);
window.ethereum = {
isMetaMask: true,
_events: {},
} as WalletProvider;
});
await page.route(INDEXING_ALERT_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({ finished_indexing: false, indexed_internal_transactions_ratio: 0.1 }),
}));
await mount(
<TestApp>
<Footer/>
</TestApp>,
);
}); });
test('+@mobile +@dark-mode', async({ page }) => { test('+@mobile +@dark-mode', async({ page }) => {
...@@ -65,74 +38,35 @@ base.describe('with custom links, max cols', () => { ...@@ -65,74 +38,35 @@ base.describe('with custom links, max cols', () => {
}); });
}); });
base.describe('with custom links, min cols', () => { test.describe('with custom links, min cols', () => {
const test = base.extend({ test('base view +@dark-mode +@mobile', async({ render, page, mockConfigResponse, mockEnvs }) => {
context: contextWithEnvs([ await mockEnvs([
{ name: 'NEXT_PUBLIC_FOOTER_LINKS', value: FOOTER_LINKS_URL }, [ 'NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL ],
// eslint-disable-next-line @typescript-eslint/no-explicit-any ]);
]) as any, await mockConfigResponse('NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL, JSON.stringify([ FOOTER_LINKS[0] ]));
}); await render(<Footer/>);
test('base view +@dark-mode +@mobile', async({ mount, page }) => {
await page.route(FOOTER_LINKS_URL, (route) => {
return route.fulfill({
body: JSON.stringify([ FOOTER_LINKS[0] ]),
});
});
await mount(
<TestApp>
<Footer/>
</TestApp>,
);
await expect(page).toHaveScreenshot(); await expect(page).toHaveScreenshot();
}); });
}); });
base.describe('without custom links', () => { test.describe('without custom links', () => {
base('base view +@dark-mode +@mobile', async({ mount, page }) => { test('base view +@dark-mode +@mobile', async({ render, page, injectMetaMaskProvider, mockApiResponse }) => {
await page.evaluate(() => { await injectMetaMaskProvider();
window.ethereum = { await mockApiResponse('config_backend_version', { backend_version: 'v5.2.0-beta.+commit.1ce1a355' });
isMetaMask: true, await render(<Footer/>);
_events: {},
} as WalletProvider;
});
await page.route(BACKEND_VERSION_API_URL, (route) => {
return route.fulfill({
body: JSON.stringify({
backend_version: 'v5.2.0-beta.+commit.1ce1a355',
}),
});
});
await mount(
<TestApp>
<Footer/>
</TestApp>,
);
await expect(page).toHaveScreenshot(); await expect(page).toHaveScreenshot();
}); });
base('with indexing alert +@dark-mode +@mobile', async({ mount, page }) => { test('with indexing alert +@dark-mode +@mobile', async({ render, injectMetaMaskProvider, mockApiResponse }) => {
await page.evaluate(() => { await injectMetaMaskProvider();
window.ethereum = { await mockApiResponse('homepage_indexing_status', {
providers: [ { isMetaMask: true, _events: {} } ], finished_indexing: false,
} as WalletProvider; finished_indexing_blocks: false,
indexed_internal_transactions_ratio: '0.1',
indexed_blocks_ratio: '0.1',
}); });
await page.route(INDEXING_ALERT_API_URL, (route) => route.fulfill({ const component = await render(<Footer/>);
status: 200,
body: JSON.stringify({ finished_indexing: false, indexed_internal_transactions_ratio: 0.1 }),
}));
const component = await mount(
<TestApp>
<Footer/>
</TestApp>,
);
await expect(component).toHaveScreenshot(); await expect(component).toHaveScreenshot();
}); });
}); });
ui/snippets/header/Burger.pw.tsx
View file @ 6bfc4955
import { test as base, expect, devices } from '@playwright/experimental-ct-react'; import type { BrowserContext } from '@playwright/test';
import React from 'react'; import React from 'react';
import { buildExternalAssetFilePath } from 'configs/app/utils';
import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network'; import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network';
import authFixture from 'playwright/fixtures/auth'; import { contextWithAuth } from 'playwright/fixtures/auth';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs'; import { test, expect, devices } from 'playwright/lib';
import createContextWithStorage from 'playwright/fixtures/createContextWithStorage';
import TestApp from 'playwright/TestApp';
import * as app from 'playwright/utils/app';
import Burger from './Burger'; import Burger from './Burger';
const FEATURED_NETWORKS_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_FEATURED_NETWORKS', 'https://localhost:3000/featured-networks.json') || ''; const FEATURED_NETWORKS_URL = 'https://localhost:3000/featured-networks.json';
const LOGO_URL = 'https://localhost:3000/my-logo.png'; const LOGO_URL = 'https://localhost:3000/my-logo.png';
base.use({ viewport: devices['iPhone 13 Pro'].viewport }); test.use({ viewport: devices['iPhone 13 Pro'].viewport });
const hooksConfig = { const hooksConfig = {
router: { router: {
...@@ -24,32 +20,16 @@ const hooksConfig = { ...@@ -24,32 +20,16 @@ const hooksConfig = {
}, },
}; };
const test = base.extend({ test.beforeEach(async({ mockEnvs, mockConfigResponse, mockAssetResponse }) => {
context: contextWithEnvs([ await mockEnvs([
{ name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL }, [ 'NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL ],
// eslint-disable-next-line @typescript-eslint/no-explicit-any ]);
]) as any, await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS_MOCK);
await mockAssetResponse(LOGO_URL, './playwright/mocks/image_s.jpg');
}); });
test('base view', async({ mount, page }) => { test('base view', async({ render, page }) => {
await page.route(FEATURED_NETWORKS_URL, (route) => { const component = await render(<Burger/>, { hooksConfig });
return route.fulfill({
body: FEATURED_NETWORKS_MOCK,
});
});
await page.route(LOGO_URL, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
const component = await mount(
<TestApp>
<Burger/>
</TestApp>,
{ hooksConfig },
);
await component.locator('div[aria-label="Menu button"]').click(); await component.locator('div[aria-label="Menu button"]').click();
await expect(page.locator('.chakra-modal__content-container')).toHaveScreenshot(); await expect(page.locator('.chakra-modal__content-container')).toHaveScreenshot();
...@@ -61,25 +41,8 @@ test('base view', async({ mount, page }) => { ...@@ -61,25 +41,8 @@ test('base view', async({ mount, page }) => {
test.describe('dark mode', () => { test.describe('dark mode', () => {
test.use({ colorScheme: 'dark' }); test.use({ colorScheme: 'dark' });
test('base view', async({ mount, page }) => { test('base view', async({ render, page }) => {
await page.route(FEATURED_NETWORKS_URL, (route) => { const component = await render(<Burger/>, { hooksConfig });
return route.fulfill({
body: FEATURED_NETWORKS_MOCK,
});
});
await page.route(LOGO_URL, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
const component = await mount(
<TestApp>
<Burger/>
</TestApp>,
{ hooksConfig },
);
await component.locator('div[aria-label="Menu button"]').click(); await component.locator('div[aria-label="Menu button"]').click();
await expect(page).toHaveScreenshot(); await expect(page).toHaveScreenshot();
...@@ -89,39 +52,23 @@ test.describe('dark mode', () => { ...@@ -89,39 +52,23 @@ test.describe('dark mode', () => {
}); });
}); });
test('submenu', async({ mount, page }) => { test('submenu', async({ render, page }) => {
const component = await mount( const component = await render(<Burger/>, { hooksConfig });
<TestApp>
<Burger/>
</TestApp>,
{ hooksConfig },
);
await component.locator('div[aria-label="Menu button"]').click(); await component.locator('div[aria-label="Menu button"]').click();
await page.locator('div[aria-label="Blockchain link group"]').click(); await page.locator('div[aria-label="Blockchain link group"]').click();
await expect(page).toHaveScreenshot(); await expect(page).toHaveScreenshot();
}); });
test.describe('auth', () => { const authTest = test.extend<{ context: BrowserContext }>({
const extendedTest = base.extend({ context: contextWithAuth,
context: async({ browser }, use) => { });
const context = await createContextWithStorage(browser, [
{ name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
]);
authFixture(context);
use(context);
},
});
extendedTest.use({ viewport: { width: devices['iPhone 13 Pro'].viewport.width, height: 800 } }); authTest.describe('auth', () => {
authTest.use({ viewport: { width: devices['iPhone 13 Pro'].viewport.width, height: 800 } });
extendedTest('base view', async({ mount, page }) => { authTest('base view', async({ render, page }) => {
const component = await mount( const component = await render(<Burger/>, { hooksConfig });
<TestApp>
<Burger/>
</TestApp>,
{ hooksConfig },
);
await component.locator('div[aria-label="Menu button"]').click(); await component.locator('div[aria-label="Menu button"]').click();
await expect(page).toHaveScreenshot(); await expect(page).toHaveScreenshot();
......
ui/snippets/navigation/NavigationDesktop.pw.tsx
View file @ 6bfc4955
import { Box, Flex } from '@chakra-ui/react'; import { Box, Flex } from '@chakra-ui/react';
import { test as base, expect } from '@playwright/experimental-ct-react'; import type { BrowserContext, Locator } from '@playwright/test';
import type { Locator } from '@playwright/test';
import React from 'react'; import React from 'react';
import { buildExternalAssetFilePath } from 'configs/app/utils'; import config from 'configs/app';
import * as cookies from 'lib/cookies'; import * as cookies from 'lib/cookies';
import authFixture from 'playwright/fixtures/auth'; import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs'; import { contextWithAuth } from 'playwright/fixtures/auth';
import createContextWithStorage from 'playwright/fixtures/createContextWithStorage'; import { test, expect } from 'playwright/lib';
import TestApp from 'playwright/TestApp';
import * as app from 'playwright/utils/app';
import * as configs from 'playwright/utils/configs'; import * as configs from 'playwright/utils/configs';
import NavigationDesktop from './NavigationDesktop'; import NavigationDesktop from './NavigationDesktop';
...@@ -22,26 +19,24 @@ const hooksConfig = { ...@@ -22,26 +19,24 @@ const hooksConfig = {
}, },
}; };
const FEATURED_NETWORKS_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_FEATURED_NETWORKS', 'https://localhost:3000/config.json') || ''; const FEATURED_NETWORKS_URL = 'https://localhost:3000/featured-networks.json';
const test = base.extend({ test.beforeEach(async({ mockEnvs, mockConfigResponse }) => {
context: contextWithEnvs([ await mockEnvs([
{ name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL }, [ 'NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL ],
// eslint-disable-next-line @typescript-eslint/no-explicit-any ]);
]) as any, await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS_MOCK);
}); });
test.describe('no auth', () => { test.describe('no auth', () => {
let component: Locator; let component: Locator;
test.beforeEach(async({ mount }) => { test.beforeEach(async({ render }) => {
component = await mount( component = await render(
<TestApp>
<Flex w="100%" minH="100vh" alignItems="stretch"> <Flex w="100%" minH="100vh" alignItems="stretch">
<NavigationDesktop/> <NavigationDesktop/>
<Box bgColor="lightpink" w="100%"/> <Box bgColor="lightpink" w="100%"/>
</Flex> </Flex>,
</TestApp>,
{ hooksConfig }, { hooksConfig },
); );
}); });
...@@ -59,39 +54,31 @@ test.describe('no auth', () => { ...@@ -59,39 +54,31 @@ test.describe('no auth', () => {
}); });
}); });
base.describe('auth', () => { const authTest = test.extend<{ context: BrowserContext }>({
const test = base.extend({ context: contextWithAuth,
context: async({ browser }, use) => { });
const context = await createContextWithStorage(browser, [
{ name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
]);
authFixture(context);
use(context);
},
});
authTest.describe('auth', () => {
let component: Locator; let component: Locator;
test.beforeEach(async({ mount }) => { authTest.beforeEach(async({ render }) => {
component = await mount( component = await render(
<TestApp>
<Flex w="100%" minH="100vh" alignItems="stretch"> <Flex w="100%" minH="100vh" alignItems="stretch">
<NavigationDesktop/> <NavigationDesktop/>
<Box bgColor="lightpink" w="100%"/> <Box bgColor="lightpink" w="100%"/>
</Flex> </Flex>,
</TestApp>,
{ hooksConfig }, { hooksConfig },
); );
}); });
test('+@dark-mode', async() => { authTest('+@dark-mode', async() => {
await expect(component).toHaveScreenshot(); await expect(component).toHaveScreenshot();
}); });
test.describe('xl screen', () => { authTest.describe('xl screen', () => {
test.use({ viewport: configs.viewport.xl }); authTest.use({ viewport: configs.viewport.xl });
test('+@dark-mode', async() => { authTest('+@dark-mode', async() => {
await expect(component).toHaveScreenshot(); await expect(component).toHaveScreenshot();
}); });
}); });
...@@ -100,14 +87,12 @@ base.describe('auth', () => { ...@@ -100,14 +87,12 @@ base.describe('auth', () => {
test.describe('with tooltips', () => { test.describe('with tooltips', () => {
test.use({ viewport: configs.viewport.xl }); test.use({ viewport: configs.viewport.xl });
test('', async({ mount, page }) => { test('', async({ render, page }) => {
const component = await mount( const component = await render(
<TestApp>
<Flex w="100%" minH="100vh" alignItems="stretch"> <Flex w="100%" minH="100vh" alignItems="stretch">
<NavigationDesktop/> <NavigationDesktop/>
<Box bgColor="lightpink" w="100%"/> <Box bgColor="lightpink" w="100%"/>
</Flex> </Flex>,
</TestApp>,
{ hooksConfig }, { hooksConfig },
); );
...@@ -122,14 +107,12 @@ test.describe('with tooltips', () => { ...@@ -122,14 +107,12 @@ test.describe('with tooltips', () => {
test.describe('with submenu', () => { test.describe('with submenu', () => {
let component: Locator; let component: Locator;
test.beforeEach(async({ mount, page }) => { test.beforeEach(async({ render, page }) => {
component = await mount( component = await render(
<TestApp>
<Flex w="100%" minH="100vh" alignItems="stretch"> <Flex w="100%" minH="100vh" alignItems="stretch">
<NavigationDesktop/> <NavigationDesktop/>
<Box bgColor="lightpink" w="100%"/> <Box bgColor="lightpink" w="100%"/>
</Flex> </Flex>,
</TestApp>,
{ hooksConfig }, { hooksConfig },
); );
await page.locator('a[aria-label="Blockchain link group"]').hover(); await page.locator('a[aria-label="Blockchain link group"]').hover();
...@@ -148,65 +131,55 @@ test.describe('with submenu', () => { ...@@ -148,65 +131,55 @@ test.describe('with submenu', () => {
}); });
}); });
base.describe('cookie set to false', () => { const noSideBarCookieTest = test.extend({
const test = base.extend({ context: ({ context }, use) => {
context: async({ browser }, use) => { context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'false', domain: config.app.host, path: '/' } ]);
const context = await createContextWithStorage(browser, [
{ name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
]);
context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'false', domain: app.domain, path: '/' } ]);
use(context); use(context);
}, },
}); });
noSideBarCookieTest.describe('cookie set to false', () => {
let component: Locator; let component: Locator;
test.beforeEach(async({ mount }) => { noSideBarCookieTest.beforeEach(async({ render }) => {
component = await mount( component = await render(
<TestApp>
<Flex w="100%" minH="100vh" alignItems="stretch"> <Flex w="100%" minH="100vh" alignItems="stretch">
<NavigationDesktop/> <NavigationDesktop/>
<Box bgColor="lightpink" w="100%"/> <Box bgColor="lightpink" w="100%"/>
</Flex> </Flex>,
</TestApp>,
{ hooksConfig }, { hooksConfig },
); );
}); });
test('', async() => { noSideBarCookieTest('', async() => {
const networkMenu = component.locator('button[aria-label="Network menu"]'); const networkMenu = component.locator('button[aria-label="Network menu"]');
await expect(networkMenu).toBeVisible(); await expect(networkMenu).toBeVisible();
}); });
test.describe('xl screen', () => { noSideBarCookieTest.describe('xl screen', () => {
test.use({ viewport: configs.viewport.xl }); noSideBarCookieTest.use({ viewport: configs.viewport.xl });
test('', async() => { noSideBarCookieTest('', async() => {
const networkMenu = component.locator('button[aria-label="Network menu"]'); const networkMenu = component.locator('button[aria-label="Network menu"]');
await expect(networkMenu).toBeVisible(); await expect(networkMenu).toBeVisible();
}); });
}); });
}); });
base.describe('cookie set to true', () => { const sideBarCookieTest = test.extend({
const test = base.extend({ context: ({ context }, use) => {
context: async({ browser }, use) => { context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'true', domain: config.app.host, path: '/' } ]);
const context = await createContextWithStorage(browser, [
{ name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
]);
context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'true', domain: 'localhost', path: '/' } ]);
use(context); use(context);
}, },
}); });
test('navbar is collapsed', async({ mount }) => { sideBarCookieTest.describe('cookie set to true', () => {
const component = await mount( sideBarCookieTest('navbar is collapsed', async({ render }) => {
<TestApp> const component = await render(
<Flex w="100%" minH="100vh" alignItems="stretch"> <Flex w="100%" minH="100vh" alignItems="stretch">
<NavigationDesktop/> <NavigationDesktop/>
<Box bgColor="lightpink" w="100%"/> <Box bgColor="lightpink" w="100%"/>
</Flex> </Flex>,
</TestApp>,
{ hooksConfig }, { hooksConfig },
); );
...@@ -215,14 +188,12 @@ base.describe('cookie set to true', () => { ...@@ -215,14 +188,12 @@ base.describe('cookie set to true', () => {
}); });
}); });
test('hover +@dark-mode', async({ mount }) => { test('hover +@dark-mode', async({ render }) => {
const component = await mount( const component = await render(
<TestApp>
<Flex w="100%" minH="100vh" alignItems="stretch"> <Flex w="100%" minH="100vh" alignItems="stretch">
<NavigationDesktop/> <NavigationDesktop/>
<Box bgColor="lightpink" w="100%"/> <Box bgColor="lightpink" w="100%"/>
</Flex> </Flex>,
</TestApp>,
{ hooksConfig }, { hooksConfig },
); );
...@@ -233,14 +204,12 @@ test('hover +@dark-mode', async({ mount }) => { ...@@ -233,14 +204,12 @@ test('hover +@dark-mode', async({ mount }) => {
test.describe('hover xl screen', () => { test.describe('hover xl screen', () => {
test.use({ viewport: configs.viewport.xl }); test.use({ viewport: configs.viewport.xl });
test('+@dark-mode', async({ mount }) => { test('+@dark-mode', async({ render }) => {
const component = await mount( const component = await render(
<TestApp>
<Flex w="100%" minH="100vh" alignItems="stretch"> <Flex w="100%" minH="100vh" alignItems="stretch">
<NavigationDesktop/> <NavigationDesktop/>
<Box bgColor="lightpink" w="100%"/> <Box bgColor="lightpink" w="100%"/>
</Flex> </Flex>,
</TestApp>,
{ hooksConfig }, { hooksConfig },
); );
......
ui/snippets/networkMenu/NetworkLogo.pw.tsx
View file @ 6bfc4955
import { test as base, expect } from '@playwright/experimental-ct-react';
import type { Locator } from '@playwright/test'; import type { Locator } from '@playwright/test';
import React from 'react'; import React from 'react';
import { buildExternalAssetFilePath } from 'configs/app/utils'; import { test, expect } from 'playwright/lib';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import * as app from 'playwright/utils/app';
import * as configs from 'playwright/utils/configs'; import * as configs from 'playwright/utils/configs';
import NetworkLogo from './NetworkLogo'; import NetworkLogo from './NetworkLogo';
base.describe('placeholder logo', () => { const LOGO_URL = 'https://localhost:3000/my-logo.png';
const test = base.extend({ const ICON_URL = 'https://localhost:3000/my-icon.png';
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_NETWORK_LOGO', value: '' }, test.describe('placeholder logo', () => {
{ name: 'NEXT_PUBLIC_NETWORK_ICON', value: '' }, test.beforeEach(async({ mockEnvs }) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any await mockEnvs([
]) as any, [ 'NEXT_PUBLIC_NETWORK_LOGO', '' ],
[ 'NEXT_PUBLIC_NETWORK_ICON', '' ],
]);
}); });
test('+@dark-mode', async({ mount }) => { test('+@dark-mode', async({ render }) => {
const component = await mount( const component = await render(<NetworkLogo/>);
<TestApp>
<NetworkLogo/>
</TestApp>,
);
await expect(component.locator('a')).toHaveScreenshot(); await expect(component.locator('a')).toHaveScreenshot();
}); });
...@@ -32,50 +26,25 @@ base.describe('placeholder logo', () => { ...@@ -32,50 +26,25 @@ base.describe('placeholder logo', () => {
test.describe('screen xl', () => { test.describe('screen xl', () => {
test.use({ viewport: configs.viewport.xl }); test.use({ viewport: configs.viewport.xl });
test('+@dark-mode', async({ mount }) => { test('+@dark-mode', async({ render }) => {
const component = await mount( const component = await render(<NetworkLogo/>);
<TestApp>
<NetworkLogo/>
</TestApp>,
);
await expect(component.locator('a')).toHaveScreenshot(); await expect(component.locator('a')).toHaveScreenshot();
}); });
}); });
}); });
base.describe('custom logo', () => { test.describe('custom logo', () => {
const LOGO_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_LOGO', 'https://localhost:3000/my-logo.png') || '';
const ICON_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_ICON', 'https://localhost:3000/my-icon.png') || '';
const test = base.extend({
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_NETWORK_LOGO', value: LOGO_URL },
{ name: 'NEXT_PUBLIC_NETWORK_ICON', value: ICON_URL },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
});
let component: Locator; let component: Locator;
test.beforeEach(async({ page, mount }) => { test.beforeEach(async({ render, mockConfigResponse, mockEnvs }) => {
await page.route(LOGO_URL, (route) => { await mockEnvs([
return route.fulfill({ [ 'NEXT_PUBLIC_NETWORK_LOGO', LOGO_URL ],
status: 200, [ 'NEXT_PUBLIC_NETWORK_ICON', ICON_URL ],
path: './playwright/mocks/network-logo.svg', ]);
}); await mockConfigResponse('NEXT_PUBLIC_NETWORK_LOGO', LOGO_URL, './playwright/mocks/network-logo.svg', true);
}); await mockConfigResponse('NEXT_PUBLIC_NETWORK_ICON', ICON_URL, './playwright/mocks/image_svg.svg', true);
await page.route(ICON_URL, (route) => { component = await render(<NetworkLogo/>);
return route.fulfill({
status: 200,
path: './playwright/mocks/image_svg.svg',
});
});
component = await mount(
<TestApp>
<NetworkLogo/>
</TestApp>,
);
}); });
test('+@dark-mode', async() => { test('+@dark-mode', async() => {
...@@ -91,54 +60,22 @@ base.describe('custom logo', () => { ...@@ -91,54 +60,22 @@ base.describe('custom logo', () => {
}); });
}); });
base.describe('custom logo with dark option -@default +@dark-mode', () => { test.describe('custom logo with dark option -@default +@dark-mode', () => {
const LOGO_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_LOGO', 'https://localhost:3000/my-logo.png') || '';
const LOGO_URL_DARK = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_LOGO_DARK', 'https://localhost:3000/my-logo.png') || '';
const ICON_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_ICON', 'https://localhost:3000/my-icon.png') || '';
const ICON_URL_DARK = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_ICON_DARK', 'https://localhost:3000/my-icon.png') || '';
const test = base.extend({
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_NETWORK_LOGO', value: LOGO_URL },
{ name: 'NEXT_PUBLIC_NETWORK_LOGO_DARK', value: LOGO_URL_DARK },
{ name: 'NEXT_PUBLIC_NETWORK_ICON', value: ICON_URL },
{ name: 'NEXT_PUBLIC_NETWORK_ICON_DARK', value: ICON_URL_DARK },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
});
let component: Locator; let component: Locator;
test.beforeEach(async({ page, mount }) => { test.beforeEach(async({ render, mockConfigResponse, mockEnvs }) => {
await page.route(LOGO_URL, (route) => { await mockEnvs([
return route.fulfill({ [ 'NEXT_PUBLIC_NETWORK_LOGO', LOGO_URL ],
status: 200, [ 'NEXT_PUBLIC_NETWORK_LOGO_DARK', LOGO_URL ],
path: './playwright/mocks/image_long.jpg', [ 'NEXT_PUBLIC_NETWORK_ICON', ICON_URL ],
}); [ 'NEXT_PUBLIC_NETWORK_ICON_DARK', ICON_URL ],
}); ]);
await page.route(LOGO_URL_DARK, (route) => { await mockConfigResponse('NEXT_PUBLIC_NETWORK_LOGO', LOGO_URL, './playwright/mocks/image_long.jpg', true);
return route.fulfill({ await mockConfigResponse('NEXT_PUBLIC_NETWORK_LOGO_DARK', LOGO_URL, './playwright/mocks/image_long.jpg', true);
status: 200, await mockConfigResponse('NEXT_PUBLIC_NETWORK_ICON', ICON_URL, './playwright/mocks/image_s.jpg', true);
path: './playwright/mocks/image_long.jpg', await mockConfigResponse('NEXT_PUBLIC_NETWORK_ICON_DARK', ICON_URL, './playwright/mocks/image_s.jpg', true);
});
}); component = await render(<NetworkLogo/>);
await page.route(ICON_URL, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
await page.route(ICON_URL_DARK, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
component = await mount(
<TestApp>
<NetworkLogo/>
</TestApp>,
);
}); });
test('', async() => { test('', async() => {
......
ui/snippets/networkMenu/NetworkMenu.pw.tsx
View file @ 6bfc4955
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react'; import React from 'react';
import { buildExternalAssetFilePath } from 'configs/app/utils';
import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network'; import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs'; import { test, expect } from 'playwright/lib';
import TestApp from 'playwright/TestApp';
import * as app from 'playwright/utils/app';
import NetworkMenu from './NetworkMenu'; import NetworkMenu from './NetworkMenu';
const FEATURED_NETWORKS_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_FEATURED_NETWORKS', 'https://localhost:3000/featured-networks.json') || ''; const FEATURED_NETWORKS_URL = 'https://localhost:3000/featured-networks.json';
const LOGO_URL = 'https://localhost:3000/my-logo.png';
const extendedTest = test.extend({ test.use({ viewport: { width: 1600, height: 1000 } });
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL }, test('base view +@dark-mode', async({ render, page, mockConfigResponse, mockAssetResponse, mockEnvs }) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any await mockEnvs([
]) as any, [ 'NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL ],
}); ]);
await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS_MOCK);
await mockAssetResponse(LOGO_URL, './playwright/mocks/image_s.jpg');
extendedTest.use({ viewport: { width: 1600, height: 1000 } }); const component = await render(<NetworkMenu/>);
extendedTest('base view +@dark-mode', async({ mount, page }) => {
const LOGO_URL = 'https://localhost:3000/my-logo.png';
await page.route(LOGO_URL, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
await page.route(FEATURED_NETWORKS_URL, (route) => {
return route.fulfill({
status: 200,
body: FEATURED_NETWORKS_MOCK,
});
});
const component = await mount(
<TestApp>
<NetworkMenu/>
</TestApp>,
);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 36, height: 36 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 36, height: 36 } });
......
ui/snippets/profileMenu/ProfileMenuDesktop.pw.tsx
View file @ 6bfc4955
import type { BrowserContext } from '@playwright/test';
import React from 'react'; import React from 'react';
import config from 'configs/app';
import * as profileMock from 'mocks/user/profile'; import * as profileMock from 'mocks/user/profile';
import authFixture from 'playwright/fixtures/auth'; import { contextWithAuth } from 'playwright/fixtures/auth';
import { test, expect } from 'playwright/lib'; import { test, expect } from 'playwright/lib';
import * as app from 'playwright/utils/app';
import ProfileMenuDesktop from './ProfileMenuDesktop'; import ProfileMenuDesktop from './ProfileMenuDesktop';
...@@ -17,14 +18,11 @@ test('no auth', async({ render, page }) => { ...@@ -17,14 +18,11 @@ test('no auth', async({ render, page }) => {
const component = await render(<ProfileMenuDesktop/>, { hooksConfig }); const component = await render(<ProfileMenuDesktop/>, { hooksConfig });
await component.locator('a').click(); await component.locator('a').click();
expect(page.url()).toBe(`${ app.url }/auth/auth0?path=%2F`); expect(page.url()).toBe(`${ config.app.baseUrl }/auth/auth0?path=%2F`);
}); });
const authTest = test.extend({ const authTest = test.extend<{ context: BrowserContext }>({
context: ({ context }, use) => { context: contextWithAuth,
authFixture(context);
use(context);
},
}); });
authTest('auth +@dark-mode', async({ render, page, mockApiResponse, mockAssetResponse }) => { authTest('auth +@dark-mode', async({ render, page, mockApiResponse, mockAssetResponse }) => {
await mockApiResponse('user_info', profileMock.base); await mockApiResponse('user_info', profileMock.base);
......
ui/snippets/profileMenu/ProfileMenuMobile.pw.tsx
View file @ 6bfc4955
import { test, expect, devices } from '@playwright/experimental-ct-react'; import type { BrowserContext } from '@playwright/test';
import React from 'react'; import React from 'react';
import config from 'configs/app';
import * as profileMock from 'mocks/user/profile'; import * as profileMock from 'mocks/user/profile';
import authFixture from 'playwright/fixtures/auth'; import { contextWithAuth } from 'playwright/fixtures/auth';
import TestApp from 'playwright/TestApp'; import { test, expect, devices } from 'playwright/lib';
import * as app from 'playwright/utils/app';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import ProfileMenuMobile from './ProfileMenuMobile'; import ProfileMenuMobile from './ProfileMenuMobile';
test('no auth', async({ mount, page }) => { test('no auth', async({ render, page }) => {
const hooksConfig = { const hooksConfig = {
router: { router: {
asPath: '/', asPath: '/',
pathname: '/', pathname: '/',
}, },
}; };
const component = await mount( const component = await render(<ProfileMenuMobile/>, { hooksConfig });
<TestApp>
<ProfileMenuMobile/>
</TestApp>,
{ hooksConfig },
);
await component.locator('a').click(); await component.locator('a').click();
expect(page.url()).toBe(`${ app.url }/auth/auth0?path=%2F`);
expect(page.url()).toBe(`${ config.app.baseUrl }/auth/auth0?path=%2F`);
}); });
test.use({ viewport: devices['iPhone 13 Pro'].viewport }); test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test.describe('auth', () => { const authTest = test.extend<{ context: BrowserContext }>({
const extendedTest = test.extend({ context: contextWithAuth,
context: ({ context }, use) => { });
authFixture(context);
use(context);
},
});
extendedTest('base view', async({ mount, page }) => {
await page.route(buildApiUrl('user_info'), (route) => route.fulfill({
status: 200,
body: JSON.stringify(profileMock.base),
}));
await page.route(profileMock.base.avatar, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
const component = await mount( authTest.describe('auth', () => {
<TestApp> authTest('base view', async({ render, page, mockApiResponse, mockAssetResponse }) => {
<ProfileMenuMobile/> await mockApiResponse('user_info', profileMock.base);
</TestApp>, await mockAssetResponse(profileMock.base.avatar, './playwright/mocks/image_s.jpg');
);
const component = await render(<ProfileMenuMobile/>);
await component.getByAltText(/Profile picture/i).click(); await component.getByAltText(/Profile picture/i).click();
await expect(page).toHaveScreenshot(); await expect(page).toHaveScreenshot();
}); });
}); });
ui/snippets/searchBar/SearchBar.pw.tsx
View file @ 6bfc4955
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react'; import React from 'react';
import { buildExternalAssetFilePath } from 'configs/app/utils';
import * as textAdMock from 'mocks/ad/textAd';
import { apps as appsMock } from 'mocks/apps/apps'; import { apps as appsMock } from 'mocks/apps/apps';
import * as searchMock from 'mocks/search/index'; import * as searchMock from 'mocks/search/index';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs'; import { test, expect } from 'playwright/lib';
import TestApp from 'playwright/TestApp';
import * as app from 'playwright/utils/app';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import SearchBar from './SearchBar'; import SearchBar from './SearchBar';
const test = base.extend({ test.beforeEach(async({ mockAssetResponse, mockEnvs }) => {
context: contextWithEnvs([ await mockAssetResponse(searchMock.token1.icon_url as string, './playwright/mocks/image_s.jpg');
{ name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: '' }, await mockEnvs([
// eslint-disable-next-line @typescript-eslint/no-explicit-any [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'false' ],
]) as any, ]);
}); });
test.beforeEach(async({ page }) => { test('search by token name +@mobile +@dark-mode', async({ render, page, mockApiResponse }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({ const apiUrl = await mockApiResponse('quick_search', [
status: 200,
body: JSON.stringify(textAdMock.duck),
}));
await page.route(textAdMock.duck.ad.thumbnail, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
await page.route(searchMock.token1.icon_url as string, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
});
test('search by token name +@mobile +@dark-mode', async({ mount, page }) => {
const API_URL = buildApiUrl('quick_search') + '?q=o';
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
searchMock.token1, searchMock.token1,
searchMock.token2, searchMock.token2,
]), ], { queryParams: { q: 'o' } });
})); await render(<SearchBar/>);
await mount(
<TestApp>
<SearchBar/>
</TestApp>,
);
await page.getByPlaceholder(/search/i).fill('o'); await page.getByPlaceholder(/search/i).fill('o');
await page.waitForResponse(API_URL); await page.waitForResponse(apiUrl);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
}); });
test('search by contract name +@mobile +@dark-mode', async({ mount, page }) => { test('search by contract name +@mobile +@dark-mode', async({ render, page, mockApiResponse }) => {
const API_URL = buildApiUrl('quick_search') + '?q=o'; const apiUrl = await mockApiResponse('quick_search', [
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
searchMock.contract1, searchMock.contract1,
searchMock.address2, searchMock.address2,
]), ], { queryParams: { q: 'o' } });
}));
await render(<SearchBar/>);
await mount(
<TestApp>
<SearchBar/>
</TestApp>,
);
await page.getByPlaceholder(/search/i).fill('o'); await page.getByPlaceholder(/search/i).fill('o');
await page.waitForResponse(API_URL); await page.waitForResponse(apiUrl);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
}); });
test('search by name homepage +@dark-mode', async({ mount, page }) => { test('search by name homepage +@dark-mode', async({ render, page, mockApiResponse }) => {
const API_URL = buildApiUrl('quick_search') + '?q=o'; const apiUrl = await mockApiResponse('quick_search', [
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
searchMock.token1, searchMock.token1,
searchMock.token2, searchMock.token2,
searchMock.contract1, searchMock.contract1,
]), ], { queryParams: { q: 'o' } });
})); await render(<SearchBar isHomepage/>);
await mount(
<TestApp>
<SearchBar isHomepage/>
</TestApp>,
);
await page.getByPlaceholder(/search/i).fill('o'); await page.getByPlaceholder(/search/i).fill('o');
await page.waitForResponse(API_URL); await page.waitForResponse(apiUrl);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
}); });
test('search by tag +@mobile +@dark-mode', async({ mount, page }) => { test('search by tag +@mobile +@dark-mode', async({ render, page, mockApiResponse }) => {
const API_URL = buildApiUrl('quick_search') + '?q=o'; const apiUrl = await mockApiResponse('quick_search', [
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
searchMock.label1, searchMock.label1,
]), ], { queryParams: { q: 'o' } });
})); await render(<SearchBar/>);
await mount(
<TestApp>
<SearchBar/>
</TestApp>,
);
await page.getByPlaceholder(/search/i).fill('o'); await page.getByPlaceholder(/search/i).fill('o');
await page.waitForResponse(API_URL); await page.waitForResponse(apiUrl);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
}); });
test('search by address hash +@mobile', async({ mount, page }) => { test('search by address hash +@mobile', async({ render, page, mockApiResponse }) => {
const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.address1.address }`; const apiUrl = await mockApiResponse('quick_search', [
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
searchMock.address1, searchMock.address1,
]), ], { queryParams: { q: searchMock.address1.address } });
})); await render(<SearchBar/>);
await mount(
<TestApp>
<SearchBar/>
</TestApp>,
);
await page.getByPlaceholder(/search/i).fill(searchMock.address1.address); await page.getByPlaceholder(/search/i).fill(searchMock.address1.address);
await page.waitForResponse(API_URL); await page.waitForResponse(apiUrl);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
}); });
test('search by block number +@mobile', async({ mount, page }) => { test('search by block number +@mobile', async({ render, page, mockApiResponse }) => {
const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.block1.block_number }`; const apiUrl = await mockApiResponse('quick_search', [
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
searchMock.block1, searchMock.block1,
searchMock.block2, searchMock.block2,
searchMock.block3, searchMock.block3,
]), ], { queryParams: { q: searchMock.block1.block_number } });
})); await render(<SearchBar/>);
await mount(
<TestApp>
<SearchBar/>
</TestApp>,
);
await page.getByPlaceholder(/search/i).fill(String(searchMock.block1.block_number)); await page.getByPlaceholder(/search/i).fill(String(searchMock.block1.block_number));
await page.waitForResponse(API_URL); await page.waitForResponse(apiUrl);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 600 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 600 } });
}); });
test('search by block hash +@mobile', async({ mount, page }) => { test('search by block hash +@mobile', async({ render, page, mockApiResponse }) => {
const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.block1.block_hash }`; const apiUrl = await mockApiResponse('quick_search', [
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
searchMock.block1, searchMock.block1,
]), ], { queryParams: { q: searchMock.block1.block_hash } });
})); await render(<SearchBar/>);
await mount(
<TestApp>
<SearchBar/>
</TestApp>,
);
await page.getByPlaceholder(/search/i).fill(searchMock.block1.block_hash); await page.getByPlaceholder(/search/i).fill(searchMock.block1.block_hash);
await page.waitForResponse(API_URL); await page.waitForResponse(apiUrl);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
}); });
test('search by tx hash +@mobile', async({ mount, page }) => { test('search by tx hash +@mobile', async({ render, page, mockApiResponse }) => {
const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.tx1.tx_hash }`; const apiUrl = await mockApiResponse('quick_search', [
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
searchMock.tx1, searchMock.tx1,
]), ], { queryParams: { q: searchMock.tx1.tx_hash } });
})); await render(<SearchBar/>);
await mount(
<TestApp>
<SearchBar/>
</TestApp>,
);
await page.getByPlaceholder(/search/i).fill(searchMock.tx1.tx_hash); await page.getByPlaceholder(/search/i).fill(searchMock.tx1.tx_hash);
await page.waitForResponse(API_URL); await page.waitForResponse(apiUrl);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
}); });
test('search by blob hash +@mobile', async({ mount, page }) => { test('search by blob hash +@mobile', async({ render, page, mockApiResponse }) => {
const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.blob1.blob_hash }`; const apiUrl = await mockApiResponse('quick_search', [
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
searchMock.blob1, searchMock.blob1,
]), ], { queryParams: { q: searchMock.blob1.blob_hash } });
})); await render(<SearchBar/>);
await mount(
<TestApp>
<SearchBar/>
</TestApp>,
);
await page.getByPlaceholder(/search/i).fill(searchMock.blob1.blob_hash); await page.getByPlaceholder(/search/i).fill(searchMock.blob1.blob_hash);
await page.waitForResponse(API_URL); await page.waitForResponse(apiUrl);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
}); });
test('search by domain name +@mobile', async({ mount, page }) => { test('search by domain name +@mobile', async({ render, page, mockApiResponse }) => {
const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.domain1.ens_info.name }`; const apiUrl = await mockApiResponse('quick_search', [
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
searchMock.domain1, searchMock.domain1,
]), ], { queryParams: { q: searchMock.domain1.ens_info.name } });
}));
await render(<SearchBar/>);
await mount(
<TestApp>
<SearchBar/>
</TestApp>,
);
await page.getByPlaceholder(/search/i).fill(searchMock.domain1.ens_info.name); await page.getByPlaceholder(/search/i).fill(searchMock.domain1.ens_info.name);
await page.waitForResponse(API_URL); await page.waitForResponse(apiUrl);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
}); });
const testWithUserOps = base.extend({ test('search by user op hash +@mobile', async({ render, page, mockApiResponse, mockEnvs }) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any await mockEnvs([
context: contextWithEnvs(configs.featureEnvs.userOps) as any, [ 'NEXT_PUBLIC_HAS_USER_OPS', 'true' ],
}); ]);
const apiUrl = await mockApiResponse('quick_search', [
testWithUserOps('search by user op hash +@mobile', async({ mount, page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: JSON.stringify(textAdMock.duck),
}));
const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.tx1.tx_hash }`;
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
searchMock.userOp1, searchMock.userOp1,
]), ], { queryParams: { q: searchMock.tx1.tx_hash } });
})); await render(<SearchBar/>);
await mount(
<TestApp>
<SearchBar/>
</TestApp>,
);
await page.getByPlaceholder(/search/i).fill(searchMock.tx1.tx_hash); await page.getByPlaceholder(/search/i).fill(searchMock.tx1.tx_hash);
await page.waitForResponse(API_URL); await page.waitForResponse(apiUrl);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
}); });
test('search with view all link', async({ mount, page }) => { test('search with view all link', async({ render, page, mockApiResponse }) => {
const API_URL = buildApiUrl('quick_search') + '?q=o'; const apiUrl = await mockApiResponse('quick_search', [
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
searchMock.token1, searchMock.token1,
searchMock.token2, searchMock.token2,
searchMock.contract1, searchMock.contract1,
...Array(47).fill(searchMock.contract1), ...Array(47).fill(searchMock.contract1),
]), ], { queryParams: { q: 'o' } });
})); await render(<SearchBar/>);
await mount(
<TestApp>
<SearchBar/>
</TestApp>,
);
await page.getByPlaceholder(/search/i).fill('o'); await page.getByPlaceholder(/search/i).fill('o');
await page.waitForResponse(apiUrl);
await page.waitForResponse(API_URL);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
}); });
test('scroll suggest to category', async({ mount, page }) => { test('scroll suggest to category', async({ render, page, mockApiResponse }) => {
const API_URL = buildApiUrl('quick_search') + '?q=o'; const apiUrl = await mockApiResponse('quick_search', [
await page.route(API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify([
searchMock.token1, searchMock.token1,
searchMock.token2, searchMock.token2,
searchMock.contract1, searchMock.contract1,
...@@ -315,28 +173,18 @@ test('scroll suggest to category', async({ mount, page }) => { ...@@ -315,28 +173,18 @@ test('scroll suggest to category', async({ mount, page }) => {
searchMock.token1, searchMock.token1,
searchMock.token2, searchMock.token2,
searchMock.contract1, searchMock.contract1,
]), ], { queryParams: { q: 'o' } });
})); await render(<SearchBar/>);
await mount(
<TestApp>
<SearchBar/>
</TestApp>,
);
await page.getByPlaceholder(/search/i).fill('o'); await page.getByPlaceholder(/search/i).fill('o');
await page.waitForResponse(API_URL); await page.waitForResponse(apiUrl);
await page.getByRole('tab', { name: 'Addresses' }).click(); await page.getByRole('tab', { name: 'Addresses' }).click();
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
}); });
test('recent keywords suggest +@mobile', async({ mount, page }) => { test('recent keywords suggest +@mobile', async({ render, page }) => {
await mount( await render(<SearchBar/>);
<TestApp>
<SearchBar/>
</TestApp>,
);
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
await page.evaluate(() => window.localStorage.setItem('recent_search_keywords', '["10x2d311959270e0bbdc1fc7bc6dbd8ad645c4dd8d6aa32f5f89d54629a924f112b","0x1d311959270e0bbdc1fc7bc6dbd8ad645c4dd8d6aa32f5f89d54629a924f112b","usd","bob"]')); await page.evaluate(() => window.localStorage.setItem('recent_search_keywords', '["10x2d311959270e0bbdc1fc7bc6dbd8ad645c4dd8d6aa32f5f89d54629a924f112b","0x1d311959270e0bbdc1fc7bc6dbd8ad645c4dd8d6aa32f5f89d54629a924f112b","usd","bob"]'));
await page.getByPlaceholder(/search/i).click(); await page.getByPlaceholder(/search/i).click();
...@@ -344,50 +192,24 @@ test('recent keywords suggest +@mobile', async({ mount, page }) => { ...@@ -344,50 +192,24 @@ test('recent keywords suggest +@mobile', async({ mount, page }) => {
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
}); });
base.describe('with apps', () => { test.describe('with apps', () => {
const MARKETPLACE_CONFIG_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', 'https://marketplace-config.json') || ''; const MARKETPLACE_CONFIG_URL = 'https://marketplace-config.json';
const test = base.extend({
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
});
test('default view +@mobile', async({ mount, page }) => { test('default view +@mobile', async({ render, page, mockApiResponse, mockConfigResponse, mockAssetResponse, mockEnvs }) => {
const API_URL = buildApiUrl('quick_search') + '?q=o'; await mockEnvs([
await page.route(API_URL, (route) => route.fulfill({ [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'true' ],
status: 200, [ 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL ],
body: JSON.stringify([ ]);
const apiUrl = await mockApiResponse('quick_search', [
searchMock.token1, searchMock.token1,
]), ], { queryParams: { q: 'o' } });
})); await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, JSON.stringify(appsMock));
await mockAssetResponse(appsMock[0].logo, './playwright/mocks/image_s.jpg');
await page.route(MARKETPLACE_CONFIG_URL, (route) => route.fulfill({ await mockAssetResponse(appsMock[1].logo, './playwright/mocks/image_s.jpg');
status: 200,
body: JSON.stringify(appsMock),
}));
await page.route(appsMock[0].logo, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
await page.route(appsMock[1].logo as string, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
await mount( await render(<SearchBar/>);
<TestApp>
<SearchBar/>
</TestApp>,
);
await page.getByPlaceholder(/search/i).fill('o'); await page.getByPlaceholder(/search/i).fill('o');
await page.waitForResponse(apiUrl);
await page.waitForResponse(API_URL);
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } }); await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
}); });
......
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