Merge pull request #463 from primeroIMS/trigyn-testcase-form

Trigyn testcase form

Author: jtoliver-quoin

app/javascript/components/flagging/components/dialog-tabs/component.spec.js

@@ -15,7 +15,6 @@ describe("<DialogTabs /> - Component", () => {
   });
 
   it("should render the DialogTabs", () => {
-    screen.debug();
     expect(screen.getByText("flags.flags_tab")).toBeInTheDocument();
     expect(screen.getByText("flags.add_flag_tab")).toBeInTheDocument();
   });

app/javascript/components/form/component.spec.js

@@ -0,0 +1,50 @@
+import { screen, mountedComponent, spy } from "test-utils";
+import { fromJS } from "immutable";
+import { object, string } from "yup";
+
+import Form from "./component";
+import { FORM_MODE_DIALOG } from "./constants";
+import { FormSectionRecord, FieldRecord } from "./records";
+
+describe("<Form>", () => {
+  const formSubmit = spy();
+  const FORM_ID = "test-form";
+
+  const formSections = fromJS([
+    FormSectionRecord({
+      unique_id: "notes_section",
+      fields: [
+        FieldRecord({
+          display_name: "Test Field 1",
+          name: "test_field_1",
+          type: "text_field"
+        }),
+        FieldRecord({
+          display_name: "Test Field 2",
+          name: "test_field_2",
+          type: "textarea"
+        })
+      ]
+    })
+  ]);
+
+  const props = {
+    formSections,
+    mode: FORM_MODE_DIALOG,
+    onSubmit: formSubmit,
+    validations: object().shape({
+      test_field_1: string().required()
+    }),
+    formID: FORM_ID
+  };
+
+  it("renders form based on formSection props", () => {
+    mountedComponent(<Form {...props} />);
+    expect(screen.getAllByText("Test Field 1")).toBeTruthy();
+    expect(screen.getAllByText("Test Field 2")).toBeTruthy();
+  });
+
+  it.todo("should set form with initial values");
+
+  it.todo("should not submit form when invalid");
+});

app/javascript/components/form/components/draggable-option/component.spec.js

@@ -0,0 +1,36 @@
+// Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
+import { screen, mountedFormComponent } from "test-utils";
+import { DragDropContext, Droppable } from "react-beautiful-dnd";
+
+import DraggableOption from "./component";
+
+describe("<Form /> - components/<DraggableOption />", () => {
+  beforeEach(() => {
+    // eslint-disable-next-line react/display-name
+    const Component = props => (
+      <DragDropContext>
+        <Droppable droppableId="droppable" type="field">
+          {() => (
+            <DraggableOption
+              name="field_1"
+              index={0}
+              option={{ id: "option_1", display_text: "Display text 1", disabled: false }}
+              defaultOptionId="option_1"
+              {...props}
+            />
+          )}
+        </Droppable>
+      </DragDropContext>
+    );
+
+    mountedFormComponent(<Component mode="edit" />);
+  });
+
+  it("renders a TextInput for display_text", () => {
+    expect(document.querySelector("input[name='field_1.option_strings_text[0].display_text.en'")).toBeInTheDocument();
+  });
+
+  it("renders a SwitchInput", () => {
+    expect(screen.getByTestId("switch-input")).toBeInTheDocument();
+  });
+});

app/javascript/components/form/components/draggable-option/component.unit.test.js

@@ -0,0 +1,17 @@
+import { screen, mountedFormComponent } from "test-utils";
+
+import FormAction from "./form-action";
+
+describe("<Form /> - components/<FormAction />", () => {
+  const buttonMessage = "Test save";
+  const props = {
+    actionHandler: () => {},
+    text: buttonMessage
+  };
+
+  it("renders a Fab component", () => {
+    mountedFormComponent(<FormAction {...props} />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+    expect(screen.getByText(buttonMessage)).toBeInTheDocument();
+  });
+});

app/javascript/components/form/components/form-action.spec.js

@@ -0,0 +1,72 @@
+import { screen, mountedFormComponent } from "test-utils";
+import { fromJS } from "immutable";
+
+import { FieldRecord } from "../records";
+import { RADIO_FIELD, DIALOG_TRIGGER, DOCUMENT_FIELD } from "../constants";
+
+import FormSectionField from "./form-section-field";
+
+describe("<Form /> - components/<FormSectionField />", () => {
+  it("renders a text field", () => {
+    const field = FieldRecord({ name: "test_field", type: "text_field" });
+
+    mountedFormComponent(<FormSectionField field={field} />);
+    expect(document.querySelector("#test_field")).toBeInTheDocument();
+  });
+
+  it("renders an error field", () => {
+    const field = FieldRecord({ name: "test_field", type: "error_field" });
+
+    // eslint-disable-next-line react/display-name
+    const Component = props => {
+      return <FormSectionField {...props} field={field} checkErrors={fromJS(["name"])} formMode={fromJS({})} />;
+    };
+
+    mountedFormComponent(<Component />, {
+      errors: [
+        {
+          name: "name",
+          message: "test-error"
+        }
+      ]
+    });
+    expect(screen.getByText("test-error")).toBeInTheDocument();
+  });
+
+  it("renders a radio button field", () => {
+    const field = FieldRecord({
+      name: "radio_test_field",
+      id: "radio_test_field",
+      type: RADIO_FIELD,
+      option_strings_text: {
+        en: [
+          {
+            id: "yes",
+            label: "Yes"
+          },
+          {
+            id: "no",
+            label: "No"
+          }
+        ]
+      }
+    });
+
+    mountedFormComponent(<FormSectionField field={field} />);
+    expect(document.querySelector("#radio_test_field")).toBeInTheDocument();
+  });
+
+  it("renders a buttons link", () => {
+    const field = FieldRecord({ name: "test_field", type: DIALOG_TRIGGER, display_name: { en: "Test Field" } });
+
+    mountedFormComponent(<FormSectionField field={field} />);
+    expect(screen.getByText("Test Field")).toBeInTheDocument();
+  });
+
+  it("renders an attachement field", () => {
+    const field = FieldRecord({ name: "test_document_field", type: DOCUMENT_FIELD });
+
+    mountedFormComponent(<FormSectionField field={field} />);
+    expect(document.querySelector("#test_document_field")).toBeInTheDocument();
+  });
+});