Firebase Stub: debounce callback called by "on" function

__mocks__/__tests__/gatsby-plugin-firebase.test.js

@@ -1,3 +1,4 @@
+import { waitFor } from '@testing-library/react';
 import FirebaseStub, {
   AuthConstants,
   DatabaseConstants,
@@ -60,6 +61,10 @@ describe('FirebaseStub', () => {
   });
 
   describe('database', () => {
+    beforeEach(() => {
+      FirebaseStub.database().initializeData();
+    });
+
     it('reuses existing Database instance', () => {
       const database1 = FirebaseStub.database();
       const database2 = FirebaseStub.database();
@@ -107,8 +112,6 @@ describe('FirebaseStub', () => {
     });
 
     it('initializing data sets up resumes and users', async () => {
-      FirebaseStub.database().initializeData();
-
       const resumesRef = FirebaseStub.database().ref(
         DatabaseConstants.resumesPath,
       );
@@ -146,8 +149,6 @@ describe('FirebaseStub', () => {
     });
 
     it('retrieves resume if it exists', async () => {
-      FirebaseStub.database().initializeData();
-
       const resume = (
         await FirebaseStub.database()
           .ref(
@@ -161,7 +162,6 @@ describe('FirebaseStub', () => {
     });
 
     it('retrieves null if resume does not exist', async () => {
-      FirebaseStub.database().initializeData();
       const resumeId = 'invalidResumeId';
 
       const resume = (
@@ -174,8 +174,6 @@ describe('FirebaseStub', () => {
     });
 
     it('retrieves user if it exists', async () => {
-      FirebaseStub.database().initializeData();
-
       const user = (
         await FirebaseStub.database()
           .ref(`${DatabaseConstants.usersPath}/${DatabaseConstants.user1.uid}`)
@@ -187,7 +185,6 @@ describe('FirebaseStub', () => {
     });
 
     it('retrieves null if user does not exist', async () => {
-      FirebaseStub.database().initializeData();
       const userId = 'invalidUserId';
 
       const user = (
@@ -208,6 +205,11 @@ describe('FirebaseStub', () => {
           snapshotValue = snapshot.val();
         });
 
+      await waitFor(() =>
+        snapshotValue ? Promise.resolve(true) : Promise.reject(),
+      );
+
+      expect(snapshotValue).not.toBeNull();
       expect(snapshotValue).toBe(true);
     });
 
@@ -224,6 +226,11 @@ describe('FirebaseStub', () => {
           snapshotValue = snapshot.val();
         });
 
+      await waitFor(() =>
+        snapshotValue ? Promise.resolve(true) : Promise.reject(),
+      );
+
+      expect(snapshotValue).not.toBeNull();
       expect(snapshotValue).toEqual(resumes);
     });
 
@@ -238,6 +245,11 @@ describe('FirebaseStub', () => {
           snapshotValue = snapshot.val();
         });
 
+      await waitFor(() =>
+        snapshotValue ? Promise.resolve(true) : Promise.reject(),
+      );
+
+      expect(snapshotValue).not.toBeNull();
       expect(Object.keys(snapshotValue)).toHaveLength(2);
       Object.values(snapshotValue).forEach((resume) =>
         expect(resume.user).toEqual(DatabaseConstants.user1.uid),

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

@@ -1,4 +1,5 @@
 import { v4 as uuidv4 } from 'uuid';
+import { debounce } from 'lodash';
 
 import DatabaseConstants from '../constants/database';
 import DataSnapshot from './dataSnapshot';
@@ -108,7 +109,8 @@ class Reference {
       snapshot = new DataSnapshot(eventType, () => this.getData());
     }
 
-    callback(snapshot);
+    const debouncedCallback = debounce(callback, 100);
+    debouncedCallback(snapshot);
   }
 
   async once(eventType) {

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

@@ -20,16 +20,14 @@ import { ResumeProvider } from '../../../contexts/ResumeContext';
 import { StorageProvider } from '../../../contexts/StorageContext';
 import Builder from '../builder';
 
-beforeEach(() => {
-  FirebaseStub.database().initializeData();
-});
-
 describe('Builder', () => {
   let resumeId = null;
   let resume = null;
   let mockUpdateFunction = null;
 
   beforeEach(async () => {
+    FirebaseStub.database().initializeData();
+
     resumeId = DatabaseConstants.demoStateResume1Id;
     resume = (
       await FirebaseStub.database()
@@ -96,9 +94,10 @@ describe('Builder', () => {
 
       expect(input.value).toBe(newInputValue);
 
-      await waitFor(() => expect(mockUpdateFunction).toHaveBeenCalledTimes(1), {
+      await waitFor(() => mockUpdateFunction.mock.calls[0][0], {
         timeout: DebounceWaitTime,
       });
+      expect(mockUpdateFunction).toHaveBeenCalledTimes(1);
       const mockUpdateFunctionCallArgument =
         mockUpdateFunction.mock.calls[0][0];
       expect(mockUpdateFunctionCallArgument.id).toBe(resume.id);
@@ -130,9 +129,10 @@ describe('Builder', () => {
         screen.getByLabelText(new RegExp('data di nascita', 'i')),
       ).toBeInTheDocument();
 
-      await waitFor(() => expect(mockUpdateFunction).toHaveBeenCalledTimes(1), {
+      await waitFor(() => mockUpdateFunction.mock.calls[0][0], {
         timeout: DebounceWaitTime,
       });
+      expect(mockUpdateFunction).toHaveBeenCalledTimes(1);
       const mockUpdateFunctionCallArgument =
         mockUpdateFunction.mock.calls[0][0];
       expect(mockUpdateFunctionCallArgument.id).toBe(resume.id);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 
 import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
 
@@ -12,15 +12,13 @@ import { ResumeProvider } from '../../../contexts/ResumeContext';
 import { StorageProvider } from '../../../contexts/StorageContext';
 import Dashboard from '../dashboard';
 
-beforeEach(() => {
-  FirebaseStub.database().initializeData();
-});
-
 describe('Dashboard', () => {
   let resumes = null;
   const user = DatabaseConstants.user1;
 
   beforeEach(async () => {
+    FirebaseStub.database().initializeData();
+
     resumes = (
       await FirebaseStub.database()
         .ref(DatabaseConstants.resumesPath)
@@ -48,11 +46,17 @@ describe('Dashboard', () => {
     await act(async () => {
       await FirebaseStub.auth().signInAnonymously();
     });
+
+    await waitFor(() => screen.getByText('Create Resume'));
   });
 
   describe('renders', () => {
+    it('document title', async () => {
+      expect(document.title).toEqual('Dashboard | Reactive Resume');
+    });
+
     it('create resume', async () => {
-      expect(screen.getByText(new RegExp('Create Resume'))).toBeInTheDocument();
+      expect(screen.getByText('Create Resume')).toBeInTheDocument();
     });
 
     it('preview of user resumes', async () => {
@@ -60,11 +64,11 @@ describe('Dashboard', () => {
 
       expect(Object.values(resumes)[0].user).toEqual(user.uid);
       expect(
-        screen.getByText(new RegExp(Object.values(resumes)[0].name)),
+        screen.getByText(Object.values(resumes)[0].name),
       ).toBeInTheDocument();
       expect(Object.values(resumes)[1].user).toEqual(user.uid);
       expect(
-        screen.getByText(new RegExp(Object.values(resumes)[1].name)),
+        screen.getByText(Object.values(resumes)[1].name),
       ).toBeInTheDocument();
     });
   });

src/templates/__tests__/Castform.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+
 import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
 
 import '../../i18n/index';
@@ -10,6 +11,7 @@ describe('Castform', () => {
 
   beforeEach(async () => {
     FirebaseStub.database().initializeData();
+
     const resumeId = DatabaseConstants.initialStateResumeId;
     resume = (
       await FirebaseStub.database()
@@ -29,9 +31,9 @@ describe('Castform', () => {
     const birthDateLabelMatcher = /Date of birth/i;
 
     it('is not shown if not provided', () => {
-      const { queryByText } = render(<Castform data={resume} />);
+      render(<Castform data={resume} />);
 
-      expect(queryByText(birthDateLabelMatcher)).toBeNull();
+      expect(screen.queryByText(birthDateLabelMatcher)).toBeNull();
     });
 
     it('is shown if provided', () => {
@@ -39,12 +41,12 @@ describe('Castform', () => {
       const birthDateFormatted = '20 January 1990';
       resume.profile.birthDate = birthDate;
 
-      const { getByText } = render(<Castform data={resume} />);
+      render(<Castform data={resume} />);
 
-      expect(getByText(birthDateLabelMatcher)).toBeTruthy();
-      expect(getByText(birthDateLabelMatcher)).toBeInTheDocument();
-      expect(getByText(birthDateFormatted)).toBeTruthy();
-      expect(getByText(birthDateFormatted)).toBeInTheDocument();
+      expect(screen.getByText(birthDateLabelMatcher)).toBeTruthy();
+      expect(screen.getByText(birthDateLabelMatcher)).toBeInTheDocument();
+      expect(screen.getByText(birthDateFormatted)).toBeTruthy();
+      expect(screen.getByText(birthDateFormatted)).toBeInTheDocument();
     });
   });
 });