refactor: move createAddListenerMock to separate file, add comments

Expensify · Jan 19, 2024 · 34b2c49 · 34b2c49
1 parent bddd3b6
commit 34b2c49
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 31 deletions.
diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
@@ -34,6 +34,11 @@ const propTypes = {
     /** Whether we are searching for reports in the server */
     isSearchingForReports: PropTypes.bool,
 
+    /**
+     * The navigation prop passed by the navigator.
+     *
+     * This is required because transitionEnd event doesn't trigger in the automated testing environment.
+     */
     navigation: PropTypes.shape({}),
 };
 

diff --git a/tests/perf-test/SearchPage.perf-test.js b/tests/perf-test/SearchPage.perf-test.js
@@ -93,34 +93,8 @@ function SearchPageWrapper(args) {
 
 const runs = CONST.PERFORMANCE_TESTS.RUNS;
 
-/**
- * This is a helper function to create a mock for the addListener function of the react-navigation library.
- * Same approach as in ReportScreen.perf-test.js
- *
- * P.S: This can't be moved to a utils file because Jest wants any external function to stay in the scope.
- *
- * @returns {Object} An object with two functions: triggerTransitionEnd and addListener
- */
-const createAddListenerMock = () => {
-    const transitionEndListeners = [];
-    const triggerTransitionEnd = () => {
-        transitionEndListeners.forEach((transitionEndListener) => transitionEndListener());
-    };
-
-    const addListener = jest.fn().mockImplementation((listener, callback) => {
-        if (listener === 'transitionEnd') {
-            transitionEndListeners.push(callback);
-        }
-        return () => {
-            _.filter(transitionEndListeners, (cb) => cb !== callback);
-        };
-    });
-
-    return {triggerTransitionEnd, addListener};
-};
-
 test('[Search Page] should interact when text input changes', async () => {
-    const {addListener} = createAddListenerMock();
+    const {addListener} = TestHelper.createAddListenerMock();
 
     const scenario = async () => {
         await screen.findByTestId('SearchPage');
@@ -147,7 +121,7 @@ test('[Search Page] should interact when text input changes', async () => {
 });
 
 test('[Search Page] should render options list', async () => {
-    const {triggerTransitionEnd, addListener} = createAddListenerMock();
+    const {triggerTransitionEnd, addListener} = TestHelper.createAddListenerMock();
     const smallMockedPersonalDetails = getMockedPersonalDetails(5);
 
     const scenario = async () => {
@@ -173,7 +147,7 @@ test('[Search Page] should render options list', async () => {
 });
 
 test('[Search Page] should search in options list', async () => {
-    const {triggerTransitionEnd, addListener} = createAddListenerMock();
+    const {triggerTransitionEnd, addListener} = TestHelper.createAddListenerMock();
 
     const scenario = async () => {
         await screen.findByTestId('SearchPage');
@@ -204,7 +178,7 @@ test('[Search Page] should search in options list', async () => {
 });
 
 test('[Search Page] should click on list item', async () => {
-    const {triggerTransitionEnd, addListener} = createAddListenerMock();
+    const {triggerTransitionEnd, addListener} = TestHelper.createAddListenerMock();
 
     const scenario = async () => {
         await screen.findByTestId('SearchPage');

diff --git a/tests/utils/TestHelper.js b/tests/utils/TestHelper.js
@@ -216,4 +216,27 @@ function assertFormDataMatchesObject(formData, obj) {
     expect(_.reduce(Array.from(formData.entries()), (memo, x) => ({...memo, [x[0]]: x[1]}), {})).toEqual(expect.objectContaining(obj));
 }
 
-export {getGlobalFetchMock, signInWithTestUser, signOutTestUser, setPersonalDetails, buildPersonalDetails, buildTestReportComment, assertFormDataMatchesObject};
+/**
+ * This is a helper function to create a mock for the addListener function of the react-navigation library.
+ *
+ * @returns {Object} An object with two functions: triggerTransitionEnd and addListener
+ */
+const createAddListenerMock = () => {
+    const transitionEndListeners = [];
+    const triggerTransitionEnd = () => {
+        transitionEndListeners.forEach((transitionEndListener) => transitionEndListener());
+    };
+
+    const addListener = jest.fn().mockImplementation((listener, callback) => {
+        if (listener === 'transitionEnd') {
+            transitionEndListeners.push(callback);
+        }
+        return () => {
+            _.filter(transitionEndListeners, (cb) => cb !== callback);
+        };
+    });
+
+    return {triggerTransitionEnd, addListener};
+};
+
+export {getGlobalFetchMock, signInWithTestUser, signOutTestUser, setPersonalDetails, buildPersonalDetails, buildTestReportComment, assertFormDataMatchesObject, createAddListenerMock};