Dashboard: updated unit tests for Delete resume

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

@@ -1,6 +1,5 @@
 /* eslint-disable no-underscore-dangle */
 import { v4 as uuidv4 } from 'uuid';
-import { debounce } from 'lodash';
 
 import DatabaseConstants from '../constants/database';
 import DataSnapshot from './dataSnapshot';
@@ -148,11 +147,7 @@ class Reference {
         ? this._dataSnapshot
         : new DataSnapshot(() => this._getData(), snapshotValue);
 
-    const debouncedEventCallback = debounce(
-      this.eventCallbacks[eventType],
-      DatabaseConstants.defaultDelayInMilliseconds,
-    );
-    debouncedEventCallback(snapshot);
+    this.eventCallbacks[eventType](snapshot);
   }
 
   equalTo(value) {
@@ -173,7 +168,9 @@ class Reference {
     this.eventCallbacks[eventType] = callback;
 
     if (eventType === DatabaseConstants.valueEventType) {
+      setTimeout(() => {
         this.triggerEventCallback(eventType);
+      }, DatabaseConstants.defaultDelayInMilliseconds);
     }
 
     return callback;

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

@@ -23,6 +23,7 @@ import {
 } from '../../../contexts/DatabaseContext';
 import { ResumeProvider } from '../../../contexts/ResumeContext';
 import { StorageProvider } from '../../../contexts/StorageContext';
+import Wrapper from '../../../components/shared/Wrapper';
 import Builder from '../builder';
 
 describe('Builder', () => {
@@ -60,7 +61,9 @@ describe('Builder', () => {
             <DatabaseProvider>
               <ResumeProvider>
                 <StorageProvider>
+                  <Wrapper>
                     <Builder id={resumeId} />
+                  </Wrapper>
                 </StorageProvider>
               </ResumeProvider>
             </DatabaseProvider>
@@ -212,6 +215,12 @@ describe('Builder', () => {
       await setup(DatabaseConstants.demoStateResume1Id, false, false);
     });
 
+    afterEach(async () => {
+      await waitForElementToBeRemoved(() =>
+        screen.getByTestId(loadingScreenTestId),
+      );
+    });
+
     it('renders loading screen', () => {
       expect(screen.getByTestId(loadingScreenTestId)).toBeInTheDocument();
     });

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

@@ -20,6 +20,7 @@ import { UserProvider } from '../../../contexts/UserContext';
 import { DatabaseProvider } from '../../../contexts/DatabaseContext';
 import { ResumeProvider } from '../../../contexts/ResumeContext';
 import { StorageProvider } from '../../../contexts/StorageContext';
+import Wrapper from '../../../components/shared/Wrapper';
 import Dashboard from '../dashboard';
 
 describe('Dashboard', () => {
@@ -46,7 +47,9 @@ describe('Dashboard', () => {
             <DatabaseProvider>
               <ResumeProvider>
                 <StorageProvider>
+                  <Wrapper>
                     <Dashboard user={user} />
+                  </Wrapper>
                 </StorageProvider>
               </ResumeProvider>
             </DatabaseProvider>
@@ -67,27 +70,35 @@ describe('Dashboard', () => {
       await setup();
     });
 
-    it('document title', () => {
+    it('document title', async () => {
+      await waitFor(() => {
         expect(document.title).toEqual('Dashboard | Reactive Resume');
       });
-
-    it('create resume', () => {
-      expect(screen.getByText(/create resume/i)).toBeInTheDocument();
     });
 
-    it('preview of user resumes', () => {
+    it('create resume', async () => {
+      await waitFor(() => {
+        expect(screen.getByText(/create resume/i)).toBeInTheDocument();
+      });
+    });
+
+    it('preview of user resumes', async () => {
       expect(Object.keys(resumes)).toHaveLength(2);
 
       expect(Object.values(resumes)[0].user).toEqual(user.uid);
+      await waitFor(() => {
         expect(
           screen.getByText(Object.values(resumes)[0].name),
         ).toBeInTheDocument();
+      });
       expect(Object.values(resumes)[1].user).toEqual(user.uid);
+      await waitFor(() => {
         expect(
           screen.getByText(Object.values(resumes)[1].name),
         ).toBeInTheDocument();
       });
     });
+  });
 
   describe('when resume is deleted', () => {
     let mockDatabaseRemoveFunction = null;
@@ -95,6 +106,10 @@ describe('Dashboard', () => {
     let undeletedResume = null;
     let resumeToDeleteId = null;
 
+    const waitForDatabaseRemoveFunctionToHaveCompleted = async () => {
+      await waitFor(() => mockDatabaseRemoveFunction.mock.results[0].value);
+    };
+
     beforeEach(async () => {
       await setup();
 
@@ -108,9 +123,13 @@ describe('Dashboard', () => {
         'remove',
       );
 
-      const resumeToDeleteMenuToggle = screen.getByTestId(
+      let resumeToDeleteMenuToggle = null;
+      await waitFor(() => {
+        resumeToDeleteMenuToggle = screen.queryByTestId(
           `${resumePreviewMenuToggleDataTestIdPrefix}${resumeToDeleteId}`,
         );
+        return resumeToDeleteMenuToggle ? Promise.resolve() : Promise.reject();
+      });
       fireEvent.click(resumeToDeleteMenuToggle);
 
       const menuItems = screen.getAllByRole('menuitem');
@@ -124,26 +143,28 @@ describe('Dashboard', () => {
       fireEvent.click(deleteMenuItem);
     });
 
+    afterEach(async () => {
+      await waitForDatabaseRemoveFunctionToHaveCompleted();
+    });
+
     it('removes it from database and preview', async () => {
       await waitFor(() =>
         expect(mockDatabaseRemoveFunction).toHaveBeenCalledTimes(1),
       );
 
+      await waitForDatabaseRemoveFunctionToHaveCompleted();
+
       await waitFor(() =>
         expect(screen.queryByText(resumeToDelete.name)).toBeNull(),
       );
       expect(screen.getByText(undeletedResume.name)).toBeInTheDocument();
     });
 
-    /*
     it('displays notification', async () => {
-      await waitFor(() =>
-        expect(
-          screen.getByText(`${resumeToDelete.name} was deleted successfully`),
-        ).toBeInTheDocument(),
-      );
+      await waitFor(() => {
+        expect(screen.getByRole('alert')).toBeInTheDocument();
+      });
     });
-    */
 
     it('closes menu', () => {
       const menuItems = screen.queryAllByRole('menuitem');
@@ -156,6 +177,12 @@ describe('Dashboard', () => {
       await setup(false);
     });
 
+    afterEach(async () => {
+      await waitForElementToBeRemoved(() =>
+        screen.getByTestId(loadingScreenTestId),
+      );
+    });
+
     it('renders loading screen', () => {
       expect(screen.getByTestId(loadingScreenTestId)).toBeInTheDocument();
     });