Add unit tests for connection states of the component (#15)

src/proctored-exam-settings/ProctoredExamSettings.jsx

@@ -223,6 +223,7 @@ function ExamSettings(props) {
         style={{
           height: '50vh',
         }}
+        data-test-id="spinnerContainer"
       >
         <Spinner className animation="border" role="status" variant="primary">
           <span className="sr-only">Loading...</span>
@@ -233,7 +234,7 @@ function ExamSettings(props) {
 
   function renderConnectionError() {
     return (
-      <Alert variant="danger">
+      <Alert variant="danger" data-test-id="connectionError">
         We encountered a technical error when loading this page.
         This might be a temporary issue, so please try again in a few minutes.
         If the problem persists, please go to <a href="https://support.edx.org/hc/en-us">edX Support Page</a> for help.
@@ -243,7 +244,7 @@ function ExamSettings(props) {
 
   function renderPermissionError() {
     return (
-      <Alert variant="danger">
+      <Alert variant="danger" data-test-id="permissionError">
         You are not authorized to view this page. If you feel you should have access,
         please reach out to your course team admin to be given access.
       </Alert>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  render, screen, cleanup, waitFor, fireEvent, act,
+  render, screen, cleanup, waitFor, waitForElementToBeRemoved, fireEvent, act,
 } from '@testing-library/react';
 import * as auth from '@edx/frontend-platform/auth';
 import ProctoredExamSettings from './ProctoredExamSettings';
@@ -9,7 +9,7 @@ const defaultProps = {
   courseId: 'course-v1%3AedX%2BDemoX%2BDemo_Course',
 };
 
-describe('ProctoredExamSettings', () => {
+describe('ProctoredExamSettings check default on create zendesk ticket field tests', () => {
   auth.getAuthenticatedHttpClient = jest.fn(() => ({
     get: async () => ({
       data: {
@@ -72,3 +72,54 @@ describe('ProctoredExamSettings', () => {
     expect(zendeskTicketInput.checked).toEqual(true);
   });
 });
+
+describe('ProctoredExamSettings connection states tests', () => {
+  it('shows the spinner before the connection is complete', async () => {
+    render(<ProctoredExamSettings {...defaultProps} />);
+    const spinner = screen.getByTestId('spinnerContainer');
+    expect(spinner.textContent).toEqual('Loading...');
+    await waitForElementToBeRemoved(spinner);
+  });
+
+  it('show connection error message when we suffer server side error', async () => {
+    const errorObject = {
+      customAttributes: {
+        httpErrorStatus: 500,
+      },
+    };
+    auth.getAuthenticatedHttpClient = jest.fn(() => ({
+      get: async () => {
+        throw errorObject;
+      },
+    }));
+
+    await act(async () => render(<ProctoredExamSettings {...defaultProps} />));
+    const connectionError = screen.getByTestId('connectionError');
+    expect(connectionError.textContent).toEqual(
+      expect.stringContaining('We encountered a technical error'),
+    );
+  });
+
+  it('show permission error message when user do not have enough permission', async () => {
+    const errorObject = {
+      customAttributes: {
+        httpErrorStatus: 403,
+      },
+    };
+    auth.getAuthenticatedHttpClient = jest.fn(() => ({
+      get: async () => {
+        throw errorObject;
+      },
+    }));
+
+    await act(async () => render(<ProctoredExamSettings {...defaultProps} />));
+    const connectionError = screen.getByTestId('permissionError');
+    expect(connectionError.textContent).toEqual(
+      expect.stringContaining('You are not authorized to view this page'),
+    );
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+});