@truedat/dd 4.49.9 → 4.50.3

package/src/components/__tests__/StructureGrantDropdown.spec.js

@@ -0,0 +1,148 @@
+import _ from "lodash/fp";
+import React from "react";
+import { fireEvent } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import StructureGrantDropdown from "../StructureGrantDropdown";
+import en from "../../messages/en";
+
+const renderOptsBuilder = (grant, structureGrantPopup) => ({
+  state: {
+    structure: { grant },
+    structureGrantPopup,
+  },
+  messages: { en },
+});
+
+const mockHistory = {
+  push: jest.fn(),
+};
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useHistory: () => mockHistory,
+}));
+
+describe("<StructureGrantDropdown />", () => {
+  it("matches the latest snapshot for pendingRequest state", () => {
+    const grantRequest = {
+      status: { status: "pending" },
+    };
+    const renderOpts = renderOptsBuilder({});
+    const { container } = render(
+      <StructureGrantDropdown grantRequest={grantRequest} />,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot for pendingRequest state with modification", () => {
+    const grantRequest = {
+      group: { grant: { id: 1 } },
+      status: { status: "pending" },
+    };
+    const renderOpts = renderOptsBuilder({});
+    const { container } = render(
+      <StructureGrantDropdown grantRequest={grantRequest} />,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot for processingRequest state", () => {
+    const grantRequest = {
+      status: { status: "processing" },
+    };
+    const renderOpts = renderOptsBuilder({});
+    const { container } = render(
+      <StructureGrantDropdown grantRequest={grantRequest} />,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot for processingRequest state with modification", () => {
+    const grantRequest = {
+      group: { grant: { id: 1 } },
+      status: { status: "processing" },
+    };
+    const renderOpts = renderOptsBuilder({});
+    const { container } = render(
+      <StructureGrantDropdown grantRequest={grantRequest} />,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot for pendingRemovalGrant state", () => {
+    const grantRequest = null;
+    const renderOpts = renderOptsBuilder({ pending_removal: true });
+    const { container } = render(
+      <StructureGrantDropdown grantRequest={grantRequest} />,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot for activeGrant state", () => {
+    const grantRequest = null;
+    const renderOpts = renderOptsBuilder({ pending_removal: false });
+    const { container } = render(
+      <StructureGrantDropdown grantRequest={grantRequest} />,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("when hovering on activeGrant state, renders grant detail", async () => {
+    const grantRequest = null;
+    const structureGrantPopup = [
+      { type: "date", field: "end_date" },
+      { field: "detail.foo" },
+    ];
+    const grant = {
+      pending_removal: false,
+      end_date: "2022-08-25",
+      detail: {
+        foo: "bar",
+      },
+    };
+    const renderOpts = renderOptsBuilder(grant, structureGrantPopup);
+    const { findByRole, findByText, debug } = render(
+      <StructureGrantDropdown grantRequest={grantRequest} />,
+      renderOpts
+    );
+
+    fireEvent.mouseOver(await findByRole("listbox"));
+    expect(
+      await findByText(en["structure.grant.has_grant"])
+    ).toBeInTheDocument();
+    expect(await findByText("2022-08-25")).toBeInTheDocument();
+    expect(await findByText("bar")).toBeInTheDocument();
+  });
+
+  it("when clicking on viewRequest action, will redirect to grantResquest page", async () => {
+    const grantRequest = {
+      id: 8,
+      status: { status: "pending" },
+    };
+    const renderOpts = renderOptsBuilder({});
+
+    const { findByText } = render(
+      <StructureGrantDropdown grantRequest={grantRequest} />,
+      renderOpts
+    );
+
+    userEvent.click(
+      await findByText(en["grant.actions.view_request.confirmation.header"])
+    );
+
+    expect(mockHistory.push).toHaveBeenCalledWith("/grant_requests/8");
+  });
+});

package/src/components/__tests__/StructureGrantRequestButton.spec.js

@@ -5,13 +5,13 @@ import { render } from "@truedat/test/render";
 import { StructureGrantRequestButton } from "../StructureGrantRequestButton";
 
 describe("<StructureGrantRequestButton />", () => {
-  it("render a button", async () => {
+  it("matches latest snapshot", async () => {
     const props = {
       requested: false,
       authorized: true,
     };
-    const { getByText } = render(<StructureGrantRequestButton {...props} />);
-    expect(getByText("Request grant")).toMatchSnapshot();
+    const { container } = render(<StructureGrantRequestButton {...props} />);
+    expect(container).toMatchSnapshot();
   });
 
   it("can be clickable", async () => {
@@ -23,8 +23,8 @@ describe("<StructureGrantRequestButton />", () => {
       removeGrantRequestFromCart: removeRequest,
       authorized: true,
     };
-    const { findByText } = render(<StructureGrantRequestButton {...props} />);
-    userEvent.click(await findByText("Request grant"));
+    const { getByRole } = render(<StructureGrantRequestButton {...props} />);
+    userEvent.click(await getByRole("button"));
     await waitFor(() => {
       expect(addRequest.mock.calls.length).toBe(1);
       expect(removeRequest.mock.calls.length).toBe(0);
@@ -40,8 +40,8 @@ describe("<StructureGrantRequestButton />", () => {
       removeGrantRequestFromCart: removeRequest,
       authorized: true,
     };
-    const { findByText } = render(<StructureGrantRequestButton {...props} />);
-    userEvent.click(await findByText("Pending request"));
+    const { getByRole } = render(<StructureGrantRequestButton {...props} />);
+    userEvent.click(await getByRole("button"));
     await waitFor(() => {
       expect(addRequest.mock.calls.length).toBe(0);
       expect(removeRequest.mock.calls.length).toBe(1);
@@ -58,9 +58,8 @@ describe("<StructureGrantRequestButton />", () => {
       authorized: false,
     };
     const component = render(<StructureGrantRequestButton {...props} />);
-    const { queryAllByText } = component;
-    expect(queryAllByText("Request grant")).toHaveLength(0);
-    expect(queryAllByText("Pending request")).toHaveLength(0);
+    const { queryAllByRole } = component;
+    expect(queryAllByRole("button")).toHaveLength(0);
     expect(component).toMatchSnapshot();
   });
 });

package/src/components/__tests__/__snapshots__/MyGrantRequests.spec.js.snap

@@ -125,6 +125,20 @@ exports[`<MyGrantRequests /> matches the latest snapshot 1`] = `
             failed
           </label>
         </div>
+        <div
+          class="ui checkbox"
+        >
+          <input
+            class="hidden"
+            readonly=""
+            tabindex="0"
+            type="checkbox"
+            value=""
+          />
+          <label>
+            cancelled
+          </label>
+        </div>
       </div>
     </form>
     <div

package/src/components/__tests__/__snapshots__/StructureGrantButton.spec.js.snap

@@ -1,37 +1,183 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<StructureGrantButton /> matches the latest snapshot 1`] = `
+exports[`<StructureGrantButton /> matches snapshot for active grant and active grantRequest 1`] = `
 <div>
   <div
-    class="ui green label"
+    aria-expanded="false"
+    class="ui floating dropdown"
+    role="listbox"
+    tabindex="0"
   >
-    <i
-      aria-hidden="true"
-      class="shield icon"
-    />
-    You have granted access on this structure
-    <i
-      aria-hidden="true"
-      class="delete icon"
-    />
+    <button
+      class="ui yellow icon button button basic icon group-actions"
+    >
+      <i
+        aria-hidden="true"
+        class="shield icon"
+      />
+    </button>
+    <div
+      class="menu transition left"
+    >
+      <div
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="info icon"
+        />
+        <span
+          class="text"
+        >
+          View detail
+        </span>
+      </div>
+      <div
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="delete icon"
+        />
+        <span
+          class="text"
+        >
+          Cancel request
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<StructureGrantButton /> matches snapshot for active grant and inactive grantRequest 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui floating dropdown"
+    role="listbox"
+    tabindex="0"
+  >
+    <button
+      class="ui green icon button button basic icon group-actions"
+    >
+      <i
+        aria-hidden="true"
+        class="shield icon"
+      />
+    </button>
+    <div
+      class="menu transition left"
+    >
+      <div
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="edit icon"
+        />
+        <span
+          class="text"
+        >
+          Request grant change
+        </span>
+      </div>
+      <div
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="delete icon"
+        />
+        <span
+          class="text"
+        >
+          Request grant removal
+        </span>
+      </div>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<StructureGrantButton /> matches the latest snapshot pending_removal 1`] = `
+exports[`<StructureGrantButton /> matches snapshot for no grant and active grantRequest 1`] = `
 <div>
   <div
-    class="ui orange label"
+    aria-expanded="false"
+    class="ui floating dropdown"
+    role="listbox"
+    tabindex="0"
+  >
+    <button
+      class="ui yellow icon button button basic icon group-actions"
+    >
+      <i
+        aria-hidden="true"
+        class="shield icon"
+      />
+    </button>
+    <div
+      class="menu transition left"
+    >
+      <div
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="info icon"
+        />
+        <span
+          class="text"
+        >
+          View detail
+        </span>
+      </div>
+      <div
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="delete icon"
+        />
+        <span
+          class="text"
+        >
+          Cancel request
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<StructureGrantButton /> matches snapshot for no grant and inactive grantRequest 1`] = `
+<div>
+  <button
+    class="ui orange icon button button basic icon group-actions"
   >
     <i
       aria-hidden="true"
       class="shield icon"
     />
-    You have granted access pending removal
+  </button>
+</div>
+`;
+
+exports[`<StructureGrantButton /> matches snapshot for no grant and no grantRequest 1`] = `
+<div>
+  <button
+    class="ui orange icon button button basic icon group-actions"
+  >
     <i
       aria-hidden="true"
-      class="undo icon"
+      class="shield icon"
     />
-  </div>
+  </button>
 </div>
 `;

package/src/components/__tests__/__snapshots__/StructureGrantCartTemplate.spec.js.snap

@@ -15,9 +15,6 @@ exports[`<StructureGrantCartTemplate /> matches the latest snapshot 1`] = `
     <div
       class="ui divider"
     />
-    <div
-      class="ui divider"
-    />
     <form
       class="ui form"
     />

package/src/components/__tests__/__snapshots__/StructureGrantDropdown.spec.js.snap

@@ -0,0 +1,271 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<StructureGrantDropdown /> matches the latest snapshot for activeGrant state 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui floating dropdown"
+    role="listbox"
+    tabindex="0"
+  >
+    <button
+      class="ui green icon button button basic icon group-actions"
+    >
+      <i
+        aria-hidden="true"
+        class="shield icon"
+      />
+    </button>
+    <div
+      class="menu transition left"
+    >
+      <div
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="edit icon"
+        />
+        <span
+          class="text"
+        >
+          Request grant change
+        </span>
+      </div>
+      <div
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="delete icon"
+        />
+        <span
+          class="text"
+        >
+          Request grant removal
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<StructureGrantDropdown /> matches the latest snapshot for pendingRemovalGrant state 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui floating dropdown"
+    role="listbox"
+    tabindex="0"
+  >
+    <button
+      class="ui red icon button button basic icon group-actions"
+    >
+      <i
+        aria-hidden="true"
+        class="shield icon"
+      />
+    </button>
+    <div
+      class="menu transition left"
+    >
+      <div
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="delete icon"
+        />
+        <span
+          class="text"
+        >
+          Cancel grant removal
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<StructureGrantDropdown /> matches the latest snapshot for pendingRequest state 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui floating dropdown"
+    role="listbox"
+    tabindex="0"
+  >
+    <button
+      class="ui yellow icon button button basic icon group-actions"
+    >
+      <i
+        aria-hidden="true"
+        class="shield icon"
+      />
+    </button>
+    <div
+      class="menu transition left"
+    >
+      <div
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="info icon"
+        />
+        <span
+          class="text"
+        >
+          View detail
+        </span>
+      </div>
+      <div
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="delete icon"
+        />
+        <span
+          class="text"
+        >
+          Cancel request
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<StructureGrantDropdown /> matches the latest snapshot for pendingRequest state with modification 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui floating dropdown"
+    role="listbox"
+    tabindex="0"
+  >
+    <button
+      class="ui yellow icon button button basic icon group-actions"
+    >
+      <i
+        aria-hidden="true"
+        class="shield icon"
+      />
+    </button>
+    <div
+      class="menu transition left"
+    >
+      <div
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="info icon"
+        />
+        <span
+          class="text"
+        >
+          View detail
+        </span>
+      </div>
+      <div
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="delete icon"
+        />
+        <span
+          class="text"
+        >
+          Cancel request
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<StructureGrantDropdown /> matches the latest snapshot for processingRequest state 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui floating dropdown"
+    role="listbox"
+    tabindex="0"
+  >
+    <button
+      class="ui grey icon button button basic icon group-actions"
+    >
+      <i
+        aria-hidden="true"
+        class="shield icon"
+      />
+    </button>
+    <div
+      class="menu transition left"
+    >
+      <div
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="info icon"
+        />
+        <span
+          class="text"
+        >
+          View detail
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<StructureGrantDropdown /> matches the latest snapshot for processingRequest state with modification 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui floating dropdown"
+    role="listbox"
+    tabindex="0"
+  >
+    <button
+      class="ui grey icon button button basic icon group-actions"
+    >
+      <i
+        aria-hidden="true"
+        class="shield icon"
+      />
+    </button>
+    <div
+      class="menu transition left"
+    >
+      <div
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="info icon"
+        />
+        <span
+          class="text"
+        >
+          View detail
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;