test: fix test code improperly using/missing 'await' (#2560)

Author: bradenmacdonald

plugins/course-apps/ora_settings/Settings.test.jsx

@@ -125,10 +125,13 @@ describe('ORASettings', () => {
   });
 
   it('Displays title, helper text and badge when flexible peer grading button is enabled', async () => {
-    renderComponent();
     await mockStore({ apiStatus: 200, enabled: true });
+    renderComponent();
+
+    const checkbox = await screen.getByRole('checkbox', { name: /Flex Peer Grading/ });
+    expect(checkbox).toBeChecked();
 
-    waitFor(() => {
+    await waitFor(() => {
       const label = screen.getByText(messages.enableFlexPeerGradeLabel.defaultMessage);
       const enableBadge = screen.getByTestId('enable-badge');
 

src/advanced-settings/setting-card/SettingCard.test.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
@@ -22,7 +21,6 @@ jest.mock('react-textarea-autosize', () => jest.fn((props) => (
   <textarea
     {...props}
     onFocus={() => {}}
-    onBlur={() => {}}
   />
 )));
 
@@ -86,10 +84,10 @@ describe('<SettingCard />', () => {
     await waitFor(() => {
       expect(inputBox).toHaveValue('3, 2, 1');
     });
-    await (async () => {
+    await user.tab(); // blur off of the input.
+    await waitFor(() => {
       expect(setEdited).toHaveBeenCalled();
       expect(handleBlur).toHaveBeenCalled();
     });
-    fireEvent.focusOut(inputBox);
   });
 });

…ed-settings/setting-card/SettingCard.jsx …ed-settings/setting-card/SettingCard.tsxsrc/advanced-settings/setting-card/SettingCard.jsx renamed to src/advanced-settings/setting-card/SettingCard.tsx src/advanced-settings/setting-card/SettingCard.jsx renamed to src/advanced-settings/setting-card/SettingCard.tsx

@@ -30,7 +30,7 @@ const SettingCard = ({
   const { deprecated, help, displayName } = settingData;
   const initialValue = JSON.stringify(settingData.value, null, 4);
   const [isOpen, open, close] = useToggle(false);
-  const [target, setTarget] = useState(null);
+  const [target, setTarget] = useState<HTMLButtonElement | null>(null);
   const [newValue, setNewValue] = useState(initialValue);
 
   const handleSettingChange = (e) => {
@@ -118,7 +118,7 @@ SettingCard.propTypes = {
     deprecated: PropTypes.bool,
     help: PropTypes.string,
     displayName: PropTypes.string,
-    value: PropTypes.PropTypes.oneOfType([
+    value: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.bool,
       PropTypes.number,

src/certificates/certificate-details/CertificateDetailsForm.test.jsx

@@ -65,7 +65,7 @@ describe('CertificateDetails', () => {
 
     await user.type(input, newInputValue);
 
-    waitFor(() => {
+    await waitFor(() => {
       expect(input.value).toBe(newInputValue);
     });
   });

src/certificates/certificate-signatories/CertificateSignatories.test.jsx

@@ -96,7 +96,7 @@ describe('CertificateSignatories', () => {
     expect(useCreateSignatory().handleAddSignatory).toHaveBeenCalled();
   });
 
-  it('calls remove for the correct signatory when delete icon is clicked', async () => {
+  it.skip('calls remove for the correct signatory when delete icon is clicked', async () => {
     const user = userEvent.setup();
     const { getAllByRole } = renderComponent(defaultProps);
 
@@ -105,7 +105,9 @@ describe('CertificateSignatories', () => {
 
     await user.click(deleteIcons[0]);
 
-    waitFor(() => {
+    // FIXME: this isn't called because the whole 'useEditSignatory' hook
+    // which calls it is mocked out.
+    await waitFor(() => {
       expect(mockArrayHelpers.remove).toHaveBeenCalledWith(0);
     });
   });

src/certificates/certificate-signatories/signatory/SignatoryForm.test.jsx

@@ -1,4 +1,4 @@
-import { render, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
@@ -30,6 +30,7 @@ const initialState = {
 };
 
 const defaultProps = {
+  index: 0,
   ...signatoriesMock[0],
   showDeleteButton: true,
   isEdit: true,
@@ -62,15 +63,20 @@ describe('Signatory Component', () => {
   it('handles input change', async () => {
     const user = userEvent.setup();
     const handleChange = jest.fn();
-    const { getByPlaceholderText } = renderSignatory({ ...defaultProps, handleChange });
-    const input = getByPlaceholderText(messages.namePlaceholder.defaultMessage);
+    renderSignatory({ ...defaultProps, handleChange });
+    const input = screen.getByPlaceholderText(messages.namePlaceholder.defaultMessage);
     const newInputValue = 'Jane Doe';
 
-    await user.type(input, newInputValue, { name: 'signatories[0].name' });
+    expect(handleChange).not.toHaveBeenCalled();
+    expect(input.value).not.toBe(newInputValue);
+    await user.type(input, newInputValue);
 
-    waitFor(() => {
-      expect(handleChange).toHaveBeenCalledWith(expect.anything());
-      expect(input.value).toBe(newInputValue);
+    await waitFor(() => {
+      // This is not a great test; handleChange() gets called for each key press:
+      expect(handleChange).toHaveBeenCalledTimes(newInputValue.length);
+      // And the input value never actually changes because it's a controlled component
+      // and we pass the name in as a prop, which hasn't changed.
+      // expect(input.value).toBe(newInputValue);
     });
   });
 

src/certificates/layout/header-buttons/HeaderButtons.test.jsx

@@ -62,7 +62,7 @@ describe('HeaderButtons Component', () => {
     const dropdownButton = getByRole('button', { name: certificatesDataMock.courseModes[0] });
     await user.click(dropdownButton);
 
-    const verifiedMode = await getByRole('button', { name: certificatesDataMock.courseModes[1] });
+    const verifiedMode = getByRole('button', { name: certificatesDataMock.courseModes[1] });
     await user.click(verifiedMode);
 
     await waitFor(() => {

src/course-libraries/CourseLibraries.test.tsx

@@ -114,7 +114,7 @@ describe('<CourseLibraries />', () => {
     const dismissBtn = await screen.findByRole('button', { name: 'Dismiss' });
     await user.click(dismissBtn);
     expect(allTab).toHaveAttribute('aria-selected', 'true');
-    waitFor(() => expect(alert).not.toBeInTheDocument());
+    await waitFor(() => expect(alert).not.toBeInTheDocument());
     // review updates button
     const reviewActionBtn = await screen.findByRole('button', { name: 'Review Updates' });
     await user.click(reviewActionBtn);

src/course-outline/OutlineAddChildButtons.test.tsx

@@ -33,10 +33,10 @@ jest.mock('react-redux', () => ({
       expect(newBtn).toBeInTheDocument();
       const useBtn = await screen.findByRole('button', { name: `Use ${containerType} from library` });
       expect(useBtn).toBeInTheDocument();
-      userEvent.click(newBtn);
-      waitFor(() => expect(newClickHandler).toHaveBeenCalled());
-      userEvent.click(useBtn);
-      waitFor(() => expect(useFromLibClickHandler).toHaveBeenCalled());
+      await userEvent.click(newBtn);
+      await waitFor(() => expect(newClickHandler).toHaveBeenCalled());
+      await userEvent.click(useBtn);
+      await waitFor(() => expect(useFromLibClickHandler).toHaveBeenCalled());
     });
   });
 });

src/course-unit/CourseUnit.test.jsx

@@ -2218,7 +2218,7 @@ describe('<CourseUnit />', () => {
       const currentSubSectionName = courseSectionVerticalMock.xblock_info.ancestor_info.ancestors[1].display_name;
       const helpLinkUrl = 'https://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_components.html#components-that-contain-other-components';
 
-      waitFor(() => {
+      await waitFor(() => {
         const unitHeaderTitle = screen.getByTestId('unit-header-title');
         expect(screen.getByText(unitDisplayName)).toBeInTheDocument();
         expect(within(unitHeaderTitle).getByRole('button', { name: headerTitleMessages.altButtonEdit.defaultMessage })).toBeInTheDocument();
@@ -2291,41 +2291,38 @@ describe('<CourseUnit />', () => {
   });
 
   it('renders and navigates to the new HTML XBlock editor after xblock duplicating', async () => {
-    render(<RootWrapper />);
     const updatedCourseVerticalChildrenMock = JSON.parse(JSON.stringify(courseVerticalChildrenMock));
-    const targetBlockId = updatedCourseVerticalChildrenMock.children[1].block_id;
-
-    updatedCourseVerticalChildrenMock.children = updatedCourseVerticalChildrenMock.children
-      .map((child) => (child.block_id === targetBlockId
-        ? { ...child, block_type: 'html' }
-        : child));
+    // Convert the second child from drag and drop to HTML:
+    const targetChild = updatedCourseVerticalChildrenMock.children[1];
+    targetChild.block_type = 'html';
+    targetChild.name = 'Test HTML Block';
+    targetChild.block_id = 'block-v1:OpenedX+L153+3T2023+type@html+block@test123original';
 
     axiosMock
       .onPost(postXBlockBaseApiUrl({
         parent_locator: blockId,
-        duplicate_source_locator: courseVerticalChildrenMock.children[0].block_id,
+        duplicate_source_locator: targetChild.block_id,
       }))
       .replyOnce(200, { locator: '1234567890' });
 
     axiosMock
       .onGet(getCourseVerticalChildrenApiUrl(blockId))
       .reply(200, updatedCourseVerticalChildrenMock);
 
+    render(<RootWrapper />);
     await executeThunk(fetchCourseVerticalChildrenData(blockId), store.dispatch);
 
     await waitFor(() => {
       const iframe = screen.getByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);
       expect(iframe).toBeInTheDocument();
-      simulatePostMessageEvent(messageTypes.currentXBlockId, {
-        id: targetBlockId,
-      });
     });
 
-    waitFor(() => {
-      simulatePostMessageEvent(messageTypes.duplicateXBlock, {});
-      simulatePostMessageEvent(messageTypes.newXBlockEditor, {});
-      expect(mockedUsedNavigate)
-        .toHaveBeenCalledWith(`/course/${courseId}/editor/html/${targetBlockId}`, { replace: true });
+    // After duplicating, the editor modal will open:
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    simulatePostMessageEvent(messageTypes.duplicateXBlock, { usageId: targetChild.block_id });
+    simulatePostMessageEvent(messageTypes.newXBlockEditor, { blockType: 'html', usageId: targetChild.block_id });
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).toBeInTheDocument();
     });
   });