Firebase Stub: introduced a delay in all async functions to better mimic real Firebase

__mocks__/gatsby-plugin-firebase/auth/auth.js

@@ -2,6 +2,7 @@
 import { v4 as uuidv4 } from 'uuid';
 
 import Constants from '../constants/auth';
+import delay from '../utils/index';
 
 const singleton = Symbol('');
 const singletonEnforcer = Symbol('');
@@ -49,6 +50,8 @@ class Auth {
   async signInAnonymously() {
     const user = Constants.anonymousUser1;
 
+    await delay(Constants.defaultDelayInMilliseconds);
+
     this.onAuthStateChangedObservers.forEach((observer) => observer(user));
 
     return Promise.resolve(user);

__mocks__/gatsby-plugin-firebase/constants/auth.js

@@ -14,6 +14,8 @@ const anonymousUser2 = {
   uid: 'anonym456',
 };
 
+const defaultDelayInMilliseconds = 100;
+
 class Auth {
   static get anonymousUser1() {
     return anonymousUser1;
@@ -22,6 +24,10 @@ class Auth {
   static get anonymousUser2() {
     return anonymousUser2;
   }
+
+  static get defaultDelayInMilliseconds() {
+    return defaultDelayInMilliseconds;
+  }
 }
 
 export default Auth;

__mocks__/gatsby-plugin-firebase/database/reference.js

@@ -4,6 +4,7 @@ import { debounce } from 'lodash';
 
 import DatabaseConstants from '../constants/database';
 import DataSnapshot from './dataSnapshot';
+import delay from '../utils/index';
 
 const parsePath = (path) => {
   if (!path) {
@@ -183,9 +184,7 @@ class Reference {
       throw new Error('eventType should be a string.');
     }
 
-    await new Promise((resolve) =>
+    await delay(DatabaseConstants.defaultDelayInMilliseconds);
-      setTimeout(resolve, DatabaseConstants.defaultDelayInMilliseconds),
-    );
 
     return Promise.resolve(this._dataSnapshot);
   }
@@ -196,21 +195,27 @@ class Reference {
   }
 
   async update(value) {
+    await delay(DatabaseConstants.defaultDelayInMilliseconds);
+
     this._handleDataUpdate(value);
 
-    return Promise.resolve(true);
+    return Promise.resolve();
   }
 
   async remove() {
+    await delay(DatabaseConstants.defaultDelayInMilliseconds);
+
     this._handleDataUpdate(null);
 
-    return Promise.resolve(true);
+    return Promise.resolve();
   }
 
   async set(value) {
+    await delay(DatabaseConstants.defaultDelayInMilliseconds);
+
     this._handleDataUpdate(value);
 
-    return Promise.resolve(true);
+    return Promise.resolve();
   }
 }
 

__mocks__/gatsby-plugin-firebase/utils/index.js

@@ -0,0 +1,5 @@
+const delay = async (milliseconds) => {
+  await new Promise((resolve) => setTimeout(resolve, milliseconds));
+};
+
+export default delay;

src/pages/app/__tests__/builder.test.js

@@ -1,7 +1,6 @@
 import { navigate as mockNavigateFunction } from 'gatsby';
 import React from 'react';
 import {
-  act,
   fireEvent,
   render,
   screen,
@@ -31,7 +30,7 @@ describe('Builder', () => {
   async function setup(
     resumeIdParameter,
     waitForLoadingScreenToDisappear = true,
-    waitForDatabaseUpdateFunctionToHaveBeenCalled = true,
+    waitForDatabaseUpdateFunctionToHaveCompleted = true,
   ) {
     FirebaseStub.database().initializeData();
 
@@ -49,6 +48,8 @@ describe('Builder', () => {
       'update',
     );
 
+    FirebaseStub.auth().signInAnonymously();
+
     render(
       <SettingsProvider>
         <ModalProvider>
@@ -65,20 +66,17 @@ describe('Builder', () => {
       </SettingsProvider>,
     );
 
-    await act(async () => {
-      await FirebaseStub.auth().signInAnonymously();
-    });
-
     if (waitForLoadingScreenToDisappear) {
       await waitForElementToBeRemoved(() =>
         screen.getByTestId(loadingScreenTestId),
       );
     }
 
-    if (waitForDatabaseUpdateFunctionToHaveBeenCalled) {
+    if (waitForDatabaseUpdateFunctionToHaveCompleted) {
       await waitFor(() => mockDatabaseUpdateFunction.mock.calls[0][0], {
         timeout: DebounceWaitTime,
       });
+      await waitFor(() => mockDatabaseUpdateFunction.mock.results[0].value);
       mockDatabaseUpdateFunction.mockClear();
     }
   }
@@ -158,6 +156,11 @@ describe('Builder', () => {
       expect(
         mockDatabaseUpdateFunctionCallArgument.updatedAt,
       ).toBeGreaterThanOrEqual(now);
+      await waitFor(() =>
+        expect(
+          mockDatabaseUpdateFunction.mock.results[0].value,
+        ).resolves.toBeUndefined(),
+      );
     });
 
     afterEach(() => {
@@ -195,6 +198,11 @@ describe('Builder', () => {
       expect(
         mockDatabaseUpdateFunctionCallArgument.updatedAt,
       ).toBeGreaterThanOrEqual(now);
+      await waitFor(() =>
+        expect(
+          mockDatabaseUpdateFunction.mock.results[0].value,
+        ).resolves.toBeUndefined(),
+      );
     });
   });
 

src/pages/app/__tests__/dashboard.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  act,
   render,
   screen,
   waitForElementToBeRemoved,
@@ -34,6 +33,8 @@ describe('Dashboard', () => {
         .once('value')
     ).val();
 
+    FirebaseStub.auth().signInAnonymously();
+
     render(
       <SettingsProvider>
         <ModalProvider>
@@ -50,10 +51,6 @@ describe('Dashboard', () => {
       </SettingsProvider>,
     );
 
-    await act(async () => {
-      await FirebaseStub.auth().signInAnonymously();
-    });
-
     if (waitForLoadingScreenToDisappear) {
       await waitForElementToBeRemoved(() =>
         screen.getByTestId(loadingScreenTestId),