Dashboard page: refactored setup of fetch mock, added more assertions to unit test

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

@@ -2,7 +2,7 @@
 import { v4 as uuidv4 } from 'uuid';
 
 import Constants from '../constants/auth';
-import delay from '../../utils/index';
+import { delay } from '../../../src/utils/index';
 
 const singleton = Symbol('');
 const singletonEnforcer = Symbol('');

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

@@ -3,7 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 import DatabaseConstants from '../constants/database';
 import DataSnapshot from './dataSnapshot';
-import delay from '../../utils/index';
+import { delay } from '../../../src/utils/index';
 
 const parsePath = (path) => {
   if (!path) {

__mocks__/gatsby.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import delay from './utils/index';
+import { delay } from '../src/utils/index';
 
 const Gatsby = jest.requireActual('gatsby');
 

__mocks__/utils/index.js

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

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

@@ -13,6 +13,7 @@ import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
 
 import '../../../i18n/index';
 import '../../../utils/dayjs';
+import { unsplashPhotoRequestUrl, delay } from '../../../utils/index';
 import { dataTestId as loadingScreenTestId } from '../../../components/router/LoadingScreen';
 import { createResumeButtonDataTestId } from '../../../components/dashboard/CreateResume';
 import { menuToggleDataTestIdPrefix as resumePreviewMenuToggleDataTestIdPrefix } from '../../../components/dashboard/ResumePreview';
@@ -112,8 +113,25 @@ describe('Dashboard', () => {
   });
 
   describe('when resume is created', () => {
+    const unsplashPhotoResponseUrl = 'https://test-url-123456789.com';
     let nameTextBox = null;
 
+    const setupFetchMock = () => {
+      fetch.resetMocks();
+
+      fetch.mockImplementationOnce(async (input) => {
+        await delay(100);
+
+        if (input === unsplashPhotoRequestUrl) {
+          return {
+            url: unsplashPhotoResponseUrl,
+          };
+        }
+
+        throw new Error('Unsupported input.');
+      });
+    };
+
     const waitForModalWindowToHaveBeenClosed = async () => {
       await waitFor(() =>
         screen.queryByRole('textbox', { name: /name/i })
@@ -123,10 +141,9 @@ describe('Dashboard', () => {
     };
 
     beforeEach(async () => {
-      await setup();
+      setupFetchMock();
 
-      fetch.resetMocks();
+      await setup();
-      fetch.mockReturnValueOnce({ url: 'https://test-url-123456789.com' });
 
       const dashboardCreateResumeButton = await screen.findByTestId(
         createResumeButtonDataTestId,
@@ -235,6 +252,9 @@ describe('Dashboard', () => {
         ).filter((resume) => resume.name === resumeName);
         expect(actualUserResumesFiltered).toHaveLength(1);
         const createdResume = actualUserResumesFiltered[0];
+        expect(createdResume.id).toBeTruthy();
+        expect(createdResume.preview).toBeTruthy();
+        expect(createdResume.preview).toEqual(unsplashPhotoResponseUrl);
         expect(createdResume.createdAt).toBeTruthy();
         expect(createdResume.createdAt).toBeGreaterThanOrEqual(now);
         expect(createdResume.createdAt).toEqual(createdResume.updatedAt);

src/utils/index.js

@@ -54,8 +54,11 @@ export const getFieldProps = (formik, schema, name) => ({
   ...formik.getFieldProps(name),
 });
 
+export const unsplashPhotoRequestUrl =
+  'https://source.unsplash.com/featured/400x600';
+
 export const getUnsplashPhoto = async () => {
-  const response = await fetch('https://source.unsplash.com/featured/400x600');
+  const response = await fetch(unsplashPhotoRequestUrl);
   return response.url;
 };
 
@@ -121,3 +124,7 @@ export const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
   const blob = new Blob(byteArrays, { type: contentType });
   return blob;
 };
+
+export const delay = async (milliseconds) => {
+  await new Promise((resolve) => setTimeout(resolve, milliseconds));
+};