@truedat/bg 4.44.4 → 4.44.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.44.5] 2022-05-20
+
+### Changed
+
+- [TD-4230] Refactored `ConceptForm` to use `SelectableDynamicForm`
+
 ## [4.44.4] 2022-05-19
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "4.44.4",
+  "version": "4.44.5",
   "description": "Truedat Web Business Glossary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -22,20 +22,20 @@
     "eslint:fix": "eslint --fix src/**"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.8",
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.0",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.17.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.14.5",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.0",
+    "@babel/preset-env": "^7.18.0",
+    "@babel/preset-react": "^7.17.12",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.44.4",
-    "babel-jest": "^27.0.6",
+    "@truedat/test": "4.44.5",
+    "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-react-intl": "^5.1.18",
@@ -43,7 +43,8 @@
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.0.6",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "redux-saga-test-plan": "^4.0.4",
@@ -51,6 +52,8 @@
     "semantic-ui-react": "^2.0.3"
   },
   "jest": {
+    "maxWorkers": "50%",
+    "testTimeout": 10000,
     "moduleDirectories": [
       "<rootDir>/src",
       "../../node_modules"
@@ -83,15 +86,15 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.44.4",
-    "@truedat/df": "4.44.4",
+    "@truedat/core": "4.44.5",
+    "@truedat/df": "4.44.5",
     "file-saver": "^2.0.5",
     "moment": "^2.24.0",
     "path-to-regexp": "^1.7.0",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react-hook-form": "^7.30.0",
     "react-intl": "^5.20.10",
-    "react-moment": "^0.9.7",
+    "react-moment": "^1.1.2",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "redux": "^4.1.1",
@@ -104,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "36fb183e1d22181e6a15b3bac2c01b39214eacdb"
+  "gitHead": "5a339468198c803592b285eddd0dd0c0b0eced93"
 }

package/src/concepts/components/ConceptFiltersDefault.js

@@ -1,13 +1,9 @@
-import React from "react";
 import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
+import { AvailableFilters } from "@truedat/core/components";
 import { addConceptFilter, resetConceptFilters } from "../routines";
 import { getConceptAvailableFilters } from "../selectors";
 
-const AvailableFilters = React.lazy(() =>
-  import("@truedat/core/components/AvailableFilters")
-);
-
 const mapStateToProps = (state) => ({
   filters: getConceptAvailableFilters(state),
   disabled: state.conceptFiltersLoading,

package/src/concepts/components/ConceptFiltersPublished.js

@@ -1,14 +1,10 @@
 import _ from "lodash/fp";
-import React from "react";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
+import { AvailableFilters } from "@truedat/core/components";
 import { addConceptFilter, resetConceptFilters } from "../routines";
 import { getConceptAvailableFilters } from "../selectors";
 
-const AvailableFilters = React.lazy(() =>
-  import("@truedat/core/components/AvailableFilters")
-);
-
 const mapStateToProps = (state) => ({
   filters: _.flow(getConceptAvailableFilters, _.without(["status"]))(state),
   disabled: state.conceptFiltersLoading,

package/src/concepts/components/ConceptForm.js

@@ -13,14 +13,12 @@ import {
 import { compose } from "redux";
 import { connect } from "react-redux";
 import { injectIntl, FormattedMessage } from "react-intl";
-import { HistoryBackButton, TemplateSelector } from "@truedat/core/components";
-import { selectDomain } from "@truedat/df/routines";
-import { applyTemplate } from "@truedat/df/utils";
+import { HistoryBackButton } from "@truedat/core/components";
 import { conceptAction } from "../routines";
 import DomainDropdownSelector from "../../taxonomy/components/DomainDropdownSelector";
 
-const DynamicForm = React.lazy(() =>
-  import("@truedat/df/components/DynamicForm")
+const SelectableDynamicForm = React.lazy(() =>
+  import("@truedat/df/components/SelectableDynamicForm")
 );
 
 const RichTextEditor = React.lazy(() =>
@@ -35,8 +33,6 @@ const initialState = {
   name: "",
   description: {},
   content: {},
-  templatesLoading: true,
-  template: null,
 };
 
 const isNonEmptyString = _.flow(_.trim, _.negate(_.isEmpty));
@@ -44,6 +40,7 @@ const isValid = _.conforms({
   name: isNonEmptyString,
   domain_id: _.isFinite,
   description: _.negate(_.isEmpty),
+  type: isNonEmptyString,
 });
 
 export class ConceptForm extends React.Component {
@@ -52,41 +49,12 @@ export class ConceptForm extends React.Component {
     conceptAction: PropTypes.func,
     conceptActionLoading: PropTypes.string,
     intl: PropTypes.object,
-    selectDomain: PropTypes.func,
   };
 
   state = initialState;
 
-  handleTemplatesLoaded = ({ templates = [] } = {}) => {
-    const { type: name, content, domain_id } = this.state;
-    const template = name
-      ? _.find(_.propEq("name", name))(templates)
-      : _.size(templates) == 1
-      ? templates[0]
-      : null;
-    this.setState({
-      template,
-      templatesLoading: false,
-      type: template?.name || null,
-      content: template ? applyTemplate(template)(content, domain_id) : {},
-    });
-  };
-
-  handleTemplateSelected = (e, { template }) => {
-    const { content, domain_id } = this.state;
-    this.setState({
-      template,
-      type: template?.name || null,
-      content: template ? applyTemplate(template)(content, domain_id) : {},
-    });
-  };
-
-  handleDomainSelected = (e, { value }) => {
+  handleDomainSelected = (_e, { value }) => {
     const domain_id = value;
-
-    const { selectDomain } = this.props;
-    selectDomain({ id: domain_id });
-
     this.setState({ domain_id });
   };
 
@@ -102,29 +70,24 @@ export class ConceptForm extends React.Component {
     }
   };
 
-  handleContentChange = (content) => {
-    this.setState({ content });
-  };
+  handleContentChange = ({ content }) => this.setState({ content });
 
   isInvalid = () => _.negate(isValid)(this.state);
 
   handleSubmit = (e) => {
     e.preventDefault();
     const { action, conceptAction } = this.props;
-    const businessConceptVersion = _.pick([
+    const business_concept_version = _.pick([
       "domain_id",
       "type",
+      "content",
       ...staticFields,
     ])(this.state);
-    const { template, content, domain_id } = this.state;
 
     conceptAction({
       action: actionKey,
       ...action,
-      business_concept_version: {
-        ...businessConceptVersion,
-        content: applyTemplate(template)(content, domain_id),
-      },
+      business_concept_version,
     });
   };
 
@@ -135,12 +98,10 @@ export class ConceptForm extends React.Component {
       intl: { formatMessage },
     } = this.props;
 
-    const { name, description, content, template, templatesLoading } =
-      this.state;
+    const { name, description, content, type, domain_id } = this.state;
 
     const loading =
-      templatesLoading ||
-      (action && action.href && conceptActionLoading === action.href);
+      action && action.href && conceptActionLoading === action.href;
 
     return (
       <Container as={Segment} text>
@@ -157,16 +118,9 @@ export class ConceptForm extends React.Component {
           />
           <DomainDropdownSelector
             name="domain"
-            invalid={!_.isFinite(this.state.domain_id)}
+            invalid={!_.isFinite(domain_id)}
             onChange={this.handleDomainSelected}
           />
-          <TemplateSelector
-            scope="bg"
-            selectedValue={template?.id}
-            onLoad={this.handleTemplatesLoaded}
-            onChange={this.handleTemplateSelected}
-            required
-          />
           <Form.Field required>
             <label>
               <FormattedMessage id="concepts.props.name" />
@@ -193,21 +147,23 @@ export class ConceptForm extends React.Component {
               onChange={this.handleEditorChange}
             />
           </Form.Field>
-          {template?.id ? (
-            <>
+          <SelectableDynamicForm
+            scope="bg"
+            domainIds={_.isNil(domain_id) ? null : [domain_id]}
+            required
+            header={
               <Header
                 as="h3"
                 content={formatMessage({
                   id: "concepts.form.aditional_fields",
                 })}
               />
-              <DynamicForm
-                onChange={this.handleContentChange}
-                content={content}
-                template={template}
-              />
-            </>
-          ) : null}
+            }
+            content={content}
+            name={type}
+            onChange={this.handleContentChange}
+            onNameChange={(type) => this.setState({ type })}
+          />
           <div className="actions">
             <HistoryBackButton
               content={formatMessage({ id: "actions.cancel" })}
@@ -232,5 +188,5 @@ const mapStateToProps = ({ conceptActionLoading, conceptsActions }) => ({
 
 export default compose(
   injectIntl,
-  connect(mapStateToProps, { conceptAction, selectDomain })
+  connect(mapStateToProps, { conceptAction })
 )(ConceptForm);

package/src/concepts/components/__tests__/ConceptFilters.spec.js

@@ -1,10 +1,16 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { ConceptFilters } from "../ConceptFilters";
+import { render } from "@truedat/test/render";
+import ConceptFilters from "../ConceptFilters";
+
+const state = {
+  conceptFilters: { domain_id: [1, 2], confidential: ["yes", "no"] },
+  conceptActiveFilters: { domain_id: [1] },
+};
+const renderOpts = { state };
 
 describe("<ConceptFilters />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<ConceptFilters />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<ConceptFilters />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/concepts/components/__tests__/ConceptForm.spec.js

@@ -1,135 +1,68 @@
-import React, { Suspense } from "react";
+import React from "react";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { TEMPLATES_QUERY } from "@truedat/core/api/queries";
 import { render } from "@truedat/test/render";
+import { multipleTemplatesMock, singleTemplateMock } from "@truedat/test/mocks";
 import ConceptForm from "../ConceptForm";
 
-const template1 = {
-  id: "1",
-  name: "template1",
-  label: "template1",
-  scope: "remediation",
-  content: [
-    {
-      name: "g1",
-      fields: [{ name: "field1", label: "field1", placeholder: "field1" }],
-    },
-  ],
+const state = {
+  conceptActions: { create: {} },
+  conceptActionLoading: "",
+  domains: [{ id: 1, name: "domain1" }],
 };
-const template2 = {
-  id: "2",
-  name: "template2",
-  label: "template2",
-  scope: "remediation",
-  content: {},
-};
-const makeRenderOpts = (templates) => ({
-  mocks: [
-    {
-      request: { query: TEMPLATES_QUERY, variables: { scope: "bg" } },
-      result: { data: { templates } },
-    },
-  ],
-  state: {
-    conceptActions: { create: {} },
-    conceptActionLoading: "",
-    domains: [{ id: 1, name: "domain1" }],
-  },
-});
+const variables = { scope: "bg", domainIds: [1] };
 
 describe("<ConceptForm />", () => {
   describe("with multiple templates", () => {
-    const templates = [template1, template2];
-    const renderOpts = makeRenderOpts(templates);
+    const renderOpts = {
+      mocks: [multipleTemplatesMock(variables)],
+      state,
+      fallback: "lazy",
+    };
 
     it("matches the latest snapshot", async () => {
-      const { container, queryByText } = render(
-        <Suspense fallback="loading...">
-          <ConceptForm />
-        </Suspense>,
-        renderOpts
+      const { container, queryByText } = render(<ConceptForm />, renderOpts);
+      await waitFor(() =>
+        expect(queryByText(/loading/i)).not.toBeInTheDocument()
       );
-      await waitFor(() => {
-        expect(queryByText(/loading/i)).not.toBeInTheDocument();
-      });
+      await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
       expect(container).toMatchSnapshot();
     });
 
-    it("contains one <TemplateSelector />", async () => {
-      const { queryByText } = render(
-        <Suspense fallback="loading...">
-          <ConceptForm />
-        </Suspense>,
-        renderOpts
-      );
-      await waitFor(() => {
-        expect(queryByText("template1")).toBeInTheDocument();
-      });
-    });
-
     it("renders dynamic fields when template is selected", async () => {
       const { findByText, getByText, queryByText } = render(
-        <Suspense fallback="loading...">
-          <ConceptForm />
-        </Suspense>,
+        <ConceptForm />,
         renderOpts
       );
-      await waitFor(() => {
-        expect(queryByText(/loading/i)).not.toBeInTheDocument();
-      });
       userEvent.click(await findByText("template1"));
-      await waitFor(() => {
-        expect(getByText("field1")).toBeInTheDocument();
-      });
+      await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+      expect(getByText("field1")).toBeInTheDocument();
     });
   });
 
   describe("with a single template", () => {
-    const templates = [template1];
-    const renderOpts = makeRenderOpts(templates);
+    const renderOpts = {
+      mocks: [singleTemplateMock(variables)],
+      state,
+      fallback: "lazy",
+    };
 
     it("matches the latest snapshot", async () => {
-      const { container, queryByText } = render(
-        <Suspense fallback="loading...">
-          <ConceptForm />
-        </Suspense>,
-        renderOpts
+      const { container, queryByText } = render(<ConceptForm />, renderOpts);
+      await waitFor(() =>
+        expect(queryByText(/loading/i)).not.toBeInTheDocument()
       );
-      await waitFor(() => {
-        expect(queryByText(/loading/i)).not.toBeInTheDocument();
-      });
+      await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
       expect(container).toMatchSnapshot();
     });
 
     it("contains no <TemplateSelector />", async () => {
-      const { queryByText } = render(
-        <Suspense fallback="loading...">
-          <ConceptForm />
-        </Suspense>,
-        renderOpts
+      const { queryByText } = render(<ConceptForm />, renderOpts);
+      await waitFor(() =>
+        expect(queryByText(/loading/i)).not.toBeInTheDocument()
       );
-      await waitFor(() => {
-        expect(queryByText(/loading/i)).not.toBeInTheDocument();
-      });
+      await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
       expect(queryByText("template1")).not.toBeInTheDocument();
     });
   });
-
-  describe("domain selection", () => {
-    const renderOpts = makeRenderOpts([template1, template2]);
-
-    it("dispatches selectDomain when domain is selected", async () => {
-      const { queryByText, getByRole } = render(
-        <Suspense fallback="loading...">
-          <ConceptForm />
-        </Suspense>,
-        renderOpts
-      );
-      await waitFor(() => {
-        expect(queryByText(/loading/i)).not.toBeInTheDocument();
-      });
-      userEvent.click(getByRole("option", { name: "domain1" }));
-    });
-  });
 });

package/src/concepts/components/__tests__/ConceptsLabelResults.spec.js

@@ -1,12 +1,12 @@
 import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
 import { ConceptsLabelResults } from "../ConceptsLabelResults";
 
 describe("<ConceptsLabelResults />", () => {
   const props = { conceptCount: 22 };
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallowWithIntl(<ConceptsLabelResults {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<ConceptsLabelResults {...props} />);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/concepts/components/__tests__/__snapshots__/ConceptFilters.spec.js.snap

@@ -1,14 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ConceptFilters /> matches the latest snapshot 1`] = `
-<Switch>
-  <Route
-    exact={true}
-    path="/concepts"
-    render={[Function]}
-  />
-  <Route
-    render={[Function]}
-  />
-</Switch>
+<div>
+  <div
+    aria-expanded="false"
+    class="ui button floating labeled scrolling dropdown icon"
+    role="listbox"
+    tabindex="0"
+  >
+    <div
+      aria-atomic="true"
+      aria-live="polite"
+      class="divider text"
+      role="alert"
+    >
+      Filters
+    </div>
+    <i
+      aria-hidden="true"
+      class="filter icon"
+    />
+    <div
+      class="menu transition"
+    >
+      <div
+        class="item"
+        role="option"
+      >
+        <em>
+          (reset all filters)
+        </em>
+      </div>
+      <div
+        class="item"
+        role="option"
+      >
+        <span
+          class="text"
+        >
+          confidential
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
 `;

package/src/concepts/components/__tests__/__snapshots__/ConceptForm.spec.js.snap

@@ -203,23 +203,23 @@ exports[`<ConceptForm /> with a single template matches the latest snapshot 1`]
                 autocorrect="on"
                 contenteditable="true"
                 data-gramm="false"
-                data-key="14"
+                data-key="9"
                 data-slate-editor="true"
                 role="textbox"
                 spellcheck="true"
                 style="outline: none; white-space: pre-wrap; word-wrap: break-word;"
               >
                 <div
-                  data-key="15"
+                  data-key="10"
                   data-slate-object="block"
                   style="position: relative;"
                 >
                   <span
-                    data-key="18"
+                    data-key="13"
                     data-slate-object="text"
                   >
                     <span
-                      data-offset-key="18:0"
+                      data-offset-key="13:0"
                       data-slate-leaf="true"
                     >
                       <span>
@@ -389,81 +389,6 @@ exports[`<ConceptForm /> with multiple templates matches the latest snapshot 1`]
           </div>
         </div>
       </div>
-      <div
-        class="required field"
-      >
-        <label>
-          Template
-          <div
-            class="ui left pointing label"
-          >
-            Empty required field
-          </div>
-        </label>
-        <div
-          class="field"
-        >
-          <div
-            aria-busy="false"
-            aria-expanded="false"
-            class="ui search selection dropdown"
-            name="template"
-            role="combobox"
-          >
-            <input
-              aria-autocomplete="list"
-              autocomplete="off"
-              class="search"
-              tabindex="0"
-              type="text"
-              value=""
-            />
-            <div
-              aria-atomic="true"
-              aria-live="polite"
-              class="divider default text"
-              role="alert"
-            >
-              Select a template...
-            </div>
-            <i
-              aria-hidden="true"
-              class="dropdown icon"
-            />
-            <div
-              class="menu transition"
-              role="listbox"
-            >
-              <div
-                aria-checked="false"
-                aria-selected="true"
-                class="selected item"
-                role="option"
-                style="pointer-events: all;"
-              >
-                <span
-                  class="text"
-                >
-                  template1
-                </span>
-              </div>
-              <div
-                aria-checked="false"
-                aria-selected="false"
-                class="item"
-                role="option"
-                style="pointer-events: all;"
-              >
-                <span
-                  class="text"
-                >
-                  template2
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
       <div
         class="required field"
       >
@@ -619,6 +544,81 @@ exports[`<ConceptForm /> with multiple templates matches the latest snapshot 1`]
           </div>
         </div>
       </div>
+      <div
+        class="required field"
+      >
+        <label>
+          Template
+          <div
+            class="ui left pointing label"
+          >
+            Empty required field
+          </div>
+        </label>
+        <div
+          class="field"
+        >
+          <div
+            aria-busy="false"
+            aria-expanded="false"
+            class="ui search selection dropdown"
+            name="template"
+            role="combobox"
+          >
+            <input
+              aria-autocomplete="list"
+              autocomplete="off"
+              class="search"
+              tabindex="0"
+              type="text"
+              value=""
+            />
+            <div
+              aria-atomic="true"
+              aria-live="polite"
+              class="divider default text"
+              role="alert"
+            >
+              Select a template...
+            </div>
+            <i
+              aria-hidden="true"
+              class="dropdown icon"
+            />
+            <div
+              class="menu transition"
+              role="listbox"
+            >
+              <div
+                aria-checked="false"
+                aria-selected="true"
+                class="selected item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <span
+                  class="text"
+                >
+                  template1
+                </span>
+              </div>
+              <div
+                aria-checked="false"
+                aria-selected="false"
+                class="item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <span
+                  class="text"
+                >
+                  template2
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div
         class="actions"
       >

package/src/concepts/components/__tests__/__snapshots__/ConceptsLabelResults.spec.js.snap

@@ -1,16 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ConceptsLabelResults /> matches the latest snapshot 1`] = `
-<Label
-  className="concepts-label-results"
->
-  <MemoizedFormattedMessage
-    id="concepts.retrieved.results"
-    values={
-      Object {
-        "count": 22,
-      }
-    }
-  />
-</Label>
+<div>
+  <div
+    class="ui label concepts-label-results"
+  >
+    22 concepts found
+  </div>
+</div>
 `;

package/src/taxonomy/components/__tests__/DomainActions.spec.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
 import { DomainActions } from "../DomainActions";
 
 describe("<DomainActions />", () => {
@@ -10,7 +10,7 @@ describe("<DomainActions />", () => {
   const props = { domain, domainActions };
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallowWithIntl(<DomainActions {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<DomainActions {...props} />);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/taxonomy/components/__tests__/DomainCrumbs.spec.js

@@ -1,17 +1,17 @@
 import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
 import { DomainCrumbs } from "../DomainCrumbs";
 
 describe("<DomainCrumbs />", () => {
   const parents = [
     { id: 1, name: "p1" },
-    { id: 2, text: "p2" }
+    { id: 2, text: "p2" },
   ];
   const domain = { id: 3, name: "domain" };
   const props = { parents, domain };
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallowWithIntl(<DomainCrumbs {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<DomainCrumbs {...props} />);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/taxonomy/components/__tests__/__snapshots__/DomainActions.spec.js.snap

@@ -1,14 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<DomainActions /> matches the latest snapshot 1`] = `
-<ActionButtons
-  domainActions={
-    Object {
-      "create": [MockFunction],
-      "delete": [MockFunction],
-    }
-  }
-  id={3}
-  onConfirm={[Function]}
-/>
+<div>
+  <div
+    class="actions"
+  />
+</div>
 `;

package/src/taxonomy/components/__tests__/__snapshots__/DomainCrumbs.spec.js.snap

@@ -1,80 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<DomainCrumbs /> matches the latest snapshot 1`] = `
-<Breadcrumb>
-  <BreadcrumbSection
-    active={false}
-    as={
-      Object {
-        "$$typeof": Symbol(react.forward_ref),
-        "displayName": "Link",
-        "propTypes": Object {
-          "innerRef": [Function],
-          "onClick": [Function],
-          "replace": [Function],
-          "target": [Function],
-          "to": [Function],
-        },
-        "render": [Function],
-      }
-    }
-    to="/domains"
+<div>
+  <div
+    class="ui breadcrumb"
   >
-    <MemoizedFormattedMessage
-      id="navigation.glossary.taxonomy"
+    <a
+      class="section"
+      href="/domains"
+    >
+      Taxonomy
+    </a>
+    <i
+      aria-hidden="true"
+      class="right angle icon divider"
     />
-  </BreadcrumbSection>
-  <BreadcrumbDivider
-    icon="right angle"
-  />
-  <BreadcrumbSection
-    as={
-      Object {
-        "$$typeof": Symbol(react.forward_ref),
-        "displayName": "Link",
-        "propTypes": Object {
-          "innerRef": [Function],
-          "onClick": [Function],
-          "replace": [Function],
-          "target": [Function],
-          "to": [Function],
-        },
-        "render": [Function],
-      }
-    }
-    key="0"
-    to="/domains/1"
-  >
-    p1
-  </BreadcrumbSection>
-  <BreadcrumbDivider
-    icon="right angle"
-  />
-  <BreadcrumbSection
-    as={
-      Object {
-        "$$typeof": Symbol(react.forward_ref),
-        "displayName": "Link",
-        "propTypes": Object {
-          "innerRef": [Function],
-          "onClick": [Function],
-          "replace": [Function],
-          "target": [Function],
-          "to": [Function],
-        },
-        "render": [Function],
-      }
-    }
-    key="1"
-    to="/domains/2"
-  />
-  <BreadcrumbDivider
-    icon="right angle"
-  />
-  <BreadcrumbSection
-    active={true}
-  >
-    domain
-  </BreadcrumbSection>
-</Breadcrumb>
+    <a
+      class="section"
+      href="/domains/1"
+    >
+      p1
+    </a>
+    <i
+      aria-hidden="true"
+      class="right angle icon divider"
+    />
+    <a
+      class="section"
+      href="/domains/2"
+    />
+    <i
+      aria-hidden="true"
+      class="right angle icon divider"
+    />
+    <div
+      class="active section"
+    >
+      domain
+    </div>
+  </div>
+</div>
 `;