diff --git a/jest.setup.js b/jest.setup.js index 666127af..91550372 100644 --- a/jest.setup.js +++ b/jest.setup.js @@ -1 +1,4 @@ import '@testing-library/jest-dom/extend-expect'; +import fetchMock from 'jest-fetch-mock'; + +fetchMock.enableMocks(); diff --git a/package-lock.json b/package-lock.json index 480ac2e8..5bc6c4b1 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index bfc9d28c..920f33f3 100644 --- a/package.json +++ b/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", diff --git a/src/pages/app/__tests__/dashboard.test.js b/src/pages/app/__tests__/dashboard.test.js index 331f940b..d5eba509 100644 --- a/src/pages/app/__tests__/dashboard.test.js +++ b/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', () => {