Playwright tests refactoring, pt.5

.eslintrc.js

@@ -4,6 +4,7 @@ const RESTRICTED_MODULES = {
     { name: '@chakra-ui/icons', message: 'Using @chakra-ui/icons is prohibited. Please use regular svg-icon instead (see examples in "icons/" folder)' },
     { name: '@metamask/providers', message: 'Please lazy-load @metamask/providers or use useProvider hook instead' },
     { name: '@metamask/post-message-stream', message: 'Please lazy-load @metamask/post-message-stream or use useProvider hook instead' },
+    { name: 'playwright/TestApp', message: 'Please use render() fixture from test() function of playwright/lib module' },
   ],
   patterns: [
     'icons/*',

mocks/address/tokens.ts

@@ -1,4 +1,4 @@
-import type { AddressCollectionsResponse, AddressNFTsResponse, AddressTokenBalance } from 'types/api/address';
+import type { AddressCollectionsResponse, AddressNFTsResponse, AddressTokenBalance, AddressTokensResponse } from 'types/api/address';
 
 import * as tokens from 'mocks/tokens/tokenInfo';
 import * as tokenInstance from 'mocks/tokens/tokenInstance';
@@ -119,35 +119,39 @@ export const erc404b: AddressTokenBalance = {
   token_id: null,
 };
 
-export const erc20List = {
+export const erc20List: AddressTokensResponse = {
   items: [
     erc20a,
     erc20b,
     erc20c,
   ],
+  next_page_params: null,
 };
 
-export const erc721List = {
+export const erc721List: AddressTokensResponse = {
   items: [
     erc721a,
     erc721b,
     erc721c,
   ],
+  next_page_params: null,
 };
 
-export const erc1155List = {
+export const erc1155List: AddressTokensResponse = {
   items: [
     erc1155withoutName,
     erc1155a,
     erc1155b,
   ],
+  next_page_params: null,
 };
 
-export const erc404List = {
+export const erc404List: AddressTokensResponse = {
   items: [
     erc404a,
     erc404b,
   ],
+  next_page_params: null,
 };
 
 export const nfts: AddressNFTsResponse = {

mocks/contract/solidityscanReport.ts

@@ -1,5 +1,8 @@
-export const solidityscanReportAverage = {
+import type { SolidityscanReport } from 'types/api/contract';
+
+export const solidityscanReportAverage: SolidityscanReport = {
   scan_report: {
+    contractname: 'foo',
     scan_status: 'scan_done',
     scan_summary: {
       issue_severity_distribution: {
@@ -20,8 +23,9 @@ export const solidityscanReportAverage = {
   },
 };
 
-export const solidityscanReportGreat = {
+export const solidityscanReportGreat: SolidityscanReport = {
   scan_report: {
+    contractname: 'foo',
     scan_status: 'scan_done',
     scan_summary: {
       issue_severity_distribution: {
@@ -42,8 +46,9 @@ export const solidityscanReportGreat = {
   },
 };
 
-export const solidityscanReportLow = {
+export const solidityscanReportLow: SolidityscanReport = {
   scan_report: {
+    contractname: 'foo',
     scan_status: 'scan_done',
     scan_summary: {
       issue_severity_distribution: {

mocks/stats/index.ts

@@ -1,6 +1,8 @@
 import _mapValues from 'lodash/mapValues';
 
-export const base = {
+import type { HomeStats } from 'types/api/stats';
+
+export const base: HomeStats = {
   average_block_time: 6212.0,
   coin_price: '0.00199678',
   coin_price_change_percentage: -7.42,
@@ -42,35 +44,42 @@ export const base = {
   tvl: '1767425.102766552',
 };
 
-export const withBtcLocked = {
+export const withBtcLocked: HomeStats = {
   ...base,
   rootstock_locked_btc: '3337493406696977561374',
 };
 
-export const withoutFiatPrices = {
+export const withoutFiatPrices: HomeStats = {
   ...base,
   gas_prices: _mapValues(base.gas_prices, (price) => price ? ({ ...price, fiat_price: null }) : null),
 };
 
-export const withoutGweiPrices = {
+export const withoutGweiPrices: HomeStats = {
   ...base,
   gas_prices: _mapValues(base.gas_prices, (price) => price ? ({ ...price, price: null }) : null),
 };
 
-export const withoutBothPrices = {
+export const withoutBothPrices: HomeStats = {
   ...base,
   gas_prices: _mapValues(base.gas_prices, (price) => price ? ({ ...price, price: null, fiat_price: null }) : null),
 };
 
-export const withSecondaryCoin = {
+export const withSecondaryCoin: HomeStats = {
   ...base,
   secondary_coin_price: '3.398',
 };
 
-export const noChartData = {
+export const noChartData: HomeStats = {
   ...base,
   transactions_today: null,
   coin_price: null,
   market_cap: null,
   tvl: null,
 };
+
+export const indexingStatus = {
+  finished_indexing_blocks: false,
+  indexed_blocks_ratio: '0.1',
+  finished_indexing: true,
+  indexed_internal_transactions_ratio: '1',
+};

mocks/tokens/tokenInfo.ts

@@ -8,7 +8,7 @@ export const tokenInfo: TokenInfo = {
   holders: '46554',
   name: 'ARIANEE',
   symbol: 'ARIA',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   total_supply: '1235',
   icon_url: 'http://localhost:3000/token-icon.png',
 };
@@ -27,7 +27,7 @@ export const tokenInfoERC20a: TokenInfo<'ERC-20'> = {
   name: 'hyfi.token',
   symbol: 'HyFi',
   total_supply: '369000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: 'http://localhost:3000/token-icon.png',
 };
 
@@ -40,7 +40,7 @@ export const tokenInfoERC20b: TokenInfo<'ERC-20'> = {
   name: 'USD Coin',
   symbol: 'USDC',
   total_supply: '900000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: null,
 };
 
@@ -53,7 +53,7 @@ export const tokenInfoERC20c: TokenInfo<'ERC-20'> = {
   name: 'Ethereum',
   symbol: 'ETH',
   total_supply: '1000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: null,
 };
 
@@ -66,7 +66,7 @@ export const tokenInfoERC20d: TokenInfo<'ERC-20'> = {
   name: 'Zeta',
   symbol: 'ZETA',
   total_supply: '2100000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: null,
 };
 
@@ -79,7 +79,7 @@ export const tokenInfoERC20LongSymbol: TokenInfo<'ERC-20'> = {
   name: 'Zeta',
   symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
   total_supply: '2100000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: null,
 };
 
@@ -92,7 +92,7 @@ export const tokenInfoERC721a: TokenInfo<'ERC-721'> = {
   name: 'HyFi Athena',
   symbol: 'HYFI_ATHENA',
   total_supply: '105',
-  type: 'ERC-721',
+  type: 'ERC-721' as const,
   icon_url: null,
 };
 
@@ -105,7 +105,7 @@ export const tokenInfoERC721b: TokenInfo<'ERC-721'> = {
   name: 'World Of Women Galaxy',
   symbol: 'WOWG',
   total_supply: null,
-  type: 'ERC-721',
+  type: 'ERC-721' as const,
   icon_url: null,
 };
 
@@ -118,7 +118,7 @@ export const tokenInfoERC721c: TokenInfo<'ERC-721'> = {
   name: 'Puma',
   symbol: 'PUMA',
   total_supply: null,
-  type: 'ERC-721',
+  type: 'ERC-721' as const,
   icon_url: null,
 };
 
@@ -131,7 +131,7 @@ export const tokenInfoERC721LongSymbol: TokenInfo<'ERC-721'> = {
   name: 'Puma',
   symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
   total_supply: null,
-  type: 'ERC-721',
+  type: 'ERC-721' as const,
   icon_url: null,
 };
 
@@ -144,7 +144,7 @@ export const tokenInfoERC1155a: TokenInfo<'ERC-1155'> = {
   name: 'HyFi Membership',
   symbol: 'HYFI_MEMBERSHIP',
   total_supply: '482',
-  type: 'ERC-1155',
+  type: 'ERC-1155' as const,
   icon_url: null,
 };
 
@@ -157,7 +157,7 @@ export const tokenInfoERC1155b: TokenInfo<'ERC-1155'> = {
   name: 'WinkyVerse Collections',
   symbol: 'WVC',
   total_supply: '4943',
-  type: 'ERC-1155',
+  type: 'ERC-1155' as const,
   icon_url: null,
 };
 
@@ -170,7 +170,7 @@ export const tokenInfoERC1155WithoutName: TokenInfo<'ERC-1155'> = {
   name: null,
   symbol: null,
   total_supply: '482',
-  type: 'ERC-1155',
+  type: 'ERC-1155' as const,
   icon_url: null,
 };
 
@@ -184,7 +184,7 @@ export const tokenInfoERC404: TokenInfo<'ERC-404'> = {
   name: 'OMNI404',
   symbol: 'O404',
   total_supply: '6482275000000000000',
-  type: 'ERC-404',
+  type: 'ERC-404' as const,
 };
 
 export const bridgedTokenA: TokenInfo<'ERC-20'> = {

mocks/txs/state.ts

@@ -1,4 +1,4 @@
-import type { TxStateChange } from 'types/api/txStateChanges';
+import type { TxStateChange, TxStateChanges } from 'types/api/txStateChanges';
 
 export const mintToken: TxStateChange = {
   address: {
@@ -35,7 +35,7 @@ export const mintToken: TxStateChange = {
     type: 'ERC-721',
     icon_url: null,
   },
-  type: 'token',
+  type: 'token' as const,
 };
 
 export const receiveMintedToken: TxStateChange = {
@@ -73,7 +73,7 @@ export const receiveMintedToken: TxStateChange = {
     type: 'ERC-721',
     icon_url: null,
   },
-  type: 'token',
+  type: 'token' as const,
 };
 
 export const transfer1155Token: TxStateChange = {
@@ -105,7 +105,7 @@ export const transfer1155Token: TxStateChange = {
     type: 'ERC-1155',
   },
   token_id: '1',
-  type: 'token',
+  type: 'token' as const,
 };
 
 export const receiveCoin: TxStateChange = {
@@ -125,7 +125,7 @@ export const receiveCoin: TxStateChange = {
   change: '29726406604060',
   is_miner: true,
   token: null,
-  type: 'coin',
+  type: 'coin' as const,
 };
 
 export const sendCoin: TxStateChange = {
@@ -145,12 +145,13 @@ export const sendCoin: TxStateChange = {
   change: '-3844844822720562',
   is_miner: false,
   token: null,
-  type: 'coin',
+  type: 'coin' as const,
 };
 
 export const sendERC20Token = {
   address: {
     hash: '0x7f6479df95Aa3036a3BE02DB6300ea201ABd9981',
+    ens_domain_name: null,
     implementation_name: null,
     is_contract: false,
     is_verified: false,
@@ -173,13 +174,13 @@ export const sendERC20Token = {
     name: 'Tether USD',
     symbol: 'USDT',
     total_supply: '39030615894320966',
-    type: 'ERC-20',
+    type: 'ERC-20' as const,
     token_id: null,
   },
-  type: 'token',
+  type: 'token' as const,
 };
 
-export const baseResponse = {
+export const baseResponse: TxStateChanges = {
   items: [
     mintToken,
     receiveMintedToken,

playwright/TestApp.tsx

@@ -12,9 +12,10 @@ import type { Props as PageProps } from 'nextjs/getServerSideProps';
 import config from 'configs/app';
 import { AppContextProvider } from 'lib/contexts/app';
 import { SocketProvider } from 'lib/socket/context';
-import * as app from 'playwright/utils/app';
 import theme from 'theme';
 
+import { port as socketPort } from './utils/socket';
+
 export type Props = {
   children: React.ReactNode;
   withSocket?: boolean;
@@ -74,7 +75,7 @@ const TestApp = ({ children, withSocket, withWalletClient = true, appContext = d
   return (
     <ChakraProvider theme={ theme }>
       <QueryClientProvider client={ queryClient }>
-        <SocketProvider url={ withSocket ? `ws://${ config.app.host }:${ app.socketPort }` : undefined }>
+        <SocketProvider url={ withSocket ? `ws://${ config.app.host }:${ socketPort }` : undefined }>
           <AppContextProvider { ...appContext }>
             <GrowthBookProvider>
               <WalletClientProvider withWalletClient={ withWalletClient }>