Builder tests: added test for loading screen

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

@@ -20,6 +20,8 @@ const user2 = {
   isAnonymous: AuthConstants.anonymousUser2.isAnonymous,
 };
 
+const defaultDelayInMilliseconds = 100;
+
 class Database {
   static get valueEventType() {
     return valueEventType;
@@ -60,6 +62,10 @@ class Database {
   static get user2() {
     return user2;
   }
+
+  static get defaultDelayInMilliseconds() {
+    return defaultDelayInMilliseconds;
+  }
 }
 
 export default Database;

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

@@ -149,7 +149,7 @@ class Reference {
 
     const debouncedEventCallback = debounce(
       this.eventCallbacks[eventType],
-      100,
+      DatabaseConstants.defaultDelayInMilliseconds,
     );
     debouncedEventCallback(snapshot);
   }
@@ -183,6 +183,10 @@ class Reference {
       throw new Error('eventType should be a string.');
     }
 
+    await new Promise((resolve) =>
+      setTimeout(resolve, DatabaseConstants.defaultDelayInMilliseconds),
+    );
+
     return Promise.resolve(this._dataSnapshot);
   }
 

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

@@ -6,6 +6,7 @@ import {
   render,
   screen,
   waitFor,
+  waitForElementToBeRemoved,
 } from '@testing-library/react';
 
 import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
@@ -25,9 +26,11 @@ describe('Builder', () => {
   let resumeId = null;
   let resume = null;
   let mockDatabaseUpdateFunction = null;
+  const loadingScreenTestId = 'loading-screen';
 
   async function setup(
     resumeIdParameter,
+    waitForLoadingScreenToDisappear = true,
     waitForDatabaseUpdateFunctionToHaveBeenCalled = true,
   ) {
     FirebaseStub.database().initializeData();
@@ -66,6 +69,12 @@ describe('Builder', () => {
       await FirebaseStub.auth().signInAnonymously();
     });
 
+    if (waitForLoadingScreenToDisappear) {
+      await waitForElementToBeRemoved(() =>
+        screen.getByTestId(loadingScreenTestId),
+      );
+    }
+
     if (waitForDatabaseUpdateFunctionToHaveBeenCalled) {
       await waitFor(() => mockDatabaseUpdateFunction.mock.calls[0][0], {
         timeout: DebounceWaitTime,
@@ -77,12 +86,13 @@ describe('Builder', () => {
   describe('handles errors', () => {
     describe('if resume does not exist', () => {
       beforeEach(async () => {
-        await setup('xxxxxx', false);
+        await setup('xxxxxx', false, false);
       });
 
-      it('navigates to Dashboard', () => {
+      it('navigates to Dashboard', async () => {
-        expect(resume).toBeNull();
+        await waitFor(() =>
-        expect(mockNavigateFunction).toHaveBeenCalledTimes(1);
+          expect(mockNavigateFunction).toHaveBeenCalledTimes(1),
+        );
         expect(mockNavigateFunction).toHaveBeenCalledWith('/app/dashboard');
       });
     });
@@ -187,4 +197,14 @@ describe('Builder', () => {
       ).toBeGreaterThanOrEqual(now);
     });
   });
+
+  describe('while loading', () => {
+    beforeEach(async () => {
+      await setup(DatabaseConstants.demoStateResume1Id, false, false);
+    });
+
+    it('renders loading screen', () => {
+      expect(screen.getByTestId(loadingScreenTestId)).toBeInTheDocument();
+    });
+  });
 });

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

@@ -23,7 +23,7 @@ describe('Dashboard', () => {
   const user = DatabaseConstants.user1;
   const loadingScreenTestId = 'loading-screen';
 
-  async function setup(waitForLoadingScreenToDisappear) {
+  async function setup(waitForLoadingScreenToDisappear = true) {
     FirebaseStub.database().initializeData();
 
     resumes = (
@@ -61,32 +61,30 @@ describe('Dashboard', () => {
     }
   }
 
-  describe('after loading', () => {
+  describe('renders', () => {
     beforeEach(async () => {
-      await setup(true);
+      await setup();
     });
 
-    describe('renders', () => {
+    it('document title', () => {
-      it('document title', () => {
+      expect(document.title).toEqual('Dashboard | Reactive Resume');
-        expect(document.title).toEqual('Dashboard | Reactive Resume');
+    });
-      });
 
-      it('create resume', () => {
+    it('create resume', () => {
-        expect(screen.getByText(/create resume/i)).toBeInTheDocument();
+      expect(screen.getByText(/create resume/i)).toBeInTheDocument();
-      });
+    });
 
-      it('preview of user resumes', () => {
+    it('preview of user resumes', () => {
-        expect(Object.keys(resumes)).toHaveLength(2);
+      expect(Object.keys(resumes)).toHaveLength(2);
 
-        expect(Object.values(resumes)[0].user).toEqual(user.uid);
+      expect(Object.values(resumes)[0].user).toEqual(user.uid);
-        expect(
+      expect(
-          screen.getByText(Object.values(resumes)[0].name),
+        screen.getByText(Object.values(resumes)[0].name),
-        ).toBeInTheDocument();
+      ).toBeInTheDocument();
-        expect(Object.values(resumes)[1].user).toEqual(user.uid);
+      expect(Object.values(resumes)[1].user).toEqual(user.uid);
-        expect(
+      expect(
-          screen.getByText(Object.values(resumes)[1].name),
+        screen.getByText(Object.values(resumes)[1].name),
-        ).toBeInTheDocument();
+      ).toBeInTheDocument();
-      });
     });
   });
 
@@ -95,10 +93,8 @@ describe('Dashboard', () => {
       await setup(false);
     });
 
-    describe('renders', () => {
+    it('renders loading screen', () => {
-      it('loading screen', () => {
+      expect(screen.getByTestId(loadingScreenTestId)).toBeInTheDocument();
-        expect(screen.getByTestId(loadingScreenTestId)).toBeInTheDocument();
-      });
     });
   });
 });