@truedat/core 7.5.9 → 7.5.11

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

@@ -1,7 +1,6 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import TreeSelector from "../TreeSelector";
 
 const baz = { id: "3", level: 2, name: "baz", children: [] };
@@ -9,28 +8,28 @@ const bar = { id: "2", level: 1, name: "bar", children: [baz] };
 const foo = { id: "1", level: 0, name: "foo", children: [bar] };
 const options = [foo, bar, baz];
 
-const renderOpts = {};
-
 describe("<TreeSelector />", () => {
-  it("matches latest snapshot", () => {
+  it("matches latest snapshot", async () => {
     const props = {
       options,
       placeholder: "Select a domain",
       className: "testClassName",
     };
-    const { container } = render(<TreeSelector {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<TreeSelector {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches latest snapshot with notDropdown parameter", () => {
+  it("matches latest snapshot with notDropdown parameter", async () => {
     const props = {
       options,
       placeholder: "Select a domain",
       className: "testClassName",
       notDropdown: true,
     };
-    const { container } = render(<TreeSelector {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<TreeSelector {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("calls onChange with selected values (multiple)", async () => {
@@ -40,18 +39,20 @@ describe("<TreeSelector />", () => {
       placeholder: "Select a domain",
       value: [],
     };
-    const { getByText, getByRole } = render(
-      <TreeSelector multiple {...props} />,
-      renderOpts
-    );
+    const rendered = render(<TreeSelector multiple {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
 
-    userEvent.click(getByText("Select a domain"));
+    await user.click(rendered.getByText(/select a domain/i));
 
     await waitFor(() => {
-      expect(getByRole("option", { name: /foo/i })).toBeTruthy();
+      expect(
+        rendered.getByRole("option", { name: /foo/i })
+      ).toBeInTheDocument();
     });
 
-    userEvent.click(getByRole("option", { name: /foo/i }));
+    await user.click(rendered.getByRole("option", { name: /foo/i }));
     expect(props.onChange.mock.calls.length).toBe(1);
     expect(props.onChange.mock.calls[0][1]).toEqual({ value: ["1"] });
   });
@@ -62,18 +63,20 @@ describe("<TreeSelector />", () => {
       options,
       placeholder: "Select a domain",
     };
-    const { getByText, getByRole } = render(
-      <TreeSelector {...props} />,
-      renderOpts
-    );
+    const rendered = render(<TreeSelector {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
 
-    userEvent.click(getByText("Select a domain"));
+    await user.click(rendered.getByText(/select a domain/i));
 
     await waitFor(() => {
-      expect(getByRole("option", { name: /foo/i })).toBeTruthy();
+      expect(
+        rendered.getByRole("option", { name: /foo/i })
+      ).toBeInTheDocument();
     });
 
-    userEvent.click(getByRole("option", { name: /foo/i }));
+    await user.click(rendered.getByRole("option", { name: /foo/i }));
     expect(props.onChange.mock.calls.length).toBe(1);
     expect(props.onChange.mock.calls[0][1]).toEqual({ value: "1" });
   });
@@ -89,37 +92,44 @@ describe("<TreeSelector />", () => {
       value: [],
     };
 
-    const { getByText, getByRole } = render(
-      <TreeSelector multiple {...props} />,
-      renderOpts
-    );
-    userEvent.click(getByText("Select a domain"));
+    const rendered = render(<TreeSelector multiple {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(rendered.getByText(/select a domain/i));
 
     await waitFor(() => {
-      expect(getByRole("option", { name: /foo/i })).toBeTruthy();
+      expect(
+        rendered.getByRole("option", { name: /foo/i })
+      ).toBeInTheDocument();
     });
 
-    userEvent.click(
-      getByRole("option", { name: /foo/i }).querySelector(
-        'i[class="chevron right icon"]'
-      )
+    await user.click(
+      rendered
+        .getByRole("option", { name: /foo/i })
+        .querySelector('i[class="chevron right icon"]')
     );
 
     await waitFor(() => {
-      expect(getByRole("option", { name: /bar/i })).toBeTruthy();
+      expect(
+        rendered.getByRole("option", { name: /bar/i })
+      ).toBeInTheDocument();
     });
 
-    userEvent.click(
-      getByRole("option", { name: /bar/i }).querySelector(
-        'i[class="chevron right icon"]'
-      )
+    await user.click(
+      rendered
+        .getByRole("option", { name: /bar/i })
+        .querySelector('i[class="chevron right icon"]')
     );
 
     await waitFor(() => {
-      expect(getByRole("option", { name: /baz/i })).toBeTruthy();
+      expect(
+        rendered.getByRole("option", { name: /baz/i })
+      ).toBeInTheDocument();
     });
 
-    userEvent.click(getByRole("option", { name: /baz/i }));
+    await user.click(rendered.getByRole("option", { name: /baz/i }));
     expect(props.onChange.mock.calls.length).toBe(1);
     expect(props.onChange.mock.calls[0][1]).toEqual({ value: ["3"] });
     expect(props.options.find((op) => op.id === "3") >= minDepth);
@@ -136,27 +146,32 @@ describe("<TreeSelector />", () => {
       value: [],
     };
 
-    const { getByText, getByRole } = render(
-      <TreeSelector multiple {...props} />,
-      renderOpts
-    );
-    userEvent.click(getByText("Select a domain"));
+    const rendered = render(<TreeSelector multiple {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(rendered.getByText(/select a domain/i));
 
     await waitFor(() => {
-      expect(getByRole("option", { name: /foo/i })).toBeTruthy();
+      expect(
+        rendered.getByRole("option", { name: /foo/i })
+      ).toBeInTheDocument();
     });
 
-    userEvent.click(
-      getByRole("option", { name: /foo/i }).querySelector(
-        'i[class="chevron right icon"]'
-      )
+    await user.click(
+      rendered
+        .getByRole("option", { name: /foo/i })
+        .querySelector('i[class="chevron right icon"]')
     );
 
     await waitFor(() => {
-      expect(getByRole("option", { name: /bar/i })).toBeTruthy();
+      expect(
+        rendered.getByRole("option", { name: /bar/i })
+      ).toBeInTheDocument();
     });
 
-    userEvent.click(getByRole("option", { name: /bar/i }));
+    await user.click(rendered.getByRole("option", { name: /bar/i }));
 
     expect(props.onChange.mock.calls.length).toBe(0);
   });
@@ -171,37 +186,44 @@ describe("<TreeSelector />", () => {
       minDepth: minDepth,
     };
 
-    const { getByText, getByRole } = render(
-      <TreeSelector {...props} />,
-      renderOpts
-    );
-    userEvent.click(getByText("Select a domain"));
+    const rendered = render(<TreeSelector {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(rendered.getByText(/select a domain/i));
 
     await waitFor(() => {
-      expect(getByRole("option", { name: /foo/i })).toBeTruthy();
+      expect(
+        rendered.getByRole("option", { name: /foo/i })
+      ).toBeInTheDocument();
     });
 
-    userEvent.click(
-      getByRole("option", { name: /foo/i }).querySelector(
-        'i[class="chevron right icon"]'
-      )
+    await user.click(
+      rendered
+        .getByRole("option", { name: /foo/i })
+        .querySelector('i[class="chevron right icon"]')
     );
 
     await waitFor(() => {
-      expect(getByRole("option", { name: /bar/i })).toBeTruthy();
+      expect(
+        rendered.getByRole("option", { name: /bar/i })
+      ).toBeInTheDocument();
     });
 
-    userEvent.click(
-      getByRole("option", { name: /bar/i }).querySelector(
-        'i[class="chevron right icon"]'
-      )
+    await user.click(
+      rendered
+        .getByRole("option", { name: /bar/i })
+        .querySelector('i[class="chevron right icon"]')
     );
 
     await waitFor(() => {
-      expect(getByRole("option", { name: /baz/i })).toBeTruthy();
+      expect(
+        rendered.getByRole("option", { name: /baz/i })
+      ).toBeInTheDocument();
     });
 
-    userEvent.click(getByRole("option", { name: /baz/i }));
+    await user.click(rendered.getByRole("option", { name: /baz/i }));
     expect(props.onChange.mock.calls.length).toBe(1);
     expect(props.onChange.mock.calls[0][1]).toEqual({ value: "3" });
     expect(props.options.find((op) => op.id === "3") >= minDepth);
@@ -217,27 +239,32 @@ describe("<TreeSelector />", () => {
       minDepth: minDepth,
     };
 
-    const { getByText, getByRole } = render(
-      <TreeSelector {...props} />,
-      renderOpts
-    );
-    userEvent.click(getByText("Select a domain"));
+    const rendered = render(<TreeSelector {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(rendered.getByText(/select a domain/i));
 
     await waitFor(() => {
-      expect(getByRole("option", { name: /foo/i })).toBeTruthy();
+      expect(
+        rendered.getByRole("option", { name: /foo/i })
+      ).toBeInTheDocument();
     });
 
-    userEvent.click(
-      getByRole("option", { name: /foo/i }).querySelector(
-        'i[class="chevron right icon"]'
-      )
+    await user.click(
+      rendered
+        .getByRole("option", { name: /foo/i })
+        .querySelector('i[class="chevron right icon"]')
     );
 
     await waitFor(() => {
-      expect(getByRole("option", { name: /bar/i })).toBeTruthy();
+      expect(
+        rendered.getByRole("option", { name: /bar/i })
+      ).toBeInTheDocument();
     });
 
-    userEvent.click(getByRole("option", { name: /bar/i }));
+    await user.click(rendered.getByRole("option", { name: /bar/i }));
 
     expect(props.onChange.mock.calls.length).toBe(0);
   });

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

@@ -0,0 +1,171 @@
+import { Dropdown } from "semantic-ui-react";
+import { waitFor, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
+import { UploadModal } from "../UploadModal";
+
+describe.skip("<UploadModal />", () => {
+  const trigger = <Dropdown.Item icon="upload" text="Trigger element" />;
+  const onClickExtraAction = jest.fn();
+  const onClickYesAction = jest.fn();
+  const user = userEvent.setup({ delay: null });
+
+  // See https://react-dropzone.js.org/ "Testing" section
+  const mockData = (files) => {
+    return {
+      dataTransfer: {
+        files,
+        items: files.map((file) => ({
+          kind: "file",
+          type: file.type,
+          getAsFile: () => file,
+        })),
+        types: ["Files"],
+      },
+    };
+  };
+
+  const extraAction = {
+    key: "yesWithAutoPublish",
+    primary: true,
+    content: "Extra action button",
+    onClick: onClickExtraAction,
+  };
+
+  it("shows the modal", async () => {
+    const rendered = render(
+      <UploadModal
+        {...{
+          trigger,
+          extraAction,
+          header: "header",
+          content: "content",
+          param: "implementations",
+          handleSubmit: onClickYesAction,
+        }}
+      />
+    );
+    await waitForLoad(rendered);
+
+    await user.click(
+      rendered.getByRole("option", { name: /trigger element/i })
+    );
+
+    const yesActionButton = rendered.getByRole("button", {
+      name: /uploadModal.accept.update/i,
+    });
+    expect(yesActionButton).toBeDisabled();
+
+    const extraActionButton = rendered.getByRole("button", {
+      name: /extra action button/i,
+    });
+    expect(extraActionButton).toBeDisabled();
+
+    expect(rendered.getByText(/trigger element/i)).toBeInTheDocument();
+    expect(
+      rendered.getByText(/uploadModal.actions.upload.confirmation.content/i)
+    ).toBeInTheDocument();
+  });
+
+  it("clicks yes action button", async () => {
+    const rendered = render(
+      <UploadModal
+        {...{
+          trigger,
+          header: "header",
+          content: "content",
+          param: "implementations",
+          handleSubmit: onClickYesAction,
+        }}
+      />
+    );
+    await waitForLoad(rendered);
+
+    await user.click(
+      rendered.getByRole("option", { name: /trigger element/i })
+    );
+
+    const yesActionButton = rendered.getByRole("button", {
+      name: /uploadModal.accept.update/i,
+    });
+    expect(yesActionButton).toBeDisabled();
+
+    const extraActionButton = rendered.queryByRole("button", {
+      name: /extra action button/i,
+    });
+    expect(extraActionButton).not.toBeInTheDocument();
+
+    const fakeFile = new File(["implementations"], "implementations.csv", {
+      type: "text/csv",
+    });
+
+    const dropZone = rendered.getByText(
+      /uploadModal.actions.upload.confirmation.content/i
+    );
+    const data = mockData([fakeFile]);
+
+    await waitFor(() => {
+      fireEvent.drop(dropZone, data);
+    });
+
+    expect(yesActionButton).toBeEnabled();
+
+    await waitFor(async () => {
+      await user.click(yesActionButton);
+    });
+
+    expect(onClickYesAction).toHaveBeenCalled();
+  });
+
+  it("clicks extra action button", async () => {
+    const rendered = render(
+      <UploadModal
+        {...{
+          trigger,
+          extraAction,
+          header: "header",
+          content: "content",
+          param: "implementations",
+          handleSubmit: onClickYesAction,
+        }}
+      />
+    );
+    await waitForLoad(rendered);
+
+    await user.click(
+      rendered.getByRole("option", { name: /trigger element/i })
+    );
+
+    const yesActionButton = rendered.getByRole("button", {
+      name: /uploadModal.accept.update/i,
+    });
+    expect(yesActionButton).toBeDisabled();
+
+    const extraActionButton = rendered.getByRole("button", {
+      name: /extra action button/i,
+    });
+    expect(extraActionButton).toBeDisabled();
+
+    const fakeFile = new File(["implementations"], "implementations.csv", {
+      type: "text/csv",
+    });
+
+    const dropZone = rendered.getByText(
+      /uploadModal.actions.upload.confirmation.content/i
+    );
+    const data = mockData([fakeFile]);
+
+    await waitFor(() => {
+      fireEvent.drop(dropZone, data);
+    });
+
+    expect(yesActionButton).toBeEnabled();
+    expect(extraActionButton).toBeEnabled();
+
+    await waitFor(async () => {
+      await user.click(extraActionButton);
+    });
+
+    expect(onClickExtraAction).toHaveBeenCalled();
+  });
+});

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

@@ -1,17 +1,7 @@
-import React from "react";
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
-import messages from "@truedat/core/messages";
+import { render, waitForLoad } from "@truedat/test/render";
 import UserFilters from "../UserFilters";
 
-const renderOpts = {
-  messages: {
-    en: {
-      ...messages.en,
-    },
-  },
-};
-
 const applyUserFilter = jest.fn();
 const deleteUserFilter = jest.fn();
 const resetFilters = jest.fn();
@@ -27,7 +17,7 @@ describe("<UserFilters /> admin", () => {
     useAuthorized: jest.fn(() => true),
   }));
 
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = {
       applyUserFilter,
       deleteUserFilter,
@@ -35,11 +25,12 @@ describe("<UserFilters /> admin", () => {
       selectedUserFilter,
       userFilters,
     };
-    const { container } = render(<UserFilters {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<UserFilters {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot with global filters", () => {
+  it("matches the latest snapshot with global filters", async () => {
     const props = {
       applyUserFilter,
       deleteUserFilter,
@@ -47,8 +38,9 @@ describe("<UserFilters /> admin", () => {
       selectedUserFilter,
       userFilters: [...userFilters, { name: "g", is_global: true }],
     };
-    const { container } = render(<UserFilters {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<UserFilters {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("calls applyUserFilter when selecting unselected filter label", async () => {
@@ -59,8 +51,12 @@ describe("<UserFilters /> admin", () => {
       selectedUserFilter,
       userFilters,
     };
-    const { findByText } = render(<UserFilters {...props} />, renderOpts);
-    userEvent.click(await findByText(/b/));
+    const rendered = render(<UserFilters {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    await user.click(rendered.getByText(/b/i));
+
     expect(applyUserFilter.mock.calls.length).toBe(1);
     expect(applyUserFilter.mock.calls[0][0].userFilter).toEqual({
       id: 2,
@@ -76,8 +72,12 @@ describe("<UserFilters /> admin", () => {
       selectedUserFilter: "a",
       userFilters,
     };
-    const { findByText } = render(<UserFilters {...props} />, renderOpts);
-    userEvent.click(await findByText(/a/));
+    const rendered = render(<UserFilters {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    await user.click(rendered.getByText(/a/i));
+
     expect(resetFilters.mock.calls.length).toBe(1);
   });
 });
@@ -88,7 +88,7 @@ describe("<UserFilters /> not admin", () => {
     useAuthorized: jest.fn(() => false),
   }));
 
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = {
       applyUserFilter,
       deleteUserFilter,
@@ -96,11 +96,12 @@ describe("<UserFilters /> not admin", () => {
       selectedUserFilter,
       userFilters,
     };
-    const { container } = render(<UserFilters {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<UserFilters {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot with global filters", () => {
+  it("matches the latest snapshot with global filters", async () => {
     const props = {
       applyUserFilter,
       deleteUserFilter,
@@ -108,8 +109,9 @@ describe("<UserFilters /> not admin", () => {
       selectedUserFilter,
       userFilters: [...userFilters, { name: "g", is_global: true }],
     };
-    const { container } = render(<UserFilters {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<UserFilters {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });
 
@@ -169,17 +171,22 @@ describe("<UserFilters /> for taxonomy screens", () => {
     ],
   };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(<UserFilters {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<UserFilters {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("render only Show filters", () => {
-    const { queryByText } = render(<UserFilters {...props} />, renderOpts);
-    expect(queryByText("Hide Domain Filter")).toBeNull();
-    expect(queryByText("Show Status Filter")).toBeInTheDocument();
-    expect(queryByText("Hide Multiple Domain Filter")).toBeNull();
-    expect(queryByText("Hide Other Domain Filter")).toBeNull();
-    expect(queryByText("Show Status and Domain Filter")).toBeInTheDocument();
+  it("render only Show filters", async () => {
+    const rendered = render(<UserFilters {...props} />);
+    await waitForLoad(rendered);
+
+    expect(rendered.queryByText(/hide domain filter/i)).toBeNull();
+    expect(rendered.getByText(/show status filter/i)).toBeInTheDocument();
+    expect(rendered.queryByText(/hide multiple domain filter/i)).toBeNull();
+    expect(rendered.queryByText(/hide other domain filter/i)).toBeNull();
+    expect(
+      rendered.getByText(/show status and domain filter/i)
+    ).toBeInTheDocument();
   });
 });

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

@@ -176,6 +176,7 @@ exports[`<AddMemberForm /> matches the latest snapshot 1`] = `
       </button>
       <a
         class="ui secondary button"
+        data-discover="true"
         href="/"
         role="button"
       >