From c86e75115b3050a37e14930c262c5d795ba3ac60 Mon Sep 17 00:00:00 2001 From: Bilal Qamar <59555732+BilalQamar95@users.noreply.github.com> Date: Mon, 2 Oct 2023 16:23:50 +0500 Subject: [PATCH] refactor: updated DiscussionSettings tests --- .../discussions/DiscussionsSettings.test.jsx | 123 ++++++++++-------- 1 file changed, 66 insertions(+), 57 deletions(-) diff --git a/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx b/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx index eed19c1235..039eb9d820 100644 --- a/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx +++ b/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx @@ -196,18 +196,20 @@ describe('DiscussionsSettings', () => { // content has been loaded - prior to proceeding with our expectations. await waitForElementToBeRemoved(screen.getByRole('status')); - userEvent.click(queryByLabelText(container, 'Select Piazza')); + act(async () => { + userEvent.click(queryByLabelText(container, 'Select Piazza')); - userEvent.click(getByRole(container, 'button', { name: 'Next' })); + userEvent.click(getByRole(container, 'button', { name: 'Next' })); - userEvent.click(await findByRole(container, 'button', { name: 'Save' })); + userEvent.click(await findByRole(container, 'button', { name: 'Save' })); - // This is an important line that ensures the Close button has been removed, which implies that - // the full screen modal has been closed following our click of Apply. Once this has happened, - // then it's safe to proceed with our expectations. - await waitFor(() => expect(screen.queryByRole(container, 'button', { name: 'Close' })).toBeNull()); + // This is an important line that ensures the Close button has been removed, which implies that + // the full screen modal has been closed following our click of Apply. Once this has happened, + // then it's safe to proceed with our expectations. + await waitFor(() => expect(screen.queryByRole(container, 'button', { name: 'Close' })).toBeNull()); - setTimeout(() => expect(window.location.pathname).toEqual(`/course/${courseId}/pages-and-resources`), 0); + await waitFor(() => expect(window.location.pathname).toEqual(`/course/${courseId}/pages-and-resources`)); + }); }); test('requires confirmation if changing provider', async () => { @@ -219,16 +221,18 @@ describe('DiscussionsSettings', () => { // content has been loaded - prior to proceeding with our expectations. await waitForElementToBeRemoved(screen.getByRole('status')); - userEvent.click(getByRole(container, 'checkbox', { name: 'Select Discourse' })); - userEvent.click(getByRole(container, 'button', { name: 'Next' })); + act(async () => { + userEvent.click(getByRole(container, 'checkbox', { name: 'Select Discourse' })); + userEvent.click(getByRole(container, 'button', { name: 'Next' })); - await findByRole(container, 'button', { name: 'Save' }); - userEvent.type(getByRole(container, 'textbox', { name: 'Consumer Key' }), 'key'); - userEvent.type(getByRole(container, 'textbox', { name: 'Consumer Secret' }), 'secret'); - userEvent.type(getByRole(container, 'textbox', { name: 'Launch URL' }), 'http://example.test'); - userEvent.click(getByRole(container, 'button', { name: 'Save' })); + await findByRole(container, 'button', { name: 'Save' }); + userEvent.type(getByRole(container, 'textbox', { name: 'Consumer Key' }), 'key'); + userEvent.type(getByRole(container, 'textbox', { name: 'Consumer Secret' }), 'secret'); + userEvent.type(getByRole(container, 'textbox', { name: 'Launch URL' }), 'http://example.test'); + userEvent.click(getByRole(container, 'button', { name: 'Save' })); - setTimeout(() => expect(screen.getByRole(container, 'dialog', { name: 'OK' })).toBeInTheDocument(), 5000); + await waitFor(() => expect(queryByRole(container, 'dialog', { name: 'OK' })).toBeInTheDocument()); + }); }); test('can cancel confirmation', async () => { @@ -248,20 +252,20 @@ describe('DiscussionsSettings', () => { await waitFor(() => expect(screen.queryByRole('status')).toBeNull()); - expect(getByRole(container, 'heading', { name: 'Discourse' })).toBeInTheDocument(); + act(async () => { + expect(await findByRole(container, 'heading', { name: 'Discourse' })).toBeInTheDocument(); - userEvent.type(getByRole(container, 'textbox', { name: 'Consumer Key' }), 'a'); - userEvent.type(getByRole(container, 'textbox', { name: 'Consumer Secret' }), 'secret'); - userEvent.type(getByRole(container, 'textbox', { name: 'Launch URL' }), 'http://example.test'); - userEvent.click(getByRole(container, 'button', { name: 'Save' })); + userEvent.type(getByRole(container, 'textbox', { name: 'Consumer Key' }), 'a'); + userEvent.type(getByRole(container, 'textbox', { name: 'Consumer Secret' }), 'secret'); + userEvent.type(getByRole(container, 'textbox', { name: 'Launch URL' }), 'http://example.test'); + userEvent.click(getByRole(container, 'button', { name: 'Save' })); - setTimeout(() => { waitFor(() => expect(getByRole(container, 'dialog', { name: 'OK' })).toBeInTheDocument()); userEvent.click(getByRole(container, 'button', { name: 'Cancel' })); expect(queryByRole(container, 'dialog', { name: 'Confirm' })).not.toBeInTheDocument(); expect(queryByRole(container, 'dialog', { name: 'Configure discussion' })); - }, 4000); + }); }); }); @@ -316,18 +320,16 @@ describe('DiscussionsSettings', () => { await waitForElementToBeRemoved(screen.getByRole('status')); // Apply causes an async action to take place - await act(() => { + act(async () => { userEvent.click(queryByText(container, appMessages.saveButton.defaultMessage)); - }); + await waitFor(() => expect(axiosMock.history.post.length).toBe(1)); - setTimeout(() => { - expect(axiosMock.history.post.length).toBe(1); expect(queryByTestId(container, 'appConfigForm')).toBeInTheDocument(); - const alert = findByRole(container, 'alert'); + const alert = await findByRole(container, 'alert'); expect(alert).toBeInTheDocument(); expect(alert.textContent).toEqual(expect.stringContaining('We encountered a technical error when applying changes.')); expect(alert.innerHTML).toEqual(expect.stringContaining(getConfig().SUPPORT_URL)); - }, 4000); + }); }); }); @@ -369,20 +371,21 @@ describe('DiscussionsSettings', () => { // content has been loaded - prior to proceeding with our expectations. await waitForElementToBeRemoved(screen.getByRole('status')); - userEvent.click(getByRole(container, 'button', { name: 'Save' })); + act(async () => { + userEvent.click(getByRole(container, 'button', { name: 'Save' })); + + await waitFor(() => expect(axiosMock.history.post.length).toBe(1)); - setTimeout(() => { - expect(axiosMock.history.post.length).toBe(1); expect(queryByTestId(container, 'appList')).not.toBeInTheDocument(); expect(queryByTestId(container, 'appConfigForm')).not.toBeInTheDocument(); // We don't technically leave the route in this case, though the modal is hidden. expect(window.location.pathname).toEqual(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`); - const alert = findByRole(container, 'alert'); + const alert = await findByRole(container, 'alert'); expect(alert).toBeInTheDocument(); expect(alert.textContent).toEqual(expect.stringContaining('You are not authorized to view this page.')); - }, 3000); + }); }); }); }); @@ -427,19 +430,21 @@ describe.each([ // This is an important line that ensures the spinner has been removed - and thus our main // content has been loaded - prior to proceeding with our expectations. - await waitForElementToBeRemoved(screen.getByRole('status')); - - userEvent.click(queryByLabelText(container, 'Select Piazza')); - userEvent.click(queryByText(container, messages.nextButton.defaultMessage)); - await waitForElementToBeRemoved(screen.getByRole('status')); - - if (showLTIConfig) { - expect(queryByText(container, ltiMessages.formInstructions.defaultMessage)).toBeInTheDocument(); - expect(queryByTestId(container, 'ltiConfigFields')).toBeInTheDocument(); - } else { - expect(queryByText(container, ltiMessages.formInstructions.defaultMessage)).not.toBeInTheDocument(); - expect(queryByTestId(container, 'ltiConfigFields')).not.toBeInTheDocument(); - } + waitForElementToBeRemoved(screen.getByRole('status')); + + act(async () => { + userEvent.click(await screen.findByLabelText('Select Piazza')); + userEvent.click(queryByText(container, messages.nextButton.defaultMessage)); + waitForElementToBeRemoved(screen.getByRole('status')); + + if (showLTIConfig) { + expect(queryByText(container, ltiMessages.formInstructions.defaultMessage)).toBeInTheDocument(); + expect(queryByTestId(container, 'ltiConfigFields')).toBeInTheDocument(); + } else { + expect(queryByText(container, ltiMessages.formInstructions.defaultMessage)).not.toBeInTheDocument(); + expect(queryByTestId(container, 'ltiConfigFields')).not.toBeInTheDocument(); + } + }); }); }); @@ -483,15 +488,19 @@ describe.each([ // This is an important line that ensures the spinner has been removed - and thus our main // content has been loaded - prior to proceeding with our expectations. - await waitForElementToBeRemoved(screen.getByRole('status')); - - userEvent.click(queryByLabelText(container, 'Select Piazza')); - userEvent.click(queryByText(container, messages.nextButton.defaultMessage)); - await waitForElementToBeRemoved(screen.getByRole('status')); - if (enablePIISharing) { - expect(queryByTestId(container, 'piiSharingFields')).toBeInTheDocument(); - } else { - expect(queryByTestId(container, 'piiSharingFields')).not.toBeInTheDocument(); - } + waitForElementToBeRemoved(screen.getByRole('status')); + + act(async () => { + userEvent.click(await screen.findByLabelText('Select Piazza')); + userEvent.click(await screen.findByText(messages.nextButton.defaultMessage)); + + waitForElementToBeRemoved(screen.getByRole('status')); + if (enablePIISharing) { + expect(queryByTestId(container, 'piiSharingFields')).toBeInTheDocument(); + } else { + expect(queryByTestId(container, 'piiSharingFields')).not.toBeInTheDocument(); + } + }); }); }); +