Merge pull request #465 from primeroIMS/trigyn-testcases-record-form-nav

Trigyn testcases record form nav

Author: jtoliver-quoin

app/javascript/components/record-form/nav/component.jsx

@@ -205,7 +205,7 @@ const Component = ({
         classes={drawerClasses}
       >
         <CloseButtonNavBar handleToggleNav={handleToggleNav} mobileDisplay={mobileDisplay} />
-        <List className={css.listRecordNav}>
+        <List data-testid="nav-list" className={css.listRecordNav}>
           <RecordInformation
             handleClick={handleClick}
             open={open}

app/javascript/components/record-form/nav/component.unit.test.js app/javascript/components/record-form/nav/component.spec.js

@@ -1,21 +1,15 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
 
 import { fromJS, Map, OrderedMap } from "immutable";
-import Divider from "@material-ui/core/Divider";
-import CloseIcon from "@material-ui/icons/Close";
 
-import { APPROVALS, INCIDENT_FROM_CASE, REFERRAL, RECORD_INFORMATION_GROUP } from "../../../config";
-import { setupMountedComponent } from "../../../test";
+import { APPROVALS, REFERRAL } from "../../../config";
+import { fireEvent, mountedComponent, screen, setScreenSizeToMobile, waitFor } from "../../../test-utils";
 import { FormSectionRecord, FieldRecord } from "../records";
-import { ConditionalWrapper } from "../../../libs";
 import Actions from "../actions";
 
-import { NavGroup, RecordInformation } from "./components";
 import Nav from "./component";
 
 describe("<Nav />", () => {
-  let component;
-
   const record = fromJS({
     case_id: "12345",
     case_id_display: "3c9d076",
@@ -186,59 +180,18 @@ describe("<Nav />", () => {
     hasForms: true
   };
 
-  beforeEach(() => {
-    ({ component } = setupMountedComponent(Nav, props, initialState));
+  beforeAll(() => {
+    setScreenSizeToMobile(false);
   });
 
   it("renders a CloseIcon component />", () => {
-    expect(component.find(CloseIcon)).to.have.lengthOf(1);
+    mountedComponent(<Nav {...props} />, initialState);
+    expect(screen.getByTestId("close-icon")).toBeInTheDocument();
   });
 
   it("renders a Nav component />", () => {
-    expect(component.find(Nav)).to.have.lengthOf(1);
-  });
-
-  it("renders a RecordInformation component />", () => {
-    expect(component.find(RecordInformation)).to.have.lengthOf(1);
-  });
-
-  it("renders a Divider component />", () => {
-    expect(component.find(Divider)).to.have.lengthOf(1);
-  });
-
-  it("renders a NavGroup component from record information and another one from the others forms groups />", () => {
-    expect(component.find(NavGroup)).to.have.lengthOf(2);
-  });
-
-  it("renders the NavGroup component for record information open", () => {
-    expect(component.find(NavGroup).first().props().open).to.equal("record_information");
-  });
-
-  it("renders a ConditionalWrapper />", () => {
-    expect(component.find(ConditionalWrapper)).to.have.lengthOf(1);
-  });
-
-  it("should render valid props", () => {
-    const navProps = { ...component.find(Nav).props() };
-
-    expect(component.find(Nav)).to.have.lengthOf(1);
-    [
-      "firstTab",
-      "formNav",
-      "handleToggleNav",
-      "isNew",
-      "mobileDisplay",
-      "primeroModule",
-      "recordType",
-      "selectedForm",
-      "selectedRecord",
-      "toggleNav",
-      "hasForms"
-    ].forEach(property => {
-      expect(navProps).to.have.property(property);
-      delete navProps[property];
-    });
-    expect(navProps).to.be.empty;
+    mountedComponent(<Nav {...props} />, initialState);
+    expect(screen.getByTestId("nav-list")).toBeInTheDocument();
   });
 
   describe("when is a new record", () => {
@@ -250,46 +203,9 @@ describe("<Nav />", () => {
       isNew: true
     };
 
-    it("sets the firstTab as selectedForm", () => {
-      const { component: newComp } = setupMountedComponent(Nav, notSelectedProps, initialState);
-
-      const expectedAction = {
-        type: Actions.SET_SELECTED_FORM,
-        payload: firstTab.unique_id
-      };
-
-      const setAction = newComp
-        .props()
-        .store.getActions()
-        .find(action => action.type === Actions.SET_SELECTED_FORM);
-
-      expect(setAction).to.deep.equal(expectedAction);
-    });
-
-    it("opens the form_group_id of the firstTab", () => {
-      const { component: newComp } = setupMountedComponent(Nav, notSelectedProps, initialState);
-      const navGroup = newComp.find(NavGroup).first();
-
-      expect(navGroup.props().open).to.equal(firstTab.form_group_id);
-    });
-
     it("opens the selectedForm and group", () => {
-      const { component: newComp } = setupMountedComponent(
-        Nav,
-        { ...notSelectedProps, selectedForm: APPROVALS },
-        initialState
-      );
-
-      const setAction = newComp
-        .props()
-        .store.getActions()
-        .find(action => action.type === Actions.SET_SELECTED_FORM);
-
-      expect(setAction).to.not.exist;
-
-      const navGroup = newComp.find(NavGroup).first();
-
-      expect(navGroup.props().open).to.equal(RECORD_INFORMATION_GROUP);
+      mountedComponent(<Nav {...{ ...notSelectedProps, selectedForm: APPROVALS }} />, initialState);
+      expect(screen.getByText("forms.record_types.record_information", { expanded: true })).toBeInTheDocument();
     });
   });
 
@@ -303,28 +219,9 @@ describe("<Nav />", () => {
       selectedForm: ""
     };
 
-    beforeEach(() => {
-      ({ component } = setupMountedComponent(Nav, notSelectedProps, initialState));
-    });
-
-    it("sets the firstTab as selectedForm", () => {
-      const expectedAction = {
-        type: Actions.SET_SELECTED_FORM,
-        payload: "basic_identity"
-      };
-
-      const setAction = component
-        .props()
-        .store.getActions()
-        .find(action => action.type === Actions.SET_SELECTED_FORM);
-
-      expect(setAction).to.deep.equal(expectedAction);
-    });
-
     it("opens the form_group_id of the firstTab", () => {
-      const navGroup = component.find(NavGroup).first();
-
-      expect(navGroup.props().open).to.equal(firstTab.form_group_id);
+      mountedComponent(<Nav {...notSelectedProps} />, initialState);
+      expect(screen.getByText("Basic Identity", { expanded: true })).toBeInTheDocument();
     });
   });
 
@@ -337,23 +234,15 @@ describe("<Nav />", () => {
       selectedForm: REFERRAL
     };
 
-    beforeEach(() => {
-      ({ component } = setupMountedComponent(Nav, notSelectedProps, initialState));
-    });
-
     it("should not select a different form", () => {
-      const setAction = component
-        .props()
-        .store.getActions()
-        .find(action => action.type === Actions.SET_SELECTED_FORM);
+      const { store } = mountedComponent(<Nav {...notSelectedProps} />, initialState);
 
-      expect(setAction).to.not.exist;
+      expect(store.getActions().find(action => action.type === Actions.SET_SELECTED_FORM)).toBeUndefined();
     });
 
     it("opens the record_information group if it belongs to that group", () => {
-      const navGroup = component.find(NavGroup).first();
-
-      expect(navGroup.props().open).to.equal(RECORD_INFORMATION_GROUP);
+      mountedComponent(<Nav {...notSelectedProps} />, initialState);
+      expect(screen.getByText("forms.record_types.record_information", { expanded: true })).toBeInTheDocument();
     });
   });
 
@@ -366,28 +255,9 @@ describe("<Nav />", () => {
       selectedForm: "unknown_form"
     };
 
-    beforeEach(() => {
-      ({ component } = setupMountedComponent(Nav, notSelectedProps, initialState));
-    });
-
-    it("sets the firstTab as selectedForm", () => {
-      const expectedAction = {
-        type: Actions.SET_SELECTED_FORM,
-        payload: "basic_identity"
-      };
-
-      const setAction = component
-        .props()
-        .store.getActions()
-        .find(action => action.type === Actions.SET_SELECTED_FORM);
-
-      expect(setAction).to.deep.equal(expectedAction);
-    });
-
     it("opens the form_group_id form the firstTab", () => {
-      const navGroup = component.find(NavGroup).first();
-
-      expect(navGroup.props().open).to.equal(firstTab.form_group_id);
+      mountedComponent(<Nav {...notSelectedProps} />, initialState);
+      expect(screen.getByText("Basic Identity", { expanded: true })).toBeInTheDocument();
     });
   });
 
@@ -447,14 +317,13 @@ describe("<Nav />", () => {
       primeroModule: "primeromodule-cp"
     };
 
-    it("should select first form of the form group", () => {
-      const { component: navComponent } = setupMountedComponent(Nav, navGroupProps, initialState);
-      const registrationGroup = navComponent.find(".MuiListItem-gutters").at(3);
+    it("should select first form of the form group", async () => {
+      mountedComponent(<Nav {...navGroupProps} />, initialState);
+      fireEvent.click(screen.getByText("Identification / Registration"));
 
-      expect(registrationGroup.text()).to.be.equal("Identification / Registration");
-
-      registrationGroup.simulate("click");
-      expect(navComponent.find(".Mui-selected").at(0).text()).to.be.equal("Basic Identity");
+      await waitFor(() =>
+        expect(screen.getByText("Basic Identity").closest(".MuiButtonBase-root")).toHaveClass("navSelected")
+      );
     });
   });
 
@@ -469,40 +338,26 @@ describe("<Nav />", () => {
     };
 
     it("should open the record_information group if selectedForm belongs to that group ", () => {
-      const { component: navComp } = setupMountedComponent(Nav, notSelectedProps, initialState);
-
-      const navGroup = navComp.find(NavGroup).first();
-
-      expect(navGroup.props().open).to.equal(RECORD_INFORMATION_GROUP);
+      mountedComponent(<Nav {...notSelectedProps} />, initialState);
+      expect(screen.getByText("forms.record_types.record_information", { expanded: true })).toBeInTheDocument();
     });
 
     it("opens the record_information group and sets incidents froms if there is a incidentFromCase", () => {
       const stateWithIncidentFromCase = initialState.setIn(
         ["records", "cases", "incidentFromCase", "data"],
         fromJS({ incident_case_id: "case-id-1" })
       );
-      const { component: navComp } = setupMountedComponent(
-        Nav,
-        { ...notSelectedProps, selectedForm: "" },
-        stateWithIncidentFromCase
-      );
-
-      const navGroup = navComp.find(NavGroup).first();
-
-      expect(navGroup.props().open).to.equal(RECORD_INFORMATION_GROUP);
-
-      const expectedAction = {
-        type: Actions.SET_SELECTED_FORM,
-        payload: INCIDENT_FROM_CASE
-      };
 
-      const setAction = navComp
-        .props()
-        .store.getActions()
-        .filter(action => action.type === Actions.SET_SELECTED_FORM)
-        .pop();
+      const tProps = { ...notSelectedProps, selectedForm: "" };
+      const { store } = mountedComponent(<Nav {...tProps} />, stateWithIncidentFromCase);
 
-      expect(setAction).to.deep.equal(expectedAction);
+      expect(
+        store
+          .getActions()
+          .filter(action => action.type === Actions.SET_SELECTED_FORM)
+          .pop()
+      ).toStrictEqual({ type: "forms/SET_SELECTED_FORM", payload: "incident_from_case" });
+      expect(screen.getByText("forms.record_types.record_information", { expanded: true })).toBeInTheDocument();
     });
 
     it("opens the firstTab group and form when incident_from_case form is not found", () => {
@@ -511,52 +366,19 @@ describe("<Nav />", () => {
         fromJS({ incident_case_id: "case-id-1" })
       );
 
-      const { component: navComp } = setupMountedComponent(
-        Nav,
-        { ...notSelectedProps, recordType: "incidents", selectedForm: "basic_identity" },
-        stateWithIncidentFromCase
-      );
-
-      const expectedAction = {
-        type: Actions.SET_SELECTED_FORM,
-        payload: firstTab.unique_id
-      };
-
-      const setAction = navComp
-        .props()
-        .store.getActions()
-        .filter(action => action.type === Actions.SET_SELECTED_FORM)
-        .pop();
-
-      const navGroup = navComp.find(NavGroup).first();
+      const tProps = { ...notSelectedProps, recordType: "incidents", selectedForm: "basic_identity" };
+      const { store } = mountedComponent(<Nav {...tProps} />, stateWithIncidentFromCase);
 
-      expect(setAction).to.deep.equal(expectedAction);
-      expect(navGroup.props().open).to.equal(firstTab.form_group_id);
+      expect(store.getActions()).toStrictEqual([{ type: "forms/SET_SELECTED_FORM", payload: "basic_identity" }]);
+      expect(screen.getByText("Basic Identity", { expanded: true })).toBeInTheDocument();
     });
 
     it("opens the form_group_id and sets the selectedForm from the firstTab if the selected form is not found", () => {
-      const { component: navComp } = setupMountedComponent(
-        Nav,
-        { ...notSelectedProps, selectedForm: "unknown_form" },
-        initialState
-      );
-
-      const navGroup = navComp.find(NavGroup).first();
-
-      expect(navGroup.props().open).to.equal(firstTab.form_group_id);
-
-      const expectedAction = {
-        type: Actions.SET_SELECTED_FORM,
-        payload: firstTab.unique_id
-      };
+      const tProps = { ...notSelectedProps, selectedForm: "unknown_form" };
+      const { store } = mountedComponent(<Nav {...tProps} />, initialState);
 
-      const setAction = navComp
-        .props()
-        .store.getActions()
-        .filter(action => action.type === Actions.SET_SELECTED_FORM)
-        .pop();
-
-      expect(setAction).to.deep.equal(expectedAction);
+      expect(store.getActions()).toStrictEqual([{ type: "forms/SET_SELECTED_FORM", payload: "basic_identity" }]);
+      expect(screen.getByText("Basic Identity", { expanded: true })).toBeInTheDocument();
     });
   });
 
@@ -569,14 +391,9 @@ describe("<Nav />", () => {
       hasForms: false
     };
 
-    beforeEach(() => {
-      ({ component } = setupMountedComponent(Nav, propsNoFirstTab, initialState));
-    });
-
     it("should open record information", () => {
-      const navGroup = component.find(NavGroup).first();
-
-      expect(navGroup.props().open).to.equal("record_information");
+      mountedComponent(<Nav {...propsNoFirstTab} />, initialState);
+      expect(screen.getByText("forms.record_types.record_information", { expanded: true })).toBeInTheDocument();
     });
   });
 });

app/javascript/components/record-form/nav/components/close-button-nav-bar.jsx

@@ -12,7 +12,7 @@ const CloseButtonNavBar = ({ handleToggleNav, mobileDisplay }) => {
   return (
     <div className={css.closeButtonRecordNav}>
       <IconButton onClick={handleToggleNav} className={css.closeIconButtonRecordNav}>
-        <CloseIcon />
+        <CloseIcon data-testid="close-icon" />
       </IconButton>
     </div>
   );