@truedat/bg 7.5.9 → 7.5.10

package/src/concepts/components/__tests__/ConceptsTable.spec.js

@@ -1,10 +1,9 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { SearchContextProvider } from "@truedat/core/search/SearchContext";
 import { ConceptsTable } from "../ConceptsTable";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useLocation: jest.fn(),
 }));
 
@@ -48,15 +47,6 @@ const searchProps = {
   translations: jest.fn(),
 };
 
-const renderOpts = {
-  messages: {
-    en: {
-      "concepts.props.type": "Type",
-      "concepts.props.name": "Term",
-    },
-  },
-};
-
 describe("<ConceptsTable />", () => {
   const controlColumn = { name: "controlColumn" };
   const defaultColumns = ["name", "status", "globalPublished"].map((name) => ({
@@ -76,15 +66,14 @@ describe("<ConceptsTable />", () => {
 
   it(`matches the latest snapshot`, async () => {
     jest
-      .spyOn(require("react-router-dom"), "useLocation")
+      .spyOn(require("react-router"), "useLocation")
       .mockReturnValue({ pathname: "/concepts" });
 
     const props = { columnsByScope };
     const { container, findByText } = render(
       <SearchContextProvider {...searchProps} defaultFilters={{}}>
         <ConceptsTable {...props} />
-      </SearchContextProvider>,
-      renderOpts
+      </SearchContextProvider>
     );
     await findByText(/concepts.props.controlColumn/);
     expect(container).toMatchSnapshot();
@@ -92,15 +81,14 @@ describe("<ConceptsTable />", () => {
 
   it(`default columns`, async () => {
     jest
-      .spyOn(require("react-router-dom"), "useLocation")
+      .spyOn(require("react-router"), "useLocation")
       .mockReturnValue({ pathname: "/concepts" });
 
     const props = { columnsByScope };
     const { findByText, queryByText } = render(
       <SearchContextProvider {...searchProps} defaultFilters={{}}>
         <ConceptsTable {...props} />
-      </SearchContextProvider>,
-      renderOpts
+      </SearchContextProvider>
     );
     await findByText(/concepts.props.controlColumn/);
     expect(queryByText(/globalPublished/)).toBeInTheDocument();
@@ -108,15 +96,14 @@ describe("<ConceptsTable />", () => {
 
   it(`subscope columns`, async () => {
     jest
-      .spyOn(require("react-router-dom"), "useLocation")
+      .spyOn(require("react-router"), "useLocation")
       .mockReturnValue({ pathname: "/concepts/subscoped" });
 
     const props = { columnsByScope };
     const { findByText, queryByText } = render(
       <SearchContextProvider {...searchProps} defaultFilters={{}}>
         <ConceptsTable {...props} />
-      </SearchContextProvider>,
-      renderOpts
+      </SearchContextProvider>
     );
     await findByText(/concepts.props.controlColumn/);
     expect(queryByText(/subscoped/)).toBeInTheDocument();
@@ -124,7 +111,7 @@ describe("<ConceptsTable />", () => {
 
   it(`subscope default fallback columns`, async () => {
     jest
-      .spyOn(require("react-router-dom"), "useLocation")
+      .spyOn(require("react-router"), "useLocation")
       .mockReturnValue({ pathname: "/concepts/subscoped" });
 
     const fallbackColumns = {
@@ -135,8 +122,7 @@ describe("<ConceptsTable />", () => {
     const { findByText, queryByText } = render(
       <SearchContextProvider {...searchProps} defaultFilters={{}}>
         <ConceptsTable {...props} />
-      </SearchContextProvider>,
-      renderOpts
+      </SearchContextProvider>
     );
     await findByText(/concepts.props.controlColumn/);
     expect(queryByText(/globalPublished/)).toBeInTheDocument();
@@ -144,15 +130,14 @@ describe("<ConceptsTable />", () => {
 
   it(`pending columns`, async () => {
     jest
-      .spyOn(require("react-router-dom"), "useLocation")
+      .spyOn(require("react-router"), "useLocation")
       .mockReturnValue({ pathname: "/concepts/pending" });
 
     const props = { columnsByScope };
     const { findByText, queryByText } = render(
       <SearchContextProvider {...searchProps} defaultFilters={{}}>
         <ConceptsTable {...props} />
-      </SearchContextProvider>,
-      renderOpts
+      </SearchContextProvider>
     );
     await findByText(/concepts.props.controlColumn/);
     expect(queryByText(/globalPending/)).toBeInTheDocument();
@@ -160,7 +145,7 @@ describe("<ConceptsTable />", () => {
 
   it(`pending default fallback columns`, async () => {
     jest
-      .spyOn(require("react-router-dom"), "useLocation")
+      .spyOn(require("react-router"), "useLocation")
       .mockReturnValue({ pathname: "/concepts/pending" });
 
     const fallbackColumns = {
@@ -171,8 +156,7 @@ describe("<ConceptsTable />", () => {
     const { findByText, queryByText } = render(
       <SearchContextProvider {...searchProps} defaultFilters={{}}>
         <ConceptsTable {...props} />
-      </SearchContextProvider>,
-      renderOpts
+      </SearchContextProvider>
     );
     await findByText(/concepts.props.controlColumn/);
     expect(queryByText(/globalPublished/)).toBeInTheDocument();
@@ -180,15 +164,14 @@ describe("<ConceptsTable />", () => {
 
   it(`deprecated columns`, async () => {
     jest
-      .spyOn(require("react-router-dom"), "useLocation")
+      .spyOn(require("react-router"), "useLocation")
       .mockReturnValue({ pathname: "/concepts/deprecated" });
 
     const props = { columnsByScope };
     const { findByText, queryByText } = render(
       <SearchContextProvider {...searchProps} defaultFilters={{}}>
         <ConceptsTable {...props} />
-      </SearchContextProvider>,
-      renderOpts
+      </SearchContextProvider>
     );
     await findByText(/concepts.props.controlColumn/);
     expect(queryByText(/globalDeprecated/)).toBeInTheDocument();
@@ -196,7 +179,7 @@ describe("<ConceptsTable />", () => {
 
   it(`deprecated default fallback columns`, async () => {
     jest
-      .spyOn(require("react-router-dom"), "useLocation")
+      .spyOn(require("react-router"), "useLocation")
       .mockReturnValue({ pathname: "/concepts/deprecated" });
 
     const fallbackColumns = {
@@ -207,15 +190,14 @@ describe("<ConceptsTable />", () => {
     const { findByText, queryByText } = render(
       <SearchContextProvider {...searchProps} defaultFilters={{}}>
         <ConceptsTable {...props} />
-      </SearchContextProvider>,
-      renderOpts
+      </SearchContextProvider>
     );
     await findByText(/concepts.props.controlColumn/);
     expect(queryByText(/globalPublished/)).toBeInTheDocument();
   });
 
   it(`menu-subscoped published columns`, async () => {
-    jest.spyOn(require("react-router-dom"), "useLocation").mockReturnValue({
+    jest.spyOn(require("react-router"), "useLocation").mockReturnValue({
       pathname: "/glossarySubscope/menusubscoped/published",
     });
 
@@ -223,15 +205,14 @@ describe("<ConceptsTable />", () => {
     const { findByText, queryByText } = render(
       <SearchContextProvider {...searchProps} defaultFilters={{}}>
         <ConceptsTable {...props} subscope="menusubscoped" />
-      </SearchContextProvider>,
-      renderOpts
+      </SearchContextProvider>
     );
     await findByText(/concepts.props.controlColumn/);
     expect(queryByText(/menuscopedPublished/)).toBeInTheDocument();
   });
 
   it(`menu-subscoped default published fallback columns`, async () => {
-    jest.spyOn(require("react-router-dom"), "useLocation").mockReturnValue({
+    jest.spyOn(require("react-router"), "useLocation").mockReturnValue({
       pathname: "/glossarySubscope/menusubscoped/published",
     });
 
@@ -243,15 +224,14 @@ describe("<ConceptsTable />", () => {
     const { findByText, queryByText } = render(
       <SearchContextProvider {...searchProps} defaultFilters={{}}>
         <ConceptsTable {...props} subscope="menusubscoped" />
-      </SearchContextProvider>,
-      renderOpts
+      </SearchContextProvider>
     );
     await findByText(/concepts.props.controlColumn/);
     expect(queryByText(/globalPublished/)).toBeInTheDocument();
   });
 
   it(`menu-subscoped pending columns`, async () => {
-    jest.spyOn(require("react-router-dom"), "useLocation").mockReturnValue({
+    jest.spyOn(require("react-router"), "useLocation").mockReturnValue({
       pathname: "/glossarySubscope/menusubscoped/pending",
     });
 
@@ -259,15 +239,14 @@ describe("<ConceptsTable />", () => {
     const { findByText, queryByText } = render(
       <SearchContextProvider {...searchProps} defaultFilters={{}}>
         <ConceptsTable {...props} subscope="menusubscoped" />
-      </SearchContextProvider>,
-      renderOpts
+      </SearchContextProvider>
     );
     await findByText(/concepts.props.controlColumn/);
     expect(queryByText(/menuscopedPending/)).toBeInTheDocument();
   });
 
   it(`menu-subscoped pending fallback columns`, async () => {
-    jest.spyOn(require("react-router-dom"), "useLocation").mockReturnValue({
+    jest.spyOn(require("react-router"), "useLocation").mockReturnValue({
       pathname: "/glossarySubscope/menusubscoped/pending",
     });
 
@@ -280,15 +259,14 @@ describe("<ConceptsTable />", () => {
     const { findByText, queryByText } = render(
       <SearchContextProvider {...searchProps} defaultFilters={{}}>
         <ConceptsTable {...props} subscope="menusubscoped" />
-      </SearchContextProvider>,
-      renderOpts
+      </SearchContextProvider>
     );
     await findByText(/concepts.props.controlColumn/);
     expect(queryByText(/globalPending/)).toBeInTheDocument();
   });
 
   it(`menu-subscoped default pending fallback columns`, async () => {
-    jest.spyOn(require("react-router-dom"), "useLocation").mockReturnValue({
+    jest.spyOn(require("react-router"), "useLocation").mockReturnValue({
       pathname: "/glossarySubscope/menusubscoped/deprecated",
     });
 
@@ -300,15 +278,14 @@ describe("<ConceptsTable />", () => {
     const { findByText, queryByText } = render(
       <SearchContextProvider {...searchProps} defaultFilters={{}}>
         <ConceptsTable {...props} subscope="menusubscoped" />
-      </SearchContextProvider>,
-      renderOpts
+      </SearchContextProvider>
     );
     await findByText(/concepts.props.controlColumn/);
     expect(queryByText(/globalPublished/)).toBeInTheDocument();
   });
 
   it(`menu-subscoped deprecated columns`, async () => {
-    jest.spyOn(require("react-router-dom"), "useLocation").mockReturnValue({
+    jest.spyOn(require("react-router"), "useLocation").mockReturnValue({
       pathname: "/glossarySubscope/menusubscoped/deprecated",
     });
 
@@ -316,15 +293,14 @@ describe("<ConceptsTable />", () => {
     const { findByText, queryByText } = render(
       <SearchContextProvider {...searchProps} defaultFilters={{}}>
         <ConceptsTable {...props} subscope="menusubscoped" />
-      </SearchContextProvider>,
-      renderOpts
+      </SearchContextProvider>
     );
     await findByText(/concepts.props.controlColumn/);
     expect(queryByText(/menuscopedDeprecated/)).toBeInTheDocument();
   });
 
   it(`menu-subscoped deprecated fallback columns`, async () => {
-    jest.spyOn(require("react-router-dom"), "useLocation").mockReturnValue({
+    jest.spyOn(require("react-router"), "useLocation").mockReturnValue({
       pathname: "/glossarySubscope/menusubscoped/deprecated",
     });
 
@@ -337,15 +313,14 @@ describe("<ConceptsTable />", () => {
     const { findByText, queryByText } = render(
       <SearchContextProvider {...searchProps} defaultFilters={{}}>
         <ConceptsTable {...props} subscope="menusubscoped" />
-      </SearchContextProvider>,
-      renderOpts
+      </SearchContextProvider>
     );
     await findByText(/concepts.props.controlColumn/);
     expect(queryByText(/globalDeprecated/)).toBeInTheDocument();
   });
 
   it(`menu-subscoped default deprecated fallback columns`, async () => {
-    jest.spyOn(require("react-router-dom"), "useLocation").mockReturnValue({
+    jest.spyOn(require("react-router"), "useLocation").mockReturnValue({
       pathname: "/glossarySubscope/menusubscoped/deprecated",
     });
 
@@ -357,8 +332,7 @@ describe("<ConceptsTable />", () => {
     const { findByText, queryByText } = render(
       <SearchContextProvider {...searchProps} defaultFilters={{}}>
         <ConceptsTable {...props} subscope="menusubscoped" />
-      </SearchContextProvider>,
-      renderOpts
+      </SearchContextProvider>
     );
     await findByText(/concepts.props.controlColumn/);
     expect(queryByText(/globalPublished/)).toBeInTheDocument();

package/src/concepts/components/__tests__/ConceptsUpdateButton.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import SearchContext from "@truedat/core/search/SearchContext";
 import { ConceptsUpdateButton } from "../ConceptsUpdateButton";
@@ -7,8 +6,8 @@ jest.mock("@truedat/core/hooks", () => ({
   useAuthorized: jest.fn(() => true),
 }));
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useLocation: () => ({ pathname: "/concept" }),
 }));
 
@@ -26,18 +25,18 @@ const searchProps = {
 describe("<ConceptsUpdateButton />", () => {
   it("button will appear disabled if template is empty", () => {
     const { getByRole } = render(
-      <SearchContext.Provider value={searchProps}>
+      <SearchContext value={searchProps}>
         <ConceptsUpdateButton />
-      </SearchContext.Provider>
+      </SearchContext>
     );
     expect(getByRole("button", { name: /Update/i })).toBeEnabled();
   });
 
   it("matches the latest snapshot", () => {
     const { container } = render(
-      <SearchContext.Provider value={searchProps}>
+      <SearchContext value={searchProps}>
         <ConceptsUpdateButton />
-      </SearchContext.Provider>
+      </SearchContext>
     );
     expect(container).toMatchSnapshot();
   });

package/src/concepts/components/__tests__/ConceptsUploadButton.spec.js

@@ -1,11 +1,17 @@
-// only admin user
-import React from "react";
-import { render } from "@truedat/test/render";
-import { screen, waitFor } from "@testing-library/react";
+import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-
+import { render, waitForLoad } from "@truedat/test/render";
 import { ConceptsUploadButton } from "../ConceptsUploadButton";
 
+jest.mock("react-dropzone", () => ({
+  useDropzone: jest.fn(() => ({
+    getRootProps: jest.fn(),
+    getInputProps: jest.fn(),
+    isDragActive: false,
+    open: jest.fn(),
+  })),
+}));
+
 jest.mock("@truedat/core/hooks", () => ({
   useAuthorized: jest.fn(() => true),
 }));
@@ -18,28 +24,34 @@ const props = {
 
 describe("<ConceptsUploadButton />", () => {
   it("matches the latest snapshot", async () => {
-    const { getByRole } = render(<ConceptsUploadButton {...props} />);
-    userEvent.click(getByRole("button"));
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<ConceptsUploadButton {...props} />);
+    await waitForLoad(rendered);
+
+    await user.click(rendered.getByRole("button"));
     await waitFor(() =>
-      expect(screen.getByRole("presentation")).toBeInTheDocument()
+      expect(rendered.getByRole("presentation")).toBeInTheDocument()
     );
 
-    expect(screen.getByRole("presentation")).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("autopublish button is displayed if canAutoPublish is true", async () => {
+    const user = userEvent.setup({ delay: null });
     const customProps = {
       ...props,
       canAutoPublish: true,
     };
-    const { getByRole } = render(<ConceptsUploadButton {...customProps} />);
-    userEvent.click(getByRole("button"));
+    const rendered = render(<ConceptsUploadButton {...customProps} />);
+    await waitForLoad(rendered);
+
+    await user.click(rendered.getByRole("button"));
     await waitFor(() =>
-      expect(screen.getByRole("presentation")).toBeInTheDocument()
+      expect(rendered.getByRole("presentation")).toBeInTheDocument()
     );
 
     expect(
-      screen.getByRole("button", { name: /publish/i })
+      rendered.getByRole("button", { name: /publish/i })
     ).toBeInTheDocument();
   });
 });

package/src/concepts/components/__tests__/ConceptsUploadEventsTable.spec.js

@@ -1,6 +1,5 @@
-import React from "react";
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import ConceptsUploadEventsTable from "../ConceptsUploadEventsTable";
 
 const events = [
@@ -83,16 +82,19 @@ jest.mock("../../hooks/useUploadEvents.js", () => {
 });
 
 describe("<ConceptsUploadEventsTable />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(<ConceptsUploadEventsTable />);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<ConceptsUploadEventsTable />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("toggles row horizontal view when row is clicked", () => {
-    const { getAllByRole } = render(<ConceptsUploadEventsTable />);
-    const dataRow = getAllByRole("row")[1];
+  it("toggles row horizontal view when row is clicked", async () => {
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<ConceptsUploadEventsTable />);
+    await waitForLoad(rendered);
+    const dataRow = rendered.getAllByRole("row")[1];
     expect(dataRow).toHaveClass("contracted");
-    userEvent.click(dataRow);
+    await user.click(dataRow);
     expect(dataRow).toHaveClass("expanded");
   });
 });

package/src/concepts/components/__tests__/Events.spec.js

@@ -1,9 +1,8 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { Events } from "../Events";
 
 describe("<Events />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const events = [
       {
         id: 1,
@@ -11,8 +10,8 @@ describe("<Events />", () => {
         resource_id: 2,
         payload: [
           { field: "Ou", value: 5 },
-          { field: "id", value: 6 }
-        ]
+          { field: "id", value: 6 },
+        ],
       },
       {
         id: 2,
@@ -20,12 +19,13 @@ describe("<Events />", () => {
         resource_id: 2,
         payload: [
           { field: "Ou", value: 7 },
-          { field: "id", value: 3 }
-        ]
-      }
+          { field: "id", value: 3 },
+        ],
+      },
     ];
     const props = { events };
-    const wrapper = shallow(<Events {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<Events {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/concepts/components/__tests__/SharedToDomains.spec.js

@@ -1,34 +1,40 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
 import { SharedToDomains } from "../SharedToDomains";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<SharedToDomains />", () => {
-  const sharedTo = [{ id: 1, name: "foo", external_id: "bar" }];
+  const sharedTo = [
+    {
+      id: 1,
+      name: "foo",
+      external_id: "bar",
+      parents: [{ name: "parent1" }, { name: "parent2" }],
+    },
+  ];
   const props = {
     loading: false,
-    sharedTo
+    sharedTo,
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<SharedToDomains {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<SharedToDomains {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders as many items as domain", () => {
-    const wrapper = shallow(<SharedToDomains {...props} />);
-    expect(wrapper.find("DomainTaxonomy")).toHaveLength(1);
+  it("renders domains", async () => {
+    const rendered = render(<SharedToDomains {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.queryByText("parent1")).toBeInTheDocument();
+    expect(rendered.queryByText("parent2")).toBeInTheDocument();
   });
 
-  it("renders Loading when loading is true", () => {
-    const wrapper = shallow(
+  it("renders Loading when loading is true", async () => {
+    const rendered = render(
       <SharedToDomains {...{ ...props, loading: true }} />
     );
-    expect(wrapper.find("Dimmer").prop("active")).toBeTruthy();
-    expect(wrapper.find("Loader")).toHaveLength(1);
+    await waitFor(() => {
+      expect(rendered.container.querySelector(".loader")).toBeInTheDocument();
+    });
   });
 });

package/src/concepts/components/__tests__/SharedToDomainsPopup.spec.js

@@ -1,47 +1,59 @@
-import React from "react";
-import { mount } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import { SharedToDomainsPopup } from "../SharedToDomainsPopup";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-jest.mock("../SharedToForm");
+jest.mock(
+  "../SharedToForm",
+  () =>
+    function SharedToForm() {
+      return <div>SharedToForm</div>;
+    }
+);
 
 describe("<SharedToDomainsPopup />", () => {
   const props = {
-    saving: false
+    saving: false,
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = mount(<SharedToDomainsPopup {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<SharedToDomainsPopup {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("manages open and close popup", () => {
-    const wrapper = mount(<SharedToDomainsPopup {...props} />);
-    wrapper.setProps({ saving: true });
-    expect(wrapper.find("Popup").prop("open")).toBeFalsy();
-    wrapper
-      .find("Popup")
-      .find("Portal")
-      .find("Button")
-      .simulate("click");
-    expect(wrapper.find("Popup").prop("open")).toBeTruthy();
-    wrapper
-      .find("Popup")
-      .find("Portal")
-      .find("Button")
-      .simulate("click");
-    expect(wrapper.find("Popup").prop("open")).toBeFalsy();
-    wrapper
-      .find("Popup")
-      .find("Portal")
-      .find("Button")
-      .simulate("click");
-    expect(wrapper.find("Popup").prop("open")).toBeTruthy();
-    wrapper.setProps({ saving: false });
-    wrapper.update();
-    expect(wrapper.find("Popup").prop("open")).toBeFalsy();
+  it("manages open and close popup", async () => {
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<SharedToDomainsPopup {...props} />);
+    await waitForLoad(rendered);
+
+    const triggerButton = rendered.getByRole("button");
+    // Initially closed
+    expect(rendered.queryByText(/sharedtoform/i)).not.toBeInTheDocument();
+
+    // Open popup
+    await user.click(triggerButton);
+    await waitFor(() =>
+      expect(rendered.getByText(/sharedtoform/i)).toBeInTheDocument()
+    );
+
+    // Close popup by clicking button again
+    await user.click(triggerButton);
+    await waitFor(() =>
+      expect(rendered.queryByText(/sharedtoform/i)).not.toBeInTheDocument()
+    );
+
+    // Open popup again
+    await user.click(triggerButton);
+    await waitFor(() =>
+      expect(rendered.getByText(/sharedtoform/i)).toBeInTheDocument()
+    );
+
+    // Close popup when saving is true
+    rendered.rerender(<SharedToDomainsPopup saving={true} />);
+    rendered.rerender(<SharedToDomainsPopup saving={false} />);
+    await waitFor(() =>
+      expect(rendered.queryByText(/sharedtoform/i)).not.toBeInTheDocument()
+    );
   });
 });