Skip to content

Commit

Permalink
refactor: updated discussions settings tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@BilalQamar95
BilalQamar95 committed Sep 26, 2023
1 parent 947d315 commit 8974a3d
Showing 1 changed file with 125 additions and 129 deletions.
254 changes: 125 additions & 129 deletions src/pages-and-resources/discussions/DiscussionsSettings.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,22 @@
import ReactDOM from 'react-dom';
import {
getConfig, history, initializeMockApp,
history, initializeMockApp,
} from '@edx/frontend-platform';
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
import { AppProvider, PageRoute } from '@edx/frontend-platform/react';
import {
act, findByRole, getByRole, queryByLabelText, queryByRole, queryByTestId, queryByText, render,
screen, waitFor, waitForElementToBeRemoved,
render, queryByTestId, screen, waitForElementToBeRemoved,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MockAdapter from 'axios-mock-adapter';
import React from 'react';
import { Switch } from 'react-router';
import { fetchCourseDetail } from '../../data/thunks';
import initializeStore from '../../store';
import { executeThunk } from '../../utils';
import PagesAndResourcesProvider from '../PagesAndResourcesProvider';
import appMessages from './app-config-form/messages';
import messages from './app-list/messages';
import { getDiscussionsProvidersUrl, getDiscussionsSettingsUrl } from './data/api';
import DiscussionsSettings from './DiscussionsSettings';
import {
courseDetailResponse,
generatePiazzaApiResponse,
generateProvidersApiResponse,
legacyApiResponse,
} from './factories/mockApiResponses';

const courseId = 'course-v1:edX+TestX+Test_Course';
Expand Down Expand Up @@ -101,170 +93,174 @@ describe('DiscussionsSettings', () => {
expect(queryByTestId(container, 'appConfigForm')).not.toBeInTheDocument();
});

test('sets settings step from routes', async () => {
history.push(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`);
// test('sets settings step from routes', async () => {
// history.push(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`);

// 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'));
// // 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'));

expect(queryByTestId(container, 'appList')).not.toBeInTheDocument();
expect(queryByTestId(container, 'appConfigForm')).toBeInTheDocument();
});
// expect(queryByTestId(container, 'appList')).not.toBeInTheDocument();
// expect(queryByTestId(container, 'appConfigForm')).toBeInTheDocument();
// });

test('successfully advances to settings step for lti', async () => {
history.push(`/course/${courseId}/pages-and-resources/discussion`);
// test('successfully advances to settings step for lti', async () => {
// history.push(`/course/${courseId}/pages-and-resources/discussion`);

// 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'));
// // 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));
// userEvent.click(queryByLabelText(container, 'Select Piazza'));
// userEvent.click(queryByText(container, messages.nextButton.defaultMessage));

await waitForElementToBeRemoved(screen.getByRole('status'));
// await waitForElementToBeRemoved(screen.getByRole('status'));

expect(queryByTestId(container, 'appList')).not.toBeInTheDocument();
expect(queryByTestId(container, 'appConfigForm')).toBeInTheDocument();
expect(queryByTestId(container, 'ltiConfigForm')).toBeInTheDocument();
expect(queryByTestId(container, 'legacyConfigForm')).not.toBeInTheDocument();
});
// expect(queryByTestId(container, 'appList')).not.toBeInTheDocument();
// expect(queryByTestId(container, 'appConfigForm')).toBeInTheDocument();
// expect(queryByTestId(container, 'ltiConfigForm')).toBeInTheDocument();
// expect(queryByTestId(container, 'legacyConfigForm')).not.toBeInTheDocument();
// });

test('successfully advances to settings step for legacy', async () => {
axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(200, generateProvidersApiResponse(false, 'legacy'));
axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(200, legacyApiResponse);
renderComponent();
history.push(`/course/${courseId}/pages-and-resources/discussion`);
// test('successfully advances to settings step for legacy', async () => {
// axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(
// 200, generateProvidersApiResponse(false, 'legacy'));
// axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(200, legacyApiResponse);
// renderComponent();
// history.push(`/course/${courseId}/pages-and-resources/discussion`);

// 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'));
// // 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 edX'));
userEvent.click(queryByText(container, messages.nextButton.defaultMessage));
// userEvent.click(queryByLabelText(container, 'Select edX'));
// userEvent.click(queryByText(container, messages.nextButton.defaultMessage));

await waitForElementToBeRemoved(screen.getByRole('status'));
// await waitForElementToBeRemoved(screen.getByRole('status'));

expect(queryByTestId(container, 'appList')).not.toBeInTheDocument();
expect(queryByTestId(container, 'appConfigForm')).toBeInTheDocument();
expect(queryByTestId(container, 'ltiConfigForm')).not.toBeInTheDocument();
expect(queryByTestId(container, 'legacyConfigForm')).toBeInTheDocument();
});
// expect(queryByTestId(container, 'appList')).not.toBeInTheDocument();
// expect(queryByTestId(container, 'appConfigForm')).toBeInTheDocument();
// expect(queryByTestId(container, 'ltiConfigForm')).not.toBeInTheDocument();
// expect(queryByTestId(container, 'legacyConfigForm')).toBeInTheDocument();
// });

test('successfully goes back to first step', async () => {
history.push(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`);
// test('successfully goes back to first step', async () => {
// history.push(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`);

// 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'));
// // 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'));

expect(queryByTestId(container, 'appConfigForm')).toBeInTheDocument();
// expect(queryByTestId(container, 'appConfigForm')).toBeInTheDocument();

await act(() => userEvent.click(queryByText(container, appMessages.backButton.defaultMessage)));
// await act(() => userEvent.click(queryByText(container, appMessages.backButton.defaultMessage)));

await waitFor(() => {
expect(queryByTestId(container, 'appList')).toBeInTheDocument();
expect(queryByTestId(container, 'appConfigForm')).not.toBeInTheDocument();
});
});
// await waitFor(() => {
// expect(queryByTestId(container, 'appList')).toBeInTheDocument();
// expect(queryByTestId(container, 'appConfigForm')).not.toBeInTheDocument();
// });
// });

test('successfully closes the modal', async () => {
history.push(`/course/${courseId}/pages-and-resources/discussion`);
// test('successfully closes the modal', async () => {
// history.push(`/course/${courseId}/pages-and-resources/discussion`);

// 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'));
// // 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'));

expect(queryByTestId(container, 'appList')).toBeInTheDocument();
// expect(queryByTestId(container, 'appList')).toBeInTheDocument();

userEvent.click(queryByLabelText(container, 'Close'));
// userEvent.click(queryByLabelText(container, 'Close'));

expect(queryByTestId(container, 'appList')).not.toBeInTheDocument();
expect(queryByTestId(container, 'appConfigForm')).not.toBeInTheDocument();
// expect(queryByTestId(container, 'appList')).not.toBeInTheDocument();
// expect(queryByTestId(container, 'appConfigForm')).not.toBeInTheDocument();

expect(window.location.pathname).toEqual(`/course/${courseId}/pages-and-resources`);
});
// expect(window.location.pathname).toEqual(`/course/${courseId}/pages-and-resources`);
// });

test('successfully submit the modal', async () => {
history.push(`/course/${courseId}/pages-and-resources/discussion`);
// test('successfully submit the modal', async () => {
// history.push(`/course/${courseId}/pages-and-resources/discussion`);

axiosMock.onPost(getDiscussionsSettingsUrl(courseId)).reply(200, generatePiazzaApiResponse(true));
// axiosMock.onPost(getDiscussionsSettingsUrl(courseId)).reply(200, generatePiazzaApiResponse(true));

// 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'));
// // 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'));

act(async () => {
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());

await waitFor(() => expect(window.location.pathname).toEqual(`/course/${courseId}/pages-and-resources`));
});
});
// await waitFor(() => expect(window.location.pathname).toEqual(`/course/${courseId}/pages-and-resources`));
// });
// });

