@truedat/cx 7.5.7 → 7.5.10

package/src/configurations/components/__tests__/ConfigurationLoader.spec.js

@@ -1,72 +1,80 @@
-import React from "react";
-import { mount, shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { ConfigurationLoader } from "../ConfigurationLoader";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useParams: () => ({ external_id: 1 })
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useParams: () => ({ external_id: 1 }),
 }));
 
 describe("<ConfigurationLoader />", () => {
-  const configurationLoading = false;
   const fetchConfiguration = jest.fn();
   const clearConfiguration = jest.fn();
 
-  it("matches the latest snapshot", () => {
-    const configurationLoading = true;
+  const renderOpts = {
+    state: {
+      configurations: {
+        loading: false,
+      },
+    },
+    dispatch: jest.fn(),
+  };
+
+  it("matches the latest snapshot", async () => {
     const props = {
       clearConfiguration,
       fetchConfiguration,
-      configurationLoading
+      configurationLoading: true,
     };
-    const wrapper = mount(<ConfigurationLoader {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<ConfigurationLoader {...props} />, renderOpts);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders a loader if configurationLoading is true", () => {
-    const configurationLoading = true;
+  it("renders a loader if configurationLoading is true", async () => {
     const props = {
       clearConfiguration,
       fetchConfiguration,
-      configurationLoading
+      configurationLoading: true,
     };
-    const wrapper = mount(<ConfigurationLoader {...props} />);
-    expect(wrapper.find("Loading").length).toBe(1);
+    const rendered = render(<ConfigurationLoader {...props} />, renderOpts);
+    expect(rendered.container.querySelector(".loader")).toBeInTheDocument();
   });
 
-  it("renders null if configurationLoading is false", () => {
+  it("renders null if configurationLoading is false", async () => {
     const props = {
       clearConfiguration,
       fetchConfiguration,
-      configurationLoading: false
+      configurationLoading: false,
     };
-    const wrapper = shallow(<ConfigurationLoader {...props} />);
-    expect(wrapper.getElement()).toBeNull();
+    const rendered = render(<ConfigurationLoader {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toBeEmptyDOMElement();
   });
 
-  it("calls fetchConfiguration when component mounts but not when it unmounts", () => {
-    const fetchConfiguration = jest.fn();
+  it("calls fetchConfiguration when component mounts but not when it unmounts", async () => {
+    const fetchConfigurationMock = jest.fn();
     const props = {
       clearConfiguration,
-      fetchConfiguration,
-      configurationLoading
+      fetchConfiguration: fetchConfigurationMock,
+      configurationLoading: false,
     };
-    const wrapper = mount(<ConfigurationLoader {...props} />);
-    expect(fetchConfiguration.mock.calls.length).toBe(1);
-    wrapper.unmount();
-    expect(fetchConfiguration.mock.calls.length).toBe(1);
+    const rendered = render(<ConfigurationLoader {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(fetchConfigurationMock).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+    expect(fetchConfigurationMock).toHaveBeenCalledTimes(1);
   });
 
-  it("calls clearConfiguration when component unmounts but not when it mounts", () => {
-    const clearConfiguration = jest.fn();
+  it("calls clearConfiguration when component unmounts but not when it mounts", async () => {
+    const clearConfigurationMock = jest.fn();
     const props = {
-      clearConfiguration,
+      clearConfiguration: clearConfigurationMock,
       fetchConfiguration,
-      configurationLoading
+      configurationLoading: false,
     };
-    const wrapper = mount(<ConfigurationLoader {...props} />);
-    expect(clearConfiguration.mock.calls.length).toBe(0);
-    wrapper.unmount();
-    expect(clearConfiguration.mock.calls.length).toBe(1);
+    const rendered = render(<ConfigurationLoader {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(clearConfigurationMock).not.toHaveBeenCalled();
+    rendered.unmount();
+    expect(clearConfigurationMock).toHaveBeenCalledTimes(1);
   });
 });

package/src/configurations/components/__tests__/ConfigurationTokenLoader.spec.js

@@ -1,9 +1,7 @@
-import React from "react";
-import { mount, shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { ConfigurationTokenLoader } from "../ConfigurationTokenLoader";
 
 describe("<ConfigurationTokenLoader />", () => {
-  const configurationTokenLoading = false;
   const clearDashboardDomains = jest.fn();
   const clearConfigurationToken = jest.fn();
   const signConfiguration = jest.fn();
@@ -11,21 +9,21 @@ describe("<ConfigurationTokenLoader />", () => {
   const dashboardDomains = [1, 2];
   const externalId = "externalId";
 
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = {
       clearDashboardDomains,
       clearConfigurationToken,
-      configurationTokenLoading,
+      configurationTokenLoading: true,
       dashboardId,
       dashboardDomains: [],
       externalId,
-      signConfiguration
+      signConfiguration,
     };
-    const wrapper = mount(<ConfigurationTokenLoader {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<ConfigurationTokenLoader {...props} />);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders a loader if configurationTokenLoading is true", () => {
+  it("renders a loader if configurationTokenLoading is true", async () => {
     const props = {
       clearDashboardDomains,
       clearConfigurationToken,
@@ -33,76 +31,79 @@ describe("<ConfigurationTokenLoader />", () => {
       dashboardId,
       dashboardDomains,
       externalId,
-      signConfiguration
+      signConfiguration,
     };
-    const wrapper = mount(<ConfigurationTokenLoader {...props} />);
-    expect(wrapper.find("Loading").length).toBe(1);
+    const rendered = render(<ConfigurationTokenLoader {...props} />);
+    expect(rendered.container.querySelector(".loader")).toBeInTheDocument();
   });
 
-  it("renders null if configurationTokenLoading is false", () => {
+  it("renders null if configurationTokenLoading is false", async () => {
     const props = {
       clearDashboardDomains,
       clearConfigurationToken,
-      configurationTokenLoading,
+      configurationTokenLoading: false,
       dashboardId,
       dashboardDomains,
       externalId,
-      signConfiguration
+      signConfiguration,
     };
-    const wrapper = shallow(<ConfigurationTokenLoader {...props} />);
-    expect(wrapper.getElement()).toBeNull();
+    const rendered = render(<ConfigurationTokenLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toBeEmptyDOMElement();
   });
 
-  it("calls signConfiguration when component mounts but not when it unmounts", () => {
-    signConfiguration.mockClear();
+  it("calls signConfiguration when component mounts but not when it unmounts", async () => {
+    const signConfigurationMock = jest.fn();
     const props = {
       clearDashboardDomains,
       clearConfigurationToken,
-      configurationTokenLoading,
+      configurationTokenLoading: false,
       dashboardId,
       dashboardDomains,
       externalId,
-      signConfiguration
+      signConfiguration: signConfigurationMock,
     };
-    const wrapper = mount(<ConfigurationTokenLoader {...props} />);
-    expect(signConfiguration.mock.calls.length).toBe(1);
-    wrapper.unmount();
-    expect(signConfiguration.mock.calls.length).toBe(1);
+    const rendered = render(<ConfigurationTokenLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(signConfigurationMock).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+    expect(signConfigurationMock).toHaveBeenCalledTimes(1);
   });
 
-  it("does not call signConfiguration when component mounts and dashboardDomains are empty", () => {
-    signConfiguration.mockClear();
+  it("does not call signConfiguration when component mounts and dashboardDomains are empty", async () => {
+    const signConfigurationMock = jest.fn();
     const props = {
       clearDashboardDomains,
       clearConfigurationToken,
-      configurationTokenLoading,
+      configurationTokenLoading: false,
       dashboardId,
       dashboardDomains: [],
       externalId,
-      signConfiguration
+      signConfiguration: signConfigurationMock,
     };
-    mount(<ConfigurationTokenLoader {...props} />);
-    expect(signConfiguration.mock.calls.length).toBe(0);
+    const rendered = render(<ConfigurationTokenLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(signConfigurationMock).not.toHaveBeenCalled();
   });
 
-  it("calls clearConfigurationToken and clearDashboardDomains when component unmounts but not when it mounts", () => {
-    clearDashboardDomains.mockClear();
-    clearConfigurationToken.mockClear();
-
+  it("calls clearConfigurationToken and clearDashboardDomains when component unmounts but not when it mounts", async () => {
+    const clearDashboardDomainsMock = jest.fn();
+    const clearConfigurationTokenMock = jest.fn();
     const props = {
-      clearDashboardDomains,
-      clearConfigurationToken,
-      configurationTokenLoading,
+      clearDashboardDomains: clearDashboardDomainsMock,
+      clearConfigurationToken: clearConfigurationTokenMock,
+      configurationTokenLoading: false,
       dashboardId,
       dashboardDomains,
       externalId,
-      signConfiguration
+      signConfiguration,
     };
-    const wrapper = mount(<ConfigurationTokenLoader {...props} />);
-    expect(clearDashboardDomains.mock.calls.length).toBe(0);
-    expect(clearConfigurationToken.mock.calls.length).toBe(0);
-    wrapper.unmount();
-    expect(clearDashboardDomains.mock.calls.length).toBe(1);
-    expect(clearConfigurationToken.mock.calls.length).toBe(1);
+    const rendered = render(<ConfigurationTokenLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(clearDashboardDomainsMock).not.toHaveBeenCalled();
+    expect(clearConfigurationTokenMock).not.toHaveBeenCalled();
+    rendered.unmount();
+    expect(clearDashboardDomainsMock).toHaveBeenCalledTimes(1);
+    expect(clearConfigurationTokenMock).toHaveBeenCalledTimes(1);
   });
 });

package/src/configurations/components/__tests__/Configurations.spec.js

@@ -1,38 +1,36 @@
-import React from "react";
-import { intl } from "@truedat/test/intl-stub";
-import { shallow } from "enzyme";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { Configurations } from "../Configurations";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<Configurations />", () => {
   const defaultProps = {
     configurationsLoading: false,
-    configurations: [{ id: 1, external_id: "eid1" }]
+    configurations: [{ id: 1, external_id: "eid1", type: "test" }],
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<Configurations {...defaultProps} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<Configurations {...defaultProps} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders no results when configurations search result is empty", () => {
-    const wrapper = shallow(<Configurations {...defaultProps} />);
-    const inputSearch = wrapper.find("Input");
-    inputSearch.simulate("change", {}, { value: "bank" });
-    expect(
-      wrapper.findWhere(n => n.prop("configurations")).props().configurations
-    ).toEqual([]);
+  it("renders no results when configurations search result is empty", async () => {
+    const rendered = render(<Configurations {...defaultProps} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    const searchInput = rendered.getByPlaceholderText(/search/i);
+    await user.type(searchInput, "bank");
+
+    expect(rendered.queryByText(/eid1/i)).not.toBeInTheDocument();
   });
 
-  it("renders null if configurationsLoading is false", () => {
+  it("renders null if configurationsLoading is true", async () => {
     const props = {
       configurations: [],
-      configurationsLoading: true
+      configurationsLoading: true,
     };
-    const wrapper = shallow(<Configurations {...props} />);
-    expect(wrapper.getElement()).toBeNull();
+    const rendered = render(<Configurations {...props} />);
+    expect(rendered.container).toBeEmptyDOMElement();
   });
 });

package/src/configurations/components/__tests__/ConfigurationsLoader.spec.js

@@ -1,67 +1,66 @@
-import React from "react";
-import { mount, shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { ConfigurationsLoader } from "../ConfigurationsLoader";
 
 describe("<ConfigurationsLoader />", () => {
-  const configurationsLoading = false;
   const fetchConfigurations = jest.fn();
   const clearConfigurations = jest.fn();
 
-  it("matches the latest snapshot", () => {
-    const configurationsLoading = true;
+  it("matches the latest snapshot", async () => {
     const props = {
       clearConfigurations,
       fetchConfigurations,
-      configurationsLoading
+      configurationsLoading: true,
     };
-    const wrapper = mount(<ConfigurationsLoader {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<ConfigurationsLoader {...props} />);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders a loader if configurationsLoading is true", () => {
-    const configurationsLoading = true;
+  it("renders a loader if configurationsLoading is true", async () => {
     const props = {
       clearConfigurations,
       fetchConfigurations,
-      configurationsLoading
+      configurationsLoading: true,
     };
-    const wrapper = mount(<ConfigurationsLoader {...props} />);
-    expect(wrapper.find("Loading").length).toBe(1);
+    const rendered = render(<ConfigurationsLoader {...props} />);
+    expect(rendered.container.querySelector(".loader")).toBeInTheDocument();
   });
 
-  it("renders null if configurationsLoading is false", () => {
+  it("renders null if configurationsLoading is false", async () => {
     const props = {
       clearConfigurations,
       fetchConfigurations,
-      configurationsLoading: false
+      configurationsLoading: false,
     };
-    const wrapper = shallow(<ConfigurationsLoader {...props} />);
-    expect(wrapper.getElement()).toBeNull();
+    const rendered = render(<ConfigurationsLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toBeEmptyDOMElement();
   });
 
-  it("calls fetchConfigurations when component mounts but not when it unmounts", () => {
-    const fetchConfigurations = jest.fn();
+  it("calls fetchConfigurations when component mounts but not when it unmounts", async () => {
+    const fetchConfigurationsMock = jest.fn();
     const props = {
       clearConfigurations,
-      fetchConfigurations,
-      configurationsLoading
+      fetchConfigurations: fetchConfigurationsMock,
+      configurationsLoading: false,
     };
-    const wrapper = mount(<ConfigurationsLoader {...props} />);
-    expect(fetchConfigurations.mock.calls.length).toBe(1);
-    wrapper.unmount();
-    expect(fetchConfigurations.mock.calls.length).toBe(1);
+    const rendered = render(<ConfigurationsLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(fetchConfigurationsMock).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+    expect(fetchConfigurationsMock).toHaveBeenCalledTimes(1);
   });
 
-  it("calls clearConfigurations when component unmounts but not when it mounts", () => {
-    const clearConfigurations = jest.fn();
+  it("calls clearConfigurations when component unmounts but not when it mounts", async () => {
+    const clearConfigurationsMock = jest.fn();
     const props = {
-      clearConfigurations,
+      clearConfigurations: clearConfigurationsMock,
       fetchConfigurations,
-      configurationsLoading
+      configurationsLoading: false,
     };
-    const wrapper = mount(<ConfigurationsLoader {...props} />);
-    expect(clearConfigurations.mock.calls.length).toBe(0);
-    wrapper.unmount();
-    expect(clearConfigurations.mock.calls.length).toBe(1);
+    const rendered = render(<ConfigurationsLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(clearConfigurationsMock).not.toHaveBeenCalled();
+    rendered.unmount();
+    expect(clearConfigurationsMock).toHaveBeenCalledTimes(1);
   });
 });

package/src/configurations/components/__tests__/EditConfiguration.spec.js

@@ -1,5 +1,4 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import EditConfiguration from "../EditConfiguration";
 
 const renderOpts = {
@@ -14,8 +13,9 @@ const renderOpts = {
 };
 
 describe("<EditConfiguration />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(<EditConfiguration />, renderOpts);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<EditConfiguration />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/configurations/components/__tests__/NewConfiguration.spec.js

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

package/src/configurations/components/__tests__/__snapshots__/Configuration.spec.js.snap

@@ -1,68 +1,133 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Configuration /> matches the latest snapshot 1`] = `
-<Fragment>
-  <ConfigurationBreadcrumbs
-    text="Micro1"
-  />
-  <Segment>
-    <Grid>
-      <GridColumn
-        width={8}
+<div>
+  <div
+    class="ui breadcrumb"
+  >
+    <a
+      class="section"
+      data-discover="true"
+      href="/configurations"
+    >
+      navigation.admin.configurations
+    </a>
+    <i
+      aria-hidden="true"
+      class="right angle icon divider"
+    />
+    <div
+      class="active section"
+    >
+      Micro1
+    </div>
+  </div>
+  <div
+    class="ui segment"
+  >
+    <div
+      class="ui grid"
+    >
+      <div
+        class="eight wide column"
       >
-        <Header
-          as="h2"
+        <h2
+          class="ui header"
         >
-          <Icon
-            as="i"
-            circular={true}
-            name="clipboard check"
+          <i
+            aria-hidden="true"
+            class="clipboard check circular icon"
           />
-          <HeaderContent>
+          <div
+            class="content"
+          >
             Micro1
-            <HeaderSubheader>
+            <div
+              class="sub header"
+            >
               micro
-            </HeaderSubheader>
-          </HeaderContent>
-        </Header>
-      </GridColumn>
-      <GridColumn
-        textAlign="right"
-        width={8}
+            </div>
+          </div>
+        </h2>
+      </div>
+      <div
+        class="right aligned eight wide column"
       >
-        <Connect(ConfigurationActions) />
-      </GridColumn>
-      <GridColumn
-        width={8}
+        <div
+          aria-expanded="false"
+          class="ui floating dropdown button icon group-actions"
+          role="listbox"
+          tabindex="0"
+        >
+          <i
+            aria-hidden="true"
+            class="ellipsis vertical icon"
+          />
+          <div
+            class="left menu transition"
+          >
+            <a
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              data-discover="true"
+              href="/configurations/Micro1/edit"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="edit icon"
+              />
+              edit
+            </a>
+            <button
+              class="ui button"
+            >
+              <i
+                aria-hidden="true"
+                class="red trash alternate outline icon"
+              />
+              configurations.actions.remove
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="eight wide column"
       >
-        <lazy
-          template={
-            {
-              "content": [
-                {
-                  "fields": [
-                    {
-                      "cardinality": "1",
-                      "disabled": true,
-                      "label": "a",
-                      "name": "a",
-                      "type": "string",
-                      "widget": "string",
-                    },
-                  ],
-                  "is_secret": false,
-                  "name": "New Group 1",
-                },
-              ],
-              "id": 36,
-              "label": "app-admin",
-              "name": "micro",
-              "scope": "ca",
-            }
-          }
-        />
-      </GridColumn>
-    </Grid>
-  </Segment>
-</Fragment>
+        <div
+          class="ui horizontal divider"
+        >
+          <h3>
+            New Group 1
+          </h3>
+        </div>
+        <div
+          class="ui big very relaxed list"
+          role="list"
+        >
+          <div
+            class="item"
+            role="listitem"
+          >
+            <div
+              class="header dynamic-field-header"
+            >
+              a
+            </div>
+            <div
+              class="description"
+            >
+              <i
+                aria-hidden="true"
+                class="grey minus icon"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;