From a9e702c46208a042da82c28c925c4ec5503d0f44 Mon Sep 17 00:00:00 2001
From: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
Date: Mon, 16 Dec 2024 13:14:31 +0100
Subject: [PATCH] test: fix e2e tests (#2578)

# Summary

Fix broken E2E iOS tests

## Test Plan

CI should be green
---
 .github/workflows/e2e-ios.yml           |  2 +-
 apps/common/example/e2e/TestingView.tsx | 12 +++++++++---
 apps/common/example/e2e/index.tsx       |  3 +--
 apps/common/example/index.tsx           |  2 +-
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/e2e-ios.yml b/.github/workflows/e2e-ios.yml
index 4b0b2e877..74d401d27 100644
--- a/.github/workflows/e2e-ios.yml
+++ b/.github/workflows/e2e-ios.yml
@@ -22,7 +22,7 @@ jobs:
         working-directory: [paper-example]
       fail-fast: false
     env:
-      DEVICE: iPhone 16 Pro
+      DEVICE: iPhone 15 Pro
     steps:
       - name: Checkout Git repository
         uses: actions/checkout@v4
diff --git a/apps/common/example/e2e/TestingView.tsx b/apps/common/example/e2e/TestingView.tsx
index cb699fd39..75e2196bf 100644
--- a/apps/common/example/e2e/TestingView.tsx
+++ b/apps/common/example/e2e/TestingView.tsx
@@ -12,7 +12,7 @@ export const TestingView = () => {
   const [renderedContent, setRenderedContent] =
     useState<React.ReactElement | null>();
   const [readyToSnapshot, setReadyToSnapshot] = useState(false);
-  const [resolution, setResolution] = useState([0, 0]); // placeholder value, later updated by incoming render requests
+  const [resolution, setResolution] = useState({width: 0, height: 0}); // placeholder value, later updated by incoming render requests
   const [message, setMessage] = useState('⏳ Connecting to Jest server...');
 
   const connect = useCallback(() => {
@@ -48,7 +48,8 @@ export const TestingView = () => {
       const message = JSON.parse(rawMessage);
       if (message.type == 'renderRequest') {
         setMessage(`✅ Rendering tests, please don't close this tab.`);
-        setResolution([message.width, message.height]);
+        const {width, height} = message;
+        setResolution({width, height});
         setRenderedContent(
           createElementFromObject(
             message.data.type || 'SvgFromXml',
@@ -67,6 +68,11 @@ export const TestingView = () => {
         `✅ Connection to Jest server has been closed. You can close this tab safely. (${event.code})`,
       );
     };
+
+    return () => {
+      setWsClient(null);
+      client.close();
+    };
   }, [wsClient]);
 
   // Create initial connection when rendering the view
@@ -93,7 +99,7 @@ export const TestingView = () => {
       <Text style={{marginLeft: 'auto', marginRight: 'auto'}}>{message}</Text>
       <ViewShot
         ref={wrapperRef}
-        style={{width: resolution[0], height: resolution[1]}}
+        style={{...resolution}}
         options={{result: 'base64'}}>
         {renderedContent}
       </ViewShot>
diff --git a/apps/common/example/e2e/index.tsx b/apps/common/example/e2e/index.tsx
index 8088e20db..db0a61608 100644
--- a/apps/common/example/e2e/index.tsx
+++ b/apps/common/example/e2e/index.tsx
@@ -1,5 +1,4 @@
 import {icon} from './icon';
-import {TestingView} from './TestingView';
+import {TestingView as component} from './TestingView';
 
-const component = TestingView;
 export {component, icon};
diff --git a/apps/common/example/index.tsx b/apps/common/example/index.tsx
index 133766d62..fa2f85a28 100644
--- a/apps/common/example/index.tsx
+++ b/apps/common/example/index.tsx
@@ -11,7 +11,7 @@ import React from 'react';
 import {ActivityIndicator, Platform, View} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {ListScreen} from './ListScreen';
-import * as E2e from './e2e/index.macos';
+import * as E2e from './e2e/index';
 import {examples} from './examples';
 import * as FilterImage from './examples/FilterImage';
 import * as Filters from './examples/Filters';