@truedat/qx 7.5.9 → 7.5.11

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

@@ -1,22 +1,14 @@
-import React 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 { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import DataViewSelector from "../DataViewSelector";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "queryables.resource.selector.data_view": "data_view",
-    },
-  },
-};
+const renderOpts = {};
 
 describe("<DataViewSelector />", () => {
   it("matches the latest snapshot", async () => {
-    const { container } = render(
+    const rendered = render(
       <TestFormWrapper
         context={{
           sourceId: 10,
@@ -27,13 +19,12 @@ describe("<DataViewSelector />", () => {
       </TestFormWrapper>,
       renderOpts
     );
-
-    await act(async () => {
-      expect(container).toMatchSnapshot();
-    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
+
   it("hides current data_view", async () => {
-    const { queryByText } = render(
+    const rendered = render(
       <TestFormWrapper
         context={{
           sourceId: 10,
@@ -48,14 +39,16 @@ describe("<DataViewSelector />", () => {
       </TestFormWrapper>,
       renderOpts
     );
+    await waitForLoad(rendered);
 
     await waitFor(() =>
-      expect(queryByText(/SelectedDataView/i)).not.toBeInTheDocument()
+      expect(rendered.queryByText(/selecteddataview/i)).not.toBeInTheDocument()
     );
   });
+
   it("handles onChange", async () => {
     const onChange = jest.fn();
-    const { getByRole } = render(
+    const rendered = render(
       <TestFormWrapper
         context={{
           sourceId: 10,
@@ -84,10 +77,12 @@ describe("<DataViewSelector />", () => {
       </TestFormWrapper>,
       renderOpts
     );
+    await waitForLoad(rendered);
 
-    await act(async () => {
-      userEvent.click(getByRole("option", { name: /SelectedDataView/i }));
-    });
+    const user = userEvent.setup({ delay: null });
+    await user.click(
+      rendered.getByRole("option", { name: /selecteddataview/i })
+    );
 
     expect(onChange).toHaveBeenLastCalledWith({
       fields: [
@@ -116,7 +111,7 @@ describe("<DataViewSelector />", () => {
   });
 
   it("handles search", async () => {
-    const { getByRole, queryByText } = render(
+    const rendered = render(
       <TestFormWrapper
         context={{
           sourceId: 10,
@@ -130,10 +125,13 @@ describe("<DataViewSelector />", () => {
       </TestFormWrapper>,
       renderOpts
     );
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    await user.type(rendered.getByRole("textbox"), "User");
 
-    userEvent.type(getByRole("textbox"), "User");
     await waitFor(() =>
-      expect(queryByText(/SelectedDataView/i)).not.toBeInTheDocument()
+      expect(rendered.queryByText(/selecteddataview/i)).not.toBeInTheDocument()
     );
   });
 });

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

@@ -1,40 +1,28 @@
-import React 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 { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import ReferenceDatasetSelector from "../ReferenceDatasetSelector";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "queryables.resource.selector.reference_dataset": "reference_dataset",
-    },
-  },
-};
-
 describe("<ReferenceDatasetSelector />", () => {
   it("matches the latest snapshot", async () => {
-    const { container } = render(
+    const rendered = render(
       <TestFormWrapper
         context={{
           referenceDatasets: [{ name: "UserReferenceDataset", id: 1 }],
         }}
       >
         <ReferenceDatasetSelector />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-
-    await act(async () => {
-      expect(container).toMatchSnapshot();
-    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("handles onChange", async () => {
+    const user = userEvent.setup({ delay: null });
     const onChange = jest.fn();
-    const { getByRole } = render(
+    const rendered = render(
       <TestFormWrapper
         context={{
           referenceDatasets: [
@@ -48,15 +36,13 @@ describe("<ReferenceDatasetSelector />", () => {
         }}
       >
         <ReferenceDatasetSelector onChange={onChange} />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
+    await waitForLoad(rendered);
 
-    await act(async () => {
-      userEvent.click(
-        await getByRole("option", { name: /SelectedReferenceDataset/i })
-      );
-    });
+    await user.click(
+      rendered.getByRole("option", { name: /SelectedReferenceDataset/i })
+    );
 
     expect(onChange).toHaveBeenLastCalledWith({
       fields: [
@@ -74,7 +60,8 @@ describe("<ReferenceDatasetSelector />", () => {
   });
 
   it("handles search", async () => {
-    const { getByRole, queryByText } = render(
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(
       <TestFormWrapper
         context={{
           referenceDatasets: [
@@ -84,14 +71,16 @@ describe("<ReferenceDatasetSelector />", () => {
         }}
       >
         <ReferenceDatasetSelector />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
+    await waitForLoad(rendered);
 
-    userEvent.type(getByRole("textbox"), "User");
+    await user.type(rendered.getByRole("textbox"), "User");
 
     await waitFor(() =>
-      expect(queryByText(/SelectedReferenceDataset/i)).not.toBeInTheDocument()
+      expect(
+        rendered.queryByText(/SelectedReferenceDataset/i)
+      ).not.toBeInTheDocument()
     );
   });
 });

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

@@ -7,7 +7,6 @@ exports[`<DataStructureSelector /> matches the latest snapshot 1`] = `
       aria-hidden="true"
       class="dropdown icon"
     />
-    
   </div>
   <div
     class="ui segment"
@@ -20,7 +19,7 @@ exports[`<DataStructureSelector /> matches the latest snapshot 1`] = `
         class="search link icon"
       />
       <input
-        placeholder="search placeholder"
+        placeholder="search.placeholder"
         type="text"
         value=""
       />
@@ -85,9 +84,9 @@ exports[`<DataStructureSelector /> matches the latest snapshot 1`] = `
           <div
             class="header"
           >
-            header
+            structures.not_found.header
           </div>
-          body
+          structures.not_found.body
         </div>
       </div>
     </div>

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

@@ -21,7 +21,7 @@ exports[`<DataViewSelector /> matches the latest snapshot 1`] = `
       class="divider default text"
       role="alert"
     >
-      data_view
+      queryables.resource.selector.data_view
     </div>
     <i
       aria-hidden="true"

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

@@ -21,7 +21,7 @@ exports[`<ReferenceDatasetSelector /> matches the latest snapshot 1`] = `
       class="divider default text"
       role="alert"
     >
-      reference_dataset
+      queryables.resource.selector.reference_dataset
     </div>
     <i
       aria-hidden="true"

package/src/components/dataViews/DataViewEditor.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { Fragment, useEffect } from "react";
+import { lazy, Fragment, useEffect } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import {
@@ -18,8 +18,8 @@ import QxContext from "@truedat/qx/components/QxContext";
 import DataViewSelect from "./DataViewSelect";
 import Queryables from "./Queryables";
 
-const SourceSelector = React.lazy(() =>
-  import("@truedat/cx/sources/components/SourceSelector")
+const SourceSelector = lazy(
+  () => import("@truedat/cx/sources/components/SourceSelector")
 );
 
 export default function DataViewEditor({
@@ -108,7 +108,6 @@ export default function DataViewEditor({
             render={({ field: { onChange, value } }) => (
               <Form.Field required>
                 <label>{formatMessage({ id: "dataViews.form.source" })}</label>
-
                 <SourceSelector
                   disabled={isEditForm}
                   value={value + ""}
@@ -118,10 +117,10 @@ export default function DataViewEditor({
             )}
           />
           {!_.isNil(sourceId) ? (
-            <QxContext.Provider value={{ ...context, sourceId }}>
+            <QxContext value={{ ...context, sourceId }}>
               <Queryables />
               <DataViewSelect />
-            </QxContext.Provider>
+            </QxContext>
           ) : null}
           <Divider hidden />
           <Container textAlign="right">

package/src/components/dataViews/DataViewSelect.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useContext } from "react";
+import { use } from "react";
 import { useIntl } from "react-intl";
 import { useFormContext } from "react-hook-form";
 import { Grid, Label, Segment } from "semantic-ui-react";
@@ -10,7 +10,7 @@ import { reduceQueryableFields } from "./queryableFunctions";
 export default function DataViewSelect() {
   const { formatMessage } = useIntl();
   const { watch } = useFormContext();
-  const context = useContext(QxContext);
+  const context = use(QxContext);
 
   const fields = _.flow(
     watch,
@@ -27,9 +27,8 @@ export default function DataViewSelect() {
                 {formatMessage({ id: `dataViews.form.select` })}
               </Label>
             </div>
-
             <Grid.Row className="vertical-space">
-              <QxContext.Provider
+              <QxContext
                 value={{
                   ...context,
                   field: `select.properties`,
@@ -37,7 +36,7 @@ export default function DataViewSelect() {
                 }}
               >
                 <Select />
-              </QxContext.Provider>
+              </QxContext>
             </Grid.Row>
           </Segment>
         </Grid.Column>

package/src/components/dataViews/DataViews.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
 import { useQuery } from "@apollo/client";
 import {
@@ -113,7 +113,6 @@ export default function DataViews() {
           </Header.Subheader>
         </Header.Content>
       </Header>
-
       <Grid>
         <GridColumn width={4}>
           <Button fluid onClick={setStateNewDataView} disabled={isDirty}>

package/src/components/dataViews/Queryable.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState, useContext } from "react";
+import { useState, use } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Controller, useFormContext } from "react-hook-form";
@@ -19,7 +19,7 @@ const queryableComponents = {
 export default function Queryable({ index, onDelete }) {
   const { formatMessage } = useIntl();
   const { control, watch } = useFormContext();
-  const context = useContext(QxContext);
+  const context = use(QxContext);
   const [isShownDelete, setIsShownDelete] = useState();
   const { type } = watch(`queryables[${index}]`);
 
@@ -115,7 +115,7 @@ export default function Queryable({ index, onDelete }) {
               />
             </Grid.Row>
             <Grid.Row className="vertical-space">
-              <QxContext.Provider
+              <QxContext
                 value={{
                   ...context,
                   field: `queryables[${index}].properties`,
@@ -123,7 +123,7 @@ export default function Queryable({ index, onDelete }) {
                 }}
               >
                 {queryableComponents[type]}
-              </QxContext.Provider>
+              </QxContext>
             </Grid.Row>
           </Segment>
         </Grid.Column>

package/src/components/dataViews/Queryables.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import { useIntl } from "react-intl";
 import { useFieldArray } from "react-hook-form";
 import { Button, Divider, List } from "semantic-ui-react";

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

@@ -1,8 +1,6 @@
-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 { act, waitFor } from "@testing-library/react";
+import { render, waitForLoad } 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";
@@ -12,60 +10,6 @@ const sourcesMock = {
   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 },
@@ -78,20 +22,13 @@ const defaultProps = {
 
 describe("<DataViewEditor />", () => {
   it("matches the latest snapshot for empty", async () => {
-    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();
+    const rendered = render(<DataViewEditor {...defaultProps} />, {
+      mocks: [sourcesMock],
     });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
+
   it("matches the latest snapshot with content", async () => {
     const props = {
       ...defaultProps,
@@ -146,21 +83,12 @@ describe("<DataViewEditor />", () => {
         },
       },
     };
-    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();
+    const rendered = render(<DataViewEditor {...props} />, {
+      mocks: [sourcesMock],
     });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("handles user interaction", async () => {
@@ -217,48 +145,45 @@ describe("<DataViewEditor />", () => {
         ],
       },
     };
-    const {
-      container,
-      getAllByRole,
-      getByRole,
-      getByPlaceholderText,
-      queryByText,
-    } = render(<DataViewEditor {...props} />, renderOpts);
 
-    await waitFor(() => {
-      expect(queryByText(/lazy/i)).not.toBeInTheDocument();
-      expect(container.querySelector(".loader")).not.toBeInTheDocument();
+    const rendered = render(<DataViewEditor {...props} />, {
+      mocks: [sourcesMock],
     });
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null, skipHover: true });
 
     // Insert name
-    userEvent.type(getAllByRole("textbox")[0], "data_view_name");
+    await user.type(rendered.getAllByRole("textbox")[0], "data_view_name");
 
     // Insert From information
-    userEvent.type(getByPlaceholderText("alias"), "from_alias");
-    userEvent.click(getByRole("option", { name: /data_view/i }));
-    userEvent.click(getByRole("option", { name: /AnotherDataView/i }));
-
-    expect(getByRole("button", { name: /save/i })).toBeDisabled();
-
-    await act(async () => {
-      userEvent.click(getByRole("button", { name: /add_all_select_fields/i }));
-    });
+    await user.type(rendered.getByPlaceholderText(/alias/i), "from_alias");
+    await user.click(rendered.getByRole("option", { name: /data_view/i }));
+    await user.click(
+      rendered.getByRole("option", { name: /anotherdataview/i })
+    );
 
-    expect(getByRole("button", { name: /save/i })).toBeEnabled();
+    expect(rendered.getByRole("button", { name: /save/i })).toBeDisabled();
 
-    expect(container).toMatchSnapshot();
+    await user.click(
+      rendered.getByRole("button", { name: /add_all_select_fields/i })
+    );
 
-    await act(async () => {
-      userEvent.click(getByRole("button", { name: /cancel/i }));
-    });
-    await act(async () => {
-      userEvent.click(getByRole("button", { name: /modal-negative-action/i }));
+    await waitFor(() => {
+      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled();
     });
 
+    expect(rendered.container).toMatchSnapshot();
+
+    await user.click(rendered.getByRole("button", { name: /cancel/i }));
+    await user.click(
+      rendered.getByRole("button", { name: /modal-negative-action/i })
+    );
     await act(async () => {
-      userEvent.click(getByRole("button", { name: /save/i }));
+      await user.click(rendered.getByRole("button", { name: /save/i }));
     });
 
+    await waitForLoad(rendered);
     expect(onSubmit).toHaveBeenCalledWith({
       description: "",
       source_id: 10,

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import DataViewSelect from "../DataViewSelect";

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

@@ -1,8 +1,17 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import { REFERENCE_DATASETS_HEADERS_QUERY } from "@truedat/dd/api/queries";
 import DataViews from "../DataViews";
 
+jest.mock("@truedat/qx/hooks/useFunctions", () => {
+  const originalModule = jest.requireActual("@truedat/qx/hooks/useFunctions");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useFunctions: jest.fn(() => ({})),
+  };
+});
+
 jest.mock("@truedat/qx/hooks/useDataViews", () => {
   const originalModule = jest.requireActual("@truedat/qx/hooks/useDataViews");
 
@@ -49,22 +58,12 @@ const referenceDatasetsMock = {
 
 const renderOpts = {
   mocks: [referenceDatasetsMock],
-  messages: {
-    en: {
-      "dataViews.action.new": "new",
-      "dataViews.empty_list": "empty_list",
-      "dataViews.no_selection": "no_selection",
-      "dataViews.subheader": "subheader",
-      "dataViews.header": "header",
-    },
-  },
-  fallback: "lazy",
 };
 
 describe("<DataViews />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(<DataViews />, renderOpts);
-
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<DataViews />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import Queryable from "../Queryable";