Switch from enzyme to testing-library/react (#14)

src/proctored-exam-settings/ProctoredExamSettings.jsx

@@ -189,6 +189,7 @@ function ExamSettings(props) {
               name="createZendeskTickets"
               checked={createZendeskTickets}
               onChange={() => onCreateZendeskTicketsChange(true)}
+              data-test-id="createZendeskTicketsYes"
             />
             <Form.Check
               type="radio"
@@ -198,6 +199,7 @@ function ExamSettings(props) {
               name="createZendeskTickets"
               checked={!createZendeskTickets}
               onChange={() => onCreateZendeskTicketsChange(false)}
+              data-test-id="createZendeskTicketsNo"
             />
             <Form.Text id="createZendeskTicketsText">
               If this value is &quot;Yes&quot;, a Zendesk ticket will be created for suspicious proctored exam attempts.

src/proctored-exam-settings/ProctoredExamSettings.test.jsx

@@ -1,4 +1,74 @@
+import React from 'react';
+import {
+  render, screen, cleanup, waitFor, fireEvent, act,
+} from '@testing-library/react';
+import * as auth from '@edx/frontend-platform/auth';
+import ProctoredExamSettings from './ProctoredExamSettings';
+
+const defaultProps = {
+  courseId: 'course-v1%3AedX%2BDemoX%2BDemo_Course',
+};
+
 describe('ProctoredExamSettings', () => {
-  it('will pass because there are no tests', () => {
+  auth.getAuthenticatedHttpClient = jest.fn(() => ({
+    get: async () => ({
+      data: {
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'mockproc',
+          proctoring_escalation_email: 'test@example.com',
+          create_zendesk_tickets: true,
+        },
+        available_proctoring_providers: ['software_secure', 'proctortrack', 'mockproc'],
+      },
+      catch: () => {},
+    }),
+  }));
+
+  auth.getAuthenticatedUser = jest.fn(() => ({ userId: 3 }));
+
+  beforeEach(async () => {
+    await act(async () => render(<ProctoredExamSettings {...defaultProps} />));
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('updates zendesk ticket field if proctortrack is provider', async () => {
+    await waitFor(() => {
+      screen.getByDisplayValue('mockproc');
+    });
+    const selectElement = screen.getByDisplayValue('mockproc');
+    await act(async () => {
+      fireEvent.change(selectElement, { target: { value: 'proctortrack' } });
+    });
+    const zendeskTicketInput = screen.getByTestId('createZendeskTicketsNo');
+    expect(zendeskTicketInput.checked).toEqual(true);
+  });
+
+  it('updates zendesk ticket field if software_secure is provider', async () => {
+    await waitFor(() => {
+      screen.getByDisplayValue('mockproc');
+    });
+    const selectElement = screen.getByDisplayValue('mockproc');
+    await act(async () => {
+      fireEvent.change(selectElement, { target: { value: 'software_secure' } });
+    });
+    const zendeskTicketInput = screen.getByTestId('createZendeskTicketsYes');
+    expect(zendeskTicketInput.checked).toEqual(true);
+  });
+
+  it('does not update zendesk ticket field for any other provider', async () => {
+    await waitFor(() => {
+      screen.getByDisplayValue('mockproc');
+    });
+    const selectElement = screen.getByDisplayValue('mockproc');
+    await act(async () => {
+      fireEvent.change(selectElement, { target: { value: 'mockproc' } });
+    });
+    const zendeskTicketInput = screen.getByTestId('createZendeskTicketsYes');
+    expect(zendeskTicketInput.checked).toEqual(true);
   });
 });

src/setupTest.js

@@ -1,10 +1,8 @@
 import 'babel-polyfill';
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
 import axios from 'axios';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { configure } from '@testing-library/react';
 
-Enzyme.configure({ adapter: new Adapter() });
-
+configure({ testIdAttribute: 'data-test-id' });
 jest.mock('@edx/frontend-platform/auth');
 getAuthenticatedHttpClient.mockReturnValue(axios);