Merge pull request #371 from primeroIMS/trigyn-testcases-record-form-form-nav-components-nav-item

Trigyn testcases record form form nav components nav item

Author: jtoliver-quoin

app/javascript/components/jewel/component.jsx

@@ -15,10 +15,10 @@ const Jewel = ({ value, isForm, isList, isError }) => {
 
   if (isError && !isForm) {
     return (
-      <>
+      <div data-testid="jewel-error">
         {value}
         <Circle className={classes} />
-      </>
+      </div>
     );
   }
 

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

@@ -62,6 +62,7 @@ const Component = ({
 
   return (
     <ListItem
+      data-testid="list-item"
       id={`${formId}-${group}`}
       selected={selectedForm === formId && !isNested}
       button
@@ -73,7 +74,9 @@ const Component = ({
       }}
       disabled={disabledApplication}
     >
-      <ListItemText className={groupItem ? css.nestedItem : css.item}>{formText()}</ListItemText>
+      <ListItemText data-testid="list-item-text" className={groupItem ? css.nestedItem : css.item}>
+        {formText()}
+      </ListItemText>
       {isNested && (open ? <ExpandMore /> : <ExpandLess />)}
     </ListItem>
   );

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

@@ -1,17 +1,13 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
 
 import { fromJS, Map, OrderedMap } from "immutable";
-import { ListItem, ListItemText } from "@material-ui/core";
 
-import Jewel from "../../../../jewel";
-import { setupMountedComponent } from "../../../../../test";
+import { mountedComponent, screen } from "../../../../../test-utils";
 import { FormSectionRecord, FieldRecord } from "../../../records";
 
 import NavItem from "./component";
 
 describe("<NavItem />", () => {
-  let component;
-
   const record = fromJS({
     case_id: "12345",
     case_id_display: "3c9d076",
@@ -100,7 +96,7 @@ describe("<NavItem />", () => {
   const props = {
     form: {},
     groupItem: false,
-    handleClick: () => {},
+    handleClick: () => { },
     isNested: false,
     isNew: false,
     itemsOfGroup: [],
@@ -111,46 +107,18 @@ describe("<NavItem />", () => {
     hasError: true
   };
 
-  beforeEach(() => {
-    ({ component } = setupMountedComponent(NavItem, props, initialState));
-  });
-
   it("renders a ListItem component />", () => {
-    expect(component.find(ListItem)).to.have.lengthOf(1);
-  });
-
-  it("renders a ListItemText component />", () => {
-    expect(component.find(ListItemText)).to.have.lengthOf(1);
-  });
-
-  it("should render valid props", () => {
-    const NavItemProps = { ...component.find(NavItem).props() };
-
-    expect(component.find(NavItem)).to.have.lengthOf(1);
-    [
-      "form",
-      "groupItem",
-      "handleClick",
-      "isNested",
-      "isNew",
-      "itemsOfGroup",
-      "name",
-      "open",
-      "recordAlerts",
-      "selectedForm",
-      "hasError"
-    ].forEach(property => {
-      expect(NavItemProps).to.have.property(property);
-      delete NavItemProps[property];
-    });
-    expect(NavItemProps).to.be.empty;
+    mountedComponent(<NavItem {...props} />, initialState);
+    expect(screen.getAllByTestId("list-item")).toHaveLength(1);
   });
 
   it("renders a ListItemText component />", () => {
-    expect(component.find(ListItemText)).to.have.lengthOf(1);
+    mountedComponent(<NavItem {...props} />, initialState);
+    expect(screen.getAllByTestId("list-item-text")).toHaveLength(1);
   });
 
   it("renders <Jewel/> for error", () => {
-    expect(component.find(Jewel)).to.have.lengthOf(1);
+    mountedComponent(<NavItem {...props} />, initialState);
+    expect(screen.getAllByTestId("jewel-error")).toHaveLength(1);
   });
 });