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

247
src/course-unit/CourseUnit.test.jsx
View File

@@ -341,6 +341,7 @@ describe('<CourseUnit />', () => {
});
it('checks whether xblock is removed when the corresponding delete button is clicked and the sidebar is the updated', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
await waitFor(async () => {
@@ -372,7 +373,7 @@ describe('<CourseUnit />', () => {
});
expect(screen.getByRole('dialog')).toBeInTheDocument();
userEvent.click(deleteButton);
await user.click(deleteButton);
});
axiosMock
@@ -465,6 +466,7 @@ describe('<CourseUnit />', () => {
});
it('checks if xblock is a duplicate when the corresponding duplicate button is clicked and if the sidebar status is updated', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
simulatePostMessageEvent(messageTypes.duplicateXBlock, {
@@ -499,19 +501,19 @@ describe('<CourseUnit />', () => {
children: updatedCourseVerticalChildren,
});
await waitFor(() => {
userEvent.click(screen.getByRole('button', { name: sidebarMessages.actionButtonPublishTitle.defaultMessage }));
await user.click(
await screen.findByRole('button', { name: sidebarMessages.actionButtonPublishTitle.defaultMessage }),
);
const iframe = screen.getByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);
expect(iframe).toHaveAttribute(
'aria-label',
xblockContainerIframeMessages.xblockIframeLabel.defaultMessage
.replace('{xblockCount}', courseVerticalChildrenMock.children.length),
);
const iframe = screen.getByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);
expect(iframe).toHaveAttribute(
'aria-label',
xblockContainerIframeMessages.xblockIframeLabel.defaultMessage
.replace('{xblockCount}', courseVerticalChildrenMock.children.length),
);
simulatePostMessageEvent(messageTypes.duplicateXBlock, {
id: courseVerticalChildrenMock.children[0].block_id,
});
simulatePostMessageEvent(messageTypes.duplicateXBlock, {
id: courseVerticalChildrenMock.children[0].block_id,
});
axiosMock
@@ -549,37 +551,36 @@ describe('<CourseUnit />', () => {
.reply(200, courseSectionVerticalMock);
await executeThunk(editCourseUnitVisibilityAndData(blockId, PUBLISH_TYPES.makePublic, true), store.dispatch);
await waitFor(() => {
const iframe = screen.getByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);
expect(iframe).toHaveAttribute(
'aria-label',
xblockContainerIframeMessages.xblockIframeLabel.defaultMessage
.replace('{xblockCount}', updatedCourseVerticalChildren.length),
);
const xblockIframe = await screen.findByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);
expect(xblockIframe).toHaveAttribute(
'aria-label',
xblockContainerIframeMessages.xblockIframeLabel.defaultMessage
.replace('{xblockCount}', updatedCourseVerticalChildren.length),
);
// after duplicate the xblock, the sidebar status changes to Draft (unpublished changes)
expect(screen.getByText(sidebarMessages.sidebarTitleDraftUnpublishedChanges.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(sidebarMessages.visibilityStaffAndLearnersTitle.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(sidebarMessages.releaseStatusTitle.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(sidebarMessages.sidebarBodyNote.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(sidebarMessages.visibilityWillBeVisibleToTitle.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(sidebarMessages.visibilityCheckboxTitle.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(sidebarMessages.actionButtonPublishTitle.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(sidebarMessages.actionButtonDiscardChangesTitle.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(courseSectionVerticalMock.xblock_info.release_date)).toBeInTheDocument();
expect(screen.getByText(
sidebarMessages.publishInfoDraftSaved.defaultMessage
.replace('{editedOn}', courseSectionVerticalMock.xblock_info.edited_on)
.replace('{editedBy}', courseSectionVerticalMock.xblock_info.edited_by),
)).toBeInTheDocument();
expect(screen.getByText(
sidebarMessages.releaseInfoWithSection.defaultMessage
.replace('{sectionName}', courseSectionVerticalMock.xblock_info.release_date_from),
)).toBeInTheDocument();
});
// after duplicate the xblock, the sidebar status changes to Draft (unpublished changes)
expect(screen.getByText(sidebarMessages.sidebarTitleDraftUnpublishedChanges.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(sidebarMessages.visibilityStaffAndLearnersTitle.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(sidebarMessages.releaseStatusTitle.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(sidebarMessages.sidebarBodyNote.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(sidebarMessages.visibilityWillBeVisibleToTitle.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(sidebarMessages.visibilityCheckboxTitle.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(sidebarMessages.actionButtonPublishTitle.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(sidebarMessages.actionButtonDiscardChangesTitle.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(courseSectionVerticalMock.xblock_info.release_date)).toBeInTheDocument();
expect(screen.getByText(
sidebarMessages.publishInfoDraftSaved.defaultMessage
.replace('{editedOn}', courseSectionVerticalMock.xblock_info.edited_on)
.replace('{editedBy}', courseSectionVerticalMock.xblock_info.edited_by),
)).toBeInTheDocument();
expect(screen.getByText(
sidebarMessages.releaseInfoWithSection.defaultMessage
.replace('{sectionName}', courseSectionVerticalMock.xblock_info.release_date_from),
)).toBeInTheDocument();
});
it('handles CourseUnit header action buttons', async () => {
const user = userEvent.setup();
const { open } = window;
window.open = jest.fn();
render(<RootWrapper />);
@@ -588,14 +589,14 @@ describe('<CourseUnit />', () => {
published_preview_link: publishedPreviewLink,
} = courseSectionVerticalMock;
await waitFor(() => {
await waitFor(async () => {
const viewLiveButton = screen.getByRole('button', { name: headerNavigationsMessages.viewLiveButton.defaultMessage });
userEvent.click(viewLiveButton);
await user.click(viewLiveButton);
expect(window.open).toHaveBeenCalled();
expect(window.open).toHaveBeenCalledWith(publishedPreviewLink, '_blank');
const previewButton = screen.getByRole('button', { name: headerNavigationsMessages.previewButton.defaultMessage });
userEvent.click(previewButton);
await user.click(previewButton);
expect(window.open).toHaveBeenCalled();
expect(window.open).toHaveBeenCalledWith(draftPreviewLink, '_blank');
});
@@ -604,6 +605,7 @@ describe('<CourseUnit />', () => {
});
it('checks courseUnit title changing when edit query is successfully', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
let editTitleButton = null;
let titleEditField = null;
@@ -650,12 +652,12 @@ describe('<CourseUnit />', () => {
.queryByRole('textbox', { name: headerTitleMessages.ariaLabelButtonEdit.defaultMessage });
});
expect(titleEditField).not.toBeInTheDocument();
userEvent.click(editTitleButton);
await user.click(editTitleButton);
titleEditField = screen.getByRole('textbox', { name: headerTitleMessages.ariaLabelButtonEdit.defaultMessage });
await userEvent.clear(titleEditField);
await userEvent.type(titleEditField, newDisplayName);
await userEvent.tab();
await user.clear(titleEditField);
await user.type(titleEditField, newDisplayName);
await user.tab();
expect(titleEditField).toHaveValue(newDisplayName);
@@ -666,30 +668,32 @@ describe('<CourseUnit />', () => {
});
it('doesn\'t handle creating xblock and displays an error message', async () => {
const user = userEvent.setup();
const { courseKey, locator } = courseCreateXblockMock;
axiosMock
.onPost(postXBlockBaseApiUrl({ type: 'video', category: 'video', parentLocator: blockId }))
.reply(500, {});
const { getByRole } = render(<RootWrapper />);
await waitFor(() => {
await waitFor(async () => {
const videoButton = getByRole('button', {
name: new RegExp(`${addComponentMessages.buttonText.defaultMessage} Video`, 'i'),
});
userEvent.click(videoButton);
await user.click(videoButton);
expect(mockedUsedNavigate).not.toHaveBeenCalledWith(`/course/${courseKey}/editor/video/${locator}`);
});
});
it('handle creating Problem xblock and showing editor modal', async () => {
const user = userEvent.setup();
axiosMock
.onPost(postXBlockBaseApiUrl({ type: 'problem', category: 'problem', parentLocator: blockId }))
.reply(200, courseCreateXblockMock);
render(<RootWrapper />);
await waitFor(() => {
userEvent.click(screen.getByRole('button', { name: sidebarMessages.actionButtonPublishTitle.defaultMessage }));
await waitFor(async () => {
await user.click(screen.getByRole('button', { name: sidebarMessages.actionButtonPublishTitle.defaultMessage }));
});
axiosMock
@@ -711,13 +715,13 @@ describe('<CourseUnit />', () => {
await executeThunk(editCourseUnitVisibilityAndData(blockId, PUBLISH_TYPES.makePublic, true), store.dispatch);
await waitFor(() => {
await waitFor(async () => {
const problemButton = screen.getByRole('button', {
name: new RegExp(`problem ${addComponentMessages.buttonText.defaultMessage} Problem`, 'i'),
hidden: true,
});
userEvent.click(problemButton);
await user.click(problemButton);
});
axiosMock
@@ -748,6 +752,7 @@ describe('<CourseUnit />', () => {
});
it('correct addition of a new course unit after click on the "Add new unit" button', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
let units = null;
const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
@@ -780,7 +785,7 @@ describe('<CourseUnit />', () => {
const updatedCourseUnits = updatedCourseSectionVerticalData
.xblock_info.ancestor_info.ancestors[0].child_info.children;
userEvent.click(addNewUnitBtn);
await user.click(addNewUnitBtn);
expect(units.length).toEqual(updatedCourseUnits.length);
expect(mockedUsedNavigate).toHaveBeenCalled();
expect(mockedUsedNavigate)
@@ -788,6 +793,7 @@ describe('<CourseUnit />', () => {
});
it('the sequence unit is updated after changing the unit header', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
const updatedAncestorsChild = updatedCourseSectionVerticalData.xblock_info.ancestor_info.ancestors[0];
@@ -826,13 +832,13 @@ describe('<CourseUnit />', () => {
const unitHeaderTitle = screen.getByTestId('unit-header-title');
const editTitleButton = within(unitHeaderTitle).getByRole('button', { name: headerTitleMessages.altButtonEdit.defaultMessage });
userEvent.click(editTitleButton);
await user.click(editTitleButton);
const titleEditField = within(unitHeaderTitle).getByRole('textbox', { name: headerTitleMessages.ariaLabelButtonEdit.defaultMessage });
await userEvent.clear(titleEditField);
await userEvent.type(titleEditField, newDisplayName);
await userEvent.tab();
await user.clear(titleEditField);
await user.type(titleEditField, newDisplayName);
await user.tab();
await waitFor(async () => {
const units = screen.getAllByTestId('course-unit-btn');
@@ -841,6 +847,7 @@ describe('<CourseUnit />', () => {
});
it('handles creating Video xblock and showing editor modal using videogalleryflow', async () => {
const user = userEvent.setup();
const waffleSpy = mockWaffleFlags({ useVideoGalleryFlow: true });
axiosMock
@@ -848,8 +855,8 @@ describe('<CourseUnit />', () => {
.reply(200, courseCreateXblockMock);
render(<RootWrapper />);
await waitFor(() => {
userEvent.click(screen.getByRole('button', { name: sidebarMessages.actionButtonPublishTitle.defaultMessage }));
await waitFor(async () => {
await user.click(screen.getByRole('button', { name: sidebarMessages.actionButtonPublishTitle.defaultMessage }));
});
axiosMock
@@ -888,7 +895,7 @@ describe('<CourseUnit />', () => {
hidden: true,
});
userEvent.click(videoButton);
await user.click(videoButton);
axiosMock
.onGet(getCourseSectionVerticalApiUrl(blockId))
@@ -923,10 +930,11 @@ describe('<CourseUnit />', () => {
axiosMock
.onPost(postXBlockBaseApiUrl({ type: 'video', category: 'video', parentLocator: blockId }))
.reply(200, courseCreateXblockMock);
const user = userEvent.setup();
render(<RootWrapper />);
await waitFor(() => {
userEvent.click(screen.getByRole('button', { name: sidebarMessages.actionButtonPublishTitle.defaultMessage }));
await waitFor(async () => {
await user.click(screen.getByRole('button', { name: sidebarMessages.actionButtonPublishTitle.defaultMessage }));
});
axiosMock
@@ -948,7 +956,7 @@ describe('<CourseUnit />', () => {
await executeThunk(editCourseUnitVisibilityAndData(blockId, PUBLISH_TYPES.makePublic, true), store.dispatch);
await waitFor(() => {
await waitFor(async () => {
// check if the sidebar status is Published and Live
expect(screen.getByText(sidebarMessages.sidebarTitlePublishedAndLive.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(
@@ -963,7 +971,7 @@ describe('<CourseUnit />', () => {
hidden: true,
});
userEvent.click(videoButton);
await user.click(videoButton);
});
/** TODO -- fix this test.
@@ -1073,12 +1081,13 @@ describe('<CourseUnit />', () => {
});
it('should toggle visibility from sidebar and update course unit state accordingly', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
let courseUnitSidebar;
let draftUnpublishedChangesHeading;
let visibilityCheckbox;
await waitFor(() => {
await waitFor(async () => {
courseUnitSidebar = screen.getByTestId('course-unit-sidebar');
draftUnpublishedChangesHeading = within(courseUnitSidebar)
@@ -1089,7 +1098,7 @@ describe('<CourseUnit />', () => {
.getByLabelText(sidebarMessages.visibilityCheckboxTitle.defaultMessage);
expect(visibilityCheckbox).not.toBeChecked();
userEvent.click(visibilityCheckbox);
await user.click(visibilityCheckbox);
});
axiosMock
@@ -1117,7 +1126,7 @@ describe('<CourseUnit />', () => {
expect(within(courseUnitSidebar)
.getByText(sidebarMessages.visibilityStaffOnlyTitle.defaultMessage)).toBeInTheDocument();
userEvent.click(visibilityCheckbox);
await user.click(visibilityCheckbox);
const modalNotification = screen.getByRole('dialog');
const makeVisibilityBtn = within(modalNotification).getByRole('button', { name: sidebarMessages.modalMakeVisibilityActionButtonText.defaultMessage });
@@ -1130,7 +1139,7 @@ describe('<CourseUnit />', () => {
expect(within(modalNotification)
.getByText(sidebarMessages.modalMakeVisibilityDescription.defaultMessage)).toBeInTheDocument();
userEvent.click(makeVisibilityBtn);
await user.click(makeVisibilityBtn);
axiosMock
.onPost(getXBlockBaseApiUrl(blockId), {
@@ -1151,16 +1160,17 @@ describe('<CourseUnit />', () => {
});
it('should publish course unit after click on the "Publish" button', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
let courseUnitSidebar;
let publishBtn;
await waitFor(() => {
await waitFor(async () => {
courseUnitSidebar = screen.getByTestId('course-unit-sidebar');
publishBtn = within(courseUnitSidebar).queryByRole('button', { name: sidebarMessages.actionButtonPublishTitle.defaultMessage });
expect(publishBtn).toBeInTheDocument();
userEvent.click(publishBtn);
await user.click(publishBtn);
});
axiosMock
@@ -1193,11 +1203,12 @@ describe('<CourseUnit />', () => {
});
it('should discard changes after click on the "Discard changes" button', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
let courseUnitSidebar;
let discardChangesBtn;
await waitFor(() => {
await waitFor(async () => {
courseUnitSidebar = screen.getByTestId('course-unit-sidebar');
const draftUnpublishedChangesHeading = within(courseUnitSidebar)
@@ -1206,7 +1217,7 @@ describe('<CourseUnit />', () => {
discardChangesBtn = within(courseUnitSidebar).queryByRole('button', { name: sidebarMessages.actionButtonDiscardChangesTitle.defaultMessage });
expect(discardChangesBtn).toBeInTheDocument();
userEvent.click(discardChangesBtn);
await user.click(discardChangesBtn);
const modalNotification = screen.getByRole('dialog');
expect(modalNotification).toBeInTheDocument();
@@ -1219,7 +1230,7 @@ describe('<CourseUnit />', () => {
const actionBtn = within(modalNotification).getByRole('button', { name: sidebarMessages.modalDiscardUnitChangesActionButtonText.defaultMessage });
expect(actionBtn).toBeInTheDocument();
userEvent.click(actionBtn);
await user.click(actionBtn);
});
axiosMock
@@ -1250,6 +1261,7 @@ describe('<CourseUnit />', () => {
});
it('should toggle visibility from header configure modal and update course unit state accordingly', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
let courseUnitSidebar;
let sidebarVisibilityCheckbox;
@@ -1257,7 +1269,7 @@ describe('<CourseUnit />', () => {
let configureModal;
let restrictAccessSelect;
await waitFor(() => {
await waitFor(async () => {
courseUnitSidebar = screen.getByTestId('course-unit-sidebar');
sidebarVisibilityCheckbox = within(courseUnitSidebar)
.getByLabelText(sidebarMessages.visibilityCheckboxTitle.defaultMessage);
@@ -1266,7 +1278,7 @@ describe('<CourseUnit />', () => {
const headerConfigureBtn = screen.getByRole('button', { name: /settings/i });
expect(headerConfigureBtn).toBeInTheDocument();
userEvent.click(headerConfigureBtn);
await user.click(headerConfigureBtn);
configureModal = screen.getByTestId('configure-modal');
restrictAccessSelect = within(configureModal)
.getByRole('combobox', { name: configureModalMessages.restrictAccessTo.defaultMessage });
@@ -1281,13 +1293,13 @@ describe('<CourseUnit />', () => {
.getByRole('checkbox', { name: configureModalMessages.hideFromLearners.defaultMessage });
expect(modalVisibilityCheckbox).not.toBeChecked();
userEvent.click(modalVisibilityCheckbox);
await user.click(modalVisibilityCheckbox);
expect(modalVisibilityCheckbox).toBeChecked();
userEvent.selectOptions(restrictAccessSelect, '0');
await user.selectOptions(restrictAccessSelect, '0');
const [, group1Checkbox] = within(configureModal).getAllByRole('checkbox');
userEvent.click(group1Checkbox);
await user.click(group1Checkbox);
expect(group1Checkbox).toBeChecked();
});
@@ -1310,7 +1322,7 @@ describe('<CourseUnit />', () => {
const modalSaveBtn = within(configureModal)
.getByRole('button', { name: configureModalMessages.saveButton.defaultMessage });
userEvent.click(modalSaveBtn);
await user.click(modalSaveBtn);
await waitFor(() => {
expect(sidebarVisibilityCheckbox).toBeChecked();
@@ -1341,6 +1353,7 @@ describe('<CourseUnit />', () => {
describe('Copy paste functionality', () => {
it('should copy a unit, paste it as a new unit, and update the course section vertical data', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
axiosMock
@@ -1355,8 +1368,8 @@ describe('<CourseUnit />', () => {
await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
userEvent.click(screen.getByRole('button', { name: sidebarMessages.actionButtonCopyUnitTitle.defaultMessage }));
userEvent.click(screen.getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
await user.click(screen.getByRole('button', { name: sidebarMessages.actionButtonCopyUnitTitle.defaultMessage }));
await user.click(screen.getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
let units = null;
const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
@@ -1394,6 +1407,7 @@ describe('<CourseUnit />', () => {
});
it('should increase the number of course XBlocks after copying and pasting a block', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
simulatePostMessageEvent(messageTypes.copyXBlock, {
@@ -1411,7 +1425,7 @@ describe('<CourseUnit />', () => {
});
await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
userEvent.click(screen.getByRole('button', { name: sidebarMessages.actionButtonCopyUnitTitle.defaultMessage }));
await user.click(screen.getByRole('button', { name: sidebarMessages.actionButtonCopyUnitTitle.defaultMessage }));
await waitFor(() => {
const iframe = screen.getByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);
@@ -1460,6 +1474,7 @@ describe('<CourseUnit />', () => {
});
it('displays a notification about new files after pasting a component', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
axiosMock
@@ -1474,8 +1489,8 @@ describe('<CourseUnit />', () => {
await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
userEvent.click(screen.getByRole('button', { name: sidebarMessages.actionButtonCopyUnitTitle.defaultMessage }));
userEvent.click(screen.getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
await user.click(screen.getByRole('button', { name: sidebarMessages.actionButtonCopyUnitTitle.defaultMessage }));
await user.click(screen.getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
const updatedAncestorsChild = updatedCourseSectionVerticalData.xblock_info.ancestor_info.ancestors[0];
@@ -1506,12 +1521,13 @@ describe('<CourseUnit />', () => {
expect(within(newFilesAlert).getByText(fileName)).toBeInTheDocument();
});
userEvent.click(within(newFilesAlert).getByText(/Dismiss/i));
await user.click(within(newFilesAlert).getByText(/Dismiss/i));
expect(screen.queryByTestId('has-new-files-alert')).toBeNull();
});
it('displays a notification about conflicting errors after pasting a component', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
axiosMock
@@ -1526,8 +1542,8 @@ describe('<CourseUnit />', () => {
await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
userEvent.click(screen.getByRole('button', { name: sidebarMessages.actionButtonCopyUnitTitle.defaultMessage }));
userEvent.click(screen.getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
await user.click(screen.getByRole('button', { name: sidebarMessages.actionButtonCopyUnitTitle.defaultMessage }));
await user.click(screen.getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
const updatedAncestorsChild = updatedCourseSectionVerticalData.xblock_info.ancestor_info.ancestors[0];
@@ -1560,12 +1576,13 @@ describe('<CourseUnit />', () => {
expect(within(conflictingErrorsAlert).getByText(fileName)).toBeInTheDocument();
});
userEvent.click(within(conflictingErrorsAlert).getByText(/Dismiss/i));
await user.click(within(conflictingErrorsAlert).getByText(/Dismiss/i));
expect(screen.queryByTestId('has-conflicting-errors-alert')).toBeNull();
});
it('displays a notification about error files after pasting a component', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
axiosMock
@@ -1580,8 +1597,8 @@ describe('<CourseUnit />', () => {
await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
userEvent.click(screen.getByRole('button', { name: sidebarMessages.actionButtonCopyUnitTitle.defaultMessage }));
userEvent.click(screen.getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
await user.click(screen.getByRole('button', { name: sidebarMessages.actionButtonCopyUnitTitle.defaultMessage }));
await user.click(screen.getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
const updatedAncestorsChild = updatedCourseSectionVerticalData.xblock_info.ancestor_info.ancestors[0];
@@ -1609,7 +1626,7 @@ describe('<CourseUnit />', () => {
expect(within(errorFilesAlert)
.getByText(pasteNotificationsMessages.hasErrorsDescription.defaultMessage)).toBeInTheDocument();
userEvent.click(within(errorFilesAlert).getByText(/Dismiss/i));
await user.click(within(errorFilesAlert).getByText(/Dismiss/i));
expect(screen.queryByTestId('has-error-files')).toBeNull();
});
@@ -1682,6 +1699,7 @@ describe('<CourseUnit />', () => {
});
it('should navigates to xBlock current unit', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
await screen.findByText(unitDisplayName);
@@ -1702,15 +1720,15 @@ describe('<CourseUnit />', () => {
name: `${currentSection.display_name} ${moveModalMessages.moveModalOutlineItemCurrentLocationText.defaultMessage} ${moveModalMessages.moveModalOutlineItemViewText.defaultMessage}`,
});
expect(currentSectionItemBtn).toBeInTheDocument();
userEvent.click(currentSectionItemBtn);
await user.click(currentSectionItemBtn);
await waitFor(() => {
await waitFor(async () => {
const currentSubsection = currentSection.child_info.children[0];
const currentSubsectionItemBtn = screen.getByRole('button', {
name: `${currentSubsection.display_name} ${moveModalMessages.moveModalOutlineItemCurrentLocationText.defaultMessage} ${moveModalMessages.moveModalOutlineItemViewText.defaultMessage}`,
});
expect(currentSubsectionItemBtn).toBeInTheDocument();
userEvent.click(currentSubsectionItemBtn);
await user.click(currentSubsectionItemBtn);
});
await waitFor(() => {
@@ -1722,6 +1740,7 @@ describe('<CourseUnit />', () => {
});
it('should allow move operation and handles it successfully', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
axiosMock
@@ -1750,24 +1769,24 @@ describe('<CourseUnit />', () => {
name: `${currentSection.display_name} ${moveModalMessages.moveModalOutlineItemCurrentLocationText.defaultMessage} ${moveModalMessages.moveModalOutlineItemViewText.defaultMessage}`,
});
expect(currentSectionItemBtn).toBeInTheDocument();
userEvent.click(currentSectionItemBtn);
await user.click(currentSectionItemBtn);
const currentSubsection = currentSection.child_info.children[1];
await waitFor(() => {
await waitFor(async () => {
const currentSubsectionItemBtn = screen.getByRole('button', {
name: `${currentSubsection.display_name} ${moveModalMessages.moveModalOutlineItemViewText.defaultMessage}`,
});
expect(currentSubsectionItemBtn).toBeInTheDocument();
userEvent.click(currentSubsectionItemBtn);
await user.click(currentSubsectionItemBtn);
});
await waitFor(() => {
await waitFor(async () => {
const currentUnit = currentSubsection.child_info.children[0];
const currentUnitItemBtn = screen.getByRole('button', {
name: `${currentUnit.display_name} ${moveModalMessages.moveModalOutlineItemViewText.defaultMessage}`,
});
expect(currentUnitItemBtn).toBeInTheDocument();
userEvent.click(currentUnitItemBtn);
await user.click(currentUnitItemBtn);
});
const moveModalBtn = screen.getByRole('button', {
@@ -1775,7 +1794,7 @@ describe('<CourseUnit />', () => {
});
expect(moveModalBtn).toBeInTheDocument();
expect(moveModalBtn).not.toBeDisabled();
userEvent.click(moveModalBtn);
await user.click(moveModalBtn);
await waitFor(() => {
expect(window.scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
@@ -1784,6 +1803,7 @@ describe('<CourseUnit />', () => {
});
it('should display "Move Confirmation" alert after moving and undo operations', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
axiosMock
@@ -1817,7 +1837,7 @@ describe('<CourseUnit />', () => {
expect(undoButton).toBeInTheDocument();
expect(newLocationButton).toBeInTheDocument();
userEvent.click(undoButton);
await user.click(undoButton);
await waitFor(() => {
expect(screen.getByText(messages.alertMoveCancelTitle.defaultMessage)).toBeInTheDocument();
@@ -1831,6 +1851,7 @@ describe('<CourseUnit />', () => {
});
it('should navigate to new location by button click', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
axiosMock
@@ -1849,7 +1870,7 @@ describe('<CourseUnit />', () => {
const newLocationButton = screen.queryByRole('button', {
name: messages.newLocationButton.defaultMessage, hidden: true,
});
userEvent.click(newLocationButton);
await user.click(newLocationButton);
expect(mockedUsedNavigate).toHaveBeenCalledWith(
`/course/${courseId}/container/${blockId}/${requestData.currentParentLocator}`,
{ replace: true },
@@ -1885,6 +1906,7 @@ describe('<CourseUnit />', () => {
});
it('closes xblock restrict access modal when cancel button is clicked', async () => {
const user = userEvent.setup();
render(<RootWrapper />);
await waitFor(() => {
@@ -1895,10 +1917,10 @@ describe('<CourseUnit />', () => {
});
});
await waitFor(() => {
await waitFor(async () => {
const configureModal = screen.getByTestId('configure-modal');
expect(configureModal).toBeInTheDocument();
userEvent.click(within(configureModal).getByRole('button', {
await user.click(within(configureModal).getByRole('button', {
name: configureModalMessages.cancelButton.defaultMessage,
}));
expect(handleConfigureSubmitMock).not.toHaveBeenCalled();
@@ -1908,6 +1930,7 @@ describe('<CourseUnit />', () => {
});
it('handles submit xblock restrict access data when save button is clicked', async () => {
const user = userEvent.setup();
axiosMock
.onPost(getXBlockBaseApiUrl(id), {
publish: PUBLISH_TYPES.republish,
@@ -1941,7 +1964,7 @@ describe('<CourseUnit />', () => {
name: configureModalMessages.restrictAccessTo.defaultMessage,
});
await userEvent.selectOptions(restrictAccessSelect, '0');
await user.selectOptions(restrictAccessSelect, '0');
await waitFor(() => {
userPartitionInfoFormatted.selectablePartitions[0].groups.forEach((group) => {
@@ -1952,7 +1975,7 @@ describe('<CourseUnit />', () => {
});
const group1Checkbox = within(configureModal).getByRole('checkbox', { name: accessGroupName1 });
await userEvent.click(group1Checkbox);
await user.click(group1Checkbox);
expect(group1Checkbox).toBeChecked();
const saveModalBtnText = within(configureModal).getByRole('button', {
@@ -1960,7 +1983,7 @@ describe('<CourseUnit />', () => {
});
expect(saveModalBtnText).toBeInTheDocument();
await userEvent.click(saveModalBtnText);
await user.click(saveModalBtnText);
await waitFor(() => {
expect(axiosMock.history.post.length).toBeGreaterThan(0);
@@ -1972,24 +1995,26 @@ describe('<CourseUnit />', () => {
});
const checkLegacyEditModalOnEditMessage = async () => {
const user = userEvent.setup();
render(<RootWrapper />);
await waitFor(() => {
await waitFor(async () => {
const editButton = screen.getByTestId('header-edit-button');
expect(editButton).toBeInTheDocument();
const xblocksIframe = screen.getByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);
expect(xblocksIframe).toBeInTheDocument();
userEvent.click(editButton);
await user.click(editButton);
});
};
const checkRenderVisibilityModal = async (headingMessageId) => {
const user = userEvent.setup();
const { findByRole, getByTestId } = render(<RootWrapper />);
let configureModal;
let restrictAccessSelect;
const headerConfigureBtn = await findByRole('button', { name: /settings/i });
await userEvent.click(headerConfigureBtn);
await user.click(headerConfigureBtn);
await waitFor(() => {
configureModal = getByTestId('configure-modal');
@@ -2007,7 +2032,7 @@ describe('<CourseUnit />', () => {
const modalSaveBtn = within(configureModal)
.getByRole('button', { name: configureModalMessages.saveButton.defaultMessage });
userEvent.click(modalSaveBtn);
await user.click(modalSaveBtn);
};
describe('Library Content page', () => {

102
src/course-unit/add-component/AddComponent.test.jsx
View File

@@ -169,25 +169,26 @@ describe('<AddComponent />', () => {
],
});
await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
const user = userEvent.setup();
const { getByRole } = renderComponent();
const customComponentButton = getByRole('button', {
name: new RegExp(`${messages.buttonText.defaultMessage} Custom`, 'i'),
});
userEvent.click(customComponentButton);
await user.click(customComponentButton);
expect(handleCreateNewCourseXBlockMock).not.toHaveBeenCalled();
});
it('calls handleCreateNewCourseXblock with correct parameters when Discussion xblock create button is clicked', () => {
it('calls handleCreateNewCourseXblock with correct parameters when Discussion xblock create button is clicked', async () => {
const user = userEvent.setup();
const { getByRole } = renderComponent();
const discussionButton = getByRole('button', {
name: new RegExp(`${messages.buttonText.defaultMessage} Discussion`, 'i'),
});
userEvent.click(discussionButton);
await user.click(discussionButton);
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
parentLocator: '123',
@@ -195,14 +196,15 @@ describe('<AddComponent />', () => {
});
});
it('calls handleCreateNewCourseXblock with correct parameters when Drag-and-Drop xblock create button is clicked', () => {
it('calls handleCreateNewCourseXblock with correct parameters when Drag-and-Drop xblock create button is clicked', async () => {
const user = userEvent.setup();
const { getByRole } = renderComponent();
const discussionButton = getByRole('button', {
name: new RegExp(`${messages.buttonText.defaultMessage} Drag and Drop`, 'i'),
});
userEvent.click(discussionButton);
await user.click(discussionButton);
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
parentLocator: '123',
@@ -210,14 +212,15 @@ describe('<AddComponent />', () => {
});
});
it('calls handleCreateNewCourseXBlock with correct parameters when Problem xblock create button is clicked', () => {
it('calls handleCreateNewCourseXBlock with correct parameters when Problem xblock create button is clicked', async () => {
const user = userEvent.setup();
const { getByRole } = renderComponent();
const discussionButton = getByRole('button', {
name: new RegExp(`problem ${messages.buttonText.defaultMessage} Problem`, 'i'),
});
userEvent.click(discussionButton);
await user.click(discussionButton);
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
parentLocator: '123',
@@ -225,14 +228,15 @@ describe('<AddComponent />', () => {
}, expect.any(Function));
});
it('calls handleCreateNewCourseXBlock with correct parameters when Problem bank xblock create button is clicked', () => {
it('calls handleCreateNewCourseXBlock with correct parameters when Problem bank xblock create button is clicked', async () => {
const user = userEvent.setup();
const { getByRole } = renderComponent();
const problemBankBtn = getByRole('button', {
name: new RegExp(`${messages.buttonText.defaultMessage} Problem Bank`, 'i'),
});
userEvent.click(problemBankBtn);
await user.click(problemBankBtn);
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
parentLocator: '123',
@@ -241,14 +245,15 @@ describe('<AddComponent />', () => {
});
});
it('calls handleCreateNewCourseXBlock with correct parameters when Video xblock create button is clicked', () => {
it('calls handleCreateNewCourseXBlock with correct parameters when Video xblock create button is clicked', async () => {
const user = userEvent.setup();
const { getByRole } = renderComponent();
const discussionButton = getByRole('button', {
name: new RegExp(`${messages.buttonText.defaultMessage} Video`, 'i'),
});
userEvent.click(discussionButton);
await user.click(discussionButton);
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
parentLocator: '123',
@@ -256,14 +261,15 @@ describe('<AddComponent />', () => {
}, expect.any(Function));
});
it('creates new "Library" xblock on click', () => {
it('creates new "Library" xblock on click', async () => {
const user = userEvent.setup();
const { getByRole } = renderComponent();
const libraryButton = getByRole('button', {
name: new RegExp(`${messages.buttonText.defaultMessage} Legacy Library Content`, 'i'),
});
userEvent.click(libraryButton);
await user.click(libraryButton);
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
parentLocator: '123',
@@ -273,31 +279,33 @@ describe('<AddComponent />', () => {
});
it('verifies modal behavior on button click', async () => {
const user = userEvent.setup();
const { getByRole, queryByRole } = renderComponent();
const advancedBtn = getByRole('button', {
name: new RegExp(`${messages.buttonText.defaultMessage} Advanced`, 'i'),
});
userEvent.click(advancedBtn);
await user.click(advancedBtn);
const modalContainer = getByRole('dialog');
expect(within(modalContainer).getByRole('button', { name: messages.modalContainerCancelBtnText.defaultMessage })).toBeInTheDocument();
expect(within(modalContainer).getByRole('button', { name: messages.modalBtnText.defaultMessage })).toBeInTheDocument();
userEvent.click(within(modalContainer).getByRole('button', { name: messages.modalContainerCancelBtnText.defaultMessage }));
await user.click(within(modalContainer).getByRole('button', { name: messages.modalContainerCancelBtnText.defaultMessage }));
expect(queryByRole('button', { name: messages.modalContainerCancelBtnText.defaultMessage })).toBeNull();
expect(queryByRole('button', { name: messages.modalBtnText.defaultMessage })).toBeNull();
});
it('verifies "Advanced" component selection in modal', async () => {
const user = userEvent.setup();
const { getByRole, getByText } = renderComponent();
const advancedBtn = getByRole('button', {
name: new RegExp(`${messages.buttonText.defaultMessage} Advanced`, 'i'),
});
const componentTemplates = courseSectionVerticalMock.component_templates;
userEvent.click(advancedBtn);
await user.click(advancedBtn);
const modalContainer = getByRole('dialog');
await waitFor(() => {
@@ -313,12 +321,13 @@ describe('<AddComponent />', () => {
});
it('verifies "Text" component selection in modal', async () => {
const user = userEvent.setup();
const { getByRole, getByText } = renderComponent();
const textBtn = getByRole('button', {
name: new RegExp(`${messages.buttonText.defaultMessage} Text`, 'i'),
});
const componentTemplates = courseSectionVerticalMock.component_templates;
userEvent.click(textBtn);
await user.click(textBtn);
const modalContainer = getByRole('dialog');
await waitFor(() => {
@@ -334,13 +343,14 @@ describe('<AddComponent />', () => {
});
it('verifies "Open Response" component selection in modal', async () => {
const user = userEvent.setup();
const { getByRole, getByText } = renderComponent();
const openResponseBtn = getByRole('button', {
name: new RegExp(`${messages.buttonText.defaultMessage} Open Response`, 'i'),
});
const componentTemplates = courseSectionVerticalMock.component_templates;
userEvent.click(openResponseBtn);
await user.click(openResponseBtn);
const modalContainer = getByRole('dialog');
await waitFor(() => {
@@ -355,23 +365,24 @@ describe('<AddComponent />', () => {
});
});
it('verifies "Advanced" component creation and submission in modal', () => {
it('verifies "Advanced" component creation and submission in modal', async () => {
const user = userEvent.setup();
const { getByRole } = renderComponent();
const advancedButton = getByRole('button', {
name: new RegExp(`${messages.buttonText.defaultMessage} Advanced`, 'i'),
});
userEvent.click(advancedButton);
await user.click(advancedButton);
const modalContainer = getByRole('dialog');
const radioInput = within(modalContainer).getByRole('radio', { name: 'Annotation' });
const sendBtn = within(modalContainer).getByRole('button', { name: messages.modalBtnText.defaultMessage });
expect(sendBtn).toBeDisabled();
userEvent.click(radioInput);
await user.click(radioInput);
expect(sendBtn).not.toBeDisabled();
userEvent.click(sendBtn);
await user.click(sendBtn);
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
@@ -381,23 +392,24 @@ describe('<AddComponent />', () => {
});
});
it('verifies "Text" component creation and submission in modal', () => {
it('verifies "Text" component creation and submission in modal', async () => {
const user = userEvent.setup();
const { getByRole } = renderComponent();
const textButton = getByRole('button', {
name: new RegExp(`${messages.buttonText.defaultMessage} Text`, 'i'),
});
userEvent.click(textButton);
await user.click(textButton);
const modalContainer = getByRole('dialog');
const radioInput = within(modalContainer).getByRole('radio', { name: 'Text' });
const sendBtn = within(modalContainer).getByRole('button', { name: messages.modalBtnText.defaultMessage });
expect(sendBtn).toBeDisabled();
userEvent.click(radioInput);
await user.click(radioInput);
expect(sendBtn).not.toBeDisabled();
userEvent.click(sendBtn);
await user.click(sendBtn);
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
@@ -407,23 +419,24 @@ describe('<AddComponent />', () => {
}, expect.any(Function));
});
it('verifies "Open Response" component creation and submission in modal', () => {
it('verifies "Open Response" component creation and submission in modal', async () => {
const user = userEvent.setup();
const { getByRole } = renderComponent();
const openResponseButton = getByRole('button', {
name: new RegExp(`${messages.buttonText.defaultMessage} Open Response`, 'i'),
});
userEvent.click(openResponseButton);
await user.click(openResponseButton);
const modalContainer = getByRole('dialog');
const radioInput = within(modalContainer).getByRole('radio', { name: 'Peer Assessment Only' });
const sendBtn = within(modalContainer).getByRole('button', { name: messages.modalBtnText.defaultMessage });
expect(sendBtn).toBeDisabled();
userEvent.click(radioInput);
await user.click(radioInput);
expect(sendBtn).not.toBeDisabled();
userEvent.click(sendBtn);
await user.click(sendBtn);
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
@@ -434,15 +447,16 @@ describe('<AddComponent />', () => {
});
it('shows library picker on clicking v2 library content btn', async () => {
const user = userEvent.setup();
renderComponent();
const libBtn = await screen.findByRole('button', {
name: new RegExp(`${messages.buttonText.defaultMessage} Library content`, 'i'),
});
userEvent.click(libBtn);
await user.click(libBtn);
// click dummy button to execute onComponentSelected prop.
const dummyBtn = await screen.findByRole('button', { name: 'Dummy button' });
userEvent.click(dummyBtn);
await user.click(dummyBtn);
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
@@ -454,21 +468,23 @@ describe('<AddComponent />', () => {
});
it('closes library component picker on close', async () => {
const user = userEvent.setup();
renderComponent();
const libBtn = await screen.findByRole('button', {
name: new RegExp(`${messages.buttonText.defaultMessage} Library content`, 'i'),
});
userEvent.click(libBtn);
await user.click(libBtn);
expect(screen.queryByRole('button', { name: 'Dummy button' })).toBeInTheDocument();
// click dummy button to execute onComponentSelected prop.
const closeBtn = await screen.findByRole('button', { name: 'Close' });
userEvent.click(closeBtn);
await user.click(closeBtn);
expect(screen.queryByRole('button', { name: 'Dummy button' })).not.toBeInTheDocument();
});
it('shows component picker on window message', async () => {
const user = userEvent.setup();
renderComponent();
const message = {
data: {
@@ -482,10 +498,10 @@ describe('<AddComponent />', () => {
// click dummy button to execute onChangeComponentSelection prop.
const dummyBtn = await screen.findByRole('button', { name: 'Dummy button' });
userEvent.click(dummyBtn);
await user.click(dummyBtn);
const submitBtn = await screen.findByRole('button', { name: 'Add selected components' });
userEvent.click(submitBtn);
await user.click(submitBtn);
expect(mockSendMessageToIframe).toHaveBeenCalledWith(messageTypes.addSelectedComponentsToBank, {
selectedComponents: [{
@@ -522,13 +538,13 @@ describe('<AddComponent />', () => {
],
});
await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
const user = userEvent.setup();
const { getByRole } = renderComponent();
const advancedButton = getByRole('button', {
name: new RegExp(`${messages.buttonText.defaultMessage} Advanced`, 'i'),
});
userEvent.click(advancedButton);
await user.click(advancedButton);
const modalContainer = getByRole('dialog');
const fullySupportLabel = within(modalContainer)
.queryByText(messages.modalComponentSupportLabelFullySupported.defaultMessage);
@@ -565,13 +581,13 @@ describe('<AddComponent />', () => {
],
});
await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
const user = userEvent.setup();
const { getByRole, getByText } = renderComponent();
const advancedButton = getByRole('button', {
name: new RegExp(`${messages.buttonText.defaultMessage} Advanced`, 'i'),
});
userEvent.click(advancedButton);
await user.click(advancedButton);
const modalContainer = getByRole('dialog');
const fullySupportLabel = within(modalContainer)
.getByText(messages.modalComponentSupportLabelFullySupported.defaultMessage);
@@ -581,10 +597,10 @@ describe('<AddComponent />', () => {
expect(fullySupportLabel).toBeInTheDocument();
expect(provisionallySupportLabel).toBeInTheDocument();
userEvent.hover(fullySupportLabel);
await user.hover(fullySupportLabel);
expect(getByText(messages.modalComponentSupportTooltipFullySupported.defaultMessage)).toBeInTheDocument();
userEvent.hover(provisionallySupportLabel);
await user.hover(provisionallySupportLabel);
expect(getByText(messages.modalComponentSupportTooltipProvisionallySupported.defaultMessage)).toBeInTheDocument();
});
});

13
src/course-unit/breadcrumbs/Breadcrumbs.test.tsx
View File

@@ -97,6 +97,7 @@ describe('<Breadcrumbs />', () => {
});
it('render Breadcrumbs\'s dropdown menus correctly', async () => {
const user = userEvent.setup();
const { getByText, queryAllByTestId } = renderComponent();
expect(getByText(breadcrumbsExpected.section.displayName)).toBeInTheDocument();
@@ -105,31 +106,33 @@ describe('<Breadcrumbs />', () => {
expect(queryAllByTestId('breadcrumbs-subsection-dropdown-item')).toHaveLength(0);
const button = getByText(breadcrumbsExpected.section.displayName);
userEvent.click(button);
await user.click(button);
await waitFor(() => {
expect(queryAllByTestId('breadcrumbs-dropdown-item-level-0')).toHaveLength(5);
});
userEvent.click(getByText(breadcrumbsExpected.subsection.displayName));
await user.click(getByText(breadcrumbsExpected.subsection.displayName));
await waitFor(() => {
expect(queryAllByTestId('breadcrumbs-dropdown-item-level-1')).toHaveLength(2);
});
});
it('navigates using the new course outline page when the waffle flag is enabled', async () => {
const user = userEvent.setup();
// eslint-disable-next-line @typescript-eslint/naming-convention
const { ancestor_xblocks: [{ children: [{ display_name, url }] }] } = courseSectionVerticalMock;
const { getByText, getByRole } = renderComponent();
const dropdownBtn = getByText(breadcrumbsExpected.section.displayName);
userEvent.click(dropdownBtn);
await user.click(dropdownBtn);
const dropdownItem = getByRole('link', { name: display_name });
userEvent.click(dropdownItem);
await user.click(dropdownItem);
expect(dropdownItem).toHaveAttribute('href', url);
});
it('falls back to window.location.href when the waffle flag is disabled', async () => {
const user = userEvent.setup();
// eslint-disable-next-line @typescript-eslint/naming-convention
const { ancestor_xblocks: [{ children: [{ display_name, url }] }] } = courseSectionVerticalMock;
axiosMock
@@ -139,7 +142,7 @@ describe('<Breadcrumbs />', () => {
const { getByText, getByRole } = renderComponent();
const dropdownBtn = getByText(breadcrumbsExpected.section.displayName);
userEvent.click(dropdownBtn);
await user.click(dropdownBtn);
const dropdownItem = getByRole('link', { name: display_name });
// We need waitFor here because the waffle flag defaults to true but asynchronously loads false from our axiosMock

16
src/course-unit/header-title/HeaderTitle.test.jsx
View File

@@ -99,27 +99,29 @@ describe('<HeaderTitle />', () => {
expect(getByRole('button', { name: messages.altButtonSettings.defaultMessage })).toBeEnabled();
});
it('calls toggle edit title form by clicking on Edit button', () => {
it('calls toggle edit title form by clicking on Edit button', async () => {
const user = userEvent.setup();
const { getByRole } = renderComponent();
const editTitleButton = getByRole('button', { name: messages.altButtonEdit.defaultMessage });
userEvent.click(editTitleButton);
await user.click(editTitleButton);
expect(handleTitleEdit).toHaveBeenCalledTimes(1);
});
it('calls saving title by clicking outside or press Enter key', () => {
it('calls saving title by clicking outside or press Enter key', async () => {
const user = userEvent.setup();
const { getByRole } = renderComponent({
isTitleEditFormOpen: true,
});
const titleField = getByRole('textbox', { name: messages.ariaLabelButtonEdit.defaultMessage });
userEvent.type(titleField, ' 1');
await user.type(titleField, ' 1');
expect(titleField).toHaveValue(`${unitTitle} 1`);
userEvent.click(document.body);
await user.click(document.body);
expect(handleTitleEditSubmit).toHaveBeenCalledTimes(1);
userEvent.click(titleField);
userEvent.type(titleField, ' 2[Enter]');
await user.click(titleField);
await user.type(titleField, ' 2[Enter]');
expect(titleField).toHaveValue(`${unitTitle} 1 2`);
expect(handleTitleEditSubmit).toHaveBeenCalledTimes(2);
});

34
src/course-unit/move-modal/moveModal.test.tsx
View File

@@ -73,7 +73,8 @@ describe('<MoveModal />', () => {
expect(getByText('Loading...')).toBeInTheDocument();
});
it('renders component properly', () => {
it('renders component properly', async () => {
const user = userEvent.setup();
const { getByText, getByRole, getByTestId } = renderComponent();
const breadcrumbs: HTMLElement = getByTestId('move-xblock-modal-breadcrumbs');
const categoryIndicator: HTMLElement = getByTestId('move-xblock-modal-category');
@@ -88,11 +89,12 @@ describe('<MoveModal />', () => {
expect(getByRole('button', { name: messages.moveModalSubmitButton.defaultMessage })).toBeInTheDocument();
expect(getByRole('button', { name: messages.moveModalCancelButton.defaultMessage })).toBeInTheDocument();
userEvent.click(getByRole('button', { name: messages.moveModalCancelButton.defaultMessage }));
await user.click(getByRole('button', { name: messages.moveModalCancelButton.defaultMessage }));
expect(closeModalMockFn).toHaveBeenCalledTimes(1);
});
it('correctly navigates through the structure list', async () => {
const user = userEvent.setup();
const { getByText, getByRole, getByTestId } = renderComponent();
const breadcrumbs: HTMLElement = getByTestId('move-xblock-modal-breadcrumbs');
const categoryIndicator: HTMLElement = getByTestId('move-xblock-modal-category');
@@ -106,7 +108,7 @@ describe('<MoveModal />', () => {
sections.forEach((section) => {
expect(getByText(section.displayName)).toBeInTheDocument();
});
userEvent.click(getByRole('button', { name: new RegExp(sections[1].displayName, 'i') }));
await user.click(getByRole('button', { name: new RegExp(sections[1].displayName, 'i') }));
await waitFor(() => {
expect(
within(categoryIndicator).getByText(messages.moveModalBreadcrumbsSubsections.defaultMessage),
@@ -116,7 +118,7 @@ describe('<MoveModal />', () => {
expect(getByRole('button', { name: new RegExp(subsection.displayName, 'i') })).toBeInTheDocument();
});
});
userEvent.click(getByRole('button', { name: new RegExp(subsections[1].displayName, 'i') }));
await user.click(getByRole('button', { name: new RegExp(subsections[1].displayName, 'i') }));
await waitFor(() => {
expect(
within(categoryIndicator).getByText(messages.moveModalBreadcrumbsUnits.defaultMessage),
@@ -126,7 +128,7 @@ describe('<MoveModal />', () => {
expect(getByRole('button', { name: new RegExp(unit.displayName, 'i') })).toBeInTheDocument();
});
});
userEvent.click(getByRole('button', { name: new RegExp(units[0].displayName, 'i') }));
await user.click(getByRole('button', { name: new RegExp(units[0].displayName, 'i') }));
await waitFor(() => {
expect(
within(categoryIndicator).getByText(messages.moveModalBreadcrumbsComponents.defaultMessage),
@@ -141,15 +143,14 @@ describe('<MoveModal />', () => {
});
it('correctly navigates using breadcrumbs', async () => {
const { getByRole, getByTestId } = renderComponent();
const user = userEvent.setup();
const { getByRole, findByRole, getByTestId } = renderComponent();
const breadcrumbs: HTMLElement = getByTestId('move-xblock-modal-breadcrumbs');
const categoryIndicator: HTMLElement = getByTestId('move-xblock-modal-category');
await waitFor(() => {
userEvent.click(getByRole('button', { name: new RegExp(sections[1].displayName, 'i') }));
userEvent.click(getByRole('button', { name: new RegExp(subsections[1].displayName, 'i') }));
userEvent.click(within(breadcrumbs).getByText(sections[1].displayName));
});
await user.click(await findByRole('button', { name: new RegExp(sections[1].displayName, 'i') }));
await user.click(await findByRole('button', { name: new RegExp(subsections[1].displayName, 'i') }));
await user.click(within(breadcrumbs).getByText(sections[1].displayName));
await waitFor(() => {
expect(
@@ -163,16 +164,17 @@ describe('<MoveModal />', () => {
});
it('renders empty message when no components are provided', async () => {
const user = userEvent.setup();
const { getByText, getByRole } = renderComponent();
await waitFor(() => {
userEvent.click(getByRole('button', { name: new RegExp(sections[1].displayName, 'i') }));
userEvent.click(getByRole('button', { name: new RegExp(subsections[1].displayName, 'i') }));
await waitFor(async () => {
await user.click(getByRole('button', { name: new RegExp(sections[1].displayName, 'i') }));
await user.click(getByRole('button', { name: new RegExp(subsections[1].displayName, 'i') }));
});
await waitFor(() => {
await waitFor(async () => {
const unitBtn = getByRole('button', { name: new RegExp(units[7].displayName, 'i') });
userEvent.click(unitBtn);
await user.click(unitBtn);
});
await waitFor(() => {

11
src/course-unit/preview-changes/index.test.tsx
View File

@@ -78,12 +78,13 @@ describe('<IframePreviewLibraryXBlockChanges />', () => {
});
it('accept changes works', async () => {
const user = userEvent.setup();
axiosMock.onPost(libraryBlockChangesUrl(usageKey)).reply(200, {});
render();
expect(await screen.findByText('Preview changes: Test block')).toBeInTheDocument();
const acceptBtn = await screen.findByRole('button', { name: 'Accept changes' });
userEvent.click(acceptBtn);
await user.click(acceptBtn);
await waitFor(() => {
expect(mockSendMessageToIframe).toHaveBeenCalledWith(
messageTypes.completeXBlockEditing,
@@ -96,12 +97,13 @@ describe('<IframePreviewLibraryXBlockChanges />', () => {
});
it('shows toast if accept changes fails', async () => {
const user = userEvent.setup();
axiosMock.onPost(libraryBlockChangesUrl(usageKey)).reply(500, {});
render();
expect(await screen.findByText('Preview changes: Test block')).toBeInTheDocument();
const acceptBtn = await screen.findByRole('button', { name: 'Accept changes' });
userEvent.click(acceptBtn);
await user.click(acceptBtn);
await waitFor(() => {
expect(axiosMock.history.post.length).toEqual(1);
expect(axiosMock.history.post[0].url).toEqual(libraryBlockChangesUrl(usageKey));
@@ -111,14 +113,15 @@ describe('<IframePreviewLibraryXBlockChanges />', () => {
});
it('ignore changes works', async () => {
const user = userEvent.setup();
axiosMock.onDelete(libraryBlockChangesUrl(usageKey)).reply(200, {});
render();
expect(await screen.findByText('Preview changes: Test block')).toBeInTheDocument();
const ignoreBtn = await screen.findByRole('button', { name: 'Ignore changes' });
userEvent.click(ignoreBtn);
await user.click(ignoreBtn);
const ignoreConfirmBtn = await screen.findByRole('button', { name: 'Ignore' });
userEvent.click(ignoreConfirmBtn);
await user.click(ignoreConfirmBtn);
await waitFor(() => {
expect(mockSendMessageToIframe).toHaveBeenCalledWith(
messageTypes.completeXBlockEditing,

3
src/course-unit/sidebar/components/sidebar-footer/ActionButtons.test.jsx
View File

@@ -74,11 +74,12 @@ describe('<ActionButtons />', () => {
});
it('click on the Copy to clipboard button updates clipboardData', async () => {
const user = userEvent.setup();
const { getByRole } = renderComponent();
const copyXBlockBtn = getByRole('button', { name: messages.actionButtonCopyUnitTitle.defaultMessage });
userEvent.click(copyXBlockBtn);
await user.click(copyXBlockBtn);
expect(axiosMock.history.post.length).toBe(1);
expect(axiosMock.history.post[0].data).toBe(
JSON.stringify({ usage_key: courseSectionVerticalMock.xblock_info.id }),