Merge pull request #455 from primeroIMS/trigyn-testcase-flagging

Trigyn testcase flagging

Author: aespinoza-quoin

app/javascript/components/flagging/component.unit.test.js app/javascript/components/flagging/component.spec.js

@@ -1,21 +1,23 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
 
-import { Map } from "immutable";
-
-import { setupMountedComponent } from "../../test";
+import { mountedComponent, screen } from "test-utils";
+import { fromJS } from "immutable";
 
 import Flagging from "./component";
-import { FlagDialog } from "./components";
+import { FLAG_DIALOG } from "./constants";
 
-describe("<Flagging /> - Component", () => {
-  let component;
+describe("<FlagDialog /> - Component", () => {
+  const props = {
+    recordType: "cases",
+    record: "0df32f52-4290-4ce1-b859-74ac14c081bf"
+  };
 
-  before(() => {
-    component = setupMountedComponent(
-      Flagging,
-      { recordType: "cases", record: "0df32f52-4290-4ce1-b859-74ac14c081bf" },
-      Map({
-        records: Map({
+  beforeEach(() => {
+    mountedComponent(
+      <Flagging {...props} />,
+      fromJS({
+        ui: { dialogs: { dialog: FLAG_DIALOG, open: true } },
+        records: {
           cases: {
             data: {
               0: {
@@ -42,16 +44,18 @@ describe("<Flagging /> - Component", () => {
               }
             ]
           }
-        })
+        }
       })
-    ).component;
+    );
   });
 
   it("renders Flagging form", () => {
-    expect(component.find(Flagging)).to.have.lengthOf(1);
+    expect(screen.getByText("buttons.flags")).toBeInTheDocument();
+    expect(screen.getByText("flags.add_flag_tab")).toBeInTheDocument();
+    expect(document.querySelector("#FlagForm")).toBeInTheDocument();
   });
 
   it("renders FlagDialog", () => {
-    expect(component.find(FlagDialog)).to.have.lengthOf(1);
+    expect(screen.getByText("flags.title")).toBeInTheDocument();
   });
 });

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

@@ -0,0 +1,22 @@
+import { mountedComponent, screen } from "test-utils";
+
+import DialogTabs from "./component";
+
+describe("<DialogTabs /> - Component", () => {
+  const props = {
+    children: [{ props: { hidetab: true } }],
+    isBulkFlags: false,
+    tab: 0,
+    setTab: () => {}
+  };
+
+  beforeEach(() => {
+    mountedComponent(<DialogTabs {...props} />);
+  });
+
+  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/flagging/components/dialog-tabs/component.unit.test.js

@@ -0,0 +1,30 @@
+import { mountedComponent, screen } from "test-utils";
+
+import DialogTabs from "../dialog-tabs";
+
+import FlagDialog from "./component";
+
+describe("<FlagDialog />", () => {
+  const props = {
+    children: [{ props: { hidetab: true } }],
+    isBulkFlags: false,
+    tab: 0,
+    setTab: () => {},
+    dialogOpen: true
+  };
+
+  it("should render the FlagDialog", () => {
+    mountedComponent(<FlagDialog {...props} />);
+    expect(screen.getByText("flags.add_flag_tab")).toBeInTheDocument();
+  });
+
+  it("should render the ActionDialog", () => {
+    mountedComponent(<FlagDialog {...props} />);
+    expect(screen.getByText("flags.title")).toBeInTheDocument();
+  });
+
+  it("should render the DialogTabs", () => {
+    mountedComponent(<DialogTabs {...props} />);
+    expect(screen.getAllByRole("tab")).toHaveLength(2);
+  });
+});

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

@@ -0,0 +1,23 @@
+import { mountedComponent, screen } from "test-utils";
+
+import { RECORD_TYPES } from "../../../../config/constants";
+
+import FlagForm from "./component";
+
+describe("<FlagForm />", () => {
+  const props = {
+    recordType: RECORD_TYPES.cases,
+    record: "230590",
+    handleActiveTab: () => {}
+  };
+
+  it("renders Form", () => {
+    mountedComponent(<FlagForm {...props} />);
+    expect(screen.getAllByText("flags.flag_date")).toHaveLength(2);
+  });
+
+  it("should render the FlagForm", () => {
+    mountedComponent(<FlagForm {...props} />);
+    expect(document.querySelector("#FlagForm")).toBeInTheDocument();
+  });
+});

app/javascript/components/flagging/components/flag-dialog/component.unit.test.js

@@ -0,0 +1,59 @@
+import { mountedComponent, screen, cleanup } from "test-utils";
+import { fromJS } from "immutable";
+
+import ListFlagsItemActions from "./component";
+
+describe("<ListFlagsItemActions />", () => {
+  const props = {
+    flag: {
+      id: 7,
+      record_id: "d6a6dbb4-e5e9-4720-a661-e181a12fd3a0",
+      record_type: "cases",
+      date: "2019-08-01",
+      message: "This is a flag 1",
+      flagged_by: "primero",
+      removed: false
+    }
+  };
+
+  const initialState = fromJS({
+    user: {
+      username: "primero"
+    }
+  });
+
+  beforeEach(() => {
+    mountedComponent(<ListFlagsItemActions {...props} />, initialState);
+  });
+
+  it("should render the ListFlagsItem", () => {
+    expect(screen.getByText("flags.date")).toBeInTheDocument();
+  });
+
+  it("should render the FormAction", () => {
+    expect(screen.getByText("flags.resolve_button")).toBeInTheDocument();
+  });
+
+  it("should render the DateFlag", () => {
+    expect(screen.getByTestId("date")).toBeInTheDocument();
+  });
+
+  describe("when user has NOT resolve_any_flag permission", () => {
+    const stateDiffentUser = fromJS({
+      user: {
+        username: "primero_cp"
+      }
+    });
+
+    beforeEach(() => {
+      cleanup();
+      mountedComponent(<ListFlagsItemActions {...props} />, stateDiffentUser);
+    });
+
+    it("should NOT render the ActionButton", () => {
+      const buttonElement = screen.queryByRole("button", { name: /resolve_button/i });
+
+      expect(buttonElement).not.toBeInTheDocument();
+    });
+  });
+});