@truedat/qx 7.0.8 → 7.1.1

package/src/components/common/resourceSelectors/__tests__/DataStructureSelector.spec.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { waitFor } from "@testing-library/react";
 import { act } from "react-dom/test-utils";
 import { render } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
@@ -42,18 +43,20 @@ const renderOpts = {
       "structures.loading.header": "loading",
     },
   },
-  fallback: "lazy",
+  fallback: "loading",
 };
 
 describe("<DataStructureSelector />", () => {
   it("matches the latest snapshot", async () => {
-    const { container, findByText } = render(
+    const { container } = render(
       <TestFormWrapper>
         <DataStructureSelector />
       </TestFormWrapper>,
       renderOpts
     );
-    await findByText(/header/);
+    await waitFor(() =>
+      expect(container.querySelector(".loader")).not.toBeInTheDocument()
+    );
 
     await act(async () => {
       expect(container).toMatchSnapshot();

package/src/components/common/resourceSelectors/__tests__/__snapshots__/DataStructureSelector.spec.js.snap

@@ -72,18 +72,6 @@ exports[`<DataStructureSelector /> matches the latest snapshot 1`] = `
     <div
       class="dimmable structure-table-overflow"
     >
-      <div
-        class="ui inverted dimmer"
-        style=""
-      >
-        <div
-          class="content"
-        >
-          <div
-            class="ui large loader"
-          />
-        </div>
-      </div>
       <div
         class="ui icon info message"
       >

package/src/components/dataViews/__tests__/DataViewEditor.spec.js

@@ -1,59 +1,71 @@
 import React, { Suspense } from "react";
+import { waitFor } from "@testing-library/react";
 import { act } from "react-dom/test-utils";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
+import { SOURCE_OPTIONS_QUERY } from "@truedat/cx/sources/api/queries";
+import { sources } from "@truedat/qx/components/qualityControls/__tests__/__fixtures__/qualityControlHelper";
 import DataViewEditor from "../DataViewEditor";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "actions.cancel": "cancel",
-      "actions.delete": "delete",
-      "actions.discard.confirmation.content": "content",
-      "actions.discard.confirmation.header": "header",
-      "actions.save": "save",
-      "confirmation.no": "confirmation_no",
-      "confirmation.yes": "confirmation_yes",
-      "dataViews.action.delete.content": "content",
-      "dataViews.action.delete.header": "header",
-      "dataViews.action.new": "new",
-      "dataViews.form.error.empty_select": "empty_select",
-      "dataViews.form.name": "name",
-      "dataViews.form.queryable.alias": "alias",
-      "dataViews.form.queryable.from": "from",
-      "dataViews.form.queryable.group_by": "group_by",
-      "dataViews.form.queryable.join": "join",
-      "dataViews.form.queryable.select": "select",
-      "dataViews.form.queryable.where": "where",
-      "dataViews.form.select": "select",
-      "expression.clause.action.addExpression": "addExpression",
-      "expression.clause.action.addGroup": "addGroup",
-      "expression.condition.customExpression": "customExpression",
-      "expression.condition.selectFunction": "selectFunction",
-      "expression.form.clause": "clause",
-      "form.validation.required": "required",
-      "functions.expression.shape.constant": "constant",
-      "functions.expression.shape.field": "field",
-      "functions.expression.shape.function": "function",
-      "functions.form.add_description": "add_description",
-      "functions.form.required": "required",
-      "group.props.name": "name",
-      "queryables.form.resource": "resource",
-      "queryables.resource.selector.data_structure": "data_structure",
-      "queryables.resource.selector.data_view": "data_view",
-      "queryables.resource.type.data_structure": "data_structure",
-      "queryables.resource.type.data_view": "data_view",
-      "queryables.resource.type.reference_dataset": "reference_dataset",
-      "queryables.resource.type": "type",
-      "queryables.select.form.add_all_select_fields": "add_all_select_fields",
-      "queryables.select.form.add_select_field": "add_select_field",
-      "queryables.select.form.alias": "alias",
-      "source.search.placeholder": "placeholder",
-      "dataViews.form.source": "source",
-    },
+const sourcesMock = {
+  request: { query: SOURCE_OPTIONS_QUERY },
+  result: { data: { sources } },
+};
+
+const messages = {
+  en: {
+    "actions.cancel": "cancel",
+    "actions.delete": "delete",
+    "actions.discard.confirmation.content": "content",
+    "actions.discard.confirmation.header": "header",
+    "actions.save": "save",
+    "confirmation.no": "confirmation_no",
+    "confirmation.yes": "confirmation_yes",
+    "dataViews.action.delete.content": "content",
+    "dataViews.action.delete.header": "header",
+    "dataViews.action.new": "new",
+    "dataViews.form.error.empty_select": "empty_select",
+    "dataViews.form.name": "name",
+    "dataViews.form.queryable.alias": "alias",
+    "dataViews.form.queryable.from": "from",
+    "dataViews.form.queryable.group_by": "group_by",
+    "dataViews.form.queryable.join": "join",
+    "dataViews.form.queryable.select": "select",
+    "dataViews.form.queryable.where": "where",
+    "dataViews.form.select": "select",
+    "expression.clause.action.addExpression": "addExpression",
+    "expression.clause.action.addGroup": "addGroup",
+    "expression.condition.customExpression": "customExpression",
+    "expression.condition.selectFunction": "selectFunction",
+    "expression.form.clause": "clause",
+    "form.validation.required": "required",
+    "functions.expression.shape.constant": "constant",
+    "functions.expression.shape.field": "field",
+    "functions.expression.shape.function": "function",
+    "functions.form.add_description": "add_description",
+    "functions.form.required": "required",
+    "group.props.name": "name",
+    "queryables.form.resource": "resource",
+    "queryables.resource.selector.data_structure": "data_structure",
+    "queryables.resource.selector.data_view": "data_view",
+    "queryables.resource.type.data_structure": "data_structure",
+    "queryables.resource.type.data_view": "data_view",
+    "queryables.resource.type.reference_dataset": "reference_dataset",
+    "queryables.resource.type": "type",
+    "queryables.select.form.add_all_select_fields": "add_all_select_fields",
+    "queryables.select.form.add_select_field": "add_select_field",
+    "queryables.select.form.alias": "alias",
+    "source.search.placeholder": "placeholder",
+    "dataViews.form.source": "source",
   },
 };
 
+const renderOpts = {
+  mocks: [sourcesMock],
+  messages,
+  fallback: "lazy",
+};
+
 const defaultProps = {
   selectedDataView: null,
   context: { sourceId: 10 },
@@ -66,11 +78,16 @@ const defaultProps = {
 
 describe("<DataViewEditor />", () => {
   it("matches the latest snapshot for empty", async () => {
-    const { container } = render(
+    const { container, queryByText } = render(
       <DataViewEditor {...defaultProps} />,
       renderOpts
     );
 
+    await waitFor(() => {
+      expect(queryByText(/lazy/i)).not.toBeInTheDocument();
+      expect(container.querySelector(".loader")).not.toBeInTheDocument();
+    });
+
     await act(async () => {
       expect(container).toMatchSnapshot();
     });
@@ -129,13 +146,18 @@ describe("<DataViewEditor />", () => {
         },
       },
     };
-    const { container } = render(
+    const { container, queryByText } = render(
       <Suspense fallback={<p>Loading selector</p>}>
         <DataViewEditor {...props} />
       </Suspense>,
       renderOpts
     );
 
+    await waitFor(() => {
+      expect(queryByText(/lazy/i)).not.toBeInTheDocument();
+      expect(container.querySelector(".loader")).not.toBeInTheDocument();
+    });
+
     await act(async () => {
       expect(container).toMatchSnapshot();
     });
@@ -195,10 +217,18 @@ describe("<DataViewEditor />", () => {
         ],
       },
     };
-    const { container, getAllByRole, getByRole, getByPlaceholderText } = render(
-      <DataViewEditor {...props} />,
-      renderOpts
-    );
+    const {
+      container,
+      getAllByRole,
+      getByRole,
+      getByPlaceholderText,
+      queryByText,
+    } = render(<DataViewEditor {...props} />, renderOpts);
+
+    await waitFor(() => {
+      expect(queryByText(/lazy/i)).not.toBeInTheDocument();
+      expect(container.querySelector(".loader")).not.toBeInTheDocument();
+    });
 
     // Insert name
     userEvent.type(getAllByRole("textbox")[0], "data_view_name");

package/src/components/dataViews/__tests__/DataViews.spec.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { render } from "@truedat/test/render";
-
+import { REFERENCE_DATASETS_HEADERS_QUERY } from "@truedat/dd/api/queries";
 import DataViews from "../DataViews";
 
 jest.mock("@truedat/qx/hooks/useDataViews", () => {
@@ -36,7 +36,19 @@ jest.mock("@truedat/qx/hooks/useDataViews", () => {
   };
 });
 
+const dataSet = {
+  id: "7",
+  name: "dataset1",
+  headers: ["campo1", "campo2"],
+};
+
+const referenceDatasetsMock = {
+  request: { query: REFERENCE_DATASETS_HEADERS_QUERY },
+  result: { data: { referenceDatasets: [dataSet], loading: false } },
+};
+
 const renderOpts = {
+  mocks: [referenceDatasetsMock],
   messages: {
     en: {
       "dataViews.action.new": "new",
@@ -46,6 +58,7 @@ const renderOpts = {
       "dataViews.header": "header",
     },
   },
+  fallback: "lazy",
 };
 
 describe("<DataViews />", () => {

package/src/components/dataViews/__tests__/__snapshots__/DataViewEditor.spec.js.snap

@@ -66,6 +66,56 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
       <label>
         source
       </label>
+      <div
+        class="field"
+      >
+        <div
+          aria-busy="false"
+          aria-disabled="false"
+          aria-expanded="false"
+          class="ui search selection dropdown"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
+          >
+            placeholder
+          </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"
+              >
+                external_source_id
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div
       class="ui list"
@@ -512,7 +562,7 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
 <div>
   <form
     class="ui form"
-    style="display: none;"
+    style=""
   >
     <h3
       class="ui dividing header"
@@ -575,6 +625,48 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
       <label>
         source
       </label>
+      <div
+        class="disabled field"
+      >
+        <div
+          aria-busy="true"
+          aria-disabled="true"
+          aria-expanded="false"
+          class="ui disabled loading search selection dropdown"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="-1"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
+          >
+            placeholder
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              class="message"
+            >
+              No results found.
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div
       class="ui list"
@@ -972,8 +1064,5 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
       </button>
     </div>
   </form>
-  <p>
-    Loading selector
-  </p>
 </div>
 `;

package/src/components/dataViews/queryableProperties/__tests__/SelectField.spec.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { act } from "react-dom/test-utils";
+import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import { render } from "@truedat/test/render";
@@ -17,11 +18,12 @@ const renderOpts = {
       "functions.expression.shape.constant": "constant",
     },
   },
+  fallback: "loading",
 };
 
 describe("<SelectField />", () => {
-  it("matches the latest snapshot for select", () => {
-    const { container } = render(
+  it("matches the latest snapshot for select", async () => {
+    const { container, queryByText } = render(
       <TestFormWrapper
         context={{
           field: "select.properties.fields[0]",
@@ -39,11 +41,14 @@ describe("<SelectField />", () => {
       </TestFormWrapper>,
       renderOpts
     );
-
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
     expect(container).toMatchSnapshot();
   });
-  it("matches the latest snapshot for group_by", () => {
-    const { container } = render(
+
+  it("matches the latest snapshot for group_by", async () => {
+    const { container, queryByText } = render(
       <TestFormWrapper
         context={{
           functions: [{ class: "aggregator", name: "func", type: "number" }],
@@ -65,7 +70,9 @@ describe("<SelectField />", () => {
       </TestFormWrapper>,
       renderOpts
     );
-
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
     expect(container).toMatchSnapshot();
   });
 

package/src/components/functions/__tests__/FunctionEditor.spec.js

@@ -2,43 +2,11 @@ import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import userEvent from "@testing-library/user-event";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import FunctionEditor from "../FunctionEditor";
 
 const renderOpts = {
-  messages: {
-    en: {
-      "functions.expression.shape.function": "function",
-      "functions.expression.shape.constant": "constant",
-      "functions.expression.shape.param": "param",
-      "functions.form.expression.function.placeholder": "function.placeholder",
-      "group.props.name": "name",
-      "functions.form.name": "name",
-      "functions.form.add_description": "add_description",
-      "functions.form.name": "name",
-      "functions.form.add_param": "add_param",
-      "actions.save": "save",
-      "actions.cancel": "cancel",
-      "actions.delete": "delete",
-      "functions.action.delete.header": "delete_header",
-      "functions.action.delete.content": "delete_content",
-      "functions.form.output": "output",
-      "functions.form.params": "params",
-      "form.validation.required": "required",
-      "confirmation.yes": "confirm_yes",
-      "confirmation.no": "confirm_no",
-      "actions.discard.confirmation.header": "confirmation_header",
-      "actions.discard.confirmation.content": "confirmation_content",
-      "functions.expression.constant.false": "false",
-      "functions.expression.constant.true": "true",
-      "functions.form.description": "description",
-      "expressions.data_type.timestamp": "timestamp",
-      "expressions.data_type.date": "date",
-      "expressions.data_type.number": "number",
-      "expressions.data_type.string": "string",
-      "expressions.data_type.boolean": "boolean",
-      "expressions.data_type.any": "any",
-    },
-  },
+  messages,
   fallback: "lazy",
 };
 

package/src/components/functions/__tests__/FunctionParams.spec.js

@@ -3,24 +3,11 @@ import { render } from "@truedat/test/render";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import FunctionParams from "../FunctionParams";
 
 const renderOpts = {
-  messages: {
-    en: {
-      "functions.form.required": "required",
-      "functions.form.add_description": "add_description",
-      "functions.form.name": "name",
-      "functions.form.add_param": "add_param",
-      "functions.form.description": "description",
-      "expressions.data_type.timestamp": "timestamp",
-      "expressions.data_type.date": "date",
-      "expressions.data_type.number": "number",
-      "expressions.data_type.string": "string",
-      "expressions.data_type.boolean": "boolean",
-      "expressions.data_type.any": "any",
-    },
-  },
+  messages,
   fallback: "lazy",
 };
 
@@ -63,12 +50,12 @@ describe("<FunctionParams />", () => {
       renderOpts
     );
     await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    userEvent.click(getByRole("button", { name: /add_param/i }));
+    userEvent.click(getByRole("button", { name: /Add parameter/i }));
 
     const argInput = getByPlaceholderText(/name/i);
     const typeSelector = getByRole("listbox");
     const stringOption = getByRole("option", { name: /string/i });
-    const descriptionInputLabel = getByText(/add_description/i);
+    const descriptionInputLabel = getByText(/Add description/i);
 
     await waitFor(() => expect(argInput).toBeInTheDocument());
     await waitFor(() => expect(typeSelector).toBeInTheDocument());

package/src/components/functions/__tests__/Functions.spec.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import Functions from "../Functions";
 
 jest.mock("@truedat/qx/hooks/useFunctions", () => {
@@ -50,40 +51,7 @@ jest.mock("@truedat/qx/hooks/useFunctions", () => {
 
 describe("<Functions />", () => {
   const renderOpts = {
-    messages: {
-      en: {
-        "functions.header": "functions.header",
-        "functions.subheader": "functions.subheader",
-        "functions.no_selection": "functions.no_selection",
-        "functions.empty_list": "functions.empty_list",
-        "functions.action.new": "functions.action.new",
-        "functions.expression.shape.function": "function",
-        "functions.expression.shape.constant": "constant",
-        "functions.expression.shape.param": "param",
-        "functions.form.expression.function.placeholder":
-          "function.placeholder",
-        "group.props.name": "name",
-        "functions.form.name": "name",
-        "functions.form.add_description": "add_description",
-        "functions.form.name": "name",
-        "functions.form.add_param": "add_param",
-        "actions.save": "save",
-        "actions.cancel": "cancel",
-        "actions.delete": "delete",
-        "functions.action.delete.header": "delete_header",
-        "functions.action.delete.content": "delete_content",
-        "functions.form.output": "output",
-        "functions.form.params": "params",
-        "form.validation.required": "required",
-        "confirmation.yes": "confirm_yes",
-        "confirmation.no": "confirm_no",
-        "actions.discard.confirmation.header": "confirmation_header",
-        "actions.discard.confirmation.content": "confirmation_content",
-        "functions.expression.constant.false": "false",
-        "functions.expression.constant.true": "true",
-        "functions.form.description": "description",
-      },
-    },
+    messages,
     fallback: "lazy",
   };