@truedat/cx 7.5.7 → 7.5.10

package/src/jobs/components/__tests__/Job.spec.js

@@ -1,10 +1,6 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import { Job, EventFeed } from "../Job";
 
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 const events = [
   { inserted_at: "2020-01-01T00:01:02.000Z", type: "STARTED" },
   {
@@ -15,10 +11,11 @@ const events = [
 ];
 
 describe("<EventFeed />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = { events };
-    const wrapper = shallow(<EventFeed {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<EventFeed {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });
 
@@ -26,9 +23,10 @@ describe("<Job />", () => {
   const source = { external_id: "Some source" };
   const job = { _embedded: { events, source }, type: "catalog" };
 
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = { job };
-    const wrapper = shallow(<Job {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<Job {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/jobs/components/__tests__/JobBreadcrumbs.spec.js

@@ -1,13 +1,13 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { JobBreadcrumbs } from "../JobBreadcrumbs";
 
 describe("<JobBreadcrumbs />", () => {
   const job = { external_id: "foo" };
 
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = { job };
-    const wrapper = shallow(<JobBreadcrumbs {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<JobBreadcrumbs {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/jobs/components/__tests__/JobLoader.spec.js

@@ -1,22 +1,22 @@
-import React from "react";
-import { mount } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { JobLoader } from "../JobLoader";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useParams: () => ({ id: 1 })
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useParams: () => ({ id: 1 }),
 }));
 
 describe("<JobLoader />", () => {
-  it("calls fetchJob when component mounts, clearJob when component unmounts", () => {
+  it("calls fetchJob when component mounts, clearJob when component unmounts", async () => {
     const clearJob = jest.fn();
     const fetchJob = jest.fn();
     const props = { fetchJob, clearJob };
-    const wrapper = mount(<JobLoader {...props} />);
-    expect(clearJob.mock.calls.length).toBe(0);
-    expect(fetchJob.mock.calls.length).toBe(1);
-    wrapper.unmount();
-    expect(clearJob.mock.calls.length).toBe(1);
-    expect(fetchJob.mock.calls.length).toBe(1);
+    const rendered = render(<JobLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(clearJob).not.toHaveBeenCalled();
+    expect(fetchJob).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+    expect(clearJob).toHaveBeenCalledTimes(1);
+    expect(fetchJob).toHaveBeenCalledTimes(1);
   });
 });

package/src/jobs/components/__tests__/JobRow.spec.js

@@ -1,16 +1,21 @@
-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 { jobColumnsSelector } from "../../selectors";
 import JobRow from "../JobRow";
 
+const mockNavigate = jest.fn();
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useNavigate: () => mockNavigate,
+}));
+
 const columns = jobColumnsSelector({});
 const job = {
   source: {
     externalId: "source external_id_2",
     type: "source_type_2",
   },
-  source_id: 123,
+  source_id: "123",
   status: "init",
   message: "Job started",
   end_date: "2020-01-21 16:31",
@@ -18,19 +23,10 @@ const job = {
 };
 const renderOpts = {};
 
-const mockHistory = {
-  push: jest.fn(),
-};
-
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useHistory: () => mockHistory,
-}));
-
 describe("<JobRow />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = { columns, job };
-    const { container } = render(
+    const rendered = render(
       <table>
         <tbody>
           <JobRow {...props} />
@@ -38,12 +34,13 @@ describe("<JobRow />", () => {
       </table>,
       renderOpts
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("navigates to the job route when row is clicked", () => {
+  it("navigates to the job route when row is clicked", async () => {
     const props = { columns, job };
-    const { getByText } = render(
+    const rendered = render(
       <table>
         <tbody>
           <JobRow {...props} />
@@ -51,8 +48,12 @@ describe("<JobRow />", () => {
       </table>,
       renderOpts
     );
-    userEvent.click(getByText(/source_type_2/));
-    expect(mockHistory.push.mock.calls.length).toBe(1);
-    expect(mockHistory.push.mock.calls[0][0]).toBe("/sources/123/jobs/foo");
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    await user.click(rendered.getByText(/source_type_2/i));
+
+    expect(mockNavigate).toHaveBeenCalledTimes(1);
+    expect(mockNavigate).toHaveBeenCalledWith("/sources/123/jobs/foo");
   });
 });

package/src/jobs/components/__tests__/Jobs.spec.js

@@ -1,4 +1,3 @@
-import React, { Suspense } from "react";
 import { render } from "@truedat/test/render";
 import Jobs from "../Jobs";
 
@@ -23,12 +22,7 @@ const renderOpts = { state };
 
 describe("<Jobs />", () => {
   it("matches the latest snapshot", () => {
-    const { container } = render(
-      <Suspense fallback={null}>
-        <Jobs />
-      </Suspense>,
-      renderOpts
-    );
+    const { container } = render(<Jobs />, renderOpts);
     expect(container).toMatchSnapshot();
   });
 });

package/src/jobs/components/__tests__/JobsLoader.spec.js

@@ -1,19 +1,19 @@
-import React from "react";
-import { mount } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { JobsLoader } from "../JobsLoader";
 
 describe("<JobsLoader />", () => {
   const payload = {};
 
-  it("calls fetchJobs when component mounts, clearJobs when component unmounts", () => {
+  it("calls fetchJobs when component mounts, clearJobs when component unmounts", async () => {
     const clearJobs = jest.fn();
     const fetchJobs = jest.fn();
     const props = { fetchJobs, payload, clearJobs };
-    const wrapper = mount(<JobsLoader {...props} />);
-    expect(clearJobs.mock.calls.length).toBe(0);
-    expect(fetchJobs.mock.calls.length).toBe(1);
-    wrapper.unmount();
-    expect(clearJobs.mock.calls.length).toBe(1);
-    expect(fetchJobs.mock.calls.length).toBe(1);
+    const rendered = render(<JobsLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(clearJobs).not.toHaveBeenCalled();
+    expect(fetchJobs).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+    expect(clearJobs).toHaveBeenCalledTimes(1);
+    expect(fetchJobs).toHaveBeenCalledTimes(1);
   });
 });

package/src/jobs/components/__tests__/JobsTable.spec.js

@@ -1,7 +1,5 @@
-import _ from "lodash/fp";
-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 { initialState as jobQuery } from "../../reducers/jobQuery";
 import JobsTable from "../JobsTable";
 
@@ -25,36 +23,43 @@ const state = { jobs, jobQuery };
 const renderOpts = { state };
 
 describe("<JobsTable />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(<JobsTable />, renderOpts);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<JobsTable />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (no jobs)", () => {
-    const opts = _.set("state.jobs", [])(renderOpts);
-    const { container } = render(<JobsTable />, opts);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot (no jobs)", async () => {
+    const rendered = render(<JobsTable />, { state: { ...state, jobs: [] } });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("sorts by most recent initially", () => {
-    const { getByRole } = render(<JobsTable />, renderOpts);
-    expect(getByRole("columnheader", { name: /Updated At/ })).toHaveClass(
-      "sorted descending"
-    );
+  it("sorts by most recent initially", async () => {
+    const rendered = render(<JobsTable />, renderOpts);
+    await waitForLoad(rendered);
+    expect(
+      rendered.getByRole("columnheader", { name: /end_date/i })
+    ).toHaveClass("sorted descending");
   });
 
-  it("toggles sort direction when a column header is clicked", () => {
-    const { getByText, getByRole } = render(<JobsTable />, renderOpts);
-    expect(getByRole("columnheader", { name: /Source Type/ })).not.toHaveClass(
-      "sorted"
-    );
-    userEvent.click(getByText(/Source Type/));
-    expect(getByRole("columnheader", { name: /Source Type/ })).toHaveClass(
-      "sorted ascending"
-    );
-    userEvent.click(getByText(/Source Type/));
-    expect(getByRole("columnheader", { name: /Source Type/ })).toHaveClass(
-      "sorted descending"
-    );
+  it("toggles sort direction when a column header is clicked", async () => {
+    const rendered = render(<JobsTable />, renderOpts);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    expect(
+      rendered.getByRole("columnheader", { name: /source\.type/i })
+    ).not.toHaveClass("sorted");
+
+    await user.click(rendered.getByText(/source\.type/i));
+    expect(
+      rendered.getByRole("columnheader", { name: /source\.type/i })
+    ).toHaveClass("sorted ascending");
+
+    await user.click(rendered.getByText(/source\.type/i));
+    expect(
+      rendered.getByRole("columnheader", { name: /source\.type/i })
+    ).toHaveClass("sorted descending");
   });
 });

package/src/jobs/components/__tests__/JobsView.spec.js

@@ -1,4 +1,3 @@
-import React, { Suspense } from "react";
 import { render } from "@truedat/test/render";
 import { initialState as jobQuery } from "../../reducers/jobQuery";
 import JobsView from "../JobsView";
@@ -24,12 +23,7 @@ const renderOpts = { state };
 
 describe("<JobsView />", () => {
   it("matches the latest snapshot", () => {
-    const { container } = render(
-      <Suspense fallback={null}>
-        <JobsView />
-      </Suspense>,
-      renderOpts
-    );
+    const { container } = render(<JobsView />, renderOpts);
     expect(container).toMatchSnapshot();
   });
 });

package/src/jobs/components/__tests__/SourceJobs.spec.js

@@ -1,4 +1,3 @@
-import React, { Suspense } from "react";
 import { render } from "@truedat/test/render";
 import SourceJobs from "../SourceJobs";
 
@@ -23,12 +22,7 @@ const renderOpts = { state };
 
 describe("<SourceJobs />", () => {
   it("matches the latest snapshot", () => {
-    const { container } = render(
-      <Suspense fallback={null}>
-        <SourceJobs />
-      </Suspense>,
-      renderOpts
-    );
+    const { container } = render(<SourceJobs />, renderOpts);
     expect(container).toMatchSnapshot();
   });
 });

package/src/jobs/components/__tests__/__snapshots__/Job.spec.js.snap

@@ -1,43 +1,150 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<EventFeed /> matches the latest snapshot 1`] = `
-<Feed
-  size="large"
->
-  <Event
-    inserted_at="2020-01-01T00:01:02.000Z"
-    key="0"
-    type="STARTED"
-  />
-  <Event
-    inserted_at="2020-01-01T00:01:03.000Z"
-    key="1"
-    message="something went wrong"
-    type="FAILED"
-  />
-</Feed>
+<div>
+  <div
+    class="ui large feed"
+  >
+    <div
+      class="event"
+    >
+      <div
+        class="label"
+      >
+        <i
+          aria-hidden="true"
+          class="green play circle outline icon"
+        />
+      </div>
+      <div
+        class="content"
+      >
+        <time
+          datetime="1577836862000"
+        >
+          2020-01-01 00:01:02.000
+        </time>
+        <div
+          class="summary"
+        >
+           
+          STARTED
+           
+        </div>
+      </div>
+    </div>
+    <div
+      class="event"
+    >
+      <div
+        class="label"
+      >
+        <i
+          aria-hidden="true"
+          class="red warning circle icon"
+        />
+      </div>
+      <div
+        class="content"
+      >
+        <time
+          datetime="1577836863000"
+        >
+          2020-01-01 00:01:03.000
+        </time>
+        <div
+          class="summary"
+        >
+           
+          FAILED
+           
+        </div>
+        <div
+          class="text extra"
+        >
+          something went wrong
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`<Job /> matches the latest snapshot 1`] = `
-<Fragment>
-  <Header
-    as="h4"
-    subheader="jobType.catalog.label"
-  />
-  <EventFeed
-    events={
-      [
-        {
-          "inserted_at": "2020-01-01T00:01:02.000Z",
-          "type": "STARTED",
-        },
-        {
-          "inserted_at": "2020-01-01T00:01:03.000Z",
-          "message": "something went wrong",
-          "type": "FAILED",
-        },
-      ]
-    }
-  />
-</Fragment>
+<div>
+  <h4
+    class="ui header"
+  >
+    <div
+      class="sub header"
+    >
+      catalog
+    </div>
+  </h4>
+  <div
+    class="ui large feed"
+  >
+    <div
+      class="event"
+    >
+      <div
+        class="label"
+      >
+        <i
+          aria-hidden="true"
+          class="green play circle outline icon"
+        />
+      </div>
+      <div
+        class="content"
+      >
+        <time
+          datetime="1577836862000"
+        >
+          2020-01-01 00:01:02.000
+        </time>
+        <div
+          class="summary"
+        >
+           
+          STARTED
+           
+        </div>
+      </div>
+    </div>
+    <div
+      class="event"
+    >
+      <div
+        class="label"
+      >
+        <i
+          aria-hidden="true"
+          class="red warning circle icon"
+        />
+      </div>
+      <div
+        class="content"
+      >
+        <time
+          datetime="1577836863000"
+        >
+          2020-01-01 00:01:03.000
+        </time>
+        <div
+          class="summary"
+        >
+           
+          FAILED
+           
+        </div>
+        <div
+          class="text extra"
+        >
+          something went wrong
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;

package/src/jobs/components/__tests__/__snapshots__/JobBreadcrumbs.spec.js.snap

@@ -1,36 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<JobBreadcrumbs /> matches the latest snapshot 1`] = `
-<Breadcrumb>
-  <BreadcrumbSection
-    active={false}
-    as={
-      {
-        "$$typeof": Symbol(react.forward_ref),
-        "displayName": "Link",
-        "propTypes": {
-          "innerRef": [Function],
-          "onClick": [Function],
-          "replace": [Function],
-          "target": [Function],
-          "to": [Function],
-        },
-        "render": [Function],
-      }
-    }
-    to="/jobs"
+<div>
+  <div
+    class="ui breadcrumb"
   >
-    <MemoizedFormattedMessage
-      id="navigation.admin.jobs"
+    <a
+      class="section"
+      data-discover="true"
+      href="/jobs"
+    >
+      navigation.admin.jobs
+    </a>
+    <i
+      aria-hidden="true"
+      class="right angle icon divider"
     />
-  </BreadcrumbSection>
-  <BreadcrumbDivider
-    icon="right angle"
-  />
-  <BreadcrumbSection
-    active={true}
-  >
-    foo
-  </BreadcrumbSection>
-</Breadcrumb>
+    <div
+      class="active section"
+    >
+      foo
+    </div>
+  </div>
+</div>
 `;

package/src/jobs/components/__tests__/__snapshots__/Jobs.spec.js.snap

@@ -6,9 +6,8 @@ exports[`<Jobs /> matches the latest snapshot 1`] = `
     class="ui action left icon input"
   >
     <input
-      placeholder="Search jobs..."
+      placeholder="jobs.search.placeholder"
       type="text"
-      value=""
     />
     <i
       aria-hidden="true"
@@ -40,7 +39,7 @@ exports[`<Jobs /> matches the latest snapshot 1`] = `
           role="option"
         >
           <em>
-            (reset all filters)
+            (reset filters)
           </em>
         </div>
       </div>
@@ -51,23 +50,11 @@ exports[`<Jobs /> matches the latest snapshot 1`] = `
   />
   <div
     class="dimmable"
-  >
-    <div
-      class="ui inverted dimmer"
-    >
-      <div
-        class="content"
-      >
-        <div
-          class="ui loader"
-        />
-      </div>
-    </div>
-  </div>
+  />
   <div
     class="ui label jobs-label-results"
   >
-    42 jobs found
+    jobs.retrieved.results
   </div>
   <table
     class="ui selectable sortable table"
@@ -81,32 +68,32 @@ exports[`<Jobs /> matches the latest snapshot 1`] = `
         <th
           class="two wide"
         >
-          Source
+          source.external_id
         </th>
         <th
           class="two wide"
         >
-          Source Type
+          source.type
         </th>
         <th
           class="two wide"
         >
-          Type
+          type
         </th>
         <th
           class="two wide"
         >
-          Status
+          status
         </th>
         <th
           class="two wide ascending sorted disabled"
         >
-          Message
+          message
         </th>
         <th
           class="two wide"
         >
-          Updated At
+          end_date
         </th>
       </tr>
     </thead>