@truedat/cx 4.41.2 → 4.42.0

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

@@ -1,95 +1,64 @@
+import _ from "lodash/fp";
 import React from "react";
-import { shallow } from "enzyme";
-import { JobsTable } from "../JobsTable";
-import { getJobColumns } from "../../selectors";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import en from "../../../messages/en";
+import { initialState as jobQuery } from "../../reducers/jobQuery";
+import JobsTable from "../JobsTable";
 
-describe("<JobsTable />", () => {
-  const jobs = [
-    {
-      external_id: "external_id",
-      source: {
-        external_id: "source external_id",
-        type: "source_type"
-      }
+const jobs = [
+  {
+    external_id: "external_id",
+    source: {
+      external_id: "source external_id",
+      type: "source_type",
+    },
+  },
+  {
+    external_id: "external_id_2",
+    source: {
+      external_id: "source external_id_2",
+      type: "source_type_2",
     },
-    {
-      external_id: "external_id_2",
-      source: {
-        external_id: "source external_id_2",
-        type: "source_type_2"
-      }
-    }
-  ];
-  const columns = getJobColumns({}, { locale: "es" });
-  const jobsSorting = [{ "source.type.sort": "desc" }];
-  const sortJobs = jest.fn();
+  },
+];
+const state = { jobs, jobQuery };
+const renderOpts = {
+  messages: { en },
+  state,
+};
 
+describe("<JobsTable />", () => {
   it("matches the latest snapshot", () => {
-    const props = { jobs, columns };
-    const wrapper = shallow(<JobsTable {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<JobsTable />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (no jobs)", () => {
-    const props = { jobs: [], columns };
-    const wrapper = shallow(<JobsTable {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("sorts column in the direction set", () => {
-    const props = { jobs, columns, jobsSorting };
-    const wrapper = shallow(<JobsTable {...props} />);
-
-    expect(
-      wrapper
-        .find("TableHeaderCell")
-        .at(0)
-        .props().sorted
-    ).toEqual(null);
-
-    expect(
-      wrapper
-        .find("TableHeaderCell")
-        .at(1)
-        .props().sorted
-    ).toEqual("descending");
+    const opts = _.set("state.jobs", [])(renderOpts);
+    const { container } = render(<JobsTable />, opts);
+    expect(container).toMatchSnapshot();
   });
 
-  it("handles sort when column header is clicked", () => {
-    const props = { jobs, columns, sortJobs };
-    const wrapper = shallow(<JobsTable {...props} />);
-    wrapper
-      .find("TableHeaderCell")
-      .at(1)
-      .simulate("click");
-    expect(
-      wrapper
-        .find("TableHeaderCell")
-        .at(1)
-        .props().sorted
-    ).toEqual("ascending");
-
-    wrapper
-      .find("TableHeaderCell")
-      .at(1)
-      .simulate("click");
-    expect(
-      wrapper
-        .find("TableHeaderCell")
-        .at(1)
-        .props().sorted
-    ).toEqual("descending");
+  it("sorts by most recent initially", () => {
+    const { getByRole } = render(<JobsTable />, renderOpts);
+    expect(getByRole("columnheader", { name: /Updated At/ })).toHaveClass(
+      "sorted descending"
+    );
   });
 
-  it("updates sort if jobsSorting is changed", () => {
-    const props = { jobs, columns, jobsSorting, sortJobs };
-    const wrapper = shallow(<JobsTable {...props} />);
-    wrapper.setProps({ jobsSorting: [{ "source.external_id.sort": "asc" }] });
-    expect(
-      wrapper
-        .find("TableHeaderCell")
-        .at(0)
-        .props().sorted
-    ).toEqual("ascending");
+  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"
+    );
   });
 });

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

@@ -0,0 +1,39 @@
+import React, { Suspense } from "react";
+import { render } from "@truedat/test/render";
+import en from "../../../messages/en";
+import { initialState as jobQuery } from "../../reducers/jobQuery";
+import JobsView from "../JobsView";
+
+const jobs = [
+  {
+    external_id: "external_id",
+    source: {
+      external_id: "source external_id",
+      type: "source_type",
+    },
+  },
+  {
+    external_id: "external_id_2",
+    source: {
+      external_id: "source external_id_2",
+      type: "source_type_2",
+    },
+  },
+];
+const state = { jobs, jobQuery };
+const renderOpts = {
+  messages: { en },
+  state,
+};
+
+describe("<JobsView />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <Suspense fallback={null}>
+        <JobsView />
+      </Suspense>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,38 @@
+import React, { Suspense } from "react";
+import { render } from "@truedat/test/render";
+import en from "../../../messages/en";
+import SourceJobs from "../SourceJobs";
+
+const jobs = [
+  {
+    external_id: "external_id",
+    source: {
+      external_id: "source external_id",
+      type: "source_type",
+    },
+  },
+  {
+    external_id: "external_id_2",
+    source: {
+      external_id: "source external_id_2",
+      type: "source_type_2",
+    },
+  },
+];
+const state = { jobs, jobCount: 42 };
+const renderOpts = {
+  messages: { en },
+  state,
+};
+
+describe("<SourceJobs />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <Suspense fallback={null}>
+        <SourceJobs />
+      </Suspense>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -19,10 +19,9 @@ exports[`<EventFeed /> matches the latest snapshot 1`] = `
 `;
 
 exports[`<Job /> matches the latest snapshot 1`] = `
-<Segment>
+<Fragment>
   <Header
-    as="h2"
-    content="Some source"
+    as="h4"
     subheader="jobType.catalog.label"
   />
   <EventFeed
@@ -40,5 +39,5 @@ exports[`<Job /> matches the latest snapshot 1`] = `
       ]
     }
   />
-</Segment>
+</Fragment>
 `;

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

@@ -1,36 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<JobRow /> matches the latest snapshot 1`] = `
-<TableRow
-  as="tr"
-  cellAs="td"
-  key="foo"
-  onClick={[Function]}
->
-  <TableCell
-    as="td"
-    content="source external_id_2"
-    key="0"
-  />
-  <TableCell
-    as="td"
-    content="source_type_2"
-    key="1"
-  />
-  <TableCell
-    as="td"
-    content="init"
-    key="2"
-  />
-  <TableCell
-    as="td"
-    content="Job started"
-    key="3"
-  />
-  <TableCell
-    as="td"
-    content="2020-01-21 16:31"
-    key="4"
-  />
-</TableRow>
+<div>
+  <table>
+    <tbody>
+      <tr
+        class=""
+      >
+        <td
+          class=""
+        />
+        <td
+          class=""
+        >
+          source_type_2
+        </td>
+        <td
+          class=""
+        />
+        <td
+          class=""
+        >
+          init
+        </td>
+        <td
+          class=""
+        >
+          Job started
+        </td>
+        <td
+          class="center aligned"
+        >
+          <time
+            datetime="1579624260000"
+          >
+            2020-01-21 16:31
+          </time>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 `;

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

@@ -1,44 +1,145 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Jobs /> matches the latest snapshot 1`] = `
-<Segment>
-  <Header
-    as="h2"
+<div>
+  <div
+    class="ui action left icon input"
+    style="display: none;"
   >
-    <Icon
-      as="i"
-      circular={true}
-      name="cogs"
+    <input
+      placeholder="Search jobs..."
+      type="text"
+      value=""
     />
-    <HeaderContent>
-      <MemoizedFormattedMessage
-        id="jobs.header"
-      />
-      <HeaderSubheader>
-        <MemoizedFormattedMessage
-          id="jobs.subheader"
-        />
-      </HeaderSubheader>
-    </HeaderContent>
-  </Header>
-  <Segment
-    attached="bottom"
+    <i
+      aria-hidden="true"
+      class="search link icon"
+    />
+  </div>
+  <div
+    class="selectedFilters"
+    style="display: none;"
+  />
+  <div
+    class="dimmable"
+    style="display: none;"
   >
-    <Connect(JobsSearch) />
-    <Connect(SelectedFilters) />
-    <DimmerDimmable
-      dimmed={false}
+    <div
+      class="ui inverted dimmer"
     >
-      <Dimmer
-        active={false}
-        inverted={true}
+      <div
+        class="content"
       >
-        <Loader />
-      </Dimmer>
-    </DimmerDimmable>
-    <Connect(JobsLabelResults) />
-    <Connect(JobsTable) />
-    <Connect(Pagination) />
-  </Segment>
-</Segment>
+        <div
+          class="ui loader"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="ui label jobs-label-results"
+    style="display: none;"
+  >
+    42 jobs found
+  </div>
+  <table
+    class="ui selectable sortable table"
+    style="display: none;"
+  >
+    <thead
+      class=""
+    >
+      <tr
+        class=""
+      >
+        <th
+          class="two wide"
+        >
+          Source
+        </th>
+        <th
+          class="two wide"
+        >
+          Source Type
+        </th>
+        <th
+          class="two wide"
+        >
+          Type
+        </th>
+        <th
+          class="two wide"
+        >
+          Status
+        </th>
+        <th
+          class="two wide ascending sorted disabled"
+        >
+          Message
+        </th>
+        <th
+          class="two wide"
+        >
+          Updated At
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class=""
+    >
+      <tr
+        class=""
+      >
+        <td
+          class=""
+        >
+          source external_id
+        </td>
+        <td
+          class=""
+        >
+          source_type
+        </td>
+        <td
+          class=""
+        />
+        <td
+          class=""
+        />
+        <td
+          class=""
+        />
+        <td
+          class="center aligned"
+        />
+      </tr>
+      <tr
+        class=""
+      >
+        <td
+          class=""
+        >
+          source external_id_2
+        </td>
+        <td
+          class=""
+        >
+          source_type_2
+        </td>
+        <td
+          class=""
+        />
+        <td
+          class=""
+        />
+        <td
+          class=""
+        />
+        <td
+          class="center aligned"
+        />
+      </tr>
+    </tbody>
+  </table>
+</div>
 `;