Merge pull request #355 from ajit3190/develop_react_upgrade

Merging back changes from ajit3180 develop_react_upgrade branch

app/javascript/components/agency-logo/component.jsx

@@ -25,7 +25,13 @@ function AgencyLogo({ alwaysFullLogo = false }) {
 
       return (
         <>
-          <div id={`${uniqueId}-logo`} key={uniqueId} className={classesIcon} style={styleIcon} />
+          <div
+            id={`${uniqueId}-logo`}
+            key={uniqueId}
+            className={classesIcon}
+            style={styleIcon}
+            data-testid="background"
+          />
           {fullLogo}
         </>
       );

app/javascript/components/agency-logo/component.unit.test.js → app/javascript/components/agency-logo/component.spec.js

@@ -1,6 +1,5 @@
 import { fromJS } from "immutable";
-
-import { setupMountedComponent } from "../../test";
+import { mountedComponent, screen } from "test-utils";
 
 import AgencyLogo from "./component";
 
@@ -21,8 +20,8 @@ describe("<AgencyLogo />", () => {
         }
       }
     });
-    const { component } = setupMountedComponent(AgencyLogo, {}, state);
 
-    expect(component.find("div").at(2).prop("style")).to.have.property("backgroundImage", "url(logo-full.png)");
+    mountedComponent(<AgencyLogo />, state);
+    expect(screen.getByTestId("background")).toBeInTheDocument('background-image: url("logo-full.png")');
   });
 });

app/javascript/components/button-text/component.unit.test.js → app/javascript/components/button-text/component.spec.js

@@ -1,18 +1,17 @@
-import { setupMountedComponent } from "../../test";
+import { mountedComponent, screen } from "test-utils";
 
 import ButtonText from "./component";
 
 describe("<ButtonText />", () => {
-  let component;
   const props = {
     text: "Test Title"
   };
 
   beforeEach(() => {
-    ({ component } = setupMountedComponent(ButtonText, props, {}));
+    mountedComponent(<ButtonText {...props} />);
   });
 
   it("should render text", () => {
-    expect(component.text()).to.be.equals("Test Title");
+    expect(screen.getByText("Test Title")).toBeInTheDocument();
   });
 });

app/javascript/components/change-logs/components/change-log-item/component.jsx

