@truedat/dd 6.6.0 → 6.6.1

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

@@ -1,131 +1,120 @@
 import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import SearchContext from "@truedat/core/search/SearchContext";
 import { StructuresTable } from "../StructuresTable";
 
+const structures = { data: [1, 2, 3].map((id) => ({ id, foo: id, bar: id })) };
+const handleSortSelection = jest.fn();
+
+const searchProps = {
+  searchData: structures,
+  sortColumn: "name.raw",
+  sortDirection: "descending",
+  handleSortSelection,
+};
+
+const renderOpts = {
+  messages: {
+    en: {
+      "structure.bar": "Bar",
+      "structure.foo": "Foo",
+      "structure.name": "Structure",
+    },
+  },
+};
+
 describe("<StructuresTable />", () => {
-  const structures = [1, 2, 3].map(id => ({ id }));
   const columns = [
     { name: "foo", sort: { name: "name.raw" } },
-    { name: "bar", sort: { name: "bar.raw" } }
+    { name: "bar", sort: { name: "bar.raw" } },
   ];
   const size = "small";
-  const structuresSort = [{ "name.raw": "desc" }];
 
   it("matches the latest snapshot", () => {
     const onStructureSelected = jest.fn();
-    const props = { structures, columns, size, onStructureSelected };
-    const wrapper = shallowWithIntl(<StructuresTable {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const props = { columns, size, onStructureSelected };
+    const { container } = render(
+      <SearchContext.Provider value={searchProps}>
+        <StructuresTable {...props} />
+      </SearchContext.Provider>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (selected structure active)", () => {
     const onStructureSelected = jest.fn();
     const props = {
-      structures,
       columns,
       size,
       onStructureSelected,
-      selectedStructure: { id: 2 }
+      selectedStructure: { id: 2 },
     };
 
-    const wrapper = shallowWithIntl(<StructuresTable {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(
+      <SearchContext.Provider value={searchProps}>
+        <StructuresTable {...props} />
+      </SearchContext.Provider>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (selected structure not in structures)", () => {
     const onStructureSelected = jest.fn();
     const props = {
-      structures,
       columns,
       size,
       onStructureSelected,
-      selectedStructure: { id: 42 }
+      selectedStructure: { id: 42 },
     };
 
-    const wrapper = shallowWithIntl(<StructuresTable {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(
+      <SearchContext.Provider value={searchProps}>
+        <StructuresTable {...props} />
+      </SearchContext.Provider>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
   });
 
   it("sorts column in the direction specified", () => {
-    const sortStructures = jest.fn();
     const props = {
-      structures,
       columns,
       size,
-      sortStructures,
-      structuresSort
     };
-    const wrapper = shallowWithIntl(<StructuresTable {...props} />);
-    const tableHeaderCells = wrapper
-      .dive()
-      .find("TableHeader")
-      .find("TableRow")
-      .dive()
-      .find("TableHeaderCell");
-
-    expect(tableHeaderCells.at(0).props().sorted).toEqual("descending");
-    expect(tableHeaderCells.at(1).props().sorted).toEqual(null);
-  });
 
-  it("handles sort when column header is clicked", () => {
-    const sortStructures = jest.fn();
-    const props = { structures, columns, size, sortStructures };
-    const wrapper = shallowWithIntl(<StructuresTable {...props} />);
-
-    wrapper
-      .dive()
-      .find("TableHeader")
-      .find("TableRow")
-      .dive()
-      .find("TableHeaderCell")
-      .at(1)
-      .simulate("click");
-
-    expect(
-      wrapper
-        .dive()
-        .find("TableHeader")
-        .find("TableRow")
-        .dive()
-        .find("TableHeaderCell")
-        .at(1)
-        .props().sorted
-    ).toEqual("ascending");
-
-    wrapper
-      .dive()
-      .find("TableHeader")
-      .find("TableRow")
-      .dive()
-      .find("TableHeaderCell")
-      .at(1)
-      .simulate("click");
-    expect(
-      wrapper
-        .dive()
-        .find("TableHeader")
-        .find("TableRow")
-        .dive()
-        .find("TableHeaderCell")
-        .at(1)
-        .props().sorted
-    ).toEqual("descending");
+    const { getAllByRole } = render(
+      <SearchContext.Provider value={searchProps}>
+        <StructuresTable {...props} />
+      </SearchContext.Provider>,
+      renderOpts
+    );
+
+    const tableHeaderCells = getAllByRole("columnheader");
+
+    expect(tableHeaderCells[0]).toHaveClass("descending");
+    expect(tableHeaderCells[1]).not.toHaveClass("ascending");
   });
 
-  it("updates sort if structuresSort is changed", () => {
-    const sortStructures = jest.fn();
-    const props = { structures, columns, size, sortStructures };
-    const wrapper = shallowWithIntl(<StructuresTable {...props} />);
-    wrapper.setProps({ structuresSort: [{ "bar.raw": "asc" }] });
-    expect(
-      wrapper
-        .dive()
-        .find("TableHeader")
-        .find("TableRow")
-        .dive()
-        .find("TableHeaderCell")
-        .at(1)
-        .props().sorted
-    ).toEqual("ascending");
+  it("handles sort when column header is clicked", async () => {
+    const props = { columns, size };
+
+    const { getAllByRole } = render(
+      <SearchContext.Provider value={searchProps}>
+        <StructuresTable {...props} />
+      </SearchContext.Provider>,
+      renderOpts
+    );
+
+    const tableHeaderCells = getAllByRole("columnheader");
+
+    userEvent.click(await tableHeaderCells[0]);
+    await waitFor(() => expect(handleSortSelection).toHaveBeenCalled());
+
+    userEvent.click(await tableHeaderCells[0]);
+    await waitFor(() => expect(handleSortSelection).toHaveBeenCalled());
   });
 });

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

@@ -1,12 +1,26 @@
 // only admin user
 import React from "react";
 import { render } from "@truedat/test/render";
-import { StructuresUpdateOption } from "../StructuresUpdateOption";
+import SearchContext from "@truedat/core/search/SearchContext";
+import StructuresUpdateOption from "../StructuresUpdateOption";
 
 jest.mock("@truedat/core/hooks", () => ({
   useAuthorized: jest.fn(() => true),
 }));
 
+const searchProps = {
+  loading: false,
+  searchParams: {},
+  searchData: {
+    _actions: { bulkUpdate: { href: "/structures/bulkUpdate" } },
+    data: [{ id: 1, name: "1", type: "API Level" }],
+  },
+  count: 1,
+  allActiveFilters: {
+    "type.raw": ["API Level"],
+  },
+};
+
 describe("<StructuresUpdateOption />", () => {
   const renderOpts = {
     messages: {
@@ -15,19 +29,52 @@ describe("<StructuresUpdateOption />", () => {
         "structures.actions.bulk_update.popup": "popup",
       },
     },
+    state: {
+      systemsLoading: false,
+      filtersGroup: [],
+      templates: [
+        { scope: "dd", name: "foo" },
+        { scope: "dd", name: "bar" },
+        { name: "baz" },
+      ],
+      structureTypesLoading: false,
+      structureTypes: [
+        {
+          filters: [],
+          metadata_fields: ["type"],
+          metadata_views: [],
+          name: "API Level",
+          template: {
+            id: 36,
+            name: "Calculated Table",
+          },
+          translation: "API Level 2",
+        },
+      ],
+    },
   };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(<StructuresUpdateOption />, renderOpts);
+  it("matches the latest snapshot", async () => {
+    const { container } = render(
+      <SearchContext.Provider value={searchProps}>
+        <StructuresUpdateOption />
+      </SearchContext.Provider>,
+      renderOpts
+    );
     expect(container).toMatchSnapshot();
   });
 
   it("button will appear disabled if template is empty", () => {
-    const props = {
-      disabled: true,
+    const newRenderOps = {
+      ...renderOpts,
+      state: {
+        templates: [],
+      },
     };
     const { getByRole, queryByText } = render(
-      <StructuresUpdateOption {...props} />,
+      <SearchContext.Provider value={newRenderOps}>
+        <StructuresUpdateOption />
+      </SearchContext.Provider>,
       renderOpts
     );
     expect(getByRole("option")).toHaveAttribute("aria-disabled");

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

@@ -1,10 +1,10 @@
 import _ from "lodash/fp";
 import React from "react";
-//import { shallow } from "enzyme";
 import { render } from "@truedat/test/render";
 import { within } from "@testing-library/react";
-
-import { StructuresView } from "../StructuresView";
+import SearchContext from "@truedat/core/search/SearchContext";
+import StructuresView from "../StructuresView";
+import { StructuresViewContent } from "../StructuresView";
 import en from "../../messages/en";
 
 const mockHistory = {
@@ -17,16 +17,76 @@ jest.mock("react-router-dom", () => ({
   useParams: () => ({ propertyPath: "metadata.database" }),
 }));
 
+jest.mock("@truedat/dd/hooks/useStructures", () => {
+  const originalModule = jest.requireActual("@truedat/dd/hooks/useStructures");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useDataStructureFilters: () => ({
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data: { data: {} },
+          }),
+      }),
+    }),
+    useDataStructureSearch: () => ({
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data: { data: [] },
+            headers: {},
+          }),
+      }),
+    }),
+  };
+});
+
 const messages = {
   en: {
     ...en,
     missingBucket: "_missing",
+    "search.placeholder": "Searching ...",
   },
 };
 
-describe("<StructuresView />", () => {
-  it("shows structures table if hasFilterAplied", () => {
-    const structures = [
+const renderOpts = {
+  messages,
+  state: {
+    systemsLoading: false,
+    filtersGroup: [],
+    templates: [
+      { scope: "dd", name: "foo" },
+      { scope: "dd", name: "bar" },
+      { name: "baz" },
+    ],
+    structureTypesLoading: false,
+    structureTypes: [
+      {
+        filters: [],
+        metadata_fields: ["type"],
+        metadata_views: [],
+        name: "API Level",
+        template: {
+          id: 36,
+          name: "Calculated Table",
+        },
+        translation: "API Level 2",
+      },
+    ],
+  },
+};
+
+const searchProps = {
+  userFiltersType: "structure",
+  loading: false,
+  allActiveFilters: {
+    template: ["API Level"],
+  },
+  filtersLoading: false,
+  searchData: {
+    data: [
       {
         id: 1,
         domain: { name: "org" },
@@ -36,16 +96,59 @@ describe("<StructuresView />", () => {
         system: "sys",
         type: "Table",
       },
-    ];
-
-    const actions = {
-      bulkUpdate: {},
-    };
+    ],
+  },
+  allFilters: {
+    "metadata.database": {
+      buckets: [
+        {
+          doc_count: 11234,
+          key: "_missing",
+        },
+        {
+          doc_count: 2345,
+          key: "database_1",
+        },
+      ],
+      values: ["_missing", "database_1"],
+    },
+  },
+};
 
-    const props = { structures, actions, hasFilterApplied: true };
-    const { getByRole } = render(<StructuresView {...props} />);
+describe("<StructuresView />", () => {
+  it("shows header if is embedded", () => {
+    const props = { embedded: false };
+    const { getByRole } = render(
+      <SearchContext.Provider value={searchProps}>
+        <StructuresView {...props} />
+      </SearchContext.Provider>,
+      renderOpts
+    );
 
     expect(getByRole("heading")).toBeInTheDocument();
+  });
+
+  it("not shows header if is not embedded", () => {
+    const props = { embedded: true };
+    const { queryByText } = render(
+      <SearchContext.Provider value={searchProps}>
+        <StructuresView {...props} />
+      </SearchContext.Provider>,
+      renderOpts
+    );
+    expect(queryByText("Data Catalog")).not.toBeInTheDocument();
+  });
+});
+
+describe("<StructuresViewContent />", () => {
+  it("shows structures table if hasFilterAplied", () => {
+    const props = {};
+    const { getByRole } = render(
+      <SearchContext.Provider value={searchProps}>
+        <StructuresViewContent {...props} />
+      </SearchContext.Provider>,
+      renderOpts
+    );
 
     const table = getByRole("table");
     const rows = within(table).getAllByRole("row");
@@ -61,26 +164,18 @@ describe("<StructuresView />", () => {
   });
 
   it("shows CatalogCustomViewCards if customView", () => {
-    const structureFilters = {
-      "metadata.database": {
-        buckets: [
-          {
-            doc_count: 11234,
-            key: "_missing",
-          },
-          {
-            doc_count: 2345,
-            key: "database_1",
-          },
-        ],
-        values: ["_missing", "database_1"],
-      },
+    const newSearchProps = {
+      ...searchProps,
+      toggleDateFilter: false,
+      allActiveFilters: {},
     };
 
-    const { getByRole } = render(<StructuresView customView />, {
-      state: { structureFilters },
-      messages,
-    });
+    const { getByRole } = render(
+      <SearchContext.Provider value={newSearchProps}>
+        <StructuresViewContent customView />
+      </SearchContext.Provider>,
+      renderOpts
+    );
 
     const missingCard = getByRole("link", { name: /_missing/ });
     expect(missingCard).toBeInTheDocument();