@truedat/core 7.5.9 → 7.5.11

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

@@ -1,38 +1,37 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { RouteListener } from "../RouteListener";
+import { render } from "@truedat/test/render";
+import RouteListener from "../RouteListener";
+import * as routines from "../../routines";
+
+jest.mock("../../routines", () => ({
+  dismissAlert: jest.fn(() => ({ type: "DISMISS_ALERT" })),
+}));
 
 describe("<RouteListener />", () => {
-  const props = {
-    message: {},
-    location: { pathname: "/test" },
-  };
+  const mockDispatch = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<RouteListener {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<RouteListener />);
+    expect(container).toMatchSnapshot();
   });
 
   it("when changing location with message will call dismissAlert", () => {
-    const dismissAlert = jest.fn();
-    const wrapper = shallow(
-      <RouteListener dismissAlert={dismissAlert} {...props} />
-    );
-    wrapper.setProps({
-      message: { not: "empty" },
-      location: { pathname: "/different" },
+    // Initial render with a message
+    const { rerender } = render(<RouteListener />, {
+      routes: ["/initial"],
+      dispatch: mockDispatch,
     });
-    expect(dismissAlert.mock.calls.length).toBe(1);
-  });
 
-  it("when changing location without message will not call dismissAlert", () => {
-    const dismissAlert = jest.fn();
-    const wrapper = shallow(
-      <RouteListener dismissAlert={dismissAlert} {...props} />
-    );
-    wrapper.setProps({
-      location: { pathname: "/different" },
+    // Change location
+    rerender(<RouteListener />, {
+      routes: ["/initial", "/different"],
+      routeIndex: 1,
+      dispatch: mockDispatch,
     });
-    expect(dismissAlert.mock.calls.length).toBe(0);
+
+    expect(mockDispatch).toHaveBeenCalledWith(routines.dismissAlert());
   });
 });

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import SafeLink from "../SafeLink";
 

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import SearchDateFilter from "@truedat/core/search/SearchDateFilter";
 import SearchContextWrapper from "@truedat/core/components/common/SearchContextWrapper";

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

@@ -1,14 +1,12 @@
 /* eslint-disable react/prop-types */
-import React from "react";
-import { render } from "@truedat/test/render";
-import { within, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
 import { Icon, Dropdown, Segment } from "semantic-ui-react";
+import userEvent from "@testing-library/user-event";
+import { within, waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 
 import SearchFilterDropdown from "../SearchFilterDropdown";
 
-const DummyLoader = () => <div></div>;
+const DummyLoader = () => <div />;
 const DummyFilerItem = ({ active, toggleFilterValue, option }) => (
   <Dropdown.Item onClick={() => toggleFilterValue(option)} active={active}>
     <Segment vertical>
@@ -51,44 +49,50 @@ const props = {
 };
 
 describe("<SearchFilterDropDown/>", () => {
-  it("matches the latest snapshot unfolded", () => {
-    const { container } = render(<SearchFilterDropdown {...props} />);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot unfolded", async () => {
+    const rendered = render(<SearchFilterDropdown {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot folded", () => {
+  it("matches the latest snapshot folded", async () => {
     const customProps = {
       ...props,
       open: false,
     };
-    const { container } = render(<SearchFilterDropdown {...customProps} />);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<SearchFilterDropdown {...customProps} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("check option check it correctly", () => {
-    const { getByRole, getAllByRole } = render(
-      <SearchFilterDropdown {...props} />
-    );
+  it("check option check it correctly", async () => {
+    const rendered = render(<SearchFilterDropdown {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
 
     expect(props.toggleFilterValue).toBeCalledTimes(0);
-    userEvent.click(getByRole("option", { name: "baz_option" }));
+    await user.click(rendered.getByRole("option", { name: /baz_option/i }));
     expect(props.toggleFilterValue).toBeCalledWith({
       value: 3,
       filter: "foo_filter",
     });
 
     expect(
-      within(getAllByRole("option")[0]).queryByText("baz_option")
+      within(rendered.getAllByRole("option")[0]).queryByText(/baz_option/i)
     ).not.toBeNull();
   });
 
-  it("type in filter input dispatch searchCallback with correct query", () => {
+  it("type in filter input dispatch searchCallback with correct query", async () => {
     const searchText = "a";
+    const user = userEvent.setup({ delay: null });
+
+    const rendered = render(<SearchFilterDropdown {...props} />);
+    await waitForLoad(rendered);
 
-    const { getByRole } = render(<SearchFilterDropdown {...props} />);
-    const input = getByRole("textbox");
+    const input = rendered.getByRole("textbox");
 
-    userEvent.type(input, searchText);
+    await user.type(input, searchText);
 
     expect(props.searchCallback).toBeCalledWith({
       query: `${props.query}${searchText}`,
@@ -97,8 +101,12 @@ describe("<SearchFilterDropDown/>", () => {
   });
 
   it("remove filter dispatches removeFilter", async () => {
-    const { container } = render(<SearchFilterDropdown {...props} />);
-    userEvent.click(container.querySelector('[class="delete icon"]'));
+    const rendered = render(<SearchFilterDropdown {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(rendered.container.querySelector('[class="delete icon"]'));
     await waitFor(() => {
       expect(props.removeFilter).toBeCalledTimes(1);
     });

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

@@ -1,5 +1,4 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { SearchInput } from "../SearchInput";
 
 describe("<SearchInput />", () => {
@@ -7,8 +6,9 @@ describe("<SearchInput />", () => {
   const placeholder = "Search...";
   const props = { onChange, placeholder };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<SearchInput {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<SearchInput {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { SearchMenu } from "../SearchMenu";
 

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

@@ -1,20 +1,19 @@
 /* eslint-disable react/prop-types */
-import React from "react";
-import { render } from "@truedat/test/render";
-
-import userEvent from "@testing-library/user-event";
 import { Icon, Dropdown, Segment } from "semantic-ui-react";
+import userEvent from "@testing-library/user-event";
+
+import { render } from "@truedat/test/render";
 
 import { SelectedFilters } from "../SelectedFilters";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useLocation: () => ({
     pathname: "/domains/123/structures",
   }),
 }));
 
-const DummyLoader = () => <div></div>;
+const DummyLoader = () => <div />;
 const DummyFilerItem = ({ active, toggleFilterValue, option }) => (
   <Dropdown.Item onClick={() => toggleFilterValue(option)} active={active}>
     <Segment vertical>
@@ -55,49 +54,51 @@ describe("<SelectedFilters/>", () => {
     },
   };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(<SelectedFilters {...props} />);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<SelectedFilters {...props} />);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("dispatches resetFilters", () => {
-    const { getByText } = render(<SelectedFilters {...props} />, renderOptions);
+  it("dispatches resetFilters", async () => {
+    const rendered = render(<SelectedFilters {...props} />, renderOptions);
+    const user = userEvent.setup({ delay: null });
 
     expect(props.resetFilters).toBeCalledTimes(0);
-    userEvent.click(getByText(messages["search.clear_filters"]));
+    await user.click(rendered.getByText(/clean filters/i));
     expect(props.resetFilters).toBeCalledTimes(1);
   });
 
-  it("does not render Save filters option if saveFilters is undefined", () => {
-    const { queryByText } = render(
-      <SelectedFilters {...props} />,
-      renderOptions
-    );
-    expect(queryByText(messages["search.save_filters"])).toBeNull();
+  it("does not render Save filters option if saveFilters is undefined", async () => {
+    const rendered = render(<SelectedFilters {...props} />, renderOptions);
+    expect(rendered.queryByText(/save filters/i)).toBeNull();
   });
 
-  it("renders Save filters option if saveFilters is defined", () => {
+  it("renders Save filters option if saveFilters is defined", async () => {
     const customProps = { ...props, saveFilters: jest.fn() };
-    const { getByText } = render(
+    const rendered = render(
       <SelectedFilters {...customProps} />,
       renderOptions
     );
-    expect(getByText(messages["search.save_filters"])).toBeInTheDocument();
+    expect(rendered.getByText(/save filters/i)).toBeInTheDocument();
   });
 
-  it("does not render userFilters if they are empty", () => {
+  it("does not render userFilters if they are empty", async () => {
     const customProps = { ...props, userFilters: [] };
-    const { container } = render(<SelectedFilters {...customProps} />);
-    expect(container.getElementsByClassName("userFilter")).toHaveLength(0);
+    const rendered = render(<SelectedFilters {...customProps} />);
+    expect(
+      rendered.container.getElementsByClassName("userFilter")
+    ).toHaveLength(0);
   });
 
-  it("renders userFilters if they are defined", () => {
+  it("renders userFilters if they are defined", async () => {
     const customProps = { ...props, userFilters: [{ country: ["a"] }] };
-    const { container } = render(<SelectedFilters {...customProps} />);
-    expect(container.getElementsByClassName("userFilter")).toHaveLength(1);
+    const rendered = render(<SelectedFilters {...customProps} />);
+    expect(
+      rendered.container.getElementsByClassName("userFilter")
+    ).toHaveLength(1);
   });
 
-  it("renders FilterMultilevelDropdown if filter is of type domain", () => {
+  it("renders FilterMultilevelDropdown if filter is of type domain", async () => {
     const customProps = {
       ...props,
       selectedFilters: ["taxonomy"],
@@ -105,13 +106,13 @@ describe("<SelectedFilters/>", () => {
       filterTypes: { taxonomy: "domain" },
       selectedFilterValues: [{ id: 1, name: "foo", level: 0 }],
     };
-    const { container } = render(<SelectedFilters {...customProps} />);
+    const rendered = render(<SelectedFilters {...customProps} />);
     expect(
-      container.querySelector('[name="filterMultilevelDropdown"]')
+      rendered.container.querySelector('[name="filterMultilevelDropdown"]')
     ).not.toBeNull();
   });
 
-  it("renders HierarchyFilterDropdown if filter is of type hierarchy", () => {
+  it("renders HierarchyFilterDropdown if filter is of type hierarchy", async () => {
     const customProps = {
       ...props,
       selectedFilters: ["hierarchy_field"],
@@ -119,13 +120,13 @@ describe("<SelectedFilters/>", () => {
       filterTypes: { hierarchy_field: "hierarchy" },
       selectedFilterValues: [],
     };
-    const { container } = render(<SelectedFilters {...customProps} />);
+    const rendered = render(<SelectedFilters {...customProps} />);
     expect(
-      container.querySelector('[name="hierarchyFilterDropdown"]')
+      rendered.container.querySelector('[name="hierarchyFilterDropdown"]')
     ).not.toBeNull();
   });
 
-  it("renders SearchFilterDropdown if filter is of type search", () => {
+  it("renders SearchFilterDropdown if filter is of type search", async () => {
     const customProps = {
       ...props,
       selectedFilters: ["search_filter"],
@@ -145,9 +146,9 @@ describe("<SelectedFilters/>", () => {
       },
       searchFilterDispacher: jest.fn(),
     };
-    const { container } = render(<SelectedFilters {...customProps} />);
+    const rendered = render(<SelectedFilters {...customProps} />);
     expect(
-      container.querySelector('[name="searchFilterDropdown"]')
+      rendered.container.querySelector('[name="searchFilterDropdown"]')
     ).not.toBeNull();
   });
 });
@@ -211,17 +212,19 @@ describe("<SelectedFilters/> taxonomy screens", () => {
     searchFilterDispacher: jest.fn(),
   };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(<SelectedFilters {...props} />);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<SelectedFilters {...props} />);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("render only Show filters", () => {
-    const { queryByText } = render(<SelectedFilters {...props} />);
-    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(<SelectedFilters {...props} />);
+    expect(rendered.queryByText("Hide Domain Filter")).toBeNull();
+    expect(rendered.queryByText("Show Status Filter")).toBeInTheDocument();
+    expect(rendered.queryByText("Hide Multiple Domain Filter")).toBeNull();
+    expect(rendered.queryByText("Hide Other Domain Filter")).toBeNull();
+    expect(
+      rendered.queryByText("Show Status and Domain Filter")
+    ).toBeInTheDocument();
   });
 });

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

@@ -1,7 +1,5 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import { waitForElementToBeRemoved } from "@testing-library/react";
-import { CATALOG_VIEW_CONFIGS_QUERY } from "@truedat/dd/api/queries";
+import { render, waitForLoad } from "@truedat/test/render";
+import { CATALOG_VIEW_CONFIGS_QUERY } from "@truedat/core/api/queries";
 import SideMenu from "../SideMenu";
 
 jest.mock("@truedat/core/hooks", () => ({
@@ -39,14 +37,13 @@ const renderOpts = {
 
 describe("<SideMenu />", () => {
   it("matches the latest snapshot", async () => {
-    const { container } = render(
+    const rendered = render(
       <SideMenu>
         <p>Hello</p>
       </SideMenu>,
       renderOpts
     );
-    const loader = container.querySelector(".loader");
-    await waitForElementToBeRemoved(loader);
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,9 +1,9 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import { within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { StructureFilterItem } from "../StructureFilterItem";
 
+const user = userEvent.setup({ delay: null });
+
 const props = {
   active: true,
   filter: "foo",
@@ -12,15 +12,17 @@ const props = {
 };
 
 describe("<StructureFilterItem/>", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(<StructureFilterItem {...props} />);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<StructureFilterItem {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("dispatches toggleFilterValue on click", () => {
-    const { container } = render(<StructureFilterItem {...props} />);
-    expect(props.toggleFilterValue.mock.calls.length).toBe(0);
-    userEvent.click(within(container).getByText(props.option.name));
-    expect(props.toggleFilterValue.mock.calls.length).toBe(1);
+  it("dispatches toggleFilterValue on click", async () => {
+    const rendered = render(<StructureFilterItem {...props} />);
+    await waitForLoad(rendered);
+    expect(props.toggleFilterValue).toHaveBeenCalledTimes(0);
+    await user.click(rendered.getByText(/bar/));
+    expect(props.toggleFilterValue).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import Submenu from "../Submenu";
 

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

@@ -0,0 +1,40 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import { SystemsLoader } from "../SystemsLoader";
+
+describe("<SystemsLoader />", () => {
+  it("matches the latest snapshot", async () => {
+    const fetchSystems = jest.fn();
+    const systemsLoading = true;
+    const props = { fetchSystems, systemsLoading, clearSystems: jest.fn() };
+    const rendered = render(<SystemsLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders null if systemsLoading is false", async () => {
+    const fetchSystems = jest.fn();
+    const systemsLoading = false;
+    const props = { fetchSystems, systemsLoading, clearSystems: jest.fn() };
+    const rendered = render(<SystemsLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container.firstChild).toBeNull();
+  });
+
+  it("calls fetchSystems when component mounts, clearSystems when component unmounts", async () => {
+    const fetchSystems = jest.fn();
+    const clearSystems = jest.fn();
+    const systemsLoading = false;
+    const props = {
+      fetchSystems,
+      systemsLoading,
+      clearSystems,
+    };
+    const rendered = render(<SystemsLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(clearSystems).not.toHaveBeenCalled();
+    expect(fetchSystems).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+    expect(clearSystems).toHaveBeenCalledTimes(1);
+    expect(fetchSystems).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import TaxonomyMenu from "../TaxonomyMenu";
 

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

@@ -1,7 +1,5 @@
-import React from "react";
-import { waitForElementToBeRemoved } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import {
   errorTemplateMock,
   multipleTemplatesMock,
@@ -19,24 +17,21 @@ describe("<TemplateSelector />", () => {
 
   it("matches the latest snapshot (loading)", () => {
     const renderOpts = { mocks: [multipleTemplatesMock(variables)] };
-    const { container, queryByText } = render(
-      <TemplateSelector {...props} />,
-      renderOpts
-    );
-    expect(queryByText(/loading/i)).toBeInTheDocument();
-    expect(container).toMatchSnapshot();
+    const rendered = render(<TemplateSelector {...props} />, renderOpts);
+    expect(rendered.getByText(/loading/i)).toBeInTheDocument();
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot", async () => {
     const renderOpts = { mocks: [multipleTemplatesMock(variables)] };
     const onLoad = jest.fn();
-    const { container, queryByText } = render(
+    const rendered = render(
       <TemplateSelector {...props} onLoad={onLoad} />,
       renderOpts
     );
-    await waitForElementToBeRemoved(() => queryByText(/loading/i));
-    expect(queryByText("template1")).toBeInTheDocument();
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.getByText(/template1/i)).toBeInTheDocument();
+    expect(rendered.container).toMatchSnapshot();
     expect(onLoad.mock.calls.length).toBe(1);
   });
 
@@ -47,41 +42,44 @@ describe("<TemplateSelector />", () => {
       ...props,
       label: "foo_label",
     };
-    const { queryByText } = render(
+    const rendered = render(
       <TemplateSelector {...newProps} onLoad={onLoad} />,
       renderOpts
     );
-    await waitForElementToBeRemoved(() => queryByText(/loading/i));
-    expect(queryByText("template1")).toBeInTheDocument();
-    expect(queryByText("foo_label")).toBeInTheDocument();
+    await waitForLoad(rendered);
+    expect(rendered.getByText(/template1/i)).toBeInTheDocument();
+    expect(rendered.getByText(/foo_label/i)).toBeInTheDocument();
   });
 
   it("matches the latest snapshot when required", async () => {
     const renderOpts = { mocks: [multipleTemplatesMock(variables)] };
-    const { container, queryByText } = render(
+    const rendered = render(
       <TemplateSelector {...props} required />,
       renderOpts
     );
-    await waitForElementToBeRemoved(() => queryByText(/loading/i));
-    expect(queryByText("template1")).toBeInTheDocument();
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.getByText(/template1/i)).toBeInTheDocument();
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("is empty if templates query returns an error", async () => {
     const renderOpts = { mocks: [errorTemplateMock(variables)] };
-    const { queryByText } = render(
+    const rendered = render(
       <TemplateSelector {...props} required />,
       renderOpts
     );
-    await waitForElementToBeRemoved(() => queryByText(/loading/i));
-    expect(queryByText("template1")).not.toBeInTheDocument();
+    await waitForLoad(rendered);
+    expect(rendered.queryByText(/template1/i)).not.toBeInTheDocument();
   });
 
   it("calls onChange when template is selected", async () => {
     const renderOpts = { mocks: [multipleTemplatesMock(variables)] };
-    const { findByRole } = render(<TemplateSelector {...props} />, renderOpts);
+    const rendered = render(<TemplateSelector {...props} />, renderOpts);
 
-    userEvent.click(await findByRole("option", { name: "template1" }));
+    const user = userEvent.setup({ delay: null });
+    await user.click(
+      await rendered.findByRole("option", { name: /template1/i })
+    );
     expect(onChange.mock.calls[0][1]).toMatchObject({
       template: { id: "1", label: "template1" },
     });
@@ -89,8 +87,8 @@ describe("<TemplateSelector />", () => {
 
   it("is empty when query returns a single template", async () => {
     const renderOpts = { mocks: [singleTemplateMock(variables)] };
-    const { queryByText } = render(<TemplateSelector {...props} />, renderOpts);
-    await waitForElementToBeRemoved(() => queryByText(/loading/i));
-    expect(queryByText("template1")).not.toBeInTheDocument();
+    const rendered = render(<TemplateSelector {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.queryByText(/template1/i)).not.toBeInTheDocument();
   });
 });

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

@@ -0,0 +1,30 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import { TemplatesLoader } from "@truedat/core/components/TemplatesLoader";
+
+describe("<TemplatesLoader />", () => {
+  it("calls fetchTemplates when component mounts but not when it unmounts", async () => {
+    const props = {
+      clearTemplates: jest.fn(),
+      fetchTemplates: jest.fn(),
+      scope: "foo",
+    };
+    const rendered = render(<TemplatesLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(props.fetchTemplates).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+    expect(props.fetchTemplates).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls clearTemplates when component unmounts but not when it mounts", async () => {
+    const props = {
+      clearTemplates: jest.fn(),
+      fetchTemplates: jest.fn(),
+      scope: "foo",
+    };
+    const rendered = render(<TemplatesLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(props.clearTemplates).toHaveBeenCalledTimes(0);
+    rendered.unmount();
+    expect(props.clearTemplates).toHaveBeenCalledTimes(1);
+  });
+});