Skip to content

F
frontend
Commit 33875b3e authored by Max Alekseenko's avatar Max Alekseenko Committed by GitHub
Browse files
Options

Merge pull request #1663 from blockscout/marketplace-tests 

Marketplace PW tests
parents 3e376f9d cdb9322b
Hide whitespace changes
Inline Side-by-side
Showing with 219 additions and 9 deletions
configs/envs/.env.pw
View file @ 33875b3e
......@@ -41,6 +41,7 @@ NEXT_PUBLIC_APP_INSTANCE=pw
NEXT_PUBLIC_MARKETPLACE_ENABLED=true
NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://localhost:3000/marketplace-config.json
NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://localhost:3000/marketplace-submit-form
NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://localhost:3000/marketplace-suggest-ideas-form
NEXT_PUBLIC_AD_BANNER_PROVIDER=slise
NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
NEXT_PUBLIC_AUTH_URL=http://localhost:3100
......
mocks/apps/app.html 0 → 100644
View file @ 33875b3e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mock HTML Content</title>
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
border: 1px solid #9747FF;
background: rgba(151, 71, 255, 0.10);
position: relative;
box-sizing: border-box;
}
h1 {
color: #9F7AEA;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
</style>
</head>
<body>
<h1>Full view app</h1>
</body>
</html>
mocks/apps/apps.ts
View file @ 33875b3e
......@@ -11,6 +11,9 @@ export const apps = [
description: 'Hop is a scalable rollup-to-rollup general token bridge. It allows users to send tokens from one rollup or sidechain to another almost immediately without having to wait for the networks challenge period.',
external: true,
url: 'https://goerli.hop.exchange/send?token=ETH&sourceNetwork=ethereum',
github: [ 'https://github.com/hop-protocol/hop', 'https://github.com/hop-protocol/hop-ui' ],
discord: 'https://discord.gg/hopprotocol',
twitter: 'https://twitter.com/HopProtocol',
},
{
author: 'Blockscout',
......
playwright/index.ts
View file @ 33875b3e
......@@ -9,6 +9,7 @@ const NEXT_ROUTER_MOCK = {
query: {},
pathname: '',
push: () => Promise.resolve(),
replace: () => Promise.resolve(),
};
beforeMount(async({ hooksConfig }) => {
......
ui/marketplace/MarketplaceAppAlert.tsx
View file @ 33875b3e
......@@ -4,16 +4,12 @@ import React from 'react';
import type { IconName } from 'ui/shared/IconSvg';
import IconSvg from 'ui/shared/IconSvg';
import useMarketplaceWallet from './useMarketplaceWallet';
type Props = {
internalWallet: boolean | undefined;
isWalletConnected: boolean;
}
const MarketplaceAppAlert = ({ internalWallet }: Props) => {
const { address } = useMarketplaceWallet();
const isWalletConnected = Boolean(address);
const MarketplaceAppAlert = ({ internalWallet, isWalletConnected }: Props) => {
const message = React.useMemo(() => {
let icon: IconName = 'wallet';
let text = 'Connect your wallet to Blockscout for full-featured access';
......
ui/marketplace/MarketplaceAppInfo.pw.tsx 0 → 100644
View file @ 33875b3e
import { test, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import { apps as appsMock } from 'mocks/apps/apps';
import TestApp from 'playwright/TestApp';
import MarketplaceAppInfo from './MarketplaceAppInfo';
test('base view +@dark-mode', async({ mount, page }) => {
await mount(
<TestApp>
<MarketplaceAppInfo data={ appsMock[0] }/>
</TestApp>,
);
await page.getByText('Info').click();
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 500, height: 400 } });
});
test.describe('mobile', () => {
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('base view', async({ mount, page }) => {
await mount(
<TestApp>
<MarketplaceAppInfo data={ appsMock[0] }/>
</TestApp>,
);
await page.getByText('Info').click();
await expect(page).toHaveScreenshot();
});
});
ui/marketplace/MarketplaceAppModal.pw.tsx 0 → 100644
View file @ 33875b3e
import { test, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import { apps as appsMock } from 'mocks/apps/apps';
import TestApp from 'playwright/TestApp';
import MarketplaceAppModal from './MarketplaceAppModal';
const props = {
onClose: () => {},
onFavoriteClick: () => {},
data: appsMock[0],
isFavorite: false,
};
const testFn: Parameters<typeof test>[1] = async({ mount, page }) => {
await page.route(appsMock[0].logo, (route) =>
route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
}),
);
await mount(
<TestApp>
<MarketplaceAppModal { ...props }/>
</TestApp>,
);
await expect(page).toHaveScreenshot();
};
test('base view +@dark-mode', testFn);
test.describe('mobile', () => {
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('base view', testFn);
});
ui/marketplace/MarketplaceAppTopBar.tsx
View file @ 33875b3e
......@@ -16,9 +16,10 @@ import MarketplaceAppInfo from './MarketplaceAppInfo';
type Props = {
data: MarketplaceAppOverview | undefined;
isLoading: boolean;
isWalletConnected: boolean;
}
const MarketplaceAppTopBar = ({ data, isLoading }: Props) => {
const MarketplaceAppTopBar = ({ data, isLoading, isWalletConnected }: Props) => {
const appProps = useAppContext();
const goBackUrl = React.useMemo(() => {
......@@ -42,7 +43,7 @@ const MarketplaceAppTopBar = ({ data, isLoading }: Props) => {
</LinkInternal>
</Tooltip>
<Skeleton width={{ base: '100%', md: 'auto' }} order={{ base: 4, md: 2 }} isLoaded={ !isLoading }>
<MarketplaceAppAlert internalWallet={ data?.internalWallet }/>
<MarketplaceAppAlert internalWallet={ data?.internalWallet } isWalletConnected={ isWalletConnected }/>
</Skeleton>
<Skeleton order={{ base: 2, md: 3 }} isLoaded={ !isLoading }>
<MarketplaceAppInfo data={ data }/>
......
ui/pages/Marketplace.pw.tsx 0 → 100644
View file @ 33875b3e
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import { buildExternalAssetFilePath } from 'configs/app/utils';
import { apps as appsMock } from 'mocks/apps/apps';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import * as app from 'playwright/utils/app';
import Marketplace from './Marketplace';
const MARKETPLACE_CONFIG_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_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('base view +@mobile +@dark-mode', async({ mount, page }) => {
await page.route(MARKETPLACE_CONFIG_URL, (route) => route.fulfill({
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',
}),
),
));
const component = await mount(
<TestApp>
<Marketplace/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
});
ui/pages/MarketplaceApp.pw.tsx 0 → 100644
View file @ 33875b3e
import { Flex } from '@chakra-ui/react';
import { test as base, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import { buildExternalAssetFilePath } from 'configs/app/utils';
import { apps as appsMock } from 'mocks/apps/apps';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import * as app from 'playwright/utils/app';
import MarketplaceApp from './MarketplaceApp';
const MARKETPLACE_CONFIG_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', 'https://marketplace-config.json') || '';
const hooksConfig = {
router: {
query: { id: appsMock[0].id },
isReady: true,
},
};
const testFn: Parameters<typeof test>[1] = async({ mount, page }) => {
await page.route(MARKETPLACE_CONFIG_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(appsMock),
}));
await page.route(appsMock[0].url, (route) =>
route.fulfill({
status: 200,
path: './mocks/apps/app.html',
}),
);
const component = await mount(
<TestApp>
{ /* added Flex as a Layout because the iframe has negative margins */ }
<Flex flexDirection="column" mx={{ base: 4, lg: 6 }}>
<MarketplaceApp/>
</Flex>
</TestApp>,
{ hooksConfig },
);
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.describe('mobile', () => {
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('base view', testFn);
});
ui/pages/MarketplaceApp.tsx
View file @ 33875b3e
......@@ -140,7 +140,7 @@ const MarketplaceApp = () => {
return (
<>
<MarketplaceAppTopBar data={ data } isLoading={ isPending }/>
<MarketplaceAppTopBar data={ data } isLoading={ isPending } isWalletConnected={ Boolean(address) }/>
<DappscoutIframeProvider
address={ address }
appUrl={ data?.url }
......
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