Merge pull request #1475 from blockscout/interpretation-fix

fix tx sub-header

playwright/utils/configs.ts

@@ -29,6 +29,9 @@ export const featureEnvs = {
       value: '[{"type":"omni","title":"OmniBridge","short_title":"OMNI"},{"type":"amb","title":"Arbitrary Message Bridge","short_title":"AMB"}]',
     },
   ],
+  txInterpretation: [
+    { name: 'NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER', value: 'blockscout' },
+  ],
   zkRollup: [
     { name: 'NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK', value: 'true' },
     { name: 'NEXT_PUBLIC_L1_BASE_URL', value: 'https://localhost:3101' },

ui/tx/TxSubHeading.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import { txInterpretation } from 'mocks/txs/txInterpretation';
+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 TxSubHeading from './TxSubHeading';
+
+const hash = '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193';
+
+const TX_INTERPRETATION_API_URL = buildApiUrl('tx_interpretation', { hash });
+
+test('no interpretation +@mobile', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <TxSubHeading hash={ hash } hasTag={ false }/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+const bsInterpretationTest = test.extend({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  context: contextWithEnvs(configs.featureEnvs.txInterpretation) as any,
+});
+
+bsInterpretationTest('with interpretation +@mobile +@dark-mode', async({ mount, page }) => {
+  await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(txInterpretation),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <TxSubHeading hash={ hash } hasTag={ false }/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+bsInterpretationTest('no interpretation', async({ mount, page }) => {
+  await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify({ data: { summaries: [] } }),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <TxSubHeading hash={ hash } hasTag={ false }/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/tx/TxSubHeading.tsx

@@ -27,11 +27,11 @@ const TxSubHeading = ({ hash, hasTag }: Props) => {
   });
 
   const hasInterpretation = hasInterpretationFeature &&
-    (txInterpretationQuery.isPlaceholderData || txInterpretationQuery.data?.data.summaries.length);
+    (txInterpretationQuery.isPlaceholderData || Boolean(txInterpretationQuery.data?.data.summaries.length));
 
   return (
     <Box display={{ base: 'block', lg: 'flex' }} alignItems="center" w="100%">
-      { hasInterpretationFeature && (
+      { hasInterpretation && (
         <Flex mr={{ base: 0, lg: 6 }} flexWrap="wrap" alignItems="center">
           <TxInterpretation
             summary={ txInterpretationQuery.data?.data.summaries[0] }

ui/tx/interpretation/TxInterpretation.pw.tsx

-import { test, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import { txInterpretation as txInterpretationMock } from 'mocks/txs/txInterpretation';
-import TestApp from 'playwright/TestApp';
-
-import TxInterpretation from './TxInterpretation';
-
-test('base view +@mobile +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInterpretation summary={ txInterpretationMock.data.summaries[0] } isLoading={ false }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});