update tests and some aria labels. tests pass on node 16 (#601)

Author: mcanoy

src/common/test_state_wrapper.tsx

@@ -19,19 +19,19 @@ import { createFakedServices } from '../services/factories/service_factory';
 import { MemoryRouter } from 'react-router';
 import { mockEngagementFormConfig } from '../mocks/engagement_form_config_mocks';
 
-export const TestStateWrapper = ({ children = null }) => {
+export const TestStateWrapper = ({ children = null, spyedEngagementService = null }) => {
   return (
     <MemoryRouter>
       <ServiceProvider
         serviceFactory={createFakedServices({ shouldUseStaticData: true })}
       >
-        <TestContexts>{children}</TestContexts>
+        <TestContexts spyedEngagementService={spyedEngagementService}>{children}</TestContexts>
       </ServiceProvider>
     </MemoryRouter>
   );
 };
 
-function TestContexts({ children = null }) {
+function TestContexts({ children = null, spyedEngagementService = null }) {
   const {
     authService,
     engagementService,
@@ -49,7 +49,7 @@ function TestContexts({ children = null }) {
                 engagementFormConfig={mockEngagementFormConfig()}
                 categoryService={categoryService}
                 feedbackContext={feedbackContext}
-                engagementService={engagementService}
+                engagementService={spyedEngagementService ? spyedEngagementService : engagementService}
               >
                 <VersionProvider versionService={versionService}>
                   <FeatureToggles>{children}</FeatureToggles>

src/components/customer_select_dropdown/customer_select_dropdown.tsx

@@ -20,6 +20,7 @@ export function _CustomerSelectDropdown(
   };
   return (
     <Select
+      aria-label='Customer select'
       isOpen={isOpen}
       onToggle={() => setIsOpen(!isOpen)}
       onSelect={handleSelect}

src/components/engagement_data_cards/hosting_environment_card/hosting_environment_card.tsx

@@ -62,10 +62,10 @@ export function HostingEnvironmentCard() {
     updateHostingEnvironment,
   } = useHostingEnvironmentManager();
   const currentEnvironmentIndex = currentHostingEnvironmentChanges.findIndex(
-    he => currentHostingEnvironmentId === he?.id
+    he => currentHostingEnvironmentId === he?.uuid
   );
   const indexedChanges = currentHostingEnvironmentChanges.reduce(
-    (p, c) => ({ ...p, [c.id]: c }),
+    (p, c) => ({ ...p, [c.uuid]: c }),
     {}
   );
 
@@ -88,8 +88,8 @@ export function HostingEnvironmentCard() {
   const openHostingEnvironmentModal = (
     hostingEnvironment: HostingEnvironment
   ) => {
-    setCurrentHostingEnvironmentId(hostingEnvironment.id);
-    requestOpen(generateModalId(hostingEnvironment.id));
+    setCurrentHostingEnvironmentId(hostingEnvironment.uuid);
+    requestOpen(generateModalId(hostingEnvironment.uuid));
   };
   const generateModalId = (id: string) => `${OPENSHIFT_MODAL_KEY}${id}`;
 
@@ -110,7 +110,7 @@ export function HostingEnvironmentCard() {
       slug = customer_name;
     }
     if (slug.length > maxLen && slug.substring(0, maxLen).includes(' ')) {
-      slug = slug.substr(0, slug.lastIndexOf(' ', maxLen));
+      slug = slug.substring(0, slug.lastIndexOf(' ', maxLen));
     }
     slug = slugify(slug.substring(0, maxLen));
     if (randomizer?.length > 0) {

src/context/engagement_context/__tests__/engagement_context.spec.tsx

@@ -225,7 +225,9 @@ describe('Engagement Context', () => {
     const { result, waitForNextUpdate } = renderHook(() => useEngagement(), {
       wrapper,
     });
-    result.current.setCurrentEngagement(initialEngagement);
+
+    act(() => result.current.setCurrentEngagement(initialEngagement));
+
     let modifiedEngagement = {
       ...initialEngagement,
       customer_contact_email: '[email protected]',

src/routes/create_new_engagement/__tests__/create_new_engagement.spec.tsx

@@ -1,7 +1,3 @@
-import {
-  EngagementContext,
-  IEngagementContext,
-} from '../../../context/engagement_context/engagement_context';
 import { act, fireEvent, render } from '@testing-library/react';
 
 import { APP_FEATURES } from '../../../common/app_features';
@@ -11,8 +7,7 @@ import { FeatureToggles } from '../../../context/feature_context/feature_toggles
 import { MemoryRouter } from 'react-router';
 import React from 'react';
 import { TestStateWrapper } from '../../../common/test_state_wrapper';
-import { getById } from '../../../utilities/get_by_id';
-import { mockEngagementFormConfig } from '../../../mocks/engagement_form_config_mocks';
+import { FakedEngagementService } from '../../../services/engagement_service/implementations/faked_engagement_service';
 
 describe('Create New Engagement Route', () => {
   const getComponent = () => {
@@ -25,71 +20,100 @@ describe('Create New Engagement Route', () => {
     );
   };
   test('should have a field for a project name', async () => {
-    act(async () => {
-      const wrapper = render(getComponent());
-      expect(wrapper.getByTestId('project-name')).toBeDefined();
+    const wrapper = render(getComponent());
+    const projectName = wrapper.getByTestId('project-name');
+
+    await act(async () => {
+      fireEvent.change(projectName, { target: { value: '123' } })
     });
+
+    expect(projectName).toHaveValue('123');
+
   });
   test('should have a field for a customer name', async () => {
-    act(async () => {
+    await act(async () => {
       const wrapper = render(getComponent());
       expect(wrapper.getByTestId('customer-name')).toBeDefined();
     });
   });
   test('should have a field for a region name', async () => {
-    act(async () => {
+    await act(async () => {
       const wrapper = render(getComponent());
       expect(wrapper.getByTestId('region')).toBeDefined();
     });
   });
+
   test('clicking the submit button creates a new engagement', async () => {
-    const createEngagement = jest.fn();
     const e = Engagement.fromFake();
-    e.customer_name = 'a';
-    const Component = () => (
-      <MemoryRouter>
-        <EngagementContext.Provider
-          value={
-            ({
-              engagements: [e],
-              getEngagements: async () => [],
-              createEngagement,
-              engagementFormConfig: mockEngagementFormConfig(),
-            } as unknown) as IEngagementContext
-          }
-        >
-          <FeatureToggles features={[APP_FEATURES.writer, APP_FEATURES.reader]}>
+    e.customer_name = 'banana';
+
+    const fakey = new FakedEngagementService(true);
+
+    const getWriterComponent = () => {
+      return (
+        <MemoryRouter>
+          <TestStateWrapper spyedEngagementService={fakey}>
+           <FeatureToggles features={[APP_FEATURES.writer, APP_FEATURES.reader]}>
             <CreateNewEngagement />
-          </FeatureToggles>
-        </EngagementContext.Provider>
-      </MemoryRouter>
-    );
+            </FeatureToggles>
+          </TestStateWrapper>
+        </MemoryRouter>
+      );
+    };
+
+    const wrapper = render(getWriterComponent());
 
-    act(async () => {
-      const wrapper = render(<Component />);
-      const customerNameField = wrapper
-        .getByTestId('customer-name')
-        .getElementsByTagName('input')[0];
+    await act(async () => {
+      const customerNameField = wrapper.getByTestId('customer-name').getElementsByTagName('input')[0];
       fireEvent.change(customerNameField, {
-        target: { value: 'a' },
+        target: { value: 'banana' },
       });
-      const dropdownButton = getById(wrapper.container, 'customer_dropdown');
-      fireEvent.click(dropdownButton);
-      wrapper.rerender(<Component />);
-      fireEvent.click(wrapper.getByTestId('a'));
-      fireEvent.change(wrapper.getByTestId('project-name'), {
+    });
+
+    await act(async () => {
+      const customerButton = wrapper.getByText(/banana/);
+      fireEvent.click(customerButton);
+    });
+
+    await act(async () => {
+      const engNameInput = wrapper.getByTestId('project-name');
+      const regionInput = wrapper.getByTestId('region');
+      const engagementType = wrapper.getByTestId('new-engagement-type');
+      
+      fireEvent.change(engNameInput, {
         target: { value: 'Mars Rover' },
       });
-      fireEvent.change(wrapper.getByTestId('region'), {
+
+      fireEvent.change(regionInput, {
         target: { value: 'dev-1' },
       });
 
-      wrapper.rerender(<Component />);
+      fireEvent.change(engagementType, {
+        target: { value: 'Residency'},
+      });
+    });
+
+    await act(async () => {
+      const engNameInput = wrapper.getByTestId('project-name');
+      const regionInput = wrapper.getByTestId('region');
+      const engagementType = wrapper.getByTestId('new-engagement-type');
+    
+      expect(engNameInput).toHaveValue('Mars Rover');
+      expect(regionInput).toHaveValue('dev-1');
+      expect(engagementType).toHaveValue('Residency');
+      
+      const createButton = wrapper.getByTestId('create-engagement-button');
+      expect(createButton).toBeEnabled();
+    });
+
+    await act(async () => {
+      const spy = jest.spyOn(fakey, 'createEngagement');
 
       const createButton = wrapper.getByTestId('create-engagement-button');
       fireEvent.click(createButton);
-      expect(createEngagement).toHaveBeenCalledWith({
-        customer_name: 'a',
+
+      expect(spy).toHaveBeenCalledWith({
+        customer_name: 'banana',
         engagement_region: 'dev-1',
         engagement_type: 'Residency',
         project_name: 'Mars Rover',

src/routes/create_new_engagement/create_new_engagement.tsx

@@ -295,6 +295,7 @@ export function CreateNewEngagementForm() {
                 }
               >
                 <FormSelect
+                  arial-label="Region select"
                   data-testid="region"
                   data-cy="new_engagement_region"
                   value={region ?? ''}
@@ -336,6 +337,7 @@ export function CreateNewEngagementForm() {
                 }
               >
                 <FormSelect
+                  aria-label='Engagment type select'
                   data-testid="new-engagement-type"
                   data-cy="new_engagement_type"
                   value={engagementType ?? ''}
@@ -361,6 +363,7 @@ export function CreateNewEngagementForm() {
                 helperText="Prepopulate details of this engagement based on a selected template or an existing engagement"
               >
                 <FormSelect
+                  aria-label='Copy select'
                   data-testid="new-engagement-copy-from"
                   data-cy="new-engagement-copy-from"
                   value={selectedProjectNameToFind ?? ''}