Dashboard page: added unit test related to create resume interaction

jest.setup.js

@@ -1 +1,4 @@
 import '@testing-library/jest-dom/extend-expect';
+import fetchMock from 'jest-fetch-mock';
+
+fetchMock.enableMocks();

package-lock.json

@@ -16432,6 +16432,16 @@
         }
       }
     },
+    "jest-fetch-mock": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/jest-fetch-mock/-/jest-fetch-mock-3.0.3.tgz",
+      "integrity": "sha512-Ux1nWprtLrdrH4XwE7O7InRY6psIi3GOsqNESJgMJ+M5cv4A8Lh7SN9d2V2kKRZ8ebAfcd1LNyZguAOb6JiDqw==",
+      "dev": true,
+      "requires": {
+        "cross-fetch": "^3.0.4",
+        "promise-polyfill": "^8.1.3"
+      }
+    },
     "jest-get-type": {
       "version": "25.2.6",
       "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-25.2.6.tgz",

package.json

@@ -78,6 +78,7 @@
     "gatsby-plugin-eslint": "^2.0.8",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
+    "jest-fetch-mock": "^3.0.3",
     "prettier": "2.2.1",
     "stylelint": "^13.9.0",
     "stylelint-config-standard": "^20.0.0",

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

@@ -103,18 +103,32 @@ describe('Dashboard', () => {
   });
 
   describe('when resume is created', () => {
+    let nameTextBox = null;
+
+    const waitForModalToHaveBeenClosed = async () => {
+      await waitFor(() =>
+        screen.queryByRole('textbox', { name: /name/i })
+          ? Promise.reject()
+          : Promise.resolve(),
+      );
+    };
+
     beforeEach(async () => {
       await setup();
 
+      fetch.resetMocks();
+      fetch.mockReturnValueOnce({ url: 'https://test-url-123456789.com' });
+
       const dashboardCreateResumeButton = await screen.findByTestId(
         createResumeButtonDataTestId,
       );
       fireEvent.click(dashboardCreateResumeButton);
+
+      nameTextBox = screen.getByRole('textbox', { name: /name/i });
     });
 
     describe('with name shorter than 5 characters', () => {
       it('displays validation error and notification', async () => {
-        const nameTextBox = screen.getByRole('textbox', { name: /name/i });
         fireEvent.change(nameTextBox, { target: { value: 'CV 1' } });
 
         fireEvent.focusOut(nameTextBox);
@@ -140,6 +154,34 @@ describe('Dashboard', () => {
         fireEvent.click(notification);
       });
     });
+
+    describe('with valid name', () => {
+      it('renders loading message', async () => {
+        fireEvent.change(nameTextBox, {
+          target: { value: 'Resume for SW development roles' },
+        });
+
+        const modalCreateResumeButton = screen.getByRole('button', {
+          name: /create resume/i,
+        });
+        fireEvent.click(modalCreateResumeButton);
+
+        expect(
+          screen.getByRole('button', {
+            name: /loading/i,
+          }),
+        ).toBeInTheDocument();
+        await waitFor(() =>
+          expect(
+            screen.queryByRole('button', {
+              name: /loading/i,
+            }),
+          ).toBeNull(),
+        );
+
+        await waitForModalToHaveBeenClosed();
+      });
+    });
   });
 
   describe('when resume is deleted', () => {