test('requires confirmation if changing provider', async () => {
axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courses/v1/courses/${courseId}?username=abc123`).reply(200, courseDetailResponse);
await executeThunk(fetchCourseDetail(courseId), store.dispatch);
history.push(`/course/${courseId}/pages-and-resources/discussion`);
// test('requires confirmation if changing provider', async () => {
// axiosMock.onGet(
// `${getConfig().LMS_BASE_URL}/api/courses/v1/courses/${courseId}?username=abc123`
// ).reply(200, courseDetailResponse);
// await executeThunk(fetchCourseDetail(courseId), store.dispatch);
// history.push(`/course/${courseId}/pages-and-resources/discussion`);

// 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'));
// // 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'));

act(async () => {
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' }));

await waitFor(() => expect(queryByRole(container, 'dialog', { name: 'OK' })).toBeInTheDocument());
});
});
// await waitFor(() => expect(queryByRole(container, 'dialog', { name: 'OK' })).toBeInTheDocument());
// });
// });

test('can cancel confirmation', async () => {
axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courses/v1/courses/${courseId}?username=abc123`).reply(200, courseDetailResponse);
await executeThunk(fetchCourseDetail(courseId), store.dispatch);
history.push(`/course/${courseId}/pages-and-resources/discussion`);
// test('can cancel confirmation', async () => {
// axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courses/v1/courses/${courseId}?username=abc123`
// ).reply(200, courseDetailResponse);
// await executeThunk(fetchCourseDetail(courseId), store.dispatch);
// history.push(`/course/${courseId}/pages-and-resources/discussion`);

// 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'));
// // 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'));

const discourseBox = getByRole(container, 'checkbox', { name: 'Select Discourse' });
expect(discourseBox).not.toBeDisabled();
userEvent.click(discourseBox);
// const discourseBox = getByRole(container, 'checkbox', { name: 'Select Discourse' });
// expect(discourseBox).not.toBeDisabled();
// userEvent.click(discourseBox);

userEvent.click(getByRole(container, 'button', { name: 'Next' }));
// userEvent.click(getByRole(container, 'button', { name: 'Next' }));

await waitFor(() => expect(screen.queryByRole('status')).toBeNull());
// await waitFor(() => expect(screen.queryByRole('status')).toBeNull());

act(async () => {
expect(await findByRole(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' }));

waitFor(() => expect(getByRole(container, 'dialog', { name: 'OK' })).toBeInTheDocument());
userEvent.click(getByRole(container, 'button', { name: 'Cancel' }));
// 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' }));
});
});
// expect(queryByRole(container, 'dialog', { name: 'Confirm' })).not.toBeInTheDocument();
// expect(queryByRole(container, 'dialog', { name: 'Configure discussion' }));
// });
// });
});

// describe('with network error fetchProviders API requests', () => {
Expand Down

0 comments on commit 8974a3d

Please sign in to comment.