Skip to content

F
frontend
Commit 74c6954b authored by tom goriunov's avatar tom goriunov Committed by GitHub
Browse files
Options

fix recaptcha and ads banners in pw tests (#997) 

* fix recaptcha in pw tests

* change ads banner placeholder for pw
parent af0156eb
Hide whitespace changes
Inline Side-by-side
Showing with 115 additions and 80 deletions
configs/envs/.env.pw
View file @ 74c6954b
......@@ -23,7 +23,7 @@ NEXT_PUBLIC_NETWORK_RPC_URL=https://localhost:1111
NEXT_PUBLIC_IS_TESTNET=true
NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://localhost:3000/marketplace-config.json
NEXT_PUBLIC_IS_L2_NETWORK=false
NEXT_PUBLIC_AD_BANNER_PROVIDER=coinzilla
NEXT_PUBLIC_AD_BANNER_PROVIDER=slise
# network config
NEXT_PUBLIC_NETWORK_NAME=Blockscout
......
playwright/utils/configs.ts
View file @ 74c6954b
......@@ -4,3 +4,7 @@ export const viewport = {
mobile: devices['iPhone 13 Pro'].viewport,
xl: { width: 1600, height: 1000 },
};
export const maskColor = '#4299E1'; // blue.400
export const adsBannerSelector = '.adsbyslise';
playwright/utils/insertAdPlaceholder.ts deleted 100644 → 0
View file @ af0156eb
import type { Page } from 'playwright-core';
export default async function insertAdPlaceholder(page: Page) {
await page.waitForSelector('#adBanner', { state: 'attached' });
await page.evaluate(() => {
const adContainer = document.getElementById('adBanner');
const adReplacer = document.createElement('div');
adReplacer.style.width = '200px';
adReplacer.style.height = '100%';
adReplacer.style.background = '#f00';
adContainer?.replaceChildren(adReplacer);
});
}
ui/address/AddressDetails.pw.tsx
View file @ 74c6954b
......@@ -11,7 +11,7 @@ import * as countersMock from 'mocks/address/counters';
import * as tokensMock from 'mocks/address/tokens';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import insertAdPlaceholder from 'playwright/utils/insertAdPlaceholder';
import * as configs from 'playwright/utils/configs';
import AddressDetails from './AddressDetails';
import MockAddressPage from './testUtils/MockAddressPage';
......@@ -45,9 +45,10 @@ test('contract +@mobile', async({ mount, page }) => {
{ hooksConfig },
);
await insertAdPlaceholder(page);
await expect(component).toHaveScreenshot();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
test('token', async({ mount, page }) => {
......@@ -87,9 +88,10 @@ test('token', async({ mount, page }) => {
{ hooksConfig },
);
await insertAdPlaceholder(page);
await expect(component).toHaveScreenshot();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
test('validator +@mobile', async({ mount, page }) => {
......@@ -109,7 +111,8 @@ test('validator +@mobile', async({ mount, page }) => {
{ hooksConfig },
);
await insertAdPlaceholder(page);
await expect(component).toHaveScreenshot();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
ui/csvExport/CsvExportForm.tsx
View file @ 74c6954b
......@@ -81,7 +81,7 @@ const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTempla
noValidate
onSubmit={ handleSubmit(onFormSubmit) }
>
<Flex columnGap={ 5 } rowGap={ 3 } flexDir={{ base: 'column', lg: 'row' }} alignItems={{ base: 'flex-start', lg: 'center' }}>
<Flex columnGap={ 5 } rowGap={ 3 } flexDir={{ base: 'column', lg: 'row' }} alignItems={{ base: 'flex-start', lg: 'center' }} flexWrap="wrap">
<CsvExportFormField name="from" formApi={ formApi }/>
<CsvExportFormField name="to" formApi={ formApi }/>
<CsvExportFormReCaptcha formApi={ formApi }/>
......
ui/csvExport/CsvExportFormReCaptcha.tsx
View file @ 74c6954b
import { Alert } from '@chakra-ui/react';
import React from 'react';
import ReCaptcha from 'react-google-recaptcha';
import type { UseFormReturn } from 'react-hook-form';
......@@ -41,8 +42,18 @@ const CsvExportFormReCaptcha = ({ formApi }: Props) => {
formApi.setError('reCaptcha', { type: 'required' });
}, [ formApi ]);
if (!appConfig.reCaptcha.siteKey) {
return (
<Alert status="error">
CSV export is not available at the moment since reCaptcha is not configured for this application.
Please contact the service maintainer to make necessary changes in the service configuration.
</Alert>
);
}
return (
<ReCaptcha
className="recaptcha"
ref={ ref }
sitekey={ appConfig.reCaptcha.siteKey }
onChange={ handleReCaptchaChange }
......
ui/pages/CsvExport.pw.tsx
View file @ 74c6954b
......@@ -4,6 +4,7 @@ import React from 'react';
import * as addressMock from 'mocks/address/address';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import CsvExport from './CsvExport';
......@@ -22,7 +23,7 @@ test.beforeEach(async({ page }) => {
}));
});
test('base view +@mobile +@dark-mode', async({ mount }) => {
test('base view +@mobile +@dark-mode', async({ mount, page }) => {
const component = await mount(
<TestApp>
......@@ -31,5 +32,10 @@ test('base view +@mobile +@dark-mode', async({ mount }) => {
{ hooksConfig },
);
await expect(component).toHaveScreenshot();
await page.waitForResponse('https://www.google.com/recaptcha/api2/**');
await expect(component).toHaveScreenshot({
mask: [ page.locator('.recaptcha') ],
maskColor: configs.maskColor,
});
});
ui/pages/Home.pw.tsx
View file @ 74c6954b
......@@ -10,7 +10,6 @@ import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import * as configs from 'playwright/utils/configs';
import insertAdPlaceholder from 'playwright/utils/insertAdPlaceholder';
import Home from './Home';
......@@ -47,19 +46,23 @@ test.describe('default view', () => {
<Home/>
</TestApp>,
);
await insertAdPlaceholder(page);
});
test('-@default +@dark-mode', async() => {
await expect(component.locator('main')).toHaveScreenshot();
test('-@default +@dark-mode', async({ page }) => {
await expect(component.locator('main')).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
test.describe('screen xl', () => {
test.use({ viewport: configs.viewport.xl });
test('', async() => {
await expect(component.locator('main')).toHaveScreenshot();
test('', async({ page }) => {
await expect(component.locator('main')).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
});
});
......@@ -89,7 +92,10 @@ test.describe('custom hero plate background', () => {
const heroPlate = component.locator('div[data-label="hero plate"]');
await expect(heroPlate).toHaveScreenshot();
await expect(heroPlate).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
});
......@@ -128,8 +134,9 @@ test.describe('mobile', () => {
</TestApp>,
);
await insertAdPlaceholder(page);
await expect(component.locator('main')).toHaveScreenshot();
await expect(component.locator('main')).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
});
ui/pages/Token.pw.tsx
View file @ 74c6954b
......@@ -7,7 +7,7 @@ import { tokenInfo, tokenCounters } from 'mocks/tokens/tokenInfo';
import * as socketServer from 'playwright/fixtures/socketServer';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import insertAdPlaceholder from 'playwright/utils/insertAdPlaceholder';
import * as configs from 'playwright/utils/configs';
import Token from './Token';
......@@ -66,9 +66,10 @@ test('base view', async({ mount, page, createSocket }) => {
const channel = await socketServer.joinChannel(socket, 'tokens:1');
socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
await insertAdPlaceholder(page);
await expect(component).toHaveScreenshot();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
test('with verified info', async({ mount, page, createSocket }) => {
......@@ -94,11 +95,12 @@ test('with verified info', async({ mount, page, createSocket }) => {
const channel = await socketServer.joinChannel(socket, 'tokens:1');
socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
await insertAdPlaceholder(page);
await page.getByRole('button', { name: /project info/i }).click();
await expect(component).toHaveScreenshot();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
test.describe('mobile', () => {
......@@ -115,9 +117,10 @@ test.describe('mobile', () => {
const channel = await socketServer.joinChannel(socket, 'tokens:1');
socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
await insertAdPlaceholder(page);
await expect(component).toHaveScreenshot();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
test('with verified info', async({ mount, page, createSocket }) => {
......@@ -143,8 +146,9 @@ test.describe('mobile', () => {
const channel = await socketServer.joinChannel(socket, 'tokens:1');
socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
await insertAdPlaceholder(page);
await expect(component).toHaveScreenshot();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
});
ui/tokenInstance/TokenInstanceDetails.pw.tsx
View file @ 74c6954b
......@@ -5,7 +5,7 @@ import * as addressMock from 'mocks/address/address';
import * as tokenInstanceMock from 'mocks/tokens/tokenInstance';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import insertAdPlaceholder from 'playwright/utils/insertAdPlaceholder';
import * as configs from 'playwright/utils/configs';
import TokenInstanceDetails from './TokenInstanceDetails';
......@@ -31,7 +31,8 @@ test('base view +@dark-mode +@mobile', async({ mount, page }) => {
</TestApp>,
);
await insertAdPlaceholder(page);
await expect(component).toHaveScreenshot();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
ui/tx/TxDetails.pw.tsx
View file @ 74c6954b
......@@ -5,7 +5,7 @@ import * as txMock from 'mocks/txs/tx';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import insertAdPlaceholder from 'playwright/utils/insertAdPlaceholder';
import * as configs from 'playwright/utils/configs';
import TxDetails from './TxDetails';
......@@ -30,9 +30,11 @@ test('between addresses +@mobile +@dark-mode', async({ mount, page }) => {
);
await page.getByText('View details').click();
await insertAdPlaceholder(page);
await expect(component).toHaveScreenshot();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
test('creating contact', async({ mount, page }) => {
......@@ -48,9 +50,10 @@ test('creating contact', async({ mount, page }) => {
{ hooksConfig },
);
await insertAdPlaceholder(page);
await expect(component).toHaveScreenshot();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
test('with token transfer +@mobile', async({ mount, page }) => {
......@@ -66,9 +69,10 @@ test('with token transfer +@mobile', async({ mount, page }) => {
{ hooksConfig },
);
await insertAdPlaceholder(page);
await expect(component).toHaveScreenshot();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
test('with decoded revert reason', async({ mount, page }) => {
......@@ -84,9 +88,10 @@ test('with decoded revert reason', async({ mount, page }) => {
{ hooksConfig },
);
await insertAdPlaceholder(page);
await expect(component).toHaveScreenshot();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
test('with decoded raw reason', async({ mount, page }) => {
......@@ -102,9 +107,10 @@ test('with decoded raw reason', async({ mount, page }) => {
{ hooksConfig },
);
await insertAdPlaceholder(page);
await expect(component).toHaveScreenshot();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
test('pending', async({ mount, page }) => {
......@@ -121,9 +127,11 @@ test('pending', async({ mount, page }) => {
);
await page.getByText('View details').click();
await insertAdPlaceholder(page);
await expect(component).toHaveScreenshot();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
test('with actions uniswap +@mobile +@dark-mode', async({ mount, page }) => {
......@@ -139,8 +147,10 @@ test('with actions uniswap +@mobile +@dark-mode', async({ mount, page }) => {
{ hooksConfig },
);
await insertAdPlaceholder(page);
await expect(component).toHaveScreenshot();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
const l2Test = test.extend({
......@@ -163,9 +173,10 @@ l2Test('l2', async({ mount, page }) => {
{ hooksConfig },
);
await insertAdPlaceholder(page);
await expect(component).toHaveScreenshot();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
const mainnetTest = test.extend({
......@@ -188,7 +199,8 @@ mainnetTest('without testnet warning', async({ mount, page }) => {
{ hooksConfig },
);
await insertAdPlaceholder(page);
await expect(component).toHaveScreenshot();
await expect(component).toHaveScreenshot({
mask: [ page.locator(configs.adsBannerSelector) ],
maskColor: configs.maskColor,
});
});
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