@truedat/bg 7.5.8 → 7.5.10

package/src/concepts/relations/components/ConceptRelationsSummary.js

@@ -1,7 +1,6 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { compose } from "redux";
 import { connect } from "react-redux";
 import { Header, List, Segment } from "semantic-ui-react";
@@ -22,30 +21,28 @@ const Bold = ({ children }) => (
   <div className="concept-summary-bold">{children}</div>
 );
 
-const Tag = ({ tag }) => {
-  return (
-    <List.Item className="concept-summary">
-      <Bold>{tag.i18n}</Bold>
-      <List.List>
-        {tag.relations.map((relation, index) =>
-          relation.relationSide === "source" ? (
-            <Relation
-              key={`${relation.relationSide}.${relation.id}.${index}`}
-              id={getLinkId(relation, relation.relationSide)}
-              name={relation.context.target.name}
-            />
-          ) : (
-            <Relation
-              key={`${relation.relationSide}.${relation.id}.${index}`}
-              id={getLinkId(relation, relation.relationSide)}
-              name={relation.context.source.name}
-            />
-          )
-        )}
-      </List.List>
-    </List.Item>
-  );
-};
+const Tag = ({ tag }) => (
+  <List.Item className="concept-summary">
+    <Bold>{tag.i18n}</Bold>
+    <List.List>
+      {tag.relations.map((relation, index) =>
+        relation.relationSide === "source" ? (
+          <Relation
+            key={`${relation.relationSide}.${relation.id}.${index}`}
+            id={getLinkId(relation, relation.relationSide)}
+            name={relation.context.target.name}
+          />
+        ) : (
+          <Relation
+            key={`${relation.relationSide}.${relation.id}.${index}`}
+            id={getLinkId(relation, relation.relationSide)}
+            name={relation.context.source.name}
+          />
+        )
+      )}
+    </List.List>
+  </List.Item>
+);
 
 const Relation = ({ id, name }) => (
   <List.Item
@@ -72,9 +69,9 @@ export const ConceptRelationsSummary = ({ conceptRelations }) =>
         <FormattedMessage id="concepts.relations" />
       </Header>
       <List>
-        {conceptRelations.map((tag) => {
-          return <Tag key={`${tag.relationSide}.${tag.id}`} tag={tag} />;
-        })}
+        {conceptRelations.map((tag) => (
+          <Tag key={`${tag.relationSide}.${tag.id}`} tag={tag} />
+        ))}
       </List>
     </Segment>
   );

