test: add enrollment components tests (#96)

package.json

@@ -63,6 +63,7 @@
     "jest": "26.6.3",
     "react-test-renderer": "17.0.1",
     "reactifex": "1.1.1",
-    "request": "^2.88.2"
+    "request": "^2.88.2",
+    "@testing-library/react": "10.3.0"
   }
 }

src/setupTest.js

@@ -2,6 +2,7 @@ import 'babel-polyfill';
 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import checkPropTypes from 'check-prop-types';
+import { act } from 'react-dom/test-utils';
 import { initialize, mergeConfig } from '@edx/frontend-platform';
 import { MockAuthService } from '@edx/frontend-platform/auth';
 
@@ -34,3 +35,10 @@ export function checkProps(component, expectedProps) {
     component.name,
   );
 }
+
+export const waitForComponentToPaint = async (wrapper) => {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve));
+    wrapper.update();
+  });
+};

src/users/EnrollmentForm.test.jsx

@@ -0,0 +1,74 @@
+import { mount } from 'enzyme';
+import { waitFor } from '@testing-library/react';
+import React from 'react';
+
+import { waitForComponentToPaint } from '../setupTest';
+import EnrollmentForm from './EnrollmentForm';
+import enrollmentFormData from './data/test/enrollmentForm';
+import UserMessagesProvider from '../user-messages/UserMessagesProvider';
+import * as api from './data/api';
+
+const EnrollmentFormWrapper = (props) => (
+  <UserMessagesProvider>
+    <EnrollmentForm {...props} />
+  </UserMessagesProvider>
+);
+
+describe('Enrollment Change form', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(<EnrollmentFormWrapper {...enrollmentFormData} />);
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  it('Default form rendering', () => {
+    const modeSelectionDropdown = wrapper.find('select#mode');
+    const modeChangeReasonDropdown = wrapper.find('select#reason');
+    const commentsTextarea = wrapper.find('textarea#comments');
+    expect(modeSelectionDropdown.find('option')).toHaveLength(2);
+    expect(modeChangeReasonDropdown.find('option')).toHaveLength(5);
+    expect(commentsTextarea.text()).toEqual('');
+  });
+
+  describe('Change form submission', () => {
+    it('Successful form submission', async () => {
+      const apiMock = jest.spyOn(api, 'postEnrollmentChange').mockImplementationOnce(() => Promise.resolve({}));
+      expect(apiMock).toHaveBeenCalledTimes(0);
+
+      wrapper.find('textarea#comments').simulate('change', { target: { value: 'test mode change' } });
+      wrapper.find('button.btn-primary').simulate('click');
+      expect(apiMock).toHaveBeenCalledTimes(1);
+
+      // The mock call count does not update on time for expect call, therefore, waitFor is used to give enough time
+      // for the call count to update. However, it is possible this might turn out to be flaky.
+      await waitFor(() => expect(enrollmentFormData.changeHandler).toHaveBeenCalledTimes(1));
+      apiMock.mockReset();
+    });
+
+    it('Unsuccessful form submission', async () => {
+      const apiMock = jest.spyOn(api, 'postEnrollmentChange').mockImplementationOnce(() => Promise.resolve({
+        errors: [
+          {
+            code: null,
+            dismissible: true,
+            text: 'Error changing enrollment',
+            type: 'danger',
+            topic: 'enrollments',
+          },
+        ],
+      }));
+      expect(apiMock).toHaveBeenCalledTimes(0);
+
+      wrapper.find('textarea#comments').simulate('change', { target: { value: 'test mode change' } });
+      wrapper.find('button.btn-primary').simulate('click');
+      await waitForComponentToPaint(wrapper);
+
+      expect(apiMock).toHaveBeenCalledTimes(1);
+      expect(wrapper.find('.alert').text()).toEqual('Error changing enrollment');
+    });
+  });
+});

src/users/Enrollments.test.jsx

@@ -0,0 +1,54 @@
+import { mount } from 'enzyme';
+import React from 'react';
+
+import Enrollments from './Enrollments';
+import enrollmentsData from './data/test/enrollments';
+import UserMessagesProvider from '../user-messages/UserMessagesProvider';
+
+const EnrollmentPageWrapper = (props) => (
+  <UserMessagesProvider>
+    <Enrollments {...props} />
+  </UserMessagesProvider>
+);
+
+describe('Course Enrollments Listing', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(<EnrollmentPageWrapper {...enrollmentsData} />);
+  });
+
+  it('default collapsible with enrollment data', () => {
+    const collapsible = wrapper.find('CollapsibleAdvanced').find('.collapsible-trigger').hostNodes();
+    expect(collapsible.text()).toEqual('Enrollments (2)');
+  });
+
+  it('No Enrollment Data', () => {
+    const enrollmentData = { ...enrollmentsData, data: [] };
+    wrapper = mount(<Enrollments {...enrollmentData} />);
+    const collapsible = wrapper.find('CollapsibleAdvanced').find('.collapsible-trigger').hostNodes();
+    expect(collapsible.text()).toEqual('Enrollments (0)');
+  });
+
+  it('Enrollment change form is rendered for individual enrollment', () => {
+    const dataTable = wrapper.find('table.table');
+    dataTable.find('tbody tr').forEach(row => {
+      const courseId = row.find('a').text();
+      row.find('button.btn-outline-primary').simulate('click');
+      const enrollmentForm = wrapper.find('EnrollmentForm');
+      expect(enrollmentForm.html()).toEqual(expect.stringContaining(courseId));
+      enrollmentForm.find('button.btn-outline-secondary').simulate('click');
+      expect(wrapper.find('EnrollmentForm')).toEqual({});
+    });
+  });
+
+  it('Sorting Columns Button Enabled by default', () => {
+    const dataTable = wrapper.find('table.table');
+    const tableHeaders = dataTable.find('thead tr th');
+
+    tableHeaders.forEach(header => {
+      const sortButton = header.find('button.btn-header');
+      expect(sortButton.disabled).toBeFalsy();
+    });
+  });
+});

src/users/data/test/enrollmentForm.js

@@ -0,0 +1,26 @@
+const enrollmentFormData = {
+  user: 'edX',
+  enrollment: {
+    courseId: 'course-v1:testX+test123+2030',
+    courseStart: Date().toLocaleString(),
+    verifiedUpgradeDeadline: Date().toLocaleString(),
+    courseEnd: Date().toLocaleString(),
+    created: Date().toLocaleString(),
+    courseModes: [
+      {
+        slug: 'verified',
+      },
+    ],
+    isActive: true,
+    mode: 'audit',
+    manualEnrollment: {
+      reason: 'Test Enrollment',
+      enrolledBy: 'edX',
+      timestamp: Date().toLocaleString(),
+    },
+  },
+  changeHandler: jest.fn(() => {}),
+  closeHandler: jest.fn(() => {}),
+};
+
+export default enrollmentFormData;

src/users/data/test/enrollments.js

@@ -31,11 +31,7 @@ const enrollmentsData = {
         slug: 'verified',
       },
     ],
-    manualEnrollment: {
-      reason: 'Test Enrollment 2',
-      enrolledBy: 'edX',
-      timestamp: Date().toLocaleString(),
-    },
+    manualEnrollment: {},
   },
   ],
   user: 'edX',