Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test: upgrading user-event to v14 (#2277)

Browse Source
This commit is contained in:
jacobo-dominguez-wgu
2025-07-17 10:26:16 -06:00
committed by GitHub
parent a51ff99042
commit 2db6d89fca
73 changed files with 1007 additions and 777 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/generic/configure-modal/ConfigureModal.test.jsx
View File

@@ -71,11 +71,12 @@ describe('<ConfigureModal /> for Section', () => {
expect(getByRole('button', { name: messages.saveButton.defaultMessage })).toBeInTheDocument();
});
it('switches to the Visibility tab and renders correctly', () => {
it('switches to the Visibility tab and renders correctly', async () => {
const user = userEvent.setup();
const { getByRole, getByText } = renderComponent();
const visibilityTab = getByRole('tab', { name: messages.visibilityTabTitle.defaultMessage });
userEvent.click(visibilityTab);
await user.click(visibilityTab);
expect(getByText('Section visibility')).toBeInTheDocument();
expect(getByText(messages.hideFromLearners.defaultMessage)).toBeInTheDocument();
});
@@ -134,11 +135,12 @@ describe('<ConfigureModal /> for Subsection', () => {
expect(queryByText(messages.dueTimeUTC.defaultMessage)).not.toBeInTheDocument();
});
it('switches to the subsection Visibility tab and renders correctly', () => {
it('switches to the subsection Visibility tab and renders correctly', async () => {
const user = userEvent.setup();
const { getByRole, getByText } = renderSubsectionComponent();
const visibilityTab = getByRole('tab', { name: messages.visibilityTabTitle.defaultMessage });
userEvent.click(visibilityTab);
await user.click(visibilityTab);
expect(getByText('Subsection visibility')).toBeInTheDocument();
expect(getByText(messages.showEntireSubsection.defaultMessage)).toBeInTheDocument();
expect(getByText(messages.showEntireSubsectionDescription.defaultMessage)).toBeInTheDocument();
@@ -155,11 +157,12 @@ describe('<ConfigureModal /> for Subsection', () => {
expect(getByText(messages.showAssessmentResultsPastDueDescription.defaultMessage)).toBeInTheDocument();
});
it('switches to the subsection Advanced tab and renders correctly', () => {
it('switches to the subsection Advanced tab and renders correctly', async () => {
const user = userEvent.setup();
const { getByRole, getByText } = renderSubsectionComponent();
const advancedTab = getByRole('tab', { name: messages.advancedTabTitle.defaultMessage });
userEvent.click(advancedTab);
await user.click(advancedTab);
expect(getByText(messages.setSpecialExam.defaultMessage)).toBeInTheDocument();
expect(getByText(messages.none.defaultMessage)).toBeInTheDocument();
expect(getByText(messages.timed.defaultMessage)).toBeInTheDocument();
@@ -195,7 +198,8 @@ describe('<ConfigureModal /> for Unit', () => {
store = initializeStore();
});
it('renders unit ConfigureModal component correctly', () => {
it('renders unit ConfigureModal component correctly', async () => {
const user = userEvent.setup();
const {
getByText, queryByText, getByRole, getByTestId,
} = renderUnitComponent();
@@ -209,15 +213,19 @@ describe('<ConfigureModal /> for Unit', () => {
expect(queryByText(messages.unitSelectGroup.defaultMessage)).not.toBeInTheDocument();
const input = getByTestId('group-type-select');
['0', '1'].forEach(groupeTypeIndex => {
userEvent.selectOptions(input, groupeTypeIndex);
await user.selectOptions(input, '0');
expect(getByText(messages.unitSelectGroup.defaultMessage)).toBeInTheDocument();
currentUnitMock
.userPartitionInfo
.selectablePartitions['0'].groups
.forEach(g => expect(getByText(g.name)).toBeInTheDocument());
expect(getByText(messages.unitSelectGroup.defaultMessage)).toBeInTheDocument();
currentUnitMock
.userPartitionInfo
.selectablePartitions[groupeTypeIndex].groups
.forEach(g => expect(getByText(g.name)).toBeInTheDocument());
});
await user.selectOptions(input, '1');
expect(getByText(messages.unitSelectGroup.defaultMessage)).toBeInTheDocument();
currentUnitMock
.userPartitionInfo
.selectablePartitions['1'].groups
.forEach(g => expect(getByText(g.name)).toBeInTheDocument());
expect(getByRole('button', { name: messages.cancelButton.defaultMessage })).toBeInTheDocument();
expect(getByRole('button', { name: messages.saveButton.defaultMessage })).toBeInTheDocument();
@@ -257,7 +265,8 @@ describe('<ConfigureModal /> for XBlock', () => {
store = initializeStore();
});
it('renders unit ConfigureModal component correctly', () => {
it('renders unit ConfigureModal component correctly', async () => {
const user = userEvent.setup();
const {
getByText, queryByText, getByRole, getByTestId,
} = renderXBlockComponent();
@@ -270,15 +279,19 @@ describe('<ConfigureModal /> for XBlock', () => {
expect(queryByText(messages.unitSelectGroup.defaultMessage)).not.toBeInTheDocument();
const input = getByTestId('group-type-select');
['0', '1'].forEach(groupeTypeIndex => {
userEvent.selectOptions(input, groupeTypeIndex);
await user.selectOptions(input, '0');
expect(getByText(messages.unitSelectGroup.defaultMessage)).toBeInTheDocument();
currentUnitMock
.userPartitionInfo
.selectablePartitions['0'].groups
.forEach(g => expect(getByText(g.name)).toBeInTheDocument());
expect(getByText(messages.unitSelectGroup.defaultMessage)).toBeInTheDocument();
currentUnitMock
.userPartitionInfo
.selectablePartitions[groupeTypeIndex].groups
.forEach(g => expect(getByText(g.name)).toBeInTheDocument());
});
await user.selectOptions(input, '1');
expect(getByText(messages.unitSelectGroup.defaultMessage)).toBeInTheDocument();
currentUnitMock
.userPartitionInfo
.selectablePartitions['1'].groups
.forEach(g => expect(getByText(g.name)).toBeInTheDocument());
expect(getByRole('button', { name: messages.cancelButton.defaultMessage })).toBeInTheDocument();
expect(getByRole('button', { name: messages.saveButton.defaultMessage })).toBeInTheDocument();

21
src/generic/create-or-rerun-course/CreateOrRerunCourseForm.test.jsx
View File

@@ -135,6 +135,7 @@ describe('<CreateOrRerunCourseForm />', () => {
describe('handleOnClickCreate', () => {
it('should call window.location.assign with url', async () => {
const user = userEvent.setup();
render(<RootWrapper {...props} />);
await mockStore();
const url = '/course/courseId';
@@ -144,17 +145,18 @@ describe('<CreateOrRerunCourseForm />', () => {
const runInput = screen.getByPlaceholderText(messages.courseRunPlaceholder.defaultMessage);
const createBtn = screen.getByRole('button', { name: messages.createButton.defaultMessage });
userEvent.type(displayNameInput, 'foo course name');
await user.type(displayNameInput, 'foo course name');
fireEvent.click(orgInput);
userEvent.type(numberInput, '777');
userEvent.type(runInput, '1');
userEvent.click(createBtn);
await user.type(numberInput, '777');
await user.type(runInput, '1');
await user.click(createBtn);
await axiosMock.onPost(getCreateOrRerunCourseUrl()).reply(200, { url });
await executeThunk(updateCreateOrRerunCourseQuery({ org: 'testX', run: 'some' }), store.dispatch);
expect(mockedUsedNavigate).toHaveBeenCalledWith(url);
});
it('should call window.location.assign with url and destinationCourseKey', async () => {
const user = userEvent.setup();
render(<RootWrapper {...props} />);
await mockStore();
const url = '/course/';
@@ -166,11 +168,11 @@ describe('<CreateOrRerunCourseForm />', () => {
const createBtn = screen.getByRole('button', { name: messages.createButton.defaultMessage });
await axiosMock.onPost(getCreateOrRerunCourseUrl()).reply(200, { url, destinationCourseKey });
userEvent.type(displayNameInput, 'foo course name');
await user.type(displayNameInput, 'foo course name');
fireEvent.click(orgInput);
userEvent.type(numberInput, '777');
userEvent.type(runInput, '1');
userEvent.click(createBtn);
await user.type(numberInput, '777');
await user.type(runInput, '1');
await user.click(createBtn);
await executeThunk(updateCreateOrRerunCourseQuery({ org: 'testX', run: 'some' }), store.dispatch);
expect(mockedUsedNavigate).toHaveBeenCalledWith(`${url}${destinationCourseKey}`);
@@ -215,6 +217,7 @@ describe('<CreateOrRerunCourseForm />', () => {
});
it('should be disabled create button if form has error', async () => {
const user = userEvent.setup();
render(<RootWrapper {...props} />);
await mockStore();
const createBtn = await screen.findByRole('button', { name: messages.createButton.defaultMessage });
@@ -224,7 +227,7 @@ describe('<CreateOrRerunCourseForm />', () => {
const runInput = await screen.findByPlaceholderText(messages.courseRunPlaceholder.defaultMessage);
fireEvent.change(displayNameInput, { target: { value: 'foo course name' } });
await userEvent.click(orgInput);
await user.click(orgInput);
fireEvent.change(numberInput, { target: { value: 'number with invalid (+) symbol' } });
fireEvent.change(runInput, { target: { value: 'number with invalid (=) symbol' } });

10
src/generic/delete-modal/DeleteModal.test.jsx
View File

@@ -63,19 +63,21 @@ describe('<DeleteModal />', () => {
expect(getByRole('button', { name: messages.deleteButton.defaultMessage })).toBeInTheDocument();
});
it('calls onDeleteSubmit function when the "Delete" button is clicked', () => {
it('calls onDeleteSubmit function when the "Delete" button is clicked', async () => {
const user = userEvent.setup();
const { getByRole } = renderComponent();
const okButton = getByRole('button', { name: messages.deleteButton.defaultMessage });
userEvent.click(okButton);
await user.click(okButton);
expect(onDeleteSubmitMock).toHaveBeenCalledTimes(1);
});
it('calls the close function when the "Cancel" button is clicked', () => {
it('calls the close function when the "Cancel" button is clicked', async () => {
const user = userEvent.setup();
const { getByRole } = renderComponent();
const cancelButton = getByRole('button', { name: messages.cancelButton.defaultMessage });
userEvent.click(cancelButton);
await user.click(cancelButton);
expect(closeMock).toHaveBeenCalledTimes(1);
});

25
src/generic/modal-dropzone/ModalDropzone.test.jsx
View File

@@ -68,15 +68,17 @@ describe('<ModalDropzone />', () => {
});
it('calls onClose when close button is clicked', async () => {
const user = userEvent.setup();
const { getByText } = render(<RootWrapper {...props} />);
userEvent.click(getByText(messages.cancelModal.defaultMessage));
await user.click(getByText(messages.cancelModal.defaultMessage));
expect(mockOnClose).toHaveBeenCalled();
});
it('calls onCancel when cancel button is clicked', () => {
it('calls onCancel when cancel button is clicked', async () => {
const user = userEvent.setup();
const { getByText } = render(<RootWrapper {...props} />);
userEvent.click(getByText(messages.cancelModal.defaultMessage));
await user.click(getByText(messages.cancelModal.defaultMessage));
expect(mockOnCancel).toHaveBeenCalled();
});
@@ -89,12 +91,13 @@ describe('<ModalDropzone />', () => {
});
it('enables the upload button after a file is selected', async () => {
const user = userEvent.setup();
const { getByRole } = render(<RootWrapper {...props} />);
const dropzoneInput = getByRole('presentation', { hidden: true }).firstChild;
const uploadButton = getByRole('button', { name: messages.uploadModal.defaultMessage });
expect(uploadButton).toBeDisabled();
userEvent.upload(dropzoneInput, file);
await user.upload(dropzoneInput, file);
await waitFor(() => {
expect(dropzoneInput.files[0]).toStrictEqual(file);
@@ -104,6 +107,7 @@ describe('<ModalDropzone />', () => {
});
it('should successfully upload an asset and return the URL', async () => {
const user = userEvent.setup();
const mockUrl = `${baseUrl}/assets/course-123/test-file.png`;
axiosMock.onPost(getUploadAssetsUrl(courseId).href).reply(200, {
asset: { url: mockUrl },
@@ -112,21 +116,19 @@ describe('<ModalDropzone />', () => {
expect(response.asset.url).toBe(mockUrl);
const { getByRole, getByAltText } = render(<RootWrapper {...props} />);
const { getByRole, getByLabelText } = render(<RootWrapper {...props} />);
const dropzoneInput = getByRole('presentation', { hidden: true }).firstChild;
const uploadButton = getByRole('button', { name: messages.uploadModal.defaultMessage });
userEvent.upload(dropzoneInput, file);
await user.upload(dropzoneInput, file);
await waitFor(() => {
expect(uploadButton).not.toBeDisabled();
});
userEvent.click(uploadButton);
await user.click(uploadButton);
await waitFor(() => {
expect(getByAltText(messages.uploadImageDropzoneAlt.defaultMessage)).toBeInTheDocument();
});
expect(getByLabelText(messages.uploadImageDropzoneAlt.defaultMessage)).toBeInTheDocument();
});
it('should handle an upload error', async () => {
@@ -136,6 +138,7 @@ describe('<ModalDropzone />', () => {
});
it('displays a custom error message when the file size exceeds the limit', async () => {
const user = userEvent.setup();
const maxSizeInBytes = 20 * 1000 * 1000;
const expectedErrorMessage = 'Custom error message';
@@ -150,7 +153,7 @@ describe('<ModalDropzone />', () => {
{ type: 'image/png' },
);
userEvent.upload(dropzoneInput.firstChild, fileToUpload);
await user.upload(dropzoneInput.firstChild, fileToUpload);
await waitFor(() => {
expect(getByText(expectedErrorMessage)).toBeInTheDocument();

3
src/generic/processing-notification/ProcessingNotification.test.jsx
View File

@@ -19,12 +19,13 @@ describe('<ProcessingNotification />', () => {
});
it('renders successfully', async () => {
const user = userEvent.setup();
render(<ProcessingNotification {...props} close={() => {}} />);
await screen.findByText(props.title);
const undo = await screen.findByText('Undo');
const alert = await screen.findByRole('alert', { hidden: true });
expect(alert.classList.contains('processing-notification-hide-close-button')).toBeFalsy();
await userEvent.click(undo);
await user.click(undo);
expect(mockUndo).toHaveBeenCalled();
});