package/src/concepts/relations/components/ConceptSelector.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import {
@@ -58,12 +57,10 @@ const ConceptSelectorRow = ({
       <Table.Cell
         content={
           <Label color={mapStatusColor[status]}>
-            {(
-              <FormattedMessage
-                id={`concepts.status.${status}`}
-                defaultMessage={status}
-              />
-            ) || <Icon name="ellipsis vertical" color="grey" />}
+            <FormattedMessage
+              id={`concepts.status.${status}`}
+              defaultMessage={status}
+            />
           </Label>
         }
       />

package/src/concepts/relations/components/ConceptStructureLinks.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
+import { lazy } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Segment, Grid } from "semantic-ui-react";
@@ -17,7 +17,7 @@ import { getConceptLinks } from "../selectors";
 import { useConceptContext } from "../../components/ConceptContext";
 import ConceptLinksActions from "./ConceptLinksActions";
 
-const LinksPane = React.lazy(() => import("@truedat/lm/components/LinksPane"));
+const LinksPane = lazy(() => import("@truedat/lm/components/LinksPane"));
 
 const ConceptStructureLinksSegment = ({ groups, visible }) => {
   const { conceptContext, setConceptContextProperty } = useConceptContext();

package/src/concepts/relations/components/__tests__/ConceptImplementationLinks.spec.js

@@ -1,12 +1,10 @@
 import _ from "lodash/fp";
-import React, { Suspense } from "react";
-import { render } from "@truedat/test/render";
-import en from "../../../../messages/en";
+import { render, waitForLoad } from "@truedat/test/render";
 import { ConceptImplementationLinks } from "../ConceptImplementationLinks";
 import { getBusinessConceptsLinksToImplementationsColumns } from "../../selectors";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useParams: () => ({
     business_concept_id: "6483",
     id: "12345",
@@ -15,27 +13,9 @@ jest.mock("react-router-dom", () => ({
 
 const columns = getBusinessConceptsLinksToImplementationsColumns({});
 
-const messages = {
-  en: {
-    ...en,
-    "ruleImplementations.props.goal": "Goal",
-    "ruleImplementations.props.minimum": "Minimum",
-    "ruleImplementations.props.result_type": "Result Type",
-    "ruleImplementations.props.last_execution_at": "Last execution",
-    "ruleImplementations.props.status": "Status",
-    "ruleImplementations.props.rule": "Rule",
-    "ruleImplementations.props.implementation_key": "Implementation",
-    "ruleImplementations.props.result": "Result",
-    "ruleImplementations.props.updated_at": "Updated At",
-    "ruleImplementations.props.inserted_at": "Inserted At",
-    "implementations.actions.create": "Create Implementation",
-    "implementations.actions.create_raw": "Create Raw Implementation",
-    "concepts.implementations.empty": "This concept has no implementations",
-  },
-};
 
 describe("<ConceptImplementationLinks />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = {
       groups: [
         ["group", [{ implementation_key: "foo", id: "1" }]],
@@ -43,18 +23,12 @@ describe("<ConceptImplementationLinks />", () => {
       ],
       columns,
     };
-    const renderOpts = { messages };
-    const { container } = render(
-      <Suspense fallback={null}>
-        <ConceptImplementationLinks {...props} />
-      </Suspense>,
-      renderOpts
-    );
-    expect(container).toMatchSnapshot();
+    const rendered = render(<ConceptImplementationLinks {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("show create implementations buttons when have permissions", () => {
-    const renderOpts = { messages };
+  it("show create implementations buttons when have permissions", async () => {
     const props = {
       groups: [
         ["group", [{ implementation_key: "foo", id: "1" }]],
@@ -65,17 +39,12 @@ describe("<ConceptImplementationLinks />", () => {
       createLinkImplementation: { method: "POST" },
       createImplementation: { method: "POST" },
     };
-    const { container } = render(
-      <Suspense fallback={null}>
-        <ConceptImplementationLinks {...props} />
-      </Suspense>,
-      renderOpts
-    );
-    expect(container).toMatchSnapshot();
+    const rendered = render(<ConceptImplementationLinks {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("show implementations with groups", () => {
-    const renderOpts = { messages };
+  it("show implementations with groups", async () => {
     const props = {
       groups: [
         ["￮", [{ implementation_key: "foo", id: "1" }]],
@@ -86,17 +55,12 @@ describe("<ConceptImplementationLinks />", () => {
       createLinkImplementation: { method: "POST" },
       createImplementation: { method: "POST" },
     };
-    const { container } = render(
-      <Suspense fallback={null}>
-        <ConceptImplementationLinks {...props} />
-      </Suspense>,
-      renderOpts
-    );
-    expect(container).toMatchSnapshot();
+    const rendered = render(<ConceptImplementationLinks {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("when don't have any implementation", () => {
-    const renderOpts = { messages };
+  it("when don't have any implementation", async () => {
     const props = {
       groups: [["group", []]],
       createRawImplementation: { method: "POST" },
@@ -104,12 +68,8 @@ describe("<ConceptImplementationLinks />", () => {
       createImplementation: { method: "POST" },
       columns,
     };
-    const { container } = render(
-      <Suspense fallback={null}>
-        <ConceptImplementationLinks {...props} />
-      </Suspense>,
-      renderOpts
-    );
-    expect(container).toMatchSnapshot();
+    const rendered = render(<ConceptImplementationLinks {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/concepts/relations/components/__tests__/ConceptLinksActions.spec.js

@@ -1,6 +1,5 @@
-import React from "react";
-import { render } from "@truedat/test/render";
 import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { render, waitForLoad } from "@truedat/test/render";
 import ConceptLinksActions from "../ConceptLinksActions";
 
 jest.mock("@truedat/core/search/SearchContext", () => {
@@ -28,7 +27,7 @@ const renderOpts = {
 };
 
 describe("<ConceptLinksActions />", () => {
-  it("matches the latest snapshot with Grant Requests permission", () => {
+  it("matches the latest snapshot with Grant Requests permission", async () => {
     useSearchContext.mockReturnValue({ searchData: [] });
 
     const grRenderOpts = {
@@ -44,22 +43,22 @@ describe("<ConceptLinksActions />", () => {
       },
     };
 
-    const { container } = render(
+    const rendered = render(
       <ConceptLinksActions onGrantViewChange={jest.fn()} />,
       grRenderOpts
     );
-
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot without Grant Requests permission", () => {
+  it("matches the latest snapshot without Grant Requests permission", async () => {
     useSearchContext.mockReturnValue({ searchData: [] });
 
-    const { container } = render(
+    const rendered = render(
       <ConceptLinksActions onGrantViewChange={jest.fn()} />,
       renderOpts
     );
-
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/concepts/relations/components/__tests__/ConceptRelationActions.spec.js

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

package/src/concepts/relations/components/__tests__/ConceptRelationForm.spec.js

@@ -1,10 +1,8 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import { linkTo } from "@truedat/core/routes";
 import { ConceptRelationForm } from "../ConceptRelationForm";
-import en from "../../../../messages/en";
 
 const linkConcept = jest.fn();
 
@@ -71,6 +69,8 @@ jest.mock("@truedat/bg/concepts/hooks/useConcepts", () => {
   };
 });
 
+jest.mock("@truedat/core/hooks/useUserFilters");
+
 const concept = {
   id: 1,
   business_concept_id: 543,
@@ -89,70 +89,58 @@ const props = {
 };
 
 const renderOpts = {
-  messages: {
-    en: {
-      ...en,
-      "actions.create": "create",
-      "actions.cancel": "cancel",
-      "search.save_filters": "save filters",
-      "search.clear_filters": "clear filters",
-      "search.applied_filters": "applied filters",
-      "relations.relationType": "relation type",
-      "search.placeholder": "Search concepts...",
-    },
-  },
   state: {
     tagOptions,
   },
-  fallback: "lazy",
 };
 
 describe("<ConceptRelationForm />", () => {
   it("matches the latest snapshot", async () => {
-    const { container, findByText } = render(
-      <ConceptRelationForm {...props} />,
-      renderOpts
-    );
-    userEvent.click(await findByText(/some/));
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<ConceptRelationForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    await user.click(await rendered.findByText(/some/i));
     await waitFor(() => {
-      expect(container.querySelector(".loading")).toBeNull();
+      expect(rendered.container.querySelector(".loading")).toBeNull();
     });
-    await findByText(/foo concept/);
-    expect(container).toMatchSnapshot();
+    await rendered.findByText(/foo concept/i);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("handles tag and concept selection", async () => {
-    const { findByText, findByRole, getByRole } = render(
-      <ConceptRelationForm {...props} />,
-      renderOpts
-    );
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<ConceptRelationForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
+
     await waitFor(() => {
-      expect(getByRole("button", { name: "create" })).toBeDisabled();
+      expect(rendered.getByRole("button", { name: /create/i })).toBeDisabled();
     });
 
-    userEvent.click(await findByText("bar concept"));
-
-    userEvent.click(await findByRole("option", { name: "relates_to" }));
+    await user.click(await rendered.findByText(/bar concept/i));
+    await user.click(
+      await rendered.findByRole("option", { name: /relates_to/i })
+    );
 
     await waitFor(() => {
-      expect(getByRole("button", { name: "create" })).toBeEnabled();
+      expect(rendered.getByRole("button", { name: /create/i })).toBeEnabled();
     });
   });
 
   it("submits the selected relation", async () => {
-    const { findByText, findByRole, getByRole } = render(
-      <ConceptRelationForm {...props} />,
-      renderOpts
-    );
-    userEvent.click(await findByText("bar concept"));
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<ConceptRelationForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
 
-    userEvent.click(await findByRole("option", { name: "relates_to" }));
+    await user.click(await rendered.findByText(/bar concept/i));
+    await user.click(
+      await rendered.findByRole("option", { name: /relates_to/i })
+    );
 
     await waitFor(() => {
-      expect(getByRole("button", { name: "create" })).toBeEnabled();
+      expect(rendered.getByRole("button", { name: /create/i })).toBeEnabled();
     });
 
-    userEvent.click(await getByRole("button", { name: "create" }));
+    await user.click(rendered.getByRole("button", { name: /create/i }));
 
     const expectedRelation = {
       redirectUrl: linkTo.CONCEPT_LINKS_CONCEPTS(concept),

package/src/concepts/relations/components/__tests__/ConceptRelationRow.spec.js

@@ -1,14 +1,9 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { ConceptRelationRow } from "../ConceptRelationRow";
 
-const mockHistory = {
-  push: jest.fn()
-};
-
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useHistory: () => mockHistory
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useNavigate: () => jest.fn(),
 }));
 
 describe("<ConceptRelationRow />", () => {
@@ -17,24 +12,24 @@ describe("<ConceptRelationRow />", () => {
   const canDeleteConceptRelation = true;
   const relationContext = {
     target: { id: 1, name: "target" },
-    source: { id: 2, name: "source" }
+    source: { id: 2, name: "source" },
   };
   const tags = [];
 
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const deleteConceptRelation = jest.fn();
-    const history = { push: jest.fn() };
 
     const props = {
       canDeleteConceptRelation,
       concept_id,
       deleteConceptRelation,
-      history,
       id,
       relationContext,
-      tags
+      tags,
     };
-    const wrapper = shallow(<ConceptRelationRow {...props} />);
-    expect(wrapper).toMatchSnapshot();
+
+    const rendered = render(<ConceptRelationRow {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/concepts/relations/components/__tests__/ConceptRelations.spec.js

@@ -1,26 +1,23 @@
-import React from "react";
-import { intl } from "@truedat/test/intl-stub";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { ConceptRelations } from "../ConceptRelations";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useLocation: () => ({ pathname: "/bar" }),
-  useHistory: () => ({ push: jest.fn() })
+  useNavigate: () => jest.fn(),
 }));
 
 describe("<ConceptRelations />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = {
       concept: { business_concept_id: 1 },
       conceptRelationsLoading: false,
-      conceptRelations: []
+      conceptRelations: [],
+      relationsGraph: {},
     };
-    const wrapper = shallow(<ConceptRelations {...props} />);
-    expect(wrapper).toMatchSnapshot();
+
+    const rendered = render(<ConceptRelations {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/concepts/relations/components/__tests__/ConceptRelationsRoutes.spec.js

@@ -1,13 +1,113 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { ConceptRelationsRoutes } from "../ConceptRelationsRoutes";
+import { render, waitForLoad } from "@truedat/test/render";
+import ConceptRelationsRoutes from "../ConceptRelationsRoutes";
+import {
+  CONCEPT_LINKS_CONCEPTS,
+  CONCEPT_LINKS_CONCEPTS_NEW,
+  CONCEPT_LINKS_STRUCTURES,
+  CONCEPT_LINKS_STRUCTURES_NEW,
+  CONCEPT_LINKS_IMPLEMENTATIONS,
+} from "@truedat/core/routes";
+
+// Mock child components
+jest.mock("@truedat/lm/components/ConceptStructureLinkForm", () => () => (
+  <div>ConceptStructureLinkForm</div>
+));
+
+jest.mock("@truedat/dd/components/StructureTypesLoader", () => () => (
+  <div>StructureTypesLoader</div>
+));
+
+jest.mock("../ConceptStructureLinks", () => () => (
+  <div>ConceptStructureLinks</div>
+));
+
+jest.mock("../ConceptRelations", () => () => <div>ConceptRelations</div>);
+
+jest.mock("../ConceptRelationForm", () => () => <div>ConceptRelationForm</div>);
+
+jest.mock("../ConceptImplementationLinks", () => () => (
+  <div>ConceptImplementationLinks</div>
+));
 
 describe("<ConceptRelationsRoutes />", () => {
-  it("matches the latest snapshot", () => {
-    const props = {
-      conceptLoaded: true
-    };
-    const wrapper = shallow(<ConceptRelationsRoutes {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  const renderOpts = {
+    state: {
+      concept: {
+        business_concept_id: 1,
+        name: "Test Concept",
+        id: "1",
+        version: "1.0",
+      },
+    },
+  };
+
+  it("renders correctly with default route", async () => {
+    const rendered = render(<ConceptRelationsRoutes />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with structures route", async () => {
+    const rendered = render(<ConceptRelationsRoutes />, {
+      ...renderOpts,
+      routes: [CONCEPT_LINKS_STRUCTURES],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with new structure link route", async () => {
+    const rendered = render(<ConceptRelationsRoutes />, {
+      ...renderOpts,
+      routes: [CONCEPT_LINKS_STRUCTURES_NEW],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with concepts route", async () => {
+    const rendered = render(<ConceptRelationsRoutes />, {
+      ...renderOpts,
+      routes: [CONCEPT_LINKS_CONCEPTS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with new concept relation route", async () => {
+    const rendered = render(<ConceptRelationsRoutes />, {
+      ...renderOpts,
+      routes: [CONCEPT_LINKS_CONCEPTS_NEW],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with implementations route", async () => {
+    const rendered = render(<ConceptRelationsRoutes />, {
+      ...renderOpts,
+      routes: [CONCEPT_LINKS_IMPLEMENTATIONS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders nothing when concept is not loaded", async () => {
+    const rendered = render(<ConceptRelationsRoutes />, {
+      ...renderOpts,
+      state: { concept: {} },
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders nothing when relations are loading", async () => {
+    const rendered = render(<ConceptRelationsRoutes />, {
+      ...renderOpts,
+      state: { ...renderOpts.state, relationsLoading: true },
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });