Skip to content

F
frontend
Commit 621c968a authored by Max Alekseenko's avatar Max Alekseenko
Browse files
Options

improve marketplace tests

parent d8b8893c
Hide whitespace changes
Inline Side-by-side
Showing with 107 additions and 160 deletions
mocks/apps/app.html 0 → 100644
View file @ 621c968a
<!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 @ 621c968a
......@@ -4,151 +4,23 @@ export const apps = [
author: 'Hop',
id: 'hop-exchange',
title: 'Hop',
logo: 'https://blockscout-content.s3.amazonaws.com/hop.png',
logo: 'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FfhJJGsR3RSfFmRoxfvqk%252FHop.png%3Falt%3Dmedia%26token%3D8107e45c-546c-4771-bbfe-e86bb0fe8c1a',
categories: [ 'Bridge' ],
shortDescription: '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.',
site: 'https://help.hop.exchange/hc/en-us/articles/4405172445197-What-is-Hop-Protocol-',
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',
internalWallet: false,
},
{
author: 'Blockscout',
id: 'token-approval-tracker',
title: 'Token Approval Tracker',
logo: 'https://blockscout-content.s3.amazonaws.com/token-approval.png',
logo: 'https://approval-tracker.apps.blockscout.com/icon-192.png',
categories: [ 'Infra & Dev tooling' ],
shortDescription: 'Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.',
site: 'https://docs.blockscout.com/for-users/blockscout-apps/token-approval-tracker',
description: 'Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.',
external: false,
url: 'https://approval-tracker.apps.blockscout.com/',
internalWallet: false,
priority: 0,
},
{
author: 'Revoke',
id: 'revoke.cash',
title: 'Revoke.cash',
logo: 'https://blockscout-content.s3.amazonaws.com/revokecash.png',
categories: [ 'Infra & Dev tooling' ],
shortDescription: 'Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.',
site: 'https://revoke.cash/about',
external: false,
description: 'Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.',
url: 'https://revoke.cash/',
internalWallet: true,
priority: 2,
},
{
author: 'Aave',
id: 'aave',
title: 'Aave',
logo: 'https://blockscout-content.s3.amazonaws.com/aave.png',
categories: [ 'DeFi' ],
shortDescription: 'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.',
site: 'https://docs.aave.com/faq/',
external: false,
description: 'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.',
url: 'https://staging.aave.com/',
internalWallet: true,
priority: 4,
},
{
author: 'LooksRare',
id: 'looksrare',
title: 'LooksRare',
logo: 'https://blockscout-content.s3.amazonaws.com/looksrare.png',
categories: [ 'NFT' ],
shortDescription: 'LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.',
external: true,
site: 'https://docs.looksrare.org/about/welcome-to-looksrare',
description: 'LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.',
url: 'https://goerli.looksrare.org/',
internalWallet: false,
},
{
author: 'dYdX',
id: 'dydx',
title: 'dYdX',
logo: 'https://blockscout-content.s3.amazonaws.com/dydx.png',
categories: [ 'DeFi' ],
external: true,
shortDescription: 'dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.',
site: 'https://help.dydx.exchange/en/articles/3047379-introduction-and-overview',
description: 'dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.',
url: 'https://trade.stage.dydx.exchange/portfolio/overview',
internalWallet: false,
},
{
author: 'MetalSwap',
id: 'metalswap',
title: 'MetalSwap',
logo: 'https://blockscout-content.s3.amazonaws.com/MetalSwap.png',
categories: [ 'DeFi' ],
shortDescription: 'MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.',
site: 'https://docs.metalswap.finance/',
external: false,
description: 'MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.',
url: 'https://demo.metalswap.finance/',
internalWallet: false,
},
{
author: 'FaucetDao',
id: 'faucetdao',
title: 'FaucetDao',
logo: 'https://blockscout-content.s3.amazonaws.com/faucet-dao.png',
categories: [ 'Faucet' ],
shortDescription: 'FaucetDao is a decentralised community fund providing liquidity and support to early-stage well-vetted blockchain projects.',
site: 'https://linktr.ee/faucet_dao',
external: false,
description: 'FaucetDao is a decentralised community fund providing liquidity and support to early-stage well-vetted blockchain projects.',
url: 'https://www.faucetdao.shop/swap?chain=goerli',
internalWallet: true,
priority: 1,
},
{
author: 'Uniswap',
id: 'uniswap',
title: 'Uniswap',
logo: 'https://blockscout-content.s3.amazonaws.com/uniswap.png',
categories: [ 'Bridge' ],
shortDescription: 'Uniswap is a cryptocurrency exchange that uses a decentralized network protocol.',
site: 'https://docs.uniswap.org/',
external: false,
description: 'Uniswap is a cryptocurrency exchange that uses a decentralized network protocol.',
url: 'https://app.uniswap.org/swap',
internalWallet: true,
priority: 5,
},
{
author: 'zkBob',
id: 'zkbob-wallet',
title: 'zkBob Wallet',
logo: 'https://blockscout-content.s3.amazonaws.com/zkbob-logo.png',
categories: [ 'Wallet' ],
shortDescription: 'A Web3 smart-contract privacy wallet based on ZKP technology. zkBob could be used for regular transfers, payments, and much more. Compliance features backed in!',
site: 'https://zkbob.com',
description: 'zkBob simplifies secure, limited-value, and anonymous token transfers for everyday users. The application accepts WETH, ETH, USDC. Once one of the tokens is deposited in the zkBob app, pool participants can transfer tokens amongst themselves in a private, secure manner. The shielded zkBob pool uses zkproofs to limit public data exposure',
external: false,
url: 'https://staging--zkbob.netlify.app/transfer',
twitter: 'https://twitter.com/zkBob_',
telegram: 'https://t.me/zkbobcommunity',
internalWallet: false,
},
{
author: 'Swapr',
id: 'swapr',
title: 'Swapr',
logo: 'https://blockscout-content.s3.amazonaws.com/swapr.png',
categories: [ 'DeFi' ],
shortDescription: 'A governance-enabled automated market maker with adjustable fees.',
site: 'https://swapr.eth.dev.lastmilelabs.systems',
description: 'A governance-enabled automated market maker with adjustable fees.',
external: false,
url: 'https://swapr.eth.limo/#/swap',
internalWallet: false,
priority: 3,
},
];
ui/pages/Marketplace.pw.tsx
View file @ 621c968a
import { test as base, expect, devices } from '@playwright/experimental-ct-react';
import type { Page, Route } from '@playwright/test';
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import { buildExternalAssetFilePath } from 'configs/app/utils';
......@@ -12,15 +11,21 @@ import Marketplace from './Marketplace';
const MARKETPLACE_CONFIG_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', 'https://marketplace-config.json') || '';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const testFn = async({ mount, page }: { mount: any; page: Page }) => {
await page.route(MARKETPLACE_CONFIG_URL, (route: Route) => route.fulfill({
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) =>
page.route(app.logo, (route) =>
route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
......@@ -35,28 +40,4 @@ const testFn = async({ mount, page }: { mount: any; page: Page }) => {
);
await expect(component).toHaveScreenshot();
};
let 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);
test = test.extend({
context: contextWithEnvs([
{ name: 'NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM', value: '' },
// eslint-disable-next-line @typescript-eslint/no-explicit-any
]) as any,
});
test('without suggest ideas button', testFn);
});
ui/pages/MarketplaceApp.pw.tsx 0 → 100644
View file @ 621c968a
import { Flex } from '@chakra-ui/react';
import { test as base, expect, devices } from '@playwright/experimental-ct-react';
import type { Page, Route } from '@playwright/test';
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,
},
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const testFn = async({ mount, page }: { mount: any; page: Page }) => {
await page.route(MARKETPLACE_CONFIG_URL, (route: Route) => route.fulfill({
status: 200,
body: JSON.stringify(appsMock),
}));
await page.route(appsMock[0].url, (route: 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);
});
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