feat(teamProjectsHeader): Refactored unit test to test for Submit but…

…ton correctly
uc-cdis · Oct 25, 2023 · 2cfe914 · 2cfe914
1 parent e48a37d
commit 2cfe914
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 35 deletions.
diff --git a/src/Analysis/SharedUtils/TeamProject/TeamProjectModal/TeamProjectModal.jsx b/src/Analysis/SharedUtils/TeamProject/TeamProjectModal/TeamProjectModal.jsx
@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import {
-  Button, Modal, Spin, Select,
-} from 'antd';
+import { Button, Modal, Spin, Select } from 'antd';
 import { useQuery } from 'react-query';
 import queryConfig from '../../QueryConfig';
 import LoadingErrorMessage from '../../LoadingErrorMessage/LoadingErrorMessage';
@@ -11,7 +9,7 @@ import './TeamProjectModal.css';
 
 const TeamProjectModal = ({ isModalOpen, setIsModalOpen, setBannerText }) => {
   const [selectedTeamProject, setSelectedTeamProject] = useState(
-    localStorage.getItem('teamProject'),
+    localStorage.getItem('teamProject')
   );
 
   const closeAndUpdateTeamProject = () => {
@@ -23,7 +21,7 @@ const TeamProjectModal = ({ isModalOpen, setIsModalOpen, setBannerText }) => {
   const { data, status } = useQuery(
     'teamprojects',
     fetchArboristTeamProjectRoles,
-    queryConfig,
+    queryConfig
   );
 
   let modalContent = (
@@ -39,7 +37,7 @@ const TeamProjectModal = ({ isModalOpen, setIsModalOpen, setBannerText }) => {
       <div className='spinner-container'>
         <Spin /> Retrieving the list of team projects.
         <br />
-          Please wait...
+        Please wait...
       </div>
     </Modal>
   );
@@ -72,18 +70,16 @@ const TeamProjectModal = ({ isModalOpen, setIsModalOpen, setBannerText }) => {
           closable={localStorage.getItem('teamProject')}
           maskClosable={localStorage.getItem('teamProject')}
           keyboard={localStorage.getItem('teamProject')}
-          footer={
-            localStorage.getItem('teamProject') && [
-              <Button
-                key='submit'
-                type='primary'
-                disabled={!selectedTeamProject}
-                onClick={() => closeAndUpdateTeamProject()}
-              >
-                Submit
-              </Button>,
-            ]
-          }
+          footer={[
+            <Button
+              key='submit'
+              type='primary'
+              disabled={!selectedTeamProject}
+              onClick={() => closeAndUpdateTeamProject()}
+            >
+              Submit
+            </Button>,
+          ]}
         >
           <div className='team-project-modal_modal-description'>
             Please select your team.

diff --git a/src/Analysis/SharedUtils/TeamProject/TeamProjectModal/TeamProjectModal.test.jsx b/src/Analysis/SharedUtils/TeamProject/TeamProjectModal/TeamProjectModal.test.jsx
@@ -1,7 +1,5 @@
 import React from 'react';
-import {
-  render, screen, fireEvent, waitFor,
-} from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { useQuery } from 'react-query';
 import TeamProjectModal from './TeamProjectModal';
@@ -18,12 +16,12 @@ describe('TeamProjectModal', () => {
         isModalOpen
         setIsModalOpen={() => {}}
         setBannerText={() => {}}
-      />,
+      />
     );
 
     expect(screen.getByText(/Please wait.../i)).toBeInTheDocument();
     expect(
-      screen.getByText(/Retrieving the list of team projects./i),
+      screen.getByText(/Retrieving the list of team projects./i)
     ).toBeInTheDocument();
   });
 
@@ -42,18 +40,17 @@ describe('TeamProjectModal', () => {
         isModalOpen
         setIsModalOpen={setIsModalOpen}
         setBannerText={setBannerText}
-      />,
+      />
     );
 
     await waitFor(() => screen.getByText(/Please select your team./i));
     expect(
-      screen.getByText(/-select one of the team projects below-/i),
+      screen.getByText(/-select one of the team projects below-/i)
     ).toBeInTheDocument();
 
     expect(screen.getByRole('combobox')).toBeInTheDocument();
-
-    expect(() => screen.getByText('Submit')).toThrow(
-      'Unable to find an element',
+    expect(screen.getByText('Submit').closest('button')).toHaveAttribute(
+      'disabled'
     );
   });
 
@@ -75,16 +72,20 @@ describe('TeamProjectModal', () => {
         isModalOpen
         setIsModalOpen={setIsModalOpen}
         setBannerText={setBannerText}
-      />,
+      />
     );
 
     await waitFor(() => screen.getByText(/Please select your team./i));
 
-    expect(() => screen.getByText('select one of the team projects below'),
+    expect(() =>
+      screen.getByText('select one of the team projects below')
     ).toThrow('Unable to find an element');
     expect(screen.getByText('test string')).toBeInTheDocument();
     expect(screen.getByRole('combobox')).toBeInTheDocument();
-    expect(screen.getByText(/Submit/i)).toBeInTheDocument();
+    expect(screen.getByText('Submit')).toBeInTheDocument();
+    expect(screen.getByText('Submit').closest('button')).not.toHaveAttribute(
+      'disabled'
+    );
   });
 
   test('sets defaultValue text based on localstorage state, calls setBannerText and closes modal on submit button click', async () => {
@@ -105,7 +106,7 @@ describe('TeamProjectModal', () => {
         isModalOpen
         setIsModalOpen={setIsModalOpen}
         setBannerText={setBannerText}
-      />,
+      />
     );
 
     await waitFor(() => screen.getByText(/Please select your team./i));

diff --git a/src/Analysis/SharedUtils/TeamProject/Utils/CheckForTeamProjectApplication.test.js b/src/Analysis/SharedUtils/TeamProject/Utils/CheckForTeamProjectApplication.test.js
@@ -4,16 +4,16 @@ describe('CheckForTeamProjectApplication', () => {
   it('should return true if the analysisApps contain a team project application', () => {
     const analysisApps = {
       'OHDSI Atlas': 1,
-      'SomeOtherApp': 2,
+      SomeOtherApp: 2,
     };
     const result = CheckForTeamProjectApplication(analysisApps);
     expect(result).toBe(true);
   });
 
   it('should return false if the analysisApps do not contain any team project application', () => {
     const analysisApps = {
-      'SomeOtherApp': 1,
-      'AnotherApp': 2,
+      SomeOtherApp: 1,
+      AnotherApp: 2,
     };
     const result = CheckForTeamProjectApplication(analysisApps);
     expect(result).toBe(false);