test: fix completely broken tests

Author: bradenmacdonald

src/schedule-and-details/learning-outcomes-section/InstructorsSection.test.jsx

@@ -1,7 +1,4 @@
-import React from 'react';
-import {
-  act, fireEvent, render, waitFor,
-} from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { courseDetailsMock } from '../__mocks__';
@@ -29,38 +26,43 @@ describe('<LearningOutcomesSection />', () => {
   });
 
   it('should create another learning outcome form on click Add learning outcome', async () => {
-    const { getAllByRole, getByRole } = render(<RootWrapper {...props} />);
+    const { getByRole } = render(<RootWrapper {...props} />);
     const addButton = getByRole('button', { name: messages.outcomesAdd.defaultMessage });
-    act(() => {
-      fireEvent.click(addButton);
-    });
+    expect(onChangeMock).not.toHaveBeenCalled();
+    fireEvent.click(addButton);
+    expect(onChangeMock).toHaveBeenCalledWith([
+      props.learningInfo[0],
+      '', // <-- new
+    ], 'learningInfo');
 
-    await waitFor(() => {
-      const deleteButtons = getAllByRole('button', { name: messages.outcomesDelete.defaultMessage });
-      expect(deleteButtons.length).toBe(2);
-    });
+    // FIXME: the following doesn't happen, because this is a controlled component and only changes
+    // when the props change (in response to 'onChange'). This needs to be tested at a higher level,
+    // e.g. testing the whole page together, not just this component.
+    // await waitFor(() => {
+    //   const deleteButtons = getAllByRole('button', { name: messages.outcomesDelete.defaultMessage });
+    //   expect(deleteButtons.length).toBe(2);
+    // });
   });
 
   it('should delete learning outcome form on click Delete', async () => {
-    const { getAllByRole, getByRole } = render(<RootWrapper {...props} />);
+    const { getByRole } = render(<RootWrapper {...props} />);
     const deleteButton = getByRole('button', { name: messages.outcomesDelete.defaultMessage });
-    act(() => {
-      fireEvent.click(deleteButton);
-    });
+    fireEvent.click(deleteButton);
 
     expect(onChangeMock).toHaveBeenCalledWith([], 'learningInfo');
-    await waitFor(() => {
-      const deleteButtons = getAllByRole('button', { name: messages.outcomesDelete.defaultMessage });
-      expect(deleteButtons.length).toBe(0);
-    });
+    // FIXME: the following doesn't happen, because this is a controlled component and only changes
+    // when the props change (in response to 'onChange'). This needs to be tested at a higher level,
+    // e.g. testing the whole page together, not just this component.
+    // await waitFor(() => {
+    //   const deleteButtons = getAllByRole('button', { name: messages.outcomesDelete.defaultMessage });
+    //   expect(deleteButtons.length).toBe(0);
+    // });
   });
 
   it('should call onChange if input value changed', () => {
     const { getByPlaceholderText } = render(<RootWrapper {...props} />);
     const input = getByPlaceholderText(messages.outcomesInputPlaceholder.defaultMessage);
-    act(() => {
-      fireEvent.change(input, { target: { value: 'abc' } });
-    });
+    fireEvent.change(input, { target: { value: 'abc' } });
 
     expect(onChangeMock).toHaveBeenCalledWith(['abc'], 'learningInfo');
   });

src/schedule-and-details/license-section/license-selector/LicenseSelector.test.jsx

@@ -1,7 +1,4 @@
-import React from 'react';
-import {
-  act, fireEvent, render, waitFor,
-} from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { LICENSE_TYPE } from '../constants';
@@ -40,16 +37,17 @@ describe('<LicenseSelector />', () => {
     const { getByRole } = render(<RootWrapper {...props} />);
     const button = getByRole('button', { name: messages.licenseChoice2.defaultMessage });
     expect(button).toHaveClass('btn btn-outline-primary');
-    act(() => {
-      fireEvent.click(button);
-    });
-    await waitFor(() => {
-      expect(button).toHaveClass('btn btn-primary');
-    });
+    fireEvent.click(button);
     expect(props.onChangeLicenseType).toHaveBeenCalledWith(
       LICENSE_TYPE.creativeCommons,
       'license',
     );
+    // FIXME: the following doesn't happen, because this is a controlled component and only changes
+    // when the props change (in response to 'onChange'). This needs to be tested at a higher level,
+    // e.g. testing the whole page together, not just this component.
+    // await waitFor(() => {
+    //   expect(button).toHaveClass('btn btn-primary');
+    // });
   });
 
   it('should show disabled buttons if license is null', () => {