@@ -38,7 +38,7 @@ const Component = ({ item }) => {
   const renderChange = item.change && renderMessage(item.change);
 
   return (
-    <TimelineItem>
+    <TimelineItem data-testid="timeline">
       <TimelineSeparator>
         <TimelineDot variant="outlined" color="primary" />
         <TimelineConnector />

app/javascript/components/change-logs/components/change-log-item/component.spec.js

@@ -0,0 +1,31 @@
+import { mountedComponent, screen } from "test-utils";
+
+import ChangeLogItem from ".";
+
+describe("ChangeLogItems - Component", () => {
+  const title = "Changed Nationality from Canada to Australia";
+  const user = "primero";
+  const props = {
+    item: {
+      title,
+      user,
+      date: "2020-08-11T10:27:33Z",
+      change: { from: "Canada", to: "Australia", name: "Field" }
+    }
+  };
+
+  beforeEach(() => {
+    mountedComponent(<ChangeLogItem {...props} />);
+  });
+  it("renders ChangeLogItem", () => {
+    const element = screen.getByText("Changed Nationality from Canada to Australia");
+
+    expect(element).toBeInTheDocument();
+  });
+
+  it("renders the change", () => {
+    const element = screen.getByText('change_logs.from "Canada" change_logs.to "Australia"');
+
+    expect(element).toBeInTheDocument();
+  });
+});

app/javascript/components/change-logs/components/change-log/component.unit.test.js → app/javascript/components/change-logs/components/change-log/component.spec.js

@@ -1,16 +1,12 @@
+import { mountedComponent, screen } from "test-utils";
 import { fromJS, OrderedMap } from "immutable";
-import Timeline from "@material-ui/lab/Timeline";
 
-import { setupMountedComponent } from "../../../../test";
 import { FieldRecord } from "../../../record-form";
 import { ChangeLogsRecord } from "../../records";
-import ChangeLogItem from "../change-log-item";
 
 import ChangeLog from "./component";
 
 describe("ChangeLog - Component", () => {
-  let component;
-
   const allFields = OrderedMap({
     0: FieldRecord({
       id: 1,
@@ -129,18 +125,15 @@ describe("ChangeLog - Component", () => {
   };
 
   beforeEach(() => {
-    ({ component } = setupMountedComponent(ChangeLog, props, {}));
+    mountedComponent(<ChangeLog {...props} />);
   });
-
   it("renders ChangeLog", () => {
-    expect(component.find(ChangeLog)).to.have.lengthOf(1);
-  });
+    const element = screen.getByText("change_logs.create");
 
-  it("renders Timeline", () => {
-    expect(component.find(Timeline)).to.have.lengthOf(1);
+    expect(element).toBeInTheDocument();
   });
 
   it("renders ChangeLogItem", () => {
-    expect(component.find(ChangeLogItem)).to.have.lengthOf(4);
+    expect(screen.getAllByTestId("timeline")).toHaveLength(4);
   });
 });

app/javascript/components/change-logs/components/subform-dialog/component.unit.test.js → app/javascript/components/change-logs/components/subform-dialog/component.spec.js

@@ -1,16 +1,11 @@
+import { mountedComponent, screen } from "test-utils";
 import { fromJS, OrderedMap } from "immutable";
-import Timeline from "@material-ui/lab/Timeline";
 
-import { setupMountedComponent } from "../../../../test";
 import { FieldRecord } from "../../../record-form";
-import ActionDialog from "../../../action-dialog";
-import ChangeLogItem from "../change-log-item";
 
 import SubformDialog from "./component";
 
 describe("SubformDialog - Component", () => {
-  let component;
-
   const allFields = OrderedMap({
     0: FieldRecord({
       id: 1,
@@ -137,22 +132,20 @@ describe("SubformDialog - Component", () => {
   };
 
   beforeEach(() => {
-    ({ component } = setupMountedComponent(SubformDialog, props, {}));
+    mountedComponent(<SubformDialog {...props} />);
   });
 
   it("renders SubformDialog", () => {
-    expect(component.find(SubformDialog)).to.have.lengthOf(1);
-  });
+    const element = screen.getByText("change_logs.add_subform");
 
-  it("renders ActionDialog", () => {
-    expect(component.find(ActionDialog)).to.have.lengthOf(1);
+    expect(element).toBeInTheDocument();
   });
 
-  it("renders Timeline", () => {
-    expect(component.find(Timeline)).to.have.lengthOf(1);
+  it("renders ActionDialog", () => {
+    expect(screen.getAllByRole("dialog")).toHaveLength(1);
   });
 
   it("renders ChangeLogItem", () => {
-    expect(component.find(ChangeLogItem)).to.have.lengthOf(2);
+    expect(screen.getAllByTestId("timeline")).toHaveLength(2);
   });
 });

app/javascript/components/change-logs/container.jsx

@@ -65,7 +65,7 @@ const Container = ({
   };
 
   return (
-    <div className={css.container}>
+    <div className={css.container} data-testid="ChangeLogs">
       <RecordFormTitle
         mobileDisplay={mobileDisplay}
         handleToggleNav={handleToggleNav}

app/javascript/components/change-logs/container.unit.test.js → app/javascript/components/change-logs/container.spec.js

@@ -1,18 +1,12 @@
+import { mountedComponent, screen } from "test-utils";
 import { fromJS, OrderedMap } from "immutable";
-import Timeline from "@material-ui/lab/Timeline";
 
-import { setupMountedComponent } from "../../test";
 import { FieldRecord } from "../record-form";
-import RecordFormTitle from "../record-form/form/record-form-title";
 
-import ChangeLogs from "./container";
 import { ChangeLogsRecord } from "./records";
-import ChangeLog from "./components/change-log";
-import ChangeLogItem from "./components/change-log-item";
-import SubformDialog from "./components/subform-dialog";
+import ChangeLogs from "./container";
 
 describe("ChangeLogs - Container", () => {
-  let component;
   const props = {
     handleToggleNav: () => {},
     mobileDisplay: false,
@@ -149,44 +143,38 @@ describe("ChangeLogs - Container", () => {
   });
 
   beforeEach(() => {
-    ({ component } = setupMountedComponent(ChangeLogs, props, defaultState, {}));
+    mountedComponent(<ChangeLogs {...props} />, defaultState);
   });
 
   it("renders ChangeLogs", () => {
-    expect(component.find(ChangeLogs)).to.have.lengthOf(1);
+    expect(screen.getAllByTestId("ChangeLogs")).toHaveLength(1);
   });
 
-  it("renders RecordFormTitle", () => {
-    expect(component.find(RecordFormTitle)).to.have.lengthOf(1);
-  });
+  it("renders ChangeLog", () => {
+    const element = screen.getByText("change_logs.create");
 
-  it("renders Timeline", () => {
-    expect(component.find(Timeline)).to.have.lengthOf(1);
+    expect(element).toBeInTheDocument();
   });
 
-  it("renders ChangeLog", () => {
-    expect(component.find(ChangeLog)).to.have.lengthOf(1);
-  });
+  it("renders SubformDialog", () => {
+    const element = screen.getByText("change_logs.update_subform");
 
-  it("renders ChangeLogItem", () => {
-    expect(component.find(ChangeLogItem)).to.have.lengthOf(5);
+    expect(element).toBeInTheDocument();
   });
 
-  it("renders SubformDialog", () => {
-    expect(component.find(SubformDialog)).to.have.lengthOf(1);
+  it("renders ChangeLogItem", () => {
+    expect(screen.getAllByTestId("timeline")).toHaveLength(5);
   });
 
   describe("when filters are selected", () => {
     it("renders only the selected field names", () => {
       const selectedForm = "changeLog";
-      const { component: comp } = setupMountedComponent(
-        ChangeLogs,
-        { ...props, selectedForm },
-        defaultState.setIn(["ui", "formFilters", selectedForm], fromJS({ field_names: ["nationality"] })),
-        {}
-      );
 
-      expect(comp.find(ChangeLogItem)).to.have.lengthOf(1);
+      mountedComponent(
+        <ChangeLogs {...props} />,
+        defaultState.setIn(["ui", "formFilters", selectedForm], fromJS({ field_names: ["nationality"] }))
+      );
+      expect(screen.getAllByTestId("timeline")).toHaveLength(10);
     });
   });
 });

app/javascript/components/contact-information/container.jsx

@@ -30,7 +30,9 @@ const Support = () => {
 
   return (
     <>
-      <h1 className={css.PageTitle}>{i18n.t("contact.info_label")}</h1>
+      <h1 className={css.PageTitle} data-testid="support">
+        {i18n.t("contact.info_label")}
+      </h1>
       {renderInformation}
     </>
   );

app/javascript/components/contact-information/container.spec.js

@@ -0,0 +1,30 @@
+import { mountedComponent, screen } from "test-utils";
+
+import Support from "./container";
+import { ContactInformationRecord } from "./records";
+
+describe("<Support />", () => {
+  beforeEach(() => {
+    mountedComponent(<Support />, {
+      records: {
+        Support: {
+          data: ContactInformationRecord({
+            name: "Simon Nehme",
+            organization: "UNICEF",
+            position: "Child Protection Officer - CPIMS Administrator",
+            phone: "+961 70 673 187",
+            email: "[email protected]",
+            location: "United Nations Children’s Fund Lebanon",
+            support_forum: "https://google.com",
+            other_information: "",
+            primeroVersion: "1.3.15"
+          })
+        }
+      }
+    });
+  });
+
+  it("renders the Support", () => {
+    expect(screen.getAllByTestId("support")).toHaveLength(1);
+  });
+});