Merge pull request #1745 from techmatters/CHI-1994-search_modal

CHI-1994: Search in a modal modal

e2e-tests/caseList.ts

@@ -56,9 +56,9 @@ export const caseList = (page: Page) => {
     caseSummaryText: caseListPage.locator(`//textarea[@data-testid='Case-CaseSummary-TextArea']`),
     caseSummaryTextArea: caseListPage.locator(`//textarea[@data-testid='summary']`),
     casePrintButton: caseListPage.locator(`//button[@data-testid='CasePrint-Button']`),
-    casePrintCloseButton: caseListPage.locator(`//button[@data-testid='CasePrint-CloseCross']`),
-    caseCloseButton: caseListPage.locator(`//button[@data-testid='CaseHome-CloseButton']`),
-    caseEditCloseButton: caseListPage.locator(`//button[@data-testid='Case-CloseButton']`),
+    modalCloseButton: caseListPage.locator(
+      `//button[@data-testid='NavigableContainer-CloseCross']`,
+    ),
     updateCaseButton: caseListPage.locator(`//button[@data-testid='Case-EditCaseScreen-SaveItem']`),
     caseEditButton: caseListPage.locator(`//button[@data-testid='Case-EditButton']`),
 
@@ -124,7 +124,7 @@ export const caseList = (page: Page) => {
     await openPrintButton.click();
     console.log('Opened Case Print');
 
-    const closePrintButton = selectors.casePrintCloseButton;
+    const closePrintButton = selectors.modalCloseButton;
     await closePrintButton.waitFor({ state: 'visible' });
     await closePrintButton.click();
     console.log('Close Case Print');
@@ -179,18 +179,9 @@ export const caseList = (page: Page) => {
     await updateCaseButton.waitFor({ state: 'visible' });
     await expect(updateCaseButton).toContainText('Save');
     await updateCaseButton.click();
-
     console.log('Updated Case Summary');
   }
 
-  // Close Edit case
-  async function closeEditCase() {
-    const caseEditClose = selectors.caseEditCloseButton;
-    await caseEditClose.waitFor({ state: 'visible' });
-    await expect(caseEditClose).toContainText('Cancel');
-    await caseEditClose.click();
-  }
-
   // Verify case summary update
   async function verifyCaseSummaryUpdated() {
     const summaryText = selectors.caseSummaryText;
@@ -205,13 +196,11 @@ export const caseList = (page: Page) => {
     await Promise.all(caseListIdButtons.map((l, idx) => expect(l).toContainText(ids[idx])));
   }
 
-  //Close Case
-  async function closeCase() {
-    const closeCaseButton = selectors.caseCloseButton;
+  //Close Modal (probably can move this to more generic navigation file now we have more standardised navigation)
+  async function closeModal() {
+    const closeCaseButton = selectors.modalCloseButton;
     await closeCaseButton.waitFor({ state: 'visible' });
-    await expect(closeCaseButton).toContainText('Close');
     await closeCaseButton.click();
-    console.log('Closed Case');
   }
 
   return {
@@ -223,9 +212,8 @@ export const caseList = (page: Page) => {
     addCaseSection,
     editCase,
     updateCaseSummary,
-    closeEditCase,
     verifyCaseSummaryUpdated,
-    closeCase,
+    closeModal,
     verifyCaseIdsAreInListInOrder,
   };
 };

e2e-tests/tests/caselist.spec.ts

@@ -81,6 +81,7 @@ test.describe.serial('Open and Edit a Case in Case List page', () => {
 
     await page.verifyCaseSummaryUpdated();
 
-    await page.closeCase();
+    await page.closeModal();
+    console.log('Closed Case');
   });
 });

e2e-tests/ui-tests/tests/case-list.spec.ts

@@ -19,8 +19,7 @@
 import { expect, Page, test } from '@playwright/test';
 import * as mockServer from '../flex-in-a-box/proxied-endpoints';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { preload, useUnminifiedFlex } from '../flex-in-a-box/local-resources';
+import '../flex-in-a-box/local-resources';
 import hrmCases from '../aselo-service-mocks/hrm/cases';
 import { caseList, Filter } from '../../caseList';
 import AxeBuilder from '@axe-core/playwright';
@@ -96,6 +95,6 @@ test.describe.serial('Case List', () => {
       .analyze();
     //expect(caseHomeAccessibilityScanResults.violations).toEqual([]);
     warnViolations(caseEditAccessibilityScanResults, `the case summary edit page`);
-    await caseListPage.closeEditCase();
+    await caseListPage.closeModal();
   });
 });

