fix tests

blockscout · Dec 13, 2024 · 1c513e7 · 1c513e7
1 parent 02d1840
commit 1c513e7
Show file tree

Hide file tree

Showing 18 changed files with 64 additions and 59 deletions.
diff --git a/mocks/config/network.ts b/mocks/config/network.ts
@@ -1,6 +1,6 @@
 import type { FeaturedNetwork } from 'types/networks';
 
-const FEATURED_NETWORKS: Array<FeaturedNetwork> = [
+export const FEATURED_NETWORKS: Array<FeaturedNetwork> = [
   { title: 'Gnosis Chain', url: 'https://blockscout.com/xdai/mainnet', group: 'Mainnets', isActive: true },
   { title: 'Arbitrum on xDai', url: 'https://blockscout.com/xdai/aox', group: 'Mainnets' },
   { title: 'Ethereum', url: 'https://blockscout.com/eth/mainnet', group: 'Mainnets' },
@@ -13,5 +13,3 @@ const FEATURED_NETWORKS: Array<FeaturedNetwork> = [
   { title: 'LUKSO L14', url: 'https://blockscout.com/lukso/l14', group: 'Other' },
   { title: 'Astar', url: 'https://blockscout.com/astar', group: 'Other' },
 ];
-
-export const FEATURED_NETWORKS_MOCK = JSON.stringify(FEATURED_NETWORKS);
diff --git a/playwright/fixtures/mockConfigResponse.ts b/playwright/fixtures/mockConfigResponse.ts
@@ -3,21 +3,21 @@ 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<string>;
+export type MockConfigResponseFixture = (envName: string, envValue: string, content: unknown, isImage?: boolean) => Promise<string>;
 
 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) {
+    if (isImage && typeof content === 'string') {
       await page.route(url, (route) => route.fulfill({
         status: 200,
         path: content,
       }));
     } else {
       await page.route(url, (route) => route.fulfill({
         status: 200,
-        body: content,
+        json: content,
       }));
     }
 

diff --git a/playwright/fixtures/mockContractReadResponse.ts b/playwright/fixtures/mockContractReadResponse.ts
@@ -46,15 +46,15 @@ const fixture: TestFixture<MockContractReadResponseFixture, { page: Page }> = as
       if (_isEqual(params, callParams) && id) {
         return route.fulfill({
           status: 200,
-          body: JSON.stringify({
+          json: {
             id,
             jsonrpc: '2.0',
             result: encodeFunctionResult({
               abi: [ abiItem ],
               functionName: abiItem.name,
               result,
             }),
-          }),
+          },
         });
       }
     });

