contract tests

playwright/fixtures/socketServer.ts

@@ -62,6 +62,7 @@ export function sendMessage(socket: WebSocket, channel: Channel, msg: 'pending_t
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'new_block', payload: NewBlockSocketResponse): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'verification_result', payload: SmartContractVerificationResponse): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'total_supply', payload: { total_supply: number}): void;
+export function sendMessage(socket: WebSocket, channel: Channel, msg: 'changed_bytecode', payload: Record<string, never>): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: string, payload: unknown): void {
   socket.send(JSON.stringify([
     ...channel,

ui/address/contract/ContractCode.pw.tsx

-import { test, expect } from '@playwright/experimental-ct-react';
+import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as contractMock from 'mocks/contract/info';
+import * as socketServer from 'playwright/fixtures/socketServer';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
 
@@ -15,6 +16,14 @@ const hooksConfig = {
   },
 };
 
+const test = base.extend<socketServer.SocketServerFixture>({
+  createSocket: socketServer.createSocket,
+});
+
+// FIXME
+// test cases which use socket cannot run in parallel since the socket server always run on the same port
+test.describe.configure({ mode: 'serial' });
+
 test('verified with changed byte code +@mobile +@dark-mode', async({ mount, page }) => {
   await page.route(CONTRACT_API_URL, (route) => route.fulfill({
     status: 200,
@@ -24,11 +33,32 @@ test('verified with changed byte code +@mobile +@dark-mode', async({ mount, page
 
   const component = await mount(
     <TestApp>
+      <ContractCode addressHash={ addressHash } noSocket/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('verified with changed byte code socket', async({ mount, page, createSocket }) => {
+  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(contractMock.verified),
+  }));
+  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
+
+  const component = await mount(
+    <TestApp withSocket>
       <ContractCode addressHash={ addressHash }/>
     </TestApp>,
     { hooksConfig },
   );
 
+  const socket = await createSocket();
+  const channel = await socketServer.joinChannel(socket, 'addresses:' + addressHash.toLowerCase());
+  socketServer.sendMessage(socket, channel, 'changed_bytecode', {});
+
   await expect(component).toHaveScreenshot();
 });
 
@@ -41,7 +71,7 @@ test('verified with multiple sources +@mobile', async({ mount, page }) => {
 
   await mount(
     <TestApp>
-      <ContractCode addressHash={ addressHash }/>
+      <ContractCode addressHash={ addressHash } noSocket/>
     </TestApp>,
     { hooksConfig },
   );
@@ -60,7 +90,7 @@ test('verified via sourcify', async({ mount, page }) => {
 
   await mount(
     <TestApp>
-      <ContractCode addressHash={ addressHash }/>
+      <ContractCode addressHash={ addressHash } noSocket/>
     </TestApp>,
     { hooksConfig },
   );
@@ -77,7 +107,7 @@ test('self destructed', async({ mount, page }) => {
 
   await mount(
     <TestApp>
-      <ContractCode addressHash={ addressHash }/>
+      <ContractCode addressHash={ addressHash } noSocket/>
     </TestApp>,
     { hooksConfig },
   );
@@ -95,7 +125,7 @@ test('with twin address alert +@mobile', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
-      <ContractCode addressHash={ addressHash }/>
+      <ContractCode addressHash={ addressHash } noSocket/>
     </TestApp>,
     { hooksConfig },
   );
@@ -112,7 +142,7 @@ test('with proxy address alert +@mobile', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
-      <ContractCode addressHash={ addressHash }/>
+      <ContractCode addressHash={ addressHash } noSocket/>
     </TestApp>,
     { hooksConfig },
   );
@@ -129,7 +159,7 @@ test('non verified', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
-      <ContractCode addressHash={ addressHash }/>
+      <ContractCode addressHash={ addressHash } noSocket/>
     </TestApp>,
     { hooksConfig },
   );

ui/address/contract/ContractCode.tsx

@@ -20,6 +20,8 @@ import ContractSourceCode from './ContractSourceCode';
 
 type Props = {
   addressHash?: string;
+  // prop for pw tests only
+  noSocket?: boolean;
 }
 
 const InfoItem = chakra(({ label, value, className }: { label: string; value: string; className?: string }) => (
@@ -29,14 +31,14 @@ const InfoItem = chakra(({ label, value, className }: { label: string; value: st
   </GridItem>
 ));
 
-const ContractCode = ({ addressHash }: Props) => {
+const ContractCode = ({ addressHash, noSocket }: Props) => {
   const [ isSocketOpen, setIsSocketOpen ] = React.useState(false);
   const [ isChangedBytecodeSocket, setIsChangedBytecodeSocket ] = React.useState<boolean>();
 
   const { data, isLoading, isError } = useApiQuery('contract', {
     pathParams: { hash: addressHash },
     queryOptions: {
-      enabled: Boolean(addressHash) && isSocketOpen,
+      enabled: Boolean(addressHash) && (noSocket || isSocketOpen),
       refetchOnMount: false,
     },
   });