test: fix completely broken tests

Author: bradenmacdonald

src/pages-and-resources/pages/PageCard.test.jsx

@@ -11,7 +11,6 @@ import { getApiWaffleFlagsUrl } from '../../data/api';
 
 import PagesAndResourcesProvider from '../PagesAndResourcesProvider';
 
-let container;
 let axiosMock;
 const courseId = '123';
 const mockPageConfig = [
@@ -36,12 +35,11 @@ const mockPageConfig = [
 ];
 
 const renderComponent = () => {
-  const wrapper = render(
+  render(
     <PagesAndResourcesProvider courseId={courseId}>
       <PageGrid pages={mockPageConfig} />
     </PagesAndResourcesProvider>,
   );
-  container = wrapper.container;
 };
 
 describe('LiveSettings', () => {
@@ -61,15 +59,15 @@ describe('LiveSettings', () => {
   it('should render three cards', async () => {
     renderComponent();
     await waitFor(() => {
-      expect(screen.queryAllByRole(container, 'button')).toHaveLength(3);
+      expect(screen.queryAllByRole('button')).toHaveLength(3);
     });
   });
 
   it('should navigate to legacyLink', async () => {
     renderComponent();
     const textbookPagePath = mockPageConfig[0][1];
     await waitFor(() => {
-      const textbookSettingsButton = screen.queryAllByRole(container, 'link')[1];
+      const textbookSettingsButton = screen.queryAllByRole('link')[1];
       expect(textbookSettingsButton).toHaveAttribute('href', textbookPagePath);
     });
   });

src/schedule-and-details/instructors-section/InstructorsSection.test.jsx

@@ -53,28 +53,38 @@ describe('<InstructorsSection />', () => {
   });
 
   it('should create another instructor form on click Add new instructor', async () => {
-    const { getAllByRole, getByRole } = render(<RootWrapper {...props} />);
-    const addButton = getByRole('button', { name: instructorMessages.instructorDelete.defaultMessage });
-    act(() => {
-      fireEvent.click(addButton);
-    });
+    const { getAllByRole, getByRole, rerender } = render(<RootWrapper {...props} />);
+    const addButton = getByRole('button', { name: messages.instructorAdd.defaultMessage });
+    fireEvent.click(addButton);
+
+    const newInstructors = [
+      props.instructors[0],
+      {
+        bio: '',
+        image: '',
+        name: '',
+        organization: '',
+        title: '',
+      },
+    ];
+    expect(onChangeMock).toHaveBeenCalledWith({ instructors: newInstructors }, 'instructorInfo');
 
+    rerender(<RootWrapper {...props} instructors={newInstructors} />);
     await waitFor(() => {
       const deleteButtons = getAllByRole('button', { name: instructorMessages.instructorDelete.defaultMessage });
       expect(deleteButtons.length).toBe(2);
     });
   });
 
   it('should delete instructor form on click Delete', async () => {
-    const { getAllByRole, getByRole } = render(<RootWrapper {...props} />);
+    const { queryAllByRole, getByRole, rerender } = render(<RootWrapper {...props} />);
     const deleteButton = getByRole('button', { name: instructorMessages.instructorDelete.defaultMessage });
-    act(() => {
-      fireEvent.click(deleteButton);
-    });
+    fireEvent.click(deleteButton);
 
     expect(onChangeMock).toHaveBeenCalledWith({ instructors: [] }, 'instructorInfo');
+    rerender(<RootWrapper {...props} instructors={[]} />);
     await waitFor(() => {
-      const deleteButtons = getAllByRole('button', { name: instructorMessages.instructorDelete.defaultMessage });
+      const deleteButtons = queryAllByRole('button', { name: instructorMessages.instructorDelete.defaultMessage });
       expect(deleteButtons.length).toBe(0);
     });
   });