@truedat/cx 7.5.9 → 7.5.11

package/src/sources/components/__tests__/EditSource.spec.js

@@ -1,12 +1,7 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
+import { multipleTemplatesMock } from "@truedat/test/mocks";
 import { EditSource } from "../EditSource";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<EditSource />", () => {
   const updateSource = jest.fn();
   const source = {
@@ -14,11 +9,14 @@ describe("<EditSource />", () => {
     config: { a: { value: 1, origin: "user" } },
     type: "micro",
   };
-  const formatMessage = jest.fn();
-  const props = { source, updateSource, formatMessage };
+  const props = { source, updateSource };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<EditSource {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const renderOpts = {
+      mocks: [multipleTemplatesMock({ scope: "cx" })],
+    };
+    const rendered = render(<EditSource {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/sources/components/__tests__/NewSource.spec.js

@@ -1,18 +1,13 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import { NewSource } from "../NewSource";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<NewSource />", () => {
   const createSource = jest.fn();
   const props = { createSource };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<NewSource {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<NewSource {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/sources/components/__tests__/Source.spec.js

@@ -1,37 +1,29 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { Source } from "../Source";
+import { render, waitForLoad } from "@truedat/test/render";
+import Source from "../Source";
+
+jest.mock("../SourceDetail", () => {
+  return {
+    __esModule: true,
+    default: () => <div>Mocked Source Detail</div>,
+  };
+});
+jest.mock("../SourceHeader", () => {
+  return {
+    __esModule: true,
+    default: () => <div>Mocked Source Header</div>,
+  };
+});
 
 describe("<Source />", () => {
   const props = {
-    updateSource: jest.fn(),
     source: {
       external_id: "Micro1",
-      config: { a: { value: 1, origin: "user" } },
-      type: "micro",
-    },
-    template: {
-      content: [
-        {
-          cardinality: "1",
-          disabled: true,
-          group: "New Group 1",
-          label: "a",
-          name: "a",
-          type: "string",
-          widget: "string",
-        },
-      ],
-      id: 36,
-      label: "app-admin",
-      name: "micro",
-      scope: "cx",
     },
-    match: { params: { external_id: "Micro" } },
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<Source {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<Source {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/sources/components/__tests__/SourceActions.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { SourceActions } from "../SourceActions";
 
@@ -22,7 +21,7 @@ const renderOpts = {
 describe("<SourceActions />", () => {
   const source = {
     __typename: "Source",
-    id: 123,
+    id: "123",
     externalId: "Micro1",
     config: { a: { value: 1, origin: "user" } },
     type: "micro",

package/src/sources/components/__tests__/SourceBreadcrumbs.spec.js

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

package/src/sources/components/__tests__/SourceDetail.spec.js

@@ -1,43 +1,67 @@
-import React, { Suspense } from "react";
-import { waitFor } from "@testing-library/react";
-import { render } from "@truedat/test/render";
-import SourceDetail from "../SourceDetail";
+import React from "react";
+import { render, waitForLoad } from "@truedat/test/render";
+import { SourceDetail } from "../SourceDetail";
+import {
+  SOURCE,
+  SOURCE_EDIT,
+  SOURCE_JOBS,
+  SOURCE_JOBS_NEW,
+} from "@truedat/core/routes";
 
-const jobs = [
-  {
-    external_id: "job1",
-    source_id: 123,
-    end_date: "2022-02-02T00:00:00.000Z",
-    type: "catalog",
-    status: "SUCCESS",
-  },
-  {
-    external_id: "job2",
-    source_id: 123,
-    end_date: "2020-02-01T00:00:00.000Z",
-    type: "catalog",
-    status: "FAILED",
-    message: "Something went wrong",
-  },
-];
-
-const source = {
-  externalId: "foo",
-  id: 123,
-};
-const renderOpts = {
-  routes: ["/sources/123/jobs"],
-  state: { jobs, jobCount: 42 },
-};
+jest.mock("../../../jobs/components/Job", () => () => <div>Job</div>);
+jest.mock("../../../jobs/components/JobLoader", () => () => (
+  <div>JobLoader</div>
+));
+jest.mock("../../../jobs/components/SourceJobs", () => () => (
+  <div>SourceJobs</div>
+));
+jest.mock("../EditSource", () => () => <div>EditSource</div>);
+jest.mock("../NewJob", () => () => <div>NewJob</div>);
+jest.mock("../SourceConfiguration", () => () => <div>SourceConfiguration</div>);
+jest.mock("../SourceTabs", () => () => <div>SourceTabs</div>);
 
 describe("<SourceDetail />", () => {
-  it("matches the latest snapshot (jobs tab)", async () => {
-    const { container } = render(
-      <Suspense fallback={null}>
-        <SourceDetail source={source} />
-      </Suspense>,
-      renderOpts
-    );
-    await waitFor(() => expect(container).toMatchSnapshot());
+  const source = {
+    id: 1,
+    type: "test",
+    externalId: "test-1",
+  };
+
+  it("renders correctly with default route", async () => {
+    const rendered = render(<SourceDetail source={source} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with edit route", async () => {
+    const rendered = render(<SourceDetail source={source} />, {
+      routes: [SOURCE_EDIT.replace(":id", "1")],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with jobs route", async () => {
+    const rendered = render(<SourceDetail source={source} />, {
+      routes: [SOURCE_JOBS.replace(":id", "1")],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with new job route", async () => {
+    const rendered = render(<SourceDetail source={source} />, {
+      routes: [SOURCE_JOBS_NEW.replace(":id", "1")],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with specific job route", async () => {
+    const rendered = render(<SourceDetail source={source} />, {
+      routes: [`${SOURCE_JOBS.replace(":id", "1")}/123`],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/sources/components/__tests__/SourceForm.spec.js

@@ -1,16 +1,34 @@
-import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
-import { SourceForm } from "../SourceForm";
+import userEvent from "@testing-library/user-event";
+import { within } from "@testing-library/dom";
+import { render, waitForLoad } from "@truedat/test/render";
+import { templatesMockWith } from "@truedat/test/mocks";
+import SourceForm from "../SourceForm";
 
-describe("<SourceForm />", () => {
-  const applyTemplate = (x) => x;
-  const templatesLoaded = true;
-  const source = {
-    external_id: "Micro1",
-    config: { a: { value: 1, origin: "user" } },
-    type: "micro",
-  };
-  const template = {
+const source = {
+  external_id: "Micro1",
+  config: { a: { value: 1, origin: "user" } },
+  type: "micro",
+};
+const template = {
+  content: [
+    {
+      cardinality: "1",
+      disabled: true,
+      group: "New Group 1",
+      label: "a",
+      name: "a",
+      type: "string",
+      widget: "string",
+    },
+  ],
+  id: 36,
+  label: "app-admin",
+  name: "micro",
+  scope: "cx",
+};
+
+const templates = [
+  {
     content: [
       {
         cardinality: "1",
@@ -26,91 +44,96 @@ describe("<SourceForm />", () => {
     label: "app-admin",
     name: "micro",
     scope: "cx",
-  };
+  },
+  {
+    content: [
+      {
+        cardinality: "*",
+        disabled: true,
+        group: "New Group 1",
+        label: "url",
+        name: "url_cx",
+        type: "url",
+        widget: "pair_list",
+      },
+      {
+        cardinality: "?",
+        disabled: true,
+        group: "New Group 1",
+        label: "a",
+        name: "a",
+        type: "string",
+        widget: "string",
+      },
+      {
+        cardinality: "+",
+        disabled: true,
+        group: "New Group 1",
+        label: "lista",
+        name: "lista",
+        type: "string",
+        widget: "string",
+      },
+    ],
+    id: 35,
+    label: "a",
+    name: "a",
+    scope: "cx",
+  },
+];
 
-  const templates = [
-    {
-      content: [
-        {
-          cardinality: "1",
-          disabled: true,
-          group: "New Group 1",
-          label: "a",
-          name: "a",
-          type: "string",
-          widget: "string",
-        },
-      ],
-      id: 36,
-      label: "app-admin",
-      name: "micro",
-      scope: "cx",
-    },
-    {
-      content: [
-        {
-          cardinality: "*",
-          disabled: true,
-          group: "New Group 1",
-          label: "url",
-          name: "url_cx",
-          type: "url",
-          widget: "pair_list",
-        },
-        {
-          cardinality: "?",
-          disabled: true,
-          group: "New Group 1",
-          label: "a",
-          name: "a",
-          type: "string",
-          widget: "string",
-        },
-        {
-          cardinality: "+",
-          disabled: true,
-          group: "New Group 1",
-          label: "lista",
-          name: "lista",
-          type: "string",
-          widget: "string",
-        },
-      ],
-      id: 35,
-      label: "a",
-      name: "a",
-      scope: "cx",
-    },
-  ];
+const renderOpts = {
+  mocks: [templatesMockWith({ scope: "cx" }, templates)],
+};
 
+describe("<SourceForm />", () => {
   const props = {
-    applyTemplate,
-    templatesLoaded,
+    onSubmit: jest.fn(),
     source,
     template,
-    templates,
   };
 
-  describe("with multiple templates", () => {
-    const wrapper = shallowWithIntl(
-      <SourceForm templates={templates} {...props} />
-    );
+  describe("SourceForm", () => {
+    it("matches the latest snapshot", async () => {
+      const rendered = render(<SourceForm {...props} />, renderOpts);
 
-    it("matches the latest snapshot", () => {
-      expect(wrapper).toMatchSnapshot();
+      await waitForLoad(rendered);
+      expect(rendered.container).toMatchSnapshot();
     });
-  });
 
-  describe("content changes", () => {
-    it("sets name in state when name field changes", () => {
-      const wrapper = shallowWithIntl(<SourceForm {...props} />);
-      const name = "external_id";
-      const value = "micro2";
-      const e = { preventDefault: jest.fn() };
+    it("submits", async () => {
+      const rendered = render(
+        <SourceForm {...props} source={undefined} />,
+        renderOpts
+      );
+      await waitForLoad(rendered);
+
+      const user = userEvent.setup({ delay: null });
 
-      wrapper.find({ name }).simulate("change", e, { name, value });
-      expect(e.preventDefault.mock.calls.length).toBe(1);
-      expect(wrapper.state(name)).toBe(value);
+      const externalIdField =
+        rendered.queryByText(/source.external_id/i).parentNode;
+      await user.type(
+        within(externalIdField).getByRole("textbox"),
+        "My External Id"
+      );
+
+      const sourceTypeField =
+        rendered.queryByText(/type.selector.label/i).parentNode;
+      await user.click(
+        within(sourceTypeField).getByRole("option", { name: /app-admin/i })
+      );
+
+      await waitForLoad(rendered);
+
+      await user.click(rendered.getByRole("button", { name: /create/i }));
+
+      expect(props.onSubmit).toHaveBeenCalledWith({
+        source: {
+          config: {},
+          external_id: "My External Id",
+          type: "micro",
+        },
+      });
     });
   });
 });

package/src/sources/components/__tests__/SourceHeader.spec.js

@@ -1,8 +1,7 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import SourceHeader from "../SourceHeader";
 
-const source = { externalId: "foo", id: 123 };
+const source = { externalId: "foo", id: "123" };
 
 describe("<SourceHeader />", () => {
   it("matches the latest snapshot", () => {

package/src/sources/components/__tests__/SourceRoutes.spec.js

@@ -1,14 +1,86 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
+import { SOURCES, SOURCES_NEW, linkTo } from "@truedat/core/routes";
+import { useAuthorized } from "@truedat/core/hooks/useAuthorized";
 import { SourceRoutes } from "../SourceRoutes";
+import { SOURCE_QUERY } from "../../api/queries";
 
-jest.mock("@truedat/core/hooks", () => ({
-  useAuthorized: jest.fn(() => true)
+// Mock child components
+jest.mock("../NewSource", () => () => <div>NewSource</div>);
+jest.mock("../Sources", () => () => <div>Sources</div>);
+jest.mock("../Source", () => () => <div>Source</div>);
+
+// Mock hooks
+jest.mock("@truedat/core/hooks/useAuthorized", () => ({
+  useAuthorized: jest.fn(() => true),
 }));
 
+const sourceMock = {
+  request: {
+    query: SOURCE_QUERY,
+    variables: { sourceId: "123" },
+  },
+  result: {
+    data: {
+      loading: false,
+      source: {
+        __typename: "Source",
+        id: "123",
+        externalId: "ext-123",
+        active: true,
+        type: "test",
+        config: {},
+        jobTypes: [],
+        template: {
+          id: "template-1",
+          content: "test content",
+        },
+      },
+    },
+  },
+};
+
+const renderOpts = {
+  mocks: [sourceMock],
+};
+
 describe("<SourceRoutes />", () => {
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<SourceRoutes />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot for route SOURCES when authorized", async () => {
+    useAuthorized.mockReturnValueOnce(true);
+    const rendered = render(<SourceRoutes />, {
+      ...renderOpts,
+      routes: [SOURCES],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot for route SOURCES_NEW when authorized", async () => {
+    useAuthorized.mockReturnValueOnce(true);
+    const rendered = render(<SourceRoutes />, {
+      ...renderOpts,
+      routes: [SOURCES_NEW],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot for route SOURCE when authorized", async () => {
+    useAuthorized.mockReturnValueOnce(true);
+    const rendered = render(<SourceRoutes />, {
+      ...renderOpts,
+      routes: [linkTo.SOURCE({ sourceId: "123" })],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("shows unauthorized message when not authorized", async () => {
+    useAuthorized.mockReturnValueOnce(false);
+    const rendered = render(<SourceRoutes />, {
+      ...renderOpts,
+      routes: [SOURCES],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/sources/components/__tests__/SourceSelector.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import { SOURCE_OPTIONS_QUERY } from "../../api/queries";

package/src/sources/components/__tests__/SourceTabs.spec.js

@@ -1,10 +1,9 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import SourceTabs from "../SourceTabs";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useRouteMatch: () => ({ path: "/sources/123" }),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useMatch: () => ({ path: "/sources/123" }),
 }));
 
 const source = { externalId: "foo", id: 123 };

package/src/sources/components/__tests__/Sources.spec.js

@@ -1,30 +1,10 @@
-import React from "react";
+import { waitFor } 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 { SOURCES_QUERY } from "../../api/queries";
 import { Sources } from "../Sources";
 
-const messages = {
-  en: {
-    "sources.actions.create": "create",
-    "sources.header": "header",
-    "sources.search.placeholder": "search",
-    "sources.count": "{count} sources found",
-    "sources.subheader": "subheader",
-    "source.latestEvent.insertedAt": "insertedAt",
-    "source.latestEvent.message": "message",
-    "source.latestEvent.type": "type",
-    "source.status": "status",
-    "source.type": "type",
-    "source.external_id": "external_id",
-  },
-};
-
 describe("<Sources />", () => {
-  const props = {
-    loading: false,
-    sources: [],
-  };
   const event = {
     id: 456,
     type: "eventType",
@@ -52,31 +32,36 @@ describe("<Sources />", () => {
     request: { query: SOURCES_QUERY },
     result: { data: { sources } },
   };
-  const renderOpts = { mocks: [sourcesMock], messages };
+  const renderOpts = { mocks: [sourcesMock] };
 
   it("matches the latest snapshot", async () => {
-    const { container, findByText } = render(
-      <Sources {...props} />,
-      renderOpts
+    const rendered = render(<Sources />, renderOpts);
+    await waitForLoad(rendered);
+    await waitFor(() =>
+      expect(rendered.getByText(/sources.count/i)).toBeInTheDocument()
     );
-    await findByText("2 sources found");
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("renders count and filters rows matching search term", async () => {
-    const { findByText, getByRole, queryAllByRole } = render(
-      <Sources {...props} />,
-      renderOpts
+    const rendered = render(<Sources />, renderOpts);
+    await waitForLoad(rendered);
+    await waitFor(() =>
+      expect(rendered.getByText(/sources.count/i)).toBeInTheDocument()
     );
-    await findByText("2 sources found");
-    expect(queryAllByRole("row")).toHaveLength(3); // 2 rows + header
+    expect(rendered.queryAllByRole("row")).toHaveLength(3); // 2 rows + header
 
-    userEvent.type(getByRole("textbox"), source1.externalId);
-    await findByText("1 sources found");
-    expect(queryAllByRole("row")).toHaveLength(2); // 1 row + header
+    const user = userEvent.setup({ delay: null });
+    await user.type(rendered.getByRole("textbox"), source1.externalId);
+    await waitFor(() =>
+      expect(rendered.getByText(/sources.count/i)).toBeInTheDocument()
+    );
+    expect(rendered.queryAllByRole("row")).toHaveLength(2); // 1 row + header
 
-    userEvent.type(getByRole("textbox"), "x");
-    await findByText("0 sources found");
-    expect(queryAllByRole("row")).toHaveLength(1); // header only
+    await user.type(rendered.getByRole("textbox"), "x");
+    await waitFor(() =>
+      expect(rendered.getByText(/sources.count/i)).toBeInTheDocument()
+    );
+    expect(rendered.queryAllByRole("row")).toHaveLength(1); // header only
   });
 });