diff --git a/playwright/fixtures/mockTextAd.ts b/playwright/fixtures/mockTextAd.ts
@@ -9,7 +9,7 @@ const fixture: TestFixture<MockTextAdFixture, { page: Page }> = async({ page },
 
     await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
       status: 200,
-      body: JSON.stringify(textAdMock.duck),
+      json: textAdMock.duck,
     }));
     await page.route(textAdMock.duck.ad.thumbnail, (route) => {
       return route.fulfill({

diff --git a/ui/addressVerification/steps/AddressVerificationStepAddress.pw.tsx b/ui/addressVerification/steps/AddressVerificationStepAddress.pw.tsx
@@ -11,7 +11,7 @@ const CHECK_ADDRESS_URL = buildUrl('address_verification', { chainId: '1', type:
 test('base view', async({ render, page }) => {
   await page.route(CHECK_ADDRESS_URL, (route) => route.fulfill({
     status: 200,
-    body: JSON.stringify(mocks.ADDRESS_CHECK_RESPONSE.SUCCESS),
+    json: mocks.ADDRESS_CHECK_RESPONSE.SUCCESS,
   }));
   const props = {
     onContinue: () => {},
@@ -25,7 +25,7 @@ test('base view', async({ render, page }) => {
 test('SOURCE_CODE_NOT_VERIFIED_ERROR view +@mobile', async({ render, page }) => {
   await page.route(CHECK_ADDRESS_URL, (route) => route.fulfill({
     status: 200,
-    body: JSON.stringify(mocks.ADDRESS_CHECK_RESPONSE.SOURCE_CODE_NOT_VERIFIED_ERROR),
+    json: mocks.ADDRESS_CHECK_RESPONSE.SOURCE_CODE_NOT_VERIFIED_ERROR,
   }));
 
   const props = {

diff --git a/ui/addressVerification/steps/AddressVerificationStepSignature.pw.tsx b/ui/addressVerification/steps/AddressVerificationStepSignature.pw.tsx
@@ -11,7 +11,7 @@ const VERIFY_ADDRESS_URL = buildUrl('address_verification', { chainId: '1', type
 test('base view', async({ render, page }) => {
   await page.route(VERIFY_ADDRESS_URL, (route) => route.fulfill({
     status: 200,
-    body: JSON.stringify(mocks.ADDRESS_VERIFY_RESPONSE.SUCCESS),
+    json: mocks.ADDRESS_VERIFY_RESPONSE.SUCCESS,
   }));
 
   const props = {
@@ -28,7 +28,7 @@ test('base view', async({ render, page }) => {
 test('INVALID_SIGNER_ERROR view +@mobile', async({ render, page }) => {
   await page.route(VERIFY_ADDRESS_URL, (route) => route.fulfill({
     status: 200,
-    body: JSON.stringify(mocks.ADDRESS_VERIFY_RESPONSE.INVALID_SIGNER_ERROR),
+    json: mocks.ADDRESS_VERIFY_RESPONSE.INVALID_SIGNER_ERROR,
   }));
 
   const props = {

diff --git a/ui/pages/Marketplace.pw.tsx b/ui/pages/Marketplace.pw.tsx
@@ -19,12 +19,12 @@ test.beforeEach(async({ mockConfigResponse, mockEnvs, mockAssetResponse, page })
     [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY', 'test' ],
     [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID', 'test' ],
   ]);
-  await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, JSON.stringify(appsMock));
-  await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', MARKETPLACE_SECURITY_REPORTS_URL, JSON.stringify(securityReportsMock));
+  await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, appsMock);
+  await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', MARKETPLACE_SECURITY_REPORTS_URL, securityReportsMock);
   await Promise.all(appsMock.map(app => mockAssetResponse(app.logo, './playwright/mocks/image_s.jpg')));
   await page.route('https://api.airtable.com/v0/test/apps_ratings?fields%5B%5D=appId&fields%5B%5D=rating&fields%5B%5D=count', (route) => route.fulfill({
     status: 200,
-    body: JSON.stringify(ratingsMock),
+    json: ratingsMock,
   }));
 });
 

diff --git a/ui/pages/MarketplaceApp.pw.tsx b/ui/pages/MarketplaceApp.pw.tsx
@@ -29,16 +29,16 @@ const testFn = async({ render, mockConfigResponse, mockAssetResponse, mockEnvs,
     [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY', 'test' ],
     [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID', 'test' ],
   ]);
-  await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, JSON.stringify(appsMock));
-  await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', MARKETPLACE_SECURITY_REPORTS_URL, JSON.stringify(securityReportsMock));
+  await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, appsMock);
+  await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', MARKETPLACE_SECURITY_REPORTS_URL, securityReportsMock);
   await mockAssetResponse(appsMock[0].url, './mocks/apps/app.html');
   await mockRpcResponse({
     Method: 'eth_chainId',
     ReturnType: numberToHex(Number(config.chain.id)),
   });
   await page.route('https://api.airtable.com/v0/test/apps_ratings?fields%5B%5D=appId&fields%5B%5D=rating&fields%5B%5D=count', (route) => route.fulfill({
     status: 200,
-    body: JSON.stringify(ratingsMock),
+    json: ratingsMock,
   }));
 
   const component = await render(

diff --git a/ui/pages/SearchResults.pw.tsx b/ui/pages/SearchResults.pw.tsx
@@ -177,7 +177,7 @@ test.describe('with apps', () => {
       [ 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL ],
     ]);
     await mockApiResponse('search', data, { queryParams: { q: 'o' } });
-    await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, JSON.stringify(appsMock));
+    await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, appsMock);
     await mockAssetResponse(appsMock[0].logo, './playwright/mocks/image_s.jpg');
     await mockAssetResponse(appsMock[1].logo, './playwright/mocks/image_s.jpg');
     const component = await render(<SearchResults/>, { hooksConfig });

diff --git a/ui/shared/Page/PageTitle.pw.tsx b/ui/shared/Page/PageTitle.pw.tsx
@@ -11,8 +11,9 @@ test.beforeEach(async({ mockTextAd, mockAssetResponse }) => {
   await mockAssetResponse('https://example.com/logo.png', './playwright/mocks/image_s.jpg');
 });
 
-test('default view +@mobile', async({ render }) => {
+test('default view +@mobile', async({ render, page }) => {
   const component = await render(<DefaultView/>);
+  await page.mouse.move(1000, 1000);
   await expect(component).toHaveScreenshot();
 });
 

diff --git a/ui/shared/nft/NftMedia.pw.tsx b/ui/shared/nft/NftMedia.pw.tsx
@@ -42,7 +42,7 @@ test.describe('no url', () => {
     await page.route(ANIMATION_MEDIA_TYPE_API_URL, (route) => {
       return route.fulfill({
         status: 200,
-        body: JSON.stringify({ type: undefined }),
+        json: { type: undefined },
       });
     });
     await mockAssetResponse(IMAGE_URL, './playwright/mocks/image_long.jpg');
@@ -103,7 +103,7 @@ test.describe('page', () => {
     await mockAssetResponse(MEDIA_URL, './playwright/mocks/page.html');
     await page.route(MEDIA_TYPE_API_URL, (route) => route.fulfill({
       status: 200,
-      body: JSON.stringify({ type: 'html' }),
+      json: JSON.stringify({ type: 'html' }),
     }));
   });
 

diff --git a/ui/shared/pagination/useQueryWithPages.test.tsx b/ui/shared/pagination/useQueryWithPages.test.tsx
@@ -56,12 +56,18 @@ beforeEach(() => {
   fetch.resetMocks();
 });
 
+const responseInit = {
+  headers: {
+    'Content-Type': 'application/json',
+  },
+};
+
 it('returns correct data if there is only one page', async() => {
   const params: Params<'address_txs'> = {
     resourceName: 'address_txs',
     pathParams: { hash: addressMock.hash },
   };
-  fetch.mockResponse(JSON.stringify(responses.page_empty));
+  fetch.mockResponse(JSON.stringify(responses.page_empty), responseInit);
 
   const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
   await waitForApiResponse();
@@ -84,7 +90,7 @@ describe('if there are multiple pages', () => {
   };
 
   it('return correct data for the first page', async() => {
-    fetch.mockResponse(JSON.stringify(responses.page_1));
+    fetch.mockResponse(JSON.stringify(responses.page_1), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
@@ -109,10 +115,10 @@ describe('if there are multiple pages', () => {
       routerPush.mockClear();
       useRouter.mockReturnValue({ ...router, pathname: '/current-route', push: routerPush });
 
-      fetch.once(JSON.stringify(responses.page_1));
-      fetch.once(JSON.stringify(responses.page_2));
-      fetch.once(JSON.stringify(responses.page_3));
-      fetch.once(JSON.stringify(responses.page_1));
+      fetch.once(JSON.stringify(responses.page_1), responseInit);
+      fetch.once(JSON.stringify(responses.page_2), responseInit);
+      fetch.once(JSON.stringify(responses.page_3), responseInit);
+      fetch.once(JSON.stringify(responses.page_1), responseInit);
 
       // INITIAL LOAD
       const { result: r } = renderHook(() => useQueryWithPages(params), { wrapper });
@@ -285,10 +291,10 @@ describe('if there are multiple pages', () => {
     const routerPush = jest.fn(() => Promise.resolve());
     useRouter.mockReturnValue({ ...router, pathname: '/current-route', push: routerPush });
 
-    fetch.once(JSON.stringify(responses.page_1));
-    fetch.once(JSON.stringify(responses.page_2));
-    fetch.once(JSON.stringify(responses.page_3));
-    fetch.once(JSON.stringify(responses.page_1));
+    fetch.once(JSON.stringify(responses.page_1), responseInit);
+    fetch.once(JSON.stringify(responses.page_2), responseInit);
+    fetch.once(JSON.stringify(responses.page_3), responseInit);
+    fetch.once(JSON.stringify(responses.page_1), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
@@ -343,8 +349,8 @@ describe('if there are multiple pages', () => {
       pathParams: { hash: addressMock.hash },
       scrollRef: scrollRef as unknown as React.RefObject<HTMLDivElement>,
     };
-    fetch.once(JSON.stringify(responses.page_1));
-    fetch.once(JSON.stringify(responses.page_2));
+    fetch.once(JSON.stringify(responses.page_1), responseInit);
+    fetch.once(JSON.stringify(responses.page_2), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
@@ -367,7 +373,7 @@ describe('if there is page query param in URL', () => {
       resourceName: 'address_txs',
       pathParams: { hash: addressMock.hash },
     };
-    fetch.mockResponse(JSON.stringify(responses.page_empty));
+    fetch.mockResponse(JSON.stringify(responses.page_empty), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
@@ -391,8 +397,8 @@ describe('if there is page query param in URL', () => {
       resourceName: 'address_txs',
       pathParams: { hash: addressMock.hash },
     };
-    fetch.once(JSON.stringify(responses.page_2));
-    fetch.once(JSON.stringify(responses.page_3));
+    fetch.once(JSON.stringify(responses.page_2), responseInit);
+    fetch.once(JSON.stringify(responses.page_3), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
@@ -439,9 +445,9 @@ describe('queries with filters', () => {
       // @ts-ignore:
       sorting: { sort: 'val-desc' },
     };
-    fetch.once(JSON.stringify(responses.page_1));
-    fetch.once(JSON.stringify(responses.page_2));
-    fetch.once(JSON.stringify(responses.page_filtered));
+    fetch.once(JSON.stringify(responses.page_1), responseInit);
+    fetch.once(JSON.stringify(responses.page_2), responseInit);
+    fetch.once(JSON.stringify(responses.page_filtered), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
@@ -488,8 +494,8 @@ describe('queries with filters', () => {
       resourceName: 'address_txs',
       pathParams: { hash: addressMock.hash },
     };
-    fetch.once(JSON.stringify(responses.page_1));
-    fetch.once(JSON.stringify(responses.page_2));
+    fetch.once(JSON.stringify(responses.page_1), responseInit);
+    fetch.once(JSON.stringify(responses.page_2), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
@@ -526,9 +532,9 @@ describe('queries with sorting', () => {
       pathParams: { hash: addressMock.hash },
       filters: { filter: 'from' },
     };
-    fetch.once(JSON.stringify(responses.page_1));
-    fetch.once(JSON.stringify(responses.page_2));
-    fetch.once(JSON.stringify(responses.page_sorted));
+    fetch.once(JSON.stringify(responses.page_1), responseInit);
+    fetch.once(JSON.stringify(responses.page_2), responseInit);
+    fetch.once(JSON.stringify(responses.page_sorted), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();
@@ -580,8 +586,8 @@ describe('queries with sorting', () => {
       // @ts-ignore:
       sorting: { sort: 'val-desc' },
     };
-    fetch.once(JSON.stringify(responses.page_1));
-    fetch.once(JSON.stringify(responses.page_2));
+    fetch.once(JSON.stringify(responses.page_1), responseInit);
+    fetch.once(JSON.stringify(responses.page_2), responseInit);
 
     const { result } = renderHook(() => useQueryWithPages(params), { wrapper });
     await waitForApiResponse();

diff --git a/ui/snippets/footer/Footer.pw.tsx b/ui/snippets/footer/Footer.pw.tsx
@@ -13,7 +13,7 @@ test.describe('with custom links, max cols', () => {
     await mockEnvs([
       [ 'NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL ],
     ]);
-    await mockConfigResponse('NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL, JSON.stringify(FOOTER_LINKS));
+    await mockConfigResponse('NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL, FOOTER_LINKS);
     await injectMetaMaskProvider();
     await mockApiResponse('homepage_indexing_status', {
       finished_indexing: false,
@@ -43,7 +43,7 @@ test.describe('with custom links, min cols', () => {
     await mockEnvs([
       [ 'NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL ],
     ]);
-    await mockConfigResponse('NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL, JSON.stringify([ FOOTER_LINKS[0] ]));
+    await mockConfigResponse('NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL, [ FOOTER_LINKS[0] ]);
     await render(<Footer/>);
     await expect(page).toHaveScreenshot();
   });

diff --git a/ui/snippets/header/Burger.pw.tsx b/ui/snippets/header/Burger.pw.tsx
@@ -1,7 +1,7 @@
 import type { BrowserContext } from '@playwright/test';
 import React from 'react';
 
-import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network';
+import { FEATURED_NETWORKS } from 'mocks/config/network';
 import { contextWithAuth } from 'playwright/fixtures/auth';
 import { test, expect, devices } from 'playwright/lib';
 
@@ -24,7 +24,7 @@ test.beforeEach(async({ mockEnvs, mockConfigResponse, mockAssetResponse }) => {
   await mockEnvs([
     [ 'NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL ],
   ]);
-  await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS_MOCK);
+  await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS);
   await mockAssetResponse(LOGO_URL, './playwright/mocks/image_s.jpg');
 });
 

diff --git a/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx b/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import config from 'configs/app';
 import * as cookies from 'lib/cookies';
-import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network';
+import { FEATURED_NETWORKS } from 'mocks/config/network';
 import { contextWithAuth } from 'playwright/fixtures/auth';
 import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import { test, expect } from 'playwright/lib';
@@ -27,7 +27,7 @@ test.beforeEach(async({ mockEnvs, mockConfigResponse }) => {
     ...ENVS_MAP.rewardsService,
     [ 'NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL ],
   ]);
-  await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS_MOCK);
+  await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS);
 });
 
 test.describe('no auth', () => {

diff --git a/ui/snippets/networkMenu/NetworkMenu.pw.tsx b/ui/snippets/networkMenu/NetworkMenu.pw.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network';
+import { FEATURED_NETWORKS } from 'mocks/config/network';
 import { test, expect } from 'playwright/lib';
 
 import NetworkMenu from './NetworkMenu';
@@ -14,7 +14,7 @@ test('base view +@dark-mode', async({ render, page, mockConfigResponse, mockAsse
   await mockEnvs([
     [ 'NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL ],
   ]);
-  await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS_MOCK);
+  await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS);
   await mockAssetResponse(LOGO_URL, './playwright/mocks/image_s.jpg');
 
   const component = await render(<NetworkMenu/>);

diff --git a/ui/snippets/searchBar/SearchBar.pw.tsx b/ui/snippets/searchBar/SearchBar.pw.tsx
@@ -206,7 +206,7 @@ test.describe('with apps', () => {
     const apiUrl = await mockApiResponse('quick_search', [
       searchMock.token1,
     ], { queryParams: { q: 'o' } });
-    await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, JSON.stringify(appsMock));
+    await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, appsMock);
     await mockAssetResponse(appsMock[0].logo, './playwright/mocks/image_s.jpg');
     await mockAssetResponse(appsMock[1].logo, './playwright/mocks/image_s.jpg');