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

Trigyn testcases record form form field types attachments

Author: aespinoza-quoin

app/javascript/components/record-form/form/field-types/attachments/attachment-field.spec.js

@@ -0,0 +1,71 @@
+import { mountedComponent, screen, fireEvent } from "../../../../../test-utils";
+
+import { ATTACHMENT_TYPES } from "./constants";
+import AttachmentField from "./attachment-field";
+
+describe("<AttachmentField />", () => {
+  const props = {
+    arrayHelpers: {},
+    attachment: ATTACHMENT_TYPES.document,
+    disabled: false,
+    mode: {
+      isShow: false,
+      isEdit: true
+    },
+    name: "attachment_field_test",
+    index: 0,
+    value: {}
+  };
+
+  const formProps = {
+    initialValues: {}
+  };
+
+  it("should render component", () => {
+    mountedComponent(<AttachmentField {...props} />, {}, [], {}, formProps);
+    expect(document.querySelector(".uploadBox")).toBeInTheDocument();
+    expect(screen.getByText("fields.file_upload_box.select_file_button_text")).toBeInTheDocument();
+  });
+
+  it("should render ActionButton", () => {
+    mountedComponent(<AttachmentField {...props} />, {}, [], {}, formProps);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  describe("when value contains attachmentUrl", () => {
+    const newProps = {
+      ...props,
+      value: {
+        attachment_url: "random-string"
+      }
+    };
+
+    it("should render ActionDialog", () => {
+      mountedComponent(<AttachmentField {...newProps} />, {}, [], {}, formProps);
+      fireEvent.click(screen.getByRole("button"));
+      expect(screen.getByText("fields.remove attachment_field_test")).toBeInTheDocument();
+    });
+
+    it("should not render the AttachmentInput", () => {
+      mountedComponent(<AttachmentField {...newProps} />, {}, [], {}, formProps);
+      expect(screen.queryByRole("textbox")).toBeNull();
+    });
+
+    it("should render the AttachmentPreview", () => {
+      mountedComponent(<AttachmentField {...newProps} />, {}, [], {}, formProps);
+      expect(screen.getByRole("img")).toBeInTheDocument();
+    });
+  });
+
+  describe("when value doesn't contains attachmentUrl", () => {
+    it("should render the AttachmentInput", () => {
+      mountedComponent(<AttachmentField {...props} />, {}, [], {}, formProps);
+      expect(screen.getByTestId("input-file")).toBeInTheDocument();
+    });
+
+    it("should not render the AttachmentPreview", () => {
+      mountedComponent(<AttachmentField {...props} />, {}, [], {}, formProps);
+      expect(screen.queryByTestId("attachment")).toBeNull();
+    });
+  });
+});

app/javascript/components/record-form/form/field-types/attachments/attachment-field.unit.test.js

@@ -95,6 +95,7 @@ const AttachmentInput = ({ attachment, fields, name, value, deleteButton }) => {
                 name={fields.attachment}
                 onChange={handleOnChange}
                 disabled={fieldDisabled()}
+                data-testid="input-file"
                 type="file"
                 accept={acceptedType}
               />

app/javascript/components/record-form/form/field-types/attachments/attachment-input.jsx

@@ -0,0 +1,28 @@
+import { mountedComponent, screen } from "../../../../../test-utils";
+
+import { ATTACHMENT_TYPES } from "./constants";
+import AttachmentInput from "./attachment-input";
+
+describe("<AttachmentInput />", () => {
+  const props = {
+    fields: {},
+    attachment: ATTACHMENT_TYPES.document,
+    name: "attachment_field_test",
+    deleteButton: <></>,
+    value: "test"
+  };
+
+  const formProps = {
+    initialValues: {}
+  };
+
+  it("should render FastField", () => {
+    mountedComponent(<AttachmentInput {...props} />, {}, [], {}, formProps);
+    expect(screen.getByTestId("input-file")).toBeInTheDocument();
+  });
+
+  it("should render ActionButton", () => {
+    mountedComponent(<AttachmentInput {...props} />, {}, [], {}, formProps);
+    expect(screen.getByText("fields.file_upload_box.select_file_button_text")).toBeInTheDocument();
+  });
+});

app/javascript/components/record-form/form/field-types/attachments/attachment-input.spec.js

@@ -20,13 +20,13 @@ const AttachmentPreview = ({ name, attachment, attachmentUrl }) => {
   if (isAudioAttachment) {
     return (
       // eslint-disable-next-line jsx-a11y/media-has-caption
-      <audio id={name} controls>
+      <audio id={name} controls data-testid="audio">
         <source src={attachmentUrl} />
       </audio>
     );
   }
 
-  return <img src={attachmentUrl} alt="" className={css.editImg} />;
+  return <img data-testid="attachment" src={attachmentUrl} alt="" className={css.editImg} />;
 };
 
 AttachmentPreview.displayName = "AttachmentPreview";

app/javascript/components/record-form/form/field-types/attachments/attachment-input.unit.test.js

@@ -0,0 +1,29 @@
+import { mountedComponent, screen } from "../../../../../test-utils";
+
+import { ATTACHMENT_TYPES } from "./constants";
+import AttachmentPreview from "./attachment-preview";
+
+describe("<AttachmentPreview />", () => {
+  const props = {
+    name: "attachment_field_test",
+    attachment: ATTACHMENT_TYPES.photo,
+    attachmentUrl: "abcd"
+  };
+
+  const formProps = {
+    initialValues: {}
+  };
+
+  it("should render an audio", () => {
+    const audioProps = { ...props, attachment: ATTACHMENT_TYPES.audio };
+
+    mountedComponent(<AttachmentPreview {...audioProps} />);
+    expect(screen.getByTestId("audio")).toBeInTheDocument();
+  });
+
+  it("should render an img", () => {
+    mountedComponent(<AttachmentPreview {...props} />, {}, [], {}, formProps);
+    expect(screen.getByRole("img")).toBeInTheDocument();
+    expect(screen.getByTestId("attachment")).toBeInTheDocument();
+  });
+});

app/javascript/components/record-form/form/field-types/attachments/attachment-preview.jsx

@@ -1,11 +1,5 @@
-// Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
-
-import { FastField } from "formik";
-
-import { setupMountedComponent } from "../../../../../test";
+import { mountedComponent, screen } from "../../../../../test-utils";
 import { FieldRecord } from "../../../records";
-import TickField from "../tick-field";
-import DateField from "../date-field";
 import { MODULES } from "../../../../../config";
 
 import DocumentField from "./document-field";
@@ -56,11 +50,10 @@ describe("<DocumentField />", () => {
   };
 
   it("should render a DocumentField", () => {
-    const { component } = setupMountedComponent(DocumentField, props, {}, [], formProps);
-
-    expect(component.find(DateField)).to.have.lengthOf(1);
-    expect(component.find(FastField)).to.have.lengthOf(4);
-    expect(component.find(TickField)).to.have.lengthOf(1);
+    mountedComponent(<DocumentField {...props} />, {}, [], {}, formProps);
+    expect(screen.getByText(/fields.document.is_current/i)).toBeInTheDocument();
+    expect(screen.getAllByRole("textbox")).toHaveLength(3);
+    expect(screen.getByText(/yes_label/i)).toBeInTheDocument();
   });
 
   it("should NOT render render a TickField", () => {
@@ -74,8 +67,8 @@ describe("<DocumentField />", () => {
         }
       }
     };
-    const { component } = setupMountedComponent(DocumentField, propsMRM, {}, [], formProps);
 
-    expect(component.find(TickField)).to.have.lengthOf(0);
+    mountedComponent(<DocumentField {...propsMRM} />, {}, [], {}, formProps);
+    expect(screen.queryByText(/yes_label/i)).toBeNull();
   });
 });

app/javascript/components/record-form/form/field-types/attachments/attachment-preview.spec.js

@@ -1,8 +1,5 @@
-// Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
+import { screen, simpleMountedComponent } from "../../../../../test-utils";
 
-import { createSimpleMount } from "../../../../../test";
-
-import AttachmentPreview from "./attachment-preview";
 import { ATTACHMENT_TYPES } from "./constants";
 import renderPreview from "./render-preview";
 
@@ -11,7 +8,7 @@ describe("renderPreview", () => {
   const deleteButton = null;
 
   it("should return false if there is no data", () => {
-    expect(renderPreview(ATTACHMENT_TYPES.photo, {}, css, deleteButton)).to.be.false;
+    expect(renderPreview(ATTACHMENT_TYPES.photo, {}, css, deleteButton)).toBeFalsy();
   });
 
   it("should return a span with the file name if attachment it's document", () => {
@@ -20,10 +17,8 @@ describe("renderPreview", () => {
       fileName: "test.txt"
     };
 
-    const component = createSimpleMount(renderPreview(ATTACHMENT_TYPES.document, file, css, deleteButton));
-
-    expect(component.find("span")).to.have.lengthOf(1);
-    expect(component.text()).to.be.equal("test.txt");
+    simpleMountedComponent(renderPreview(ATTACHMENT_TYPES.document, file, css, deleteButton));
+    expect(screen.getByText(/test.txt/i)).toBeInTheDocument();
   });
 
   it("should return an AttachmentPreview", () => {
@@ -32,8 +27,7 @@ describe("renderPreview", () => {
       fileName: "test.png"
     };
 
-    const component = createSimpleMount(renderPreview(ATTACHMENT_TYPES.photo, file, css, deleteButton));
-
-    expect(component.find(AttachmentPreview)).to.have.lengthOf(1);
+    simpleMountedComponent(renderPreview(ATTACHMENT_TYPES.photo, file, css, deleteButton));
+    expect(screen.getByTestId("attachment")).toBeInTheDocument();
   });
 });