plugin-hrm-form/src/___tests__/components/PreviousContactsBanner.test.tsx

@@ -14,12 +14,12 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
 
-import React from 'react';
+import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { configureAxe, toHaveNoViolations } from 'jest-axe';
 import { mount } from 'enzyme';
-import { StorelessThemeProvider, ThemeConfigProps } from '@twilio/flex-ui';
+import { StorelessThemeProvider } from '@twilio/flex-ui';
 
 import { UnconnectedPreviousContactsBanner } from '../../components/PreviousContactsBanner';
 import { channelTypes } from '../../states/DomainConstants';
@@ -155,7 +155,7 @@ test('Click View Records should redirect user to search results', () => {
 
   const searchContacts = jest.fn();
   const searchCases = jest.fn();
-  const changeRoute = jest.fn();
+  const openModal = jest.fn();
   const viewPreviousContacts = jest.fn();
 
   render(
@@ -166,8 +166,8 @@ test('Click View Records should redirect user to search results', () => {
         previousContacts={previousContacts}
         searchContacts={searchContacts}
         searchCases={searchCases}
-        changeRoute={changeRoute}
         viewPreviousContacts={viewPreviousContacts}
+        openContactSearchResults={openModal}
       />
     </StorelessThemeProvider>,
   );
@@ -177,7 +177,7 @@ test('Click View Records should redirect user to search results', () => {
   expect(searchContacts).not.toHaveBeenCalled();
   expect(searchCases).not.toHaveBeenCalled();
   expect(viewPreviousContacts).toHaveBeenCalled();
-  expect(changeRoute).toHaveBeenCalledWith({ route: 'tabbed-forms', subroute: 'search' });
+  expect(openModal).toHaveBeenCalled();
 });
 
 test('a11y', async () => {

plugin-hrm-form/src/___tests__/components/case/AddEditCaseItem.test.tsx

@@ -29,7 +29,7 @@ import { RootState } from '../../../states';
 import AddEditCaseItem, { AddEditCaseItemProps } from '../../../components/case/AddEditCaseItem';
 import { getDefinitionVersions } from '../../../hrmConfig';
 import { CustomITask } from '../../../types/types';
-import { CaseItemAction, NewCaseSubroutes } from '../../../states/routing/types';
+import { CaseItemAction } from '../../../states/routing/types';
 import { householdSectionApi } from '../../../states/case/sections/household';
 import { newGoBackAction } from '../../../states/routing/actions';
 import { ReferralLookupStatus } from '../../../states/contacts/resourceReferral';
@@ -153,6 +153,7 @@ const hrmState: Partial<RootState[typeof namespace]> = {
           categories: { gridView: false, expanded: {} },
           recreated: false,
           draft: {
+            dialogsOpen: {},
             resourceReferralList: {
               lookupStatus: ReferralLookupStatus.NOT_STARTED,
               resourceReferralIdToAdd: undefined,
@@ -185,7 +186,10 @@ const state2 = {
     [connectedCaseBase]: addingNewHouseholdCaseState,
     routing: {
       tasks: {
-        task1: [{ route: 'case', subroute: 'household', action: CaseItemAction.Add }],
+        task1: [
+          { route: 'case', subroute: 'household', action: CaseItemAction.View },
+          { route: 'case', subroute: 'household', action: CaseItemAction.Add },
+        ],
       },
     },
   },
@@ -221,11 +225,6 @@ describe('Test AddHousehold', () => {
         counselor: 'Someone',
         sectionApi: householdSectionApi,
         definitionVersion: mockV1,
-        routing: {
-          route: 'case',
-          subroute: NewCaseSubroutes.Household,
-          action: CaseItemAction.Add,
-        },
       }),
   );
   test('Test close functionality', async () => {
@@ -239,15 +238,8 @@ describe('Test AddHousehold', () => {
 
     expect(store2.dispatch).not.toHaveBeenCalledWith(newGoBackAction('task1'));
 
-    expect(screen.getByTestId('Case-CloseCross')).toBeInTheDocument();
-    screen.getByTestId('Case-CloseCross').click();
-
-    expect(store2.dispatch).toHaveBeenCalledWith(newGoBackAction('task1'));
-
-    store2.dispatch.mockClear();
-
-    expect(screen.getByTestId('Case-CloseButton')).toBeInTheDocument();
-    screen.getByTestId('Case-CloseButton').click();
+    expect(screen.getByTestId('NavigableContainer-BackButton')).toBeInTheDocument();
+    screen.getByTestId('NavigableContainer-BackButton').click();
 
     expect(store2.dispatch).toHaveBeenCalledWith(newGoBackAction('task1'));
   });

plugin-hrm-form/src/___tests__/components/case/Case.test.tsx

@@ -244,7 +244,7 @@ describe('useState mocked', () => {
     expect(screen.getByTestId('Case-DetailsHeaderCounselor').innerHTML).toContain('worker1 name');
     expect(screen.getByTestId('Case-Details_DateOpened').getAttribute('value')).toBe('6/29/2020');
     expect(screen.getByTestId('Case-Details_DateLastUpdated').getAttribute('value')).toBe('—');
-    expect(screen.getByTestId('Case-DetailsHeaderChildName').innerHTML).toContain('first last');
+    expect(screen.getByTestId('NavigableContainer-Title').innerHTML).toContain('first last');
   });
 
   test('Case (should render, after update)', async () => {

plugin-hrm-form/src/___tests__/components/case/CaseHome.test.tsx

@@ -24,18 +24,14 @@ import configureMockStore from 'redux-mock-store';
 
 import { mockGetDefinitionsResponse } from '../../mockGetConfig';
 import CaseHome, { CaseHomeProps } from '../../../components/case/CaseHome';
-import { HouseholdEntry, PerpetratorEntry, StandaloneITask } from '../../../types/types';
+import { CustomITask, HouseholdEntry, PerpetratorEntry } from '../../../types/types';
 import { CaseDetails } from '../../../states/case/types';
 import { getDefinitionVersions } from '../../../hrmConfig';
 import { CaseItemAction, NewCaseSubroutes } from '../../../states/routing/types';
 import { VALID_EMPTY_CONTACT } from '../../testContacts';
-import {
-  configurationBase,
-  connectedCaseBase,
-  contactFormsBase,
-  namespace,
-  routingBase,
-} from '../../../states/storeNamespaces';
+import { namespace } from '../../../states/storeNamespaces';
+import { RecursivePartial } from '../../RecursivePartial';
+import { RootState } from '../../../states';
 
 // eslint-disable-next-line react-hooks/rules-of-hooks
 const { mockFetchImplementation, mockReset, buildBaseURL } = useFetchDefinitions();
@@ -72,7 +68,7 @@ const householdEntry: HouseholdEntry = {
   twilioWorkerId: 'worker1',
 };
 
-function createState(state) {
+function createState(state: RecursivePartial<RootState['plugin-hrm-form']>) {
   return {
     [namespace]: state,
   };
@@ -81,7 +77,7 @@ function createState(state) {
 let ownProps: CaseHomeProps;
 
 let mockV1;
-let initialState;
+let initialState: RecursivePartial<RootState>;
 let caseDetails: CaseDetails;
 
 describe('useState mocked', () => {
@@ -96,19 +92,19 @@ describe('useState mocked', () => {
   beforeEach(() => {
     mockReset();
     initialState = createState({
-      [configurationBase]: {
+      configuration: {
         counselors: {
           list: [],
           hash: { worker1: 'worker1 name' },
         },
         definitionVersions: { v1: mockV1 },
         currentDefinitionVersion: mockV1,
       },
-      [contactFormsBase]: {
-        tasks: {
-          task1: {
+      activeContacts: {
+        existingContacts: {
+          contact1: {
             metadata: {},
-            contact: {
+            savedContact: {
               ...VALID_EMPTY_CONTACT,
               rawJson: {
                 ...VALID_EMPTY_CONTACT.rawJson,
@@ -121,27 +117,32 @@ describe('useState mocked', () => {
                 },
                 categories: {},
               },
-              taskSid: 'task1',
+              taskId: 'task1',
             },
           },
         },
       },
-      [connectedCaseBase]: {
+      connectedCase: {
         tasks: {
           task1: {
-            taskSid: 'task1',
             connectedCase: {
               id: 123,
               createdAt: '2020-06-29T22:26:00.208Z',
               twilioWorkerId: 'worker1',
               status: 'open',
-              info: { definitionVersion: 'v1' },
+              info: { definitionVersion: DefinitionVersionId.v1 },
               connectedContacts: [],
             },
           },
         },
       },
-      [routingBase]: { tasks: { task1: [{ route: 'case', subroute: 'home' }] } },
+      routing: {
+        tasks: {
+          task1: [
+            { route: 'tabbed-forms', subroute: 'categories', activeModal: [{ route: 'case', subroute: 'home' }] },
+          ],
+        },
+      },
     });
 
     const setState = jest.fn();
@@ -173,7 +174,7 @@ describe('useState mocked', () => {
     };
 
     ownProps = {
-      task: initialState[namespace][connectedCaseBase].tasks.task1 as StandaloneITask,
+      task: { taskSid: 'task1' } as CustomITask,
       definitionVersion: mockV1,
       can: () => true,
       caseDetails,
@@ -209,8 +210,7 @@ describe('useState mocked', () => {
         action: CaseItemAction.Add,
       },
       taskId: 'task1',
-      replace: false,
-      type: 'routing/change-route',
+      type: 'routing/open-modal',
     });
   });
 
@@ -234,8 +234,7 @@ describe('useState mocked', () => {
         action: CaseItemAction.Add,
       },
       taskId: 'task1',
-      replace: false,
-      type: 'routing/change-route',
+      type: 'routing/open-modal',
     });
   });
 
@@ -259,8 +258,7 @@ describe('useState mocked', () => {
         action: CaseItemAction.Add,
       },
       taskId: 'task1',
-      replace: false,
-      type: 'routing/change-route',
+      type: 'routing/open-modal',
     });
   });
 
@@ -284,8 +282,7 @@ describe('useState mocked', () => {
         action: CaseItemAction.Add,
       },
       taskId: 'task1',
-      replace: false,
-      type: 'routing/change-route',
+      type: 'routing/open-modal',
     });
   });
 
@@ -312,8 +309,7 @@ describe('useState mocked', () => {
         id: 'HOUSEHOLD_ID',
       },
       taskId: 'task1',
-      replace: false,
-      type: 'routing/change-route',
+      type: 'routing/open-modal',
     });
   });
 
@@ -340,8 +336,7 @@ describe('useState mocked', () => {
         id: 'PERPETRATOR_ID',
       },
       taskId: 'task1',
-      replace: false,
-      type: 'routing/change-route',
+      type: 'routing/open-modal',
     });
   });
 
@@ -367,8 +362,7 @@ describe('useState mocked', () => {
         id: '',
       },
       taskId: 'task1',
-      replace: false,
-      type: 'routing/change-route',
+      type: 'routing/open-modal',
     });
   });
 
@@ -402,7 +396,7 @@ describe('useState mocked', () => {
         </Provider>
       </StorelessThemeProvider>,
     );
-    screen.getByTestId('CaseHome-CloseButton').click();
+    screen.getByTestId('NavigableContainer-CloseCross').click();
 
     expect(ownProps.handleCancelNewCaseAndClose).not.toHaveBeenCalled();
     expect(ownProps.handleClose).toHaveBeenCalled();