Merge pull request #458 from primeroIMS/trigyn-testcases-record-form-form-field-types

Trigyn testcases record form form field types

Author: jtoliver-quoin

app/javascript/components/record-form/form/field-types/date-field-picker.jsx

@@ -30,9 +30,15 @@ const DateFieldPicker = ({ dateIncludeTime, dateProps, displayName, fieldTouched
   return (
     <MuiPickersUtilsProvider utils={DateFnsUtils} locale={localize(i18n)}>
       {dateIncludeTime ? (
-        <DateTimePicker {...dialogLabels} {...dateProps} helperText={helpText} label={label} />
+        <DateTimePicker
+          data-testid="date-time-picker"
+          {...dialogLabels}
+          {...dateProps}
+          helperText={helpText}
+          label={label}
+        />
       ) : (
-        <DatePicker {...dialogLabels} {...dateProps} helperText={helpText} label={label} />
+        <DatePicker data-testid="date-picker" {...dialogLabels} {...dateProps} helperText={helpText} label={label} />
       )}
     </MuiPickersUtilsProvider>
   );

app/javascript/components/record-form/form/field-types/date-field-picker.spec.js

@@ -0,0 +1,57 @@
+import { mountedComponent, screen } from "../../../../test-utils";
+
+import DateFieldPicker from "./date-field-picker";
+
+describe("<DateFieldPicker />", () => {
+  const formProps = {
+    initialValues: {
+      date_field_picker: ""
+    }
+  };
+
+  const props = {
+    dateIncludeTime: true,
+    dateProps: {},
+    displayName: { en: "Date Test" },
+    fieldTouched: false,
+    fieldError: "",
+    helperText: ""
+  };
+
+  describe("when dateIncludeTime is true", () => {
+    it("should a DateTimePicker component", () => {
+      mountedComponent(<DateFieldPicker {...props} />, {}, [], {}, formProps);
+      expect(screen.getByTestId("date-time-picker")).toBeInTheDocument();
+    });
+
+    it("should render the correct helpText", () => {
+      mountedComponent(<DateFieldPicker {...props} />, {}, [], {}, formProps);
+      expect(screen.getByText("fields.date_help_with_time")).toBeInTheDocument();
+    });
+  });
+
+  describe("when dateIncludeTime is false", () => {
+    const dateIncludeProp = {
+      ...props,
+      dateIncludeTime: false
+    };
+
+    it("should a DatePicker component", () => {
+      mountedComponent(<DateFieldPicker {...dateIncludeProp} />, {}, [], {}, formProps);
+      expect(screen.getByTestId("date-picker")).toBeInTheDocument();
+    });
+
+    it("should render the correct helpText", () => {
+      mountedComponent(<DateFieldPicker {...dateIncludeProp} />, {}, [], {}, formProps);
+      expect(screen.getByText("fields.date_help")).toBeInTheDocument();
+    });
+  });
+
+  describe("when ne locale", () => {
+    it("renders Nepali date picker if locale ne", () => {
+      global.I18n.locale = "ne";
+      mountedComponent(<DateFieldPicker {...props} />, {}, [], {}, formProps);
+      expect(screen.getByTestId("nepali-container")).toBeInTheDocument();
+    });
+  });
+});

app/javascript/components/record-form/form/field-types/date-field-picker.unit.test.js

@@ -0,0 +1,116 @@
+import { DEFAULT_DATE_VALUES } from "../../../../config";
+import { fireEvent, mountedComponent, screen, setScreenSizeToMobile, waitFor } from "../../../../test-utils";
+import { DATE_FIELD } from "../../../form";
+import { FieldRecord } from "../../records";
+
+import DateField from "./date-field";
+
+describe("<DateField />", () => {
+  setScreenSizeToMobile(false);
+
+  describe("when is date of birth field", () => {
+    const props = {
+      field: FieldRecord({
+        name: "date_of_birth",
+        type: DATE_FIELD,
+        display_name_en: "Text test field"
+      }),
+      formik: {
+        values: []
+      },
+      label: "Date of birth",
+      mode: {
+        isShow: false,
+        isEdit: true
+      },
+      name: "date_of_birth"
+    };
+
+    describe.skip("and the age field is visible", () => {
+      const formProps = { initialValues: { date_of_birth: null } };
+
+      const ageProsp = { ...props, formSection: { fields: [{ name: "age", visible: true }] } };
+
+      it("should set the age field", () => {
+        mountedComponent(<DateField {...ageProsp} />, {}, [], {}, formProps);
+        expect(screen.getByRole("textbox")).toBeInTheDocument();
+      });
+    });
+
+    describe.skip("and the age field is not visible", () => {
+      const formProps = { initialValues: { date_of_birth: null } };
+
+      it("should not set the age field", () => {
+        mountedComponent(<DateField {...props} />, {}, [], {}, formProps);
+        expect(screen.getByRole("textbox")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe.skip("when is date field with a default value", () => {
+    const props = {
+      field: FieldRecord({
+        name: "date_of_interview",
+        type: DATE_FIELD,
+        display_name_en: "Date of Interview",
+        selected_value: DEFAULT_DATE_VALUES.TODAY
+      }),
+      formik: {
+        values: []
+      },
+      label: "Date of Interview",
+      name: "date_of_interview"
+    };
+
+    const formProps = { initialValues: {} };
+
+    const modeProps = {
+      ...props,
+      mode: { isNew: true }
+    };
+
+    it("sets the date default value as string if the mode is new", () => {
+      mountedComponent(<DateField {...modeProps} />, {}, [], {}, formProps);
+      expect(screen.getByRole("textbox")).toBeInTheDocument();
+    });
+
+    it("sets the datetime default value as string if the mode is new", () => {
+      const newProps = {
+        ...props,
+        field: FieldRecord({
+          name: "date_of_interview",
+          type: DATE_FIELD,
+          display_name_en: "Date of Interview",
+          selected_value: DEFAULT_DATE_VALUES.TODAY,
+          date_include_time: true
+        }),
+        mode: { isNew: true }
+      };
+
+      mountedComponent(<DateField {...newProps} />, {}, [], {}, formProps);
+      expect(screen.getByRole("textbox")).toBeInTheDocument();
+    });
+
+    it("should clear the current value if the mode is new and the clear button is clicked", async () => {
+      const clearProps = {
+        ...props,
+        mode: { isNew: true }
+      };
+
+      mountedComponent(<DateField {...clearProps} />, {}, [], {}, formProps);
+      fireEvent.click(screen.getByRole("textbox"));
+      await fireEvent.click(screen.getByText("buttons.clear").closest("button"));
+      await waitFor(() => expect(screen.getByRole("textbox").value).toBe(""));
+    });
+
+    it("should not set the default value if the mode is not new", () => {
+      const notNewProps = {
+        ...props,
+        mode: { isEdit: true }
+      };
+
+      mountedComponent(<DateField {...notNewProps} />, {}, [], {}, formProps);
+      expect(screen.getByRole("textbox")).toBeInTheDocument();
+    });
+  });
+});