Modified test for src/components/CheckIn/CheckInWrapper.tsx file (#1566)

* Modified Tests for CheckInWrapper file

* Update documentation

* Added tests

* Revert "Update documentation"

This reverts commit b79d09c.

* Update documentation

* Revert "Update documentation"

This reverts commit 5fc5098.

* Update documentation

* Revert "Update documentation"

This reverts commit 47fbf2c.

src/components/CheckIn/CheckInModal.tsx

@@ -80,7 +80,7 @@ export const CheckInModal = (props: InterfaceModalProp): JSX.Element => {
         size="lg"
       >
         <Modal.Header closeButton className="bg-primary">
-          <Modal.Title className="text-white">
+          <Modal.Title className="text-white" data-testid="modal-title">
             Event Check In Management
           </Modal.Title>
         </Modal.Header>

src/components/CheckIn/CheckInWrapper.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { MockedProvider } from '@apollo/react-testing';
 import { CheckInWrapper } from './CheckInWrapper';
 import { BrowserRouter } from 'react-router-dom';
@@ -21,7 +21,7 @@ describe('Testing CheckIn Wrapper', () => {
   };
 
   test('The button to open and close the modal should work properly', async () => {
-    const { queryByText } = render(
+    render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
           <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -37,22 +37,19 @@ describe('Testing CheckIn Wrapper', () => {
     );
 
     // Open the modal
-    fireEvent.click(queryByText('Check In Registrants') as Element);
+    fireEvent.click(screen.getByLabelText('checkInRegistrants') as Element);
 
     await waitFor(() =>
-      expect(queryByText('Event Check In Management')).toBeInTheDocument()
+      expect(screen.queryByTestId('modal-title')).toBeInTheDocument()
     );
 
-    /* 
-    TODO 
-    The following test of closing the modal should be uncommented when the memory leak issue of MUI Data Grid is fixed.
-
-    It will consequently ensure 100% coverage of the file. 
-    */
-    // Close the modal
-    // fireEvent.click(queryByRole('button', { name: /close/i }) as HTMLElement);
-    // await waitFor(() =>
-    //   expect(queryByText('Event Check In Management')).not.toBeInTheDocument()
-    // );
+    //  Close the modal
+    const closebtn = screen.getByLabelText('Close');
+
+    fireEvent.click(closebtn as Element);
+
+    await waitFor(() =>
+      expect(screen.queryByTestId('modal-title')).not.toBeInTheDocument()
+    );
   });
 });