@truedat/df 7.5.9 → 7.5.11

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

@@ -1,8 +1,7 @@
-import React from "react";
-import { waitFor, waitForElementToBeRemoved } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
-
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
+import { TEMPLATES_QUERY } from "@truedat/core/api/queries";
 import {
   errorTemplateMock,
   multipleTemplatesMock,
@@ -28,27 +27,70 @@ describe("<SelectableDynamicForm />", () => {
     };
 
     it("matches the latest snapshot", async () => {
-      const { container, queryByText } = render(
-        <SelectableDynamicForm {...props} />,
-        renderOpts
-      );
-      await waitForElementToBeRemoved(() => queryByText(/loading/i));
-      expect(container).toMatchSnapshot();
+      const rendered = render(<SelectableDynamicForm {...props} />, renderOpts);
+      await waitForLoad(rendered);
+      expect(rendered.container).toMatchSnapshot();
     });
 
-    it("matches the latest snapshot for error query", async () => {
-      const renderOpts = {
-        mocks: [errorTemplateMock(variables)],
-      };
-      const { container, queryByText } = render(
-        <SelectableDynamicForm {...props} />,
-        renderOpts
-      );
-      await waitForElementToBeRemoved(() => queryByText(/loading/i));
-      expect(container).toMatchSnapshot();
+    it("shows and hides loading states correctly", async () => {
+      const rendered = render(<SelectableDynamicForm {...props} />, renderOpts);
+
+      expect(rendered.getByText(/loading/i)).toBeInTheDocument();
+      expect(
+        rendered.container.querySelector(".ui.loader")
+      ).not.toBeInTheDocument();
+
+      await waitFor(() => {
+        expect(rendered.queryByText(/loading/i)).not.toBeInTheDocument();
+      });
+
+      await waitForLoad(rendered);
+
+      expect(rendered.queryByText(/loading/i)).not.toBeInTheDocument();
+      expect(
+        rendered.container.querySelector(".ui.loader")
+      ).not.toBeInTheDocument();
+    });
+
+    it("handles template selection loading states", async () => {
+      const rendered = render(<SelectableDynamicForm {...props} />, renderOpts);
+      await waitForLoad(rendered);
+
+      const user = userEvent.setup({ delay: null });
+      await user.click(await rendered.findByText(/template1/i));
+      expect(
+        rendered.container.querySelector(".ui.loader")
+      ).not.toBeInTheDocument();
     });
 
-    it("calls onNameChange and onChange functions when selecting template", async () => {
+    it("handles quick template selection", async () => {
+      const rendered = render(<SelectableDynamicForm {...props} />, renderOpts);
+      await waitForLoad(rendered);
+
+      const user = userEvent.setup({ delay: null });
+      const templateOption = await rendered.findByText(/template1/i);
+      await user.click(templateOption);
+      await user.click(templateOption);
+
+      expect(
+        rendered.container.querySelector(".ui.loader")
+      ).not.toBeInTheDocument();
+    });
+
+    it("shows loading states when changing templates", async () => {
+      const rendered = render(<SelectableDynamicForm {...props} />, renderOpts);
+      await waitForLoad(rendered);
+
+      const user = userEvent.setup({ delay: null });
+      await user.click(await rendered.findByText(/template1/i));
+      await user.click(await rendered.findByText(/template2/i));
+
+      expect(
+        rendered.container.querySelector(".ui.loader")
+      ).not.toBeInTheDocument();
+    });
+
+    it("calls callbacks when selecting template", async () => {
       const onChange = jest.fn();
       const onNameChange = jest.fn();
       const thisProps = {
@@ -56,42 +98,41 @@ describe("<SelectableDynamicForm />", () => {
         onChange,
         onNameChange,
       };
-      const { container, findByText, queryByText } = render(
+      const rendered = render(
         <SelectableDynamicForm {...thisProps} />,
         renderOpts
       );
+      await waitForLoad(rendered);
 
-      await waitForElementToBeRemoved(() => queryByText(/loading/i));
-      userEvent.click(await findByText("template1"));
+      const user = userEvent.setup({ delay: null });
+      await user.click(await rendered.findByText(/template1/i));
 
       expect(onChange).toHaveBeenCalledWith({ content: {}, valid: [] });
       expect(onNameChange).toHaveBeenCalledWith("template1");
+    });
 
-      const input = container.querySelector('[name="field1"]');
-      userEvent.type(input, "A");
-      expect(onChange).toHaveBeenCalledWith({
-        content: { field1: { value: "A", origin: "user" } },
-        valid: [],
-      });
+    it("matches error snapshot", async () => {
+      const errorOpts = {
+        mocks: [errorTemplateMock(variables)],
+      };
+      const rendered = render(<SelectableDynamicForm {...props} />, errorOpts);
+      await waitForLoad(rendered);
+      expect(rendered.container).toMatchSnapshot();
     });
   });
 
-  describe("with a single template", () => {
+  describe("with single template", () => {
     const renderOpts = {
       mocks: [singleTemplateMock(variables)],
     };
 
     it("matches the latest snapshot", async () => {
-      const { container, queryByText } = render(
-        <SelectableDynamicForm {...props} />,
-        renderOpts
-      );
-      await waitForElementToBeRemoved(() => queryByText(/loading/i));
-      expect(queryByText("template1")).not.toBeInTheDocument();
-      expect(container).toMatchSnapshot();
+      const rendered = render(<SelectableDynamicForm {...props} />, renderOpts);
+      await waitForLoad(rendered);
+      expect(rendered.container).toMatchSnapshot();
     });
 
-    it("calls onNameChange function to select the unique template", async () => {
+    it("auto-selects template", async () => {
       const onNameChange = jest.fn();
       const thisProps = {
         ...props,
@@ -106,17 +147,32 @@ describe("<SelectableDynamicForm />", () => {
 
   describe("with no domains", () => {
     const renderOpts = {
-      mocks: [multipleTemplatesMock(variablesEmptyDomains)],
+      mocks: [
+        {
+          request: {
+            query: TEMPLATES_QUERY,
+            variables: { scope: "foo" },
+          },
+          result: {
+            data: {
+              templates: [],
+            },
+          },
+        },
+      ],
     };
 
-    it("matches the latest snapshot", async () => {
-      const { container, queryByText } = render(
-        <SelectableDynamicForm {...props} />,
+    it("renders empty state", async () => {
+      const rendered = render(
+        <SelectableDynamicForm
+          {...variablesEmptyDomains}
+          onChange={jest.fn()}
+          onNameChange={jest.fn()}
+        />,
         renderOpts
       );
-      await waitForElementToBeRemoved(() => queryByText(/loading/i));
-      expect(queryByText("template1")).not.toBeInTheDocument();
-      expect(container).toMatchSnapshot();
+      await waitForLoad(rendered);
+      expect(rendered.container).toMatchSnapshot();
     });
   });
 });

package/src/components/__tests__/__snapshots__/DynamicFieldValue.spec.js.snap

@@ -112,7 +112,7 @@ exports[`<DynamicFieldValue /> matches the latest snapshot with field changed 1`
       >
         <div
           class="header dynamic-field-header template-field-changed"
-          title="This field has been changed"
+          title="template.field.changed"
         >
           label
         </div>
@@ -135,7 +135,7 @@ exports[`<DynamicFieldValue /> matches the latest snapshot with field changed 1`
     >
       <div
         class="header dynamic-field-header template-field-changed"
-        title="This field has been changed"
+        title="template.field.changed"
       >
         label
       </div>

package/src/components/__tests__/__snapshots__/DynamicForm.spec.js.snap

@@ -1,89 +1,102 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<DynamicForm /> matches snapshot for default field 1`] = `
-<FieldGroupSegment
-  fields={
-    [
-      {
-        "name": "test",
-        "required": false,
-        "value": undefined,
-      },
-    ]
-  }
-  key="0"
-  name="test-group"
-  onFieldChange={[Function]}
-/>
+exports[`<DynamicForm /> matches the latest snapshot for default field 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <h4
+      class="ui header"
+    >
+      test-group
+    </h4>
+    <div
+      class="field"
+      data-testid="form-field"
+    >
+      <label />
+      <div
+        class="field"
+      >
+        <div
+          class="ui input"
+        >
+          <input
+            name="test"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
-exports[`<DynamicForm /> matches snapshot for domain values 1`] = `
-<FieldGroupSegment
-  fields={
-    [
-      {
-        "name": "test",
-        "parsedValues": [
-          {
-            "text": "a",
-            "value": "a",
-          },
-          {
-            "text": "b",
-            "value": "b",
-          },
-          {
-            "text": "c",
-            "value": "c",
-          },
-        ],
-        "required": false,
-        "value": undefined,
-        "values": {
-          "domain": {
-            "1": [
-              "a",
-              "b",
-              "c",
-            ],
-          },
-        },
-      },
-    ]
-  }
-  key="0"
-  name="test-group"
-  onFieldChange={[Function]}
-/>
+exports[`<DynamicForm /> matches the latest snapshot for domain values 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <h4
+      class="ui header"
+    >
+      test-group
+    </h4>
+    <div
+      class="field"
+      data-testid="form-field"
+    >
+      <label />
+      <div
+        class="field"
+      >
+        <div
+          class="ui input"
+        >
+          <input
+            name="test"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
-exports[`<DynamicForm /> matches snapshot for empty content 1`] = `null`;
+exports[`<DynamicForm /> matches the latest snapshot for empty content 1`] = `<div />`;
 
-exports[`<DynamicForm /> matches snapshot for role_users values 1`] = `
-<FieldGroupSegment
-  fields={
-    [
-      {
-        "name": "test",
-        "parsedValues": [
-          {
-            "text": "user1",
-            "value": "user1",
-          },
-        ],
-        "required": false,
-        "value": undefined,
-        "values": {
-          "processed_users": [
-            "user1",
-          ],
-          "role_users": "role",
-        },
-      },
-    ]
-  }
-  key="0"
-  name="test-group"
-  onFieldChange={[Function]}
-/>
+exports[`<DynamicForm /> matches the latest snapshot for role_users values 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <h4
+      class="ui header"
+    >
+      test-group
+    </h4>
+    <div
+      class="field"
+      data-testid="form-field"
+    >
+      <label />
+      <div
+        class="field"
+      >
+        <div
+          class="ui input"
+        >
+          <input
+            name="test"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;

package/src/components/__tests__/__snapshots__/FieldGroupDetail.spec.js.snap

@@ -184,7 +184,7 @@ exports[`<FieldGroupDetail /> matches the latest snapshot with field differences
           >
             <div
               class="header dynamic-field-header template-field-changed"
-              title="This field has been changed"
+              title="template.field.changed"
             >
               foo field
             </div>
@@ -238,7 +238,7 @@ exports[`<FieldGroupDetail /> matches the latest snapshot with field differences
         >
           <div
             class="header dynamic-field-header template-field-changed"
-            title="This field has been changed"
+            title="template.field.changed"
           >
             foo field
           </div>

package/src/components/__tests__/__snapshots__/FieldViewerValue.spec.js.snap

@@ -10,12 +10,6 @@ exports[`<FieldViewerValue /> matches the latest snapshot for multiple 1`] = `
 </div>
 `;
 
-exports[`<FieldViewerValue /> matches the latest snapshot with type: copy 1`] = `
-<div>
-  Error: copy has wrong format
-</div>
-`;
-
 exports[`<FieldViewerValue /> matches the latest snapshot with type: date 1`] = `
 <div>
   <div
@@ -72,6 +66,7 @@ exports[`<FieldViewerValue /> matches the latest snapshot with type: system 1`]
     class="ui label"
   >
     <a
+      data-discover="true"
       href="/systems/1/structures"
     >
       name
@@ -174,7 +169,6 @@ exports[`<FieldViewerValue /> matches the latest snapshot with type: user_group
     aria-hidden="true"
     class="group icon"
   />
-   
   group_name
 </div>
 `;

package/src/components/__tests__/__snapshots__/SelectableDynamicForm.spec.js.snap

@@ -1,40 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<SelectableDynamicForm /> with a single template matches the latest snapshot 1`] = `
-<div>
-  <div
-    class="ui segment"
-  >
-    <h4
-      class="ui header"
-    >
-      g1
-    </h4>
-    <div
-      class="field"
-      data-testid="form-field"
-    >
-      <label>
-        field1
-      </label>
-      <div
-        class="field"
-      >
-        <div
-          class="ui input"
-        >
-          <input
-            name="field1"
-            placeholder="field1"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
+exports[`<SelectableDynamicForm /> with multiple templates matches error snapshot 1`] = `<div />`;
 
 exports[`<SelectableDynamicForm /> with multiple templates matches the latest snapshot 1`] = `
 <div>
@@ -42,7 +8,7 @@ exports[`<SelectableDynamicForm /> with multiple templates matches the latest sn
     class="field"
   >
     <label>
-      Template
+      template.selector.label
     </label>
     <div
       class="field"
@@ -68,7 +34,7 @@ exports[`<SelectableDynamicForm /> with multiple templates matches the latest sn
           class="divider default text"
           role="alert"
         >
-          Select a template...
+          template.selector.placeholder
         </div>
         <i
           aria-hidden="true"
@@ -111,6 +77,40 @@ exports[`<SelectableDynamicForm /> with multiple templates matches the latest sn
 </div>
 `;
 
-exports[`<SelectableDynamicForm /> with multiple templates matches the latest snapshot for error query 1`] = `<div />`;
+exports[`<SelectableDynamicForm /> with no domains renders empty state 1`] = `<div />`;
 
-exports[`<SelectableDynamicForm /> with no domains matches the latest snapshot 1`] = `<div />`;
+exports[`<SelectableDynamicForm /> with single template matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <h4
+      class="ui header"
+    >
+      g1
+    </h4>
+    <div
+      class="field"
+      data-testid="form-field"
+    >
+      <label>
+        field1
+      </label>
+      <div
+        class="field"
+      >
+        <div
+          class="ui input"
+        >
+          <input
+            name="field1"
+            placeholder="field1"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/hierarchies/Hierarchies.js

@@ -1,10 +1,9 @@
-import React from "react";
 import { Table } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Loading } from "@truedat/core/components";
 import { FormattedMessage } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
-import { useHierarchies } from "../../hooks/useHierarchies";
+import { useHierarchies } from "@truedat/core/hooks/useHierarchies";
 
 export const Hierarchies = () => {
   const { data: hierarchies, loading } = useHierarchies();
@@ -22,7 +21,6 @@ export const Hierarchies = () => {
           </Table.HeaderCell>
         </Table.Row>
       </Table.Header>
-
       <Table.Body>
         {hierarchies.map((hierarchy) => {
           const { id, name, description } = hierarchy;

package/src/components/hierarchies/HierarchiesView.js

@@ -1,6 +1,5 @@
-import React from "react";
 import { Button, Header, Icon, Segment } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage, useIntl } from "react-intl";
 import { HIERARCHY_CREATE } from "@truedat/core/routes";
 import Hierarchies from "./Hierarchies";

package/src/components/hierarchies/HierarchyCrumbs.js

@@ -1,7 +1,6 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Breadcrumb } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { HIERARCHIES } from "@truedat/core/routes";