refactor: removed waitForComponentToPaint util, updated test suites

openedx · Jun 12, 2024 · fd659e4 · fd659e4
1 parent 985eecc
commit fd659e4
Show file tree

Hide file tree

Showing 30 changed files with 615 additions and 643 deletions.
diff --git a/src/FeatureBasedEnrollments/FeatureBasedEnrollment.test.jsx b/src/FeatureBasedEnrollments/FeatureBasedEnrollment.test.jsx
@@ -1,6 +1,6 @@
 import { mount } from 'enzyme';
 import React from 'react';
-import { waitForComponentToPaint } from '../setupTest';
+import { waitFor } from '@testing-library/react';
 import FeatureBasedEnrollment from './FeatureBasedEnrollment';
 import UserMessagesProvider from '../userMessages/UserMessagesProvider';
 import { fbeEnabledResponse } from './data/test/featureBasedEnrollment';
@@ -25,7 +25,6 @@ describe('Feature Based Enrollment', () => {
     // api file has only one default export, so that will be spied-on
     jest.spyOn(api, 'default').mockImplementationOnce(() => Promise.resolve(fbeEnabledResponse));
     wrapper = mount(<FeatureBasedEnrollmentWrapper {...props} />);
-    await waitForComponentToPaint(wrapper);
   });
 
   afterEach(() => {
@@ -41,22 +40,23 @@ describe('Feature Based Enrollment', () => {
     const cardList = wrapper.find('Card');
     const courseTitle = wrapper.find('h4');
 
-    expect(cardList).toHaveLength(2);
-    expect(wrapper.find('h3#fbe-title-header').text()).toEqual('Feature Based Enrollment Configuration');
-    expect(courseTitle.text()).toEqual('Course Title: test course');
+    waitFor(() => {
+      expect(cardList).toHaveLength(2);
+      expect(wrapper.find('h3#fbe-title-header').text()).toEqual('Feature Based Enrollment Configuration');
+      expect(courseTitle.text()).toEqual('Course Title: test course');
+    });
   });
 
   it('No FBE Data', async () => {
     jest.spyOn(api, 'default').mockImplementationOnce(() => Promise.resolve({}));
     wrapper = mount(<FeatureBasedEnrollmentWrapper {...props} />);
-    await waitForComponentToPaint(wrapper);
 
     const cardList = wrapper.find('Card');
     const noRecordMessage = wrapper.find('p');
 
     expect(cardList).toHaveLength(0);
     expect(wrapper.find('h3#fbe-title-header').text()).toEqual('Feature Based Enrollment Configuration');
-    expect(noRecordMessage.text()).toEqual('No Feature Based Enrollment Configurations were found.');
+    waitFor(() => expect(noRecordMessage.text()).toEqual('No Feature Based Enrollment Configurations were found.'));
   });
 
   it('Page Loading component render', async () => {
@@ -78,9 +78,8 @@ describe('Feature Based Enrollment', () => {
     };
     jest.spyOn(api, 'default').mockImplementationOnce(() => Promise.resolve(fbeErrors));
     wrapper = mount(<FeatureBasedEnrollmentWrapper {...props} />);
-    await waitForComponentToPaint(wrapper);
 
     const alert = wrapper.find('.alert');
-    expect(alert.text()).toEqual('Error fetching FBE Data');
+    waitFor(() => expect(alert.text()).toEqual('Error fetching FBE Data'));
   });
 });
diff --git a/src/FeatureBasedEnrollments/FeatureBasedEnrollmentIndexPage.test.jsx b/src/FeatureBasedEnrollments/FeatureBasedEnrollmentIndexPage.test.jsx
@@ -2,7 +2,7 @@ import { mount } from 'enzyme';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { MemoryRouter } from 'react-router-dom';
-import { waitForComponentToPaint } from '../setupTest';
+import { waitFor } from '@testing-library/react';
 import FeatureBasedEnrollmentIndexPage from './FeatureBasedEnrollmentIndexPage';
 import UserMessagesProvider from '../userMessages/UserMessagesProvider';
 import { fbeEnabledResponse } from './data/test/featureBasedEnrollment';
@@ -59,7 +59,6 @@ describe('Feature Based Enrollment Index Page', () => {
   it('default page render with query param course id', async () => {
     apiMock = jest.spyOn(api, 'default').mockImplementationOnce(() => Promise.resolve({}));
     wrapper = mount(<FeatureBasedEnrollmentIndexPageWrapper searchQuery={`?course_id=${courseId}`} />);
-    await waitForComponentToPaint(wrapper);
 
     const courseIdInput = wrapper.find('input[name="courseId"]');
     const searchButton = wrapper.find('button.btn-primary');
@@ -76,10 +75,11 @@ describe('Feature Based Enrollment Index Page', () => {
     wrapper.find('input[name="courseId"]').instance().value = courseId;
     wrapper.find('button.btn-primary').simulate('click');
 
-    await waitForComponentToPaint(wrapper);
     expect(apiMock).toHaveBeenCalledTimes(1);
-    expect(wrapper.find('Card')).toHaveLength(2);
-    expect(mockedNavigator).toHaveBeenCalledWith(`/feature_based_enrollments/?course_id=${courseId}`);
+    waitFor(() => {
+      expect(wrapper.find('Card')).toHaveLength(2);
+      expect(mockedNavigator).toHaveBeenCalledWith(`/feature_based_enrollments/?course_id=${courseId}`);
+    });
   });
 
   it('api call made on each click', async () => {
@@ -90,12 +90,12 @@ describe('Feature Based Enrollment Index Page', () => {
     wrapper.find('input[name="courseId"]').instance().value = courseId;
     wrapper.find('button.btn-primary').simulate('click');
 
-    await waitForComponentToPaint(wrapper);
-    expect(apiMock).toHaveBeenCalledTimes(1);
+    waitFor(() => {
+      expect(apiMock).toHaveBeenCalledTimes(1);
 
-    wrapper.find('button.btn-primary').simulate('click');
-    await waitForComponentToPaint(wrapper);
-    expect(apiMock).toHaveBeenCalledTimes(2);
+      wrapper.find('button.btn-primary').simulate('click');
+      expect(apiMock).toHaveBeenCalledTimes(2);
+    });
   });
 
   it('empty search value does not yield anything', async () => {
@@ -104,11 +104,11 @@ describe('Feature Based Enrollment Index Page', () => {
 
     wrapper.find('input[name="courseId"]').instance().value = '';
     wrapper.find('button.btn-primary').simulate('click');
-
-    await waitForComponentToPaint(wrapper);
-    expect(apiMock).toHaveBeenCalledTimes(0);
-    expect(wrapper.find('Card')).toHaveLength(0);
-    expect(mockedNavigator).toHaveBeenCalledWith('/feature_based_enrollments', { replace: true });
+    waitFor(() => {
+      expect(apiMock).toHaveBeenCalledTimes(0);
+      expect(wrapper.find('Card')).toHaveLength(0);
+      expect(mockedNavigator).toHaveBeenCalledWith('/feature_based_enrollments', { replace: true });
+    });
   });
 
   it('Invalid search value', async () => {
@@ -118,7 +118,6 @@ describe('Feature Based Enrollment Index Page', () => {
     wrapper.find('input[name="courseId"]').instance().value = 'invalid-value';
     wrapper.find('button.btn-primary').simulate('click');
 
-    await waitForComponentToPaint(wrapper);
     expect(apiMock).toHaveBeenCalledTimes(0);
     expect(wrapper.find('Card')).toHaveLength(0);
     expect(wrapper.find('.alert').text()).toEqual('Supplied course ID "invalid-value" is either invalid or incorrect.');

diff --git a/src/ProgramEnrollments/LinkProgramEnrollments.test.jsx b/src/ProgramEnrollments/LinkProgramEnrollments.test.jsx
@@ -1,7 +1,7 @@
 import { mount } from 'enzyme';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { waitForComponentToPaint } from '../setupTest';
+import { waitFor } from '@testing-library/react';
 import LinkProgramEnrollments from './LinkProgramEnrollments';
 import UserMessagesProvider from '../userMessages/UserMessagesProvider';
 import {
@@ -60,7 +60,6 @@ describe('Link Program Enrollments', () => {
     wrapper.find('textarea[name="usernamePairText"]').instance().value = data.usernamePairText;
     wrapper.find('button.btn-primary').simulate('click');
 
-    await waitForComponentToPaint(wrapper);
     expect(apiMock).toHaveBeenCalledTimes(1);
   });
 
@@ -75,12 +74,12 @@ describe('Link Program Enrollments', () => {
     wrapper.find('textarea[name="usernamePairText"]').instance().value = data.usernamePairText;
     wrapper.find('button.btn-primary').simulate('click');
 
-    await waitForComponentToPaint(wrapper);
-    expect(apiMock).toHaveBeenCalledTimes(1);
+    waitFor(() => {
+      expect(apiMock).toHaveBeenCalledTimes(1);
 
-    wrapper.find('button.btn-primary').simulate('click');
-    await waitForComponentToPaint(wrapper);
-    expect(apiMock).toHaveBeenCalledTimes(2);
+      wrapper.find('button.btn-primary').simulate('click');
+      expect(apiMock).toHaveBeenCalledTimes(2);
+    });
   });
 
   it('empty search value yields error response', async () => {
@@ -93,10 +92,11 @@ describe('Link Program Enrollments', () => {
     wrapper.find('textarea[name="usernamePairText"]').instance().value = '';
     wrapper.find('button.btn-primary').simulate('click');
 
-    await waitForComponentToPaint(wrapper);
     expect(apiMock).toHaveBeenCalledTimes(1);
-    expect(wrapper.find('.error-message')).toHaveLength(1);
-    expect(wrapper.find('.success-message')).toHaveLength(0);
+    waitFor(() => {
+      expect(wrapper.find('.error-message')).toHaveLength(1);
+      expect(wrapper.find('.success-message')).toHaveLength(0);
+    });
   });
 
   it('Invalid Program UUID value', async () => {
@@ -109,10 +109,11 @@ describe('Link Program Enrollments', () => {
     wrapper.find('textarea[name="usernamePairText"]').instance().value = data.usernamePairText;
     wrapper.find('button.btn-primary').simulate('click');
 
-    await waitForComponentToPaint(wrapper);
-    expect(apiMock).toHaveBeenCalledTimes(1);
-    expect(wrapper.find('.error-message')).toHaveLength(1);
-    expect(wrapper.find('.success-message')).toHaveLength(0);
+    waitFor(() => {
+      expect(apiMock).toHaveBeenCalledTimes(1);
+      expect(wrapper.find('.error-message')).toHaveLength(1);
+      expect(wrapper.find('.success-message')).toHaveLength(0);
+    });
   });
 
   it('Invalid Username value', async () => {
@@ -125,10 +126,11 @@ describe('Link Program Enrollments', () => {
     wrapper.find('textarea[name="usernamePairText"]').instance().value = data.usernamePairText;
     wrapper.find('button.btn-primary').simulate('click');
 
-    await waitForComponentToPaint(wrapper);
-    expect(apiMock).toHaveBeenCalledTimes(1);
-    expect(wrapper.find('.error-message')).toHaveLength(1);
-    expect(wrapper.find('.success-message')).toHaveLength(0);
+    waitFor(() => {
+      expect(apiMock).toHaveBeenCalledTimes(1);
+      expect(wrapper.find('.error-message')).toHaveLength(1);
+      expect(wrapper.find('.success-message')).toHaveLength(0);
+    });
   });
 
   it('Invalid External User Key value', async () => {
@@ -141,10 +143,11 @@ describe('Link Program Enrollments', () => {
     wrapper.find('textarea[name="usernamePairText"]').instance().value = data.usernamePairText;
     wrapper.find('button.btn-primary').simulate('click');
 
-    await waitForComponentToPaint(wrapper);
     expect(apiMock).toHaveBeenCalledTimes(1);
-    expect(wrapper.find('.error-message')).toHaveLength(1);
-    expect(wrapper.find('.success-message')).toHaveLength(0);
+    waitFor(() => {
+      expect(wrapper.find('.error-message')).toHaveLength(1);
+      expect(wrapper.find('.success-message')).toHaveLength(0);
+    });
   });
 
   it('Program Already Linked', async () => {
@@ -157,9 +160,10 @@ describe('Link Program Enrollments', () => {
     wrapper.find('textarea[name="usernamePairText"]').instance().value = data.usernamePairText;
     wrapper.find('button.btn-primary').simulate('click');
 
-    await waitForComponentToPaint(wrapper);
     expect(apiMock).toHaveBeenCalledTimes(1);
-    expect(wrapper.find('.error-message')).toHaveLength(1);
-    expect(wrapper.find('.success-message')).toHaveLength(0);
+    waitFor(() => {
+      expect(wrapper.find('.error-message')).toHaveLength(1);
+      expect(wrapper.find('.success-message')).toHaveLength(0);
+    });
   });
 });
diff --git a/src/ProgramEnrollments/ProgramEnrollmentsIndexPage.test.jsx b/src/ProgramEnrollments/ProgramEnrollmentsIndexPage.test.jsx
@@ -1,7 +1,6 @@
 import { mount } from 'enzyme';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { waitForComponentToPaint } from '../setupTest';
 import ProgramEnrollmentsIndexPage from './ProgramEnrollmentsIndexPage';
 import UserMessagesProvider from '../userMessages/UserMessagesProvider';
 import samlProvidersResponseValues from './ProgramInspector/data/test/samlProviders';
@@ -38,7 +37,7 @@ describe('Program Enrollments Index Page', () => {
 
   it('renders correctly', async () => {
     wrapper = mount(<ProgramEnrollmentsIndexPageWrapper location={location} />);
-    await waitForComponentToPaint(wrapper);
+
     const tabs = wrapper.find('nav.pgn__tabs.nav-tabs a');
 
     expect(tabs.at(0).text()).toEqual('Program Inspector');
@@ -47,7 +46,6 @@ describe('Program Enrollments Index Page', () => {
 
   it('Link Program Enrollments Tab', async () => {
     wrapper = mount(<ProgramEnrollmentsIndexPageWrapper location={location} />);
-    await waitForComponentToPaint(wrapper);
 
     let tabs = wrapper.find('nav.nav-tabs a');
 
@@ -62,7 +60,6 @@ describe('Program Enrollments Index Page', () => {
 
   it('Program Inspector Tab', async () => {
     wrapper = mount(<ProgramEnrollmentsIndexPageWrapper location={location} />);
-    await waitForComponentToPaint(wrapper);
 
     let tabs = wrapper.find('nav.nav-tabs a');
 
@@ -77,7 +74,6 @@ describe('Program Enrollments Index Page', () => {
 
   it('page renders without query', async () => {
     wrapper = mount(<ProgramEnrollmentsIndexPageWrapper location={location} />);
-    await waitForComponentToPaint(wrapper);
     const tabs = wrapper.find('nav.nav-tabs a');
 
     expect(tabs.at(0).html()).toEqual(expect.stringContaining('active'));
@@ -87,7 +83,6 @@ describe('Program Enrollments Index Page', () => {
   it('page renders with query', async () => {
     location.search = '?edx_user=&org_key=testX&external_user_key=';
     wrapper = mount(<ProgramEnrollmentsIndexPageWrapper location={location} />);
-    await waitForComponentToPaint(wrapper);
     const tabs = wrapper.find('nav.nav-tabs a');
 
     expect(tabs.at(0).html()).toEqual(expect.stringContaining('active'));

diff --git a/src/ProgramEnrollments/ProgramInspector/EnrollmentDetails.test.jsx b/src/ProgramEnrollments/ProgramInspector/EnrollmentDetails.test.jsx
@@ -1,7 +1,6 @@
 import { mount } from 'enzyme';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { waitForComponentToPaint } from '../../setupTest';
 import UserMessagesProvider from '../../userMessages/UserMessagesProvider';
 import EnrollmentDetails from './EnrollmentDetails';
 import { programInspectorSuccessResponse } from './data/test/programInspector';
@@ -26,7 +25,6 @@ describe('Enrollment Details', () => {
         }
       />,
     );
-    await waitForComponentToPaint(wrapper);
 
     const heading = wrapper.find('.enrollments h3');
     expect(heading.text()).toEqual(
@@ -38,7 +36,6 @@ describe('Enrollment Details', () => {
     'Enrollment Details do not render',
     async ({ enrollment }) => {
       wrapper = mount(<EnrollmentDetailsWrapper enrollments={enrollment} />);
-      await waitForComponentToPaint(wrapper);
 
       const heading = wrapper.find('.enrollments h3');
       expect(heading.exists()).toBeFalsy();
@@ -53,7 +50,6 @@ describe('Enrollment Details', () => {
         }
       />,
     );
-    await waitForComponentToPaint(wrapper);
 
     const row = wrapper.find('.enrollment-details tbody tr');
     expect(row.find('td').at(0).text()).toEqual(data.status);
@@ -75,7 +71,6 @@ describe('Enrollment Details', () => {
           }
         />,
       );
-      await waitForComponentToPaint(wrapper);
       const programCourseEnrollments = data.program_course_enrollments[index];
       expect(wrapper.find('.enrollments h5').text()).toEqual(
         'Program Course Enrollments',