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

Trigyn testcases record form form

Author: dhernandez-quoin

app/javascript/components/record-form/form/components/workflow-indicator.jsx

@@ -44,7 +44,7 @@ const WorkflowIndicator = ({ locale, primeroModule, recordType, record }) => {
   }
 
   return (
-    <Stepper classes={{ root: css.stepper }} activeStep={activeStep || 0}>
+    <Stepper data-testid="stepper" classes={{ root: css.stepper }} activeStep={activeStep || 0}>
       {workflowSteps?.map((s, index) => {
         const label = displayNameHelper(s.display_text, locale) || "";
 

app/javascript/components/record-form/form/form-section-field.spec.js

@@ -0,0 +1,76 @@
+import { mountedComponent, screen, userEvent } from "../../../test-utils";
+import { SELECT_FIELD } from "../constants";
+
+import FormSectionField from "./form-section-field";
+import { TEXT_FIELD_NAME } from "./constants";
+
+describe("<FormSectionField />", () => {
+  const props = {
+    name: "Test",
+    isReadWriteForm: false,
+    field: {
+      type: TEXT_FIELD_NAME,
+      display_name: { en: "Test" },
+      disabled: false
+    },
+    mode: {
+      isShow: true
+    },
+    formSection: {}
+  };
+
+  it("render a FormSectionField", () => {
+    mountedComponent(<FormSectionField {...props} />);
+    expect(screen.queryByTestId(/form-section/i)).toBeNull();
+  });
+
+  describe("When is select field", () => {
+    const selectFieldProps = {
+      name: "Test",
+      field: {
+        type: SELECT_FIELD,
+        display_name: { en: "Test" },
+        disabled: false,
+        visible: true,
+        options: [{ id: 1, display_text: "test" }]
+      },
+      mode: {
+        isEdit: true,
+        isShow: false
+      },
+      isReadWriteForm: true
+    };
+
+    describe("and violationOptions is present ", () => {
+      const violationOptions = [{ id: 2, display_text: "test2" }];
+      const violationProps = { ...selectFieldProps, violationOptions };
+
+      it("should have violation options for select", async () => {
+        mountedComponent(<FormSectionField {...violationProps} />, {}, [], {}, { registerField: () => {} });
+
+        const user = userEvent.setup();
+
+        const autoCompleteDropdown = screen.getByRole("button", { name: "Open" });
+
+        await user.click(autoCompleteDropdown);
+
+        expect(screen.queryByText("test")).toBeNull();
+        expect(screen.getByText("test2")).toBeInTheDocument();
+      });
+    });
+
+    describe("and violationOptions is NOT present ", () => {
+      it("should not have violation options for select", async () => {
+        mountedComponent(<FormSectionField {...selectFieldProps} />, {}, [], {}, { registerField: () => {} });
+        const user = userEvent.setup();
+
+        const autoCompleteDropdown = screen.getByRole("button", { name: "Open" });
+
+        await user.click(autoCompleteDropdown);
+
+        expect(screen.getByText("test")).toBeInTheDocument();
+        expect(screen.queryByText("test2")).toBeNull();
+      });
+    });
+  });
+});

app/javascript/components/record-form/form/form-section-field.unit.test.js

@@ -8,8 +8,8 @@ import css from "./styles.css";
 
 const RecordFormTitle = ({ displayText, handleToggleNav, mobileDisplay }) => {
   const showMobileIcon = mobileDisplay ? (
-    <IconButton onClick={handleToggleNav}>
-      <MenuOpen />
+    <IconButton onClick={handleToggleNav} data-testid="icon-button">
+      <MenuOpen data-testid="menu-open" />
     </IconButton>
   ) : null;
 

app/javascript/components/record-form/form/record-form-title.jsx

@@ -0,0 +1,26 @@
+import { mountedComponent, screen } from "../../../test-utils";
+
+import RecordFormTitle from "./record-form-title";
+
+describe("<RecordFormTitle />", () => {
+  const props = {
+    displayText: "Test title",
+    handleToggleNav: () => {},
+    mobileDisplay: true
+  };
+
+  it("renders a <IconButton />", () => {
+    mountedComponent(<RecordFormTitle {...props} />, {});
+    expect(screen.getByTestId("icon-button")).toBeInTheDocument();
+  });
+
+  it("renders a <MenuOpen />", () => {
+    mountedComponent(<RecordFormTitle {...props} />, {});
+    expect(screen.getByTestId("menu-open")).toBeInTheDocument();
+  });
+
+  it("renders a valid text passed as a prop", () => {
+    mountedComponent(<RecordFormTitle {...props} />, {});
+    expect(screen.queryByText("Test title")).toBeInTheDocument();
+  });
+});

app/javascript/components/record-form/form/record-form-title.spec.js

@@ -145,7 +145,12 @@ const RecordFormToolbar = ({
         {mode.isShow && params && (
           <Permission resources={params.recordType} actions={FLAG_RECORDS}>
             <DisableOffline button>
-              <Badge color="error" badgeContent={record.get("flag_count")} className={css.badgeIndicator}>
+              <Badge
+                data-testid="badge"
+                color="error"
+                badgeContent={record.get("flag_count")}
+                className={css.badgeIndicator}
+              >
                 <Flagging record={params.id} recordType={params.recordType} />
               </Badge>
             </DisableOffline>