@truedat/qx 7.5.7 → 7.5.10

package/src/components/common/expressions/__tests__/__snapshots__/ParamSelector.spec.js.snap

@@ -13,13 +13,13 @@ exports[`<ParamSelector /> deleting param will clean field 1`] = `
       <button
         class="ui button"
       >
-        add_param
+        functions.form.add_param
       </button>
     </div>
   </div>
   <div
     aria-expanded="false"
-    class="ui error fluid selection dropdown"
+    class="ui fluid selection dropdown"
     role="listbox"
     tabindex="0"
   >
@@ -56,8 +56,8 @@ exports[`<ParamSelector /> matches the latest snapshot 1`] = `
 exports[`<ParamSelector /> user interaction 1`] = `
 <div>
   <div
-    aria-expanded="true"
-    class="ui active visible fluid selection dropdown"
+    aria-expanded="false"
+    class="ui fluid selection dropdown"
     role="listbox"
     tabindex="0"
   >
@@ -74,7 +74,7 @@ exports[`<ParamSelector /> user interaction 1`] = `
       class="dropdown icon"
     />
     <div
-      class="visible menu transition"
+      class="menu transition"
     >
       <div
         aria-checked="true"

package/src/components/common/expressions/__tests__/__snapshots__/ShapeSelector.spec.js.snap

@@ -33,7 +33,7 @@ exports[`<ShapeSelector /> matches the latest snapshot 1`] = `
               </code>
             </b>
           </small>
-          constant
+          functions.expression.shape.constant
         </div>
       </div>
       <div
@@ -55,7 +55,7 @@ exports[`<ShapeSelector /> matches the latest snapshot 1`] = `
               </code>
             </b>
           </small>
-          function
+          functions.expression.shape.function
         </div>
       </div>
     </div>
@@ -98,7 +98,7 @@ exports[`<ShapeSelector /> user interaction select constant 1`] = `
               </code>
             </b>
           </small>
-          constant
+          functions.expression.shape.constant
         </div>
       </div>
       <div
@@ -120,7 +120,7 @@ exports[`<ShapeSelector /> user interaction select constant 1`] = `
               </code>
             </b>
           </small>
-          function
+          functions.expression.shape.function
         </div>
       </div>
     </div>
@@ -163,7 +163,7 @@ exports[`<ShapeSelector /> user interaction select function 1`] = `
               </code>
             </b>
           </small>
-          constant
+          functions.expression.shape.constant
         </div>
       </div>
       <div
@@ -185,7 +185,7 @@ exports[`<ShapeSelector /> user interaction select function 1`] = `
               </code>
             </b>
           </small>
-          function
+          functions.expression.shape.function
         </div>
       </div>
     </div>
@@ -228,7 +228,7 @@ exports[`<ShapeSelector /> user interaction select param 1`] = `
               </code>
             </b>
           </small>
-          constant
+          functions.expression.shape.constant
         </div>
       </div>
       <div
@@ -250,7 +250,7 @@ exports[`<ShapeSelector /> user interaction select param 1`] = `
               </code>
             </b>
           </small>
-          function
+          functions.expression.shape.function
         </div>
       </div>
       <div
@@ -272,7 +272,7 @@ exports[`<ShapeSelector /> user interaction select param 1`] = `
               </code>
             </b>
           </small>
-          param
+          functions.expression.shape.param
         </div>
       </div>
     </div>

package/src/components/common/expressions/__tests__/useWatchParams.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 useWatchParams from "../useWatchParams";
@@ -15,9 +14,7 @@ describe("useWatchParams", () => {
       return null;
     };
     render(
-      <TestFormWrapper defaultValues={defaultValues}>
-        <ParamHook />
-      </TestFormWrapper>
+      <TestFormWrapper defaultValues={defaultValues}><ParamHook /></TestFormWrapper>
     );
   });
 });

package/src/components/common/expressions/constantInputs/AnySelector.js

@@ -1,13 +1,13 @@
-import React, { useContext } from "react";
+import { lazy, use } from "react";
 import { useIntl } from "react-intl";
 import { useFormContext, Controller } from "react-hook-form";
 import { TypeSelector } from "@truedat/qx/components/common";
 import QxContext from "@truedat/qx/components/QxContext";
-const ConstantSelector = React.lazy(() => import("../ConstantSelector"));
+const ConstantSelector = lazy(() => import("../ConstantSelector"));
 
 export default function AnySelector() {
   const { formatMessage } = useIntl();
-  const context = useContext(QxContext);
+  const context = use(QxContext);
   const { field } = context;
   const { watch, control, setValue } = useFormContext();
   const type = watch(`${field}.value.type`);
@@ -33,11 +33,10 @@ export default function AnySelector() {
           />
         )}
       />
-
       {type ? (
-        <QxContext.Provider value={{ ...context, type }}>
+        <QxContext value={{ ...context, type }}>
           <ConstantSelector />
-        </QxContext.Provider>
+        </QxContext>
       ) : null}
     </>
   );

package/src/components/common/expressions/constantInputs/BooleanSelector.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { use } from "react";
 import { useIntl } from "react-intl";
 import { Controller, useFormContext } from "react-hook-form";
 import { Dropdown } from "semantic-ui-react";
@@ -6,7 +6,7 @@ import QxContext from "@truedat/qx/components/QxContext";
 
 export default function BooleanSelector() {
   const { formatMessage } = useIntl();
-  const { field } = useContext(QxContext);
+  const { field } = use(QxContext);
   const { control } = useFormContext();
 
   return (

package/src/components/common/expressions/constantInputs/DefaultSelector.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { use } from "react";
 import { useIntl } from "react-intl";
 import { Form } from "semantic-ui-react";
 import { Controller, useFormContext } from "react-hook-form";
@@ -6,7 +6,7 @@ import QxContext from "@truedat/qx/components/QxContext";
 
 export default function DefaultSelector() {
   const { formatMessage } = useIntl();
-  const { field } = useContext(QxContext);
+  const { field } = use(QxContext);
   const { control } = useFormContext();
 
   return (

package/src/components/common/expressions/constantInputs/__tests__/AnySelector.spec.js

@@ -1,49 +1,28 @@
-import React from "react";
-import { render } from "@truedat/test/render";
 import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import AnySelector from "../AnySelector";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "functions.expression.constant.false": "false",
-      "functions.expression.constant.true": "true",
-      "functions.form.required": "required",
-      "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",
-    },
-  },
-  fallback: "lazy",
-};
-
-const watcher = jest.fn();
-
 describe("<AnySelector />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(
-      <TestFormWrapper>
-        <AnySelector />
-      </TestFormWrapper>,
-      renderOpts
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
+      <TestFormWrapper><AnySelector /></TestFormWrapper>
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("user interaction", async () => {
-    const { container, findByText } = render(
-      <TestFormWrapper watcher={watcher}>
-        <AnySelector />
-      </TestFormWrapper>,
-      renderOpts
+    const user = userEvent.setup({ delay: null });
+    const watcher = jest.fn();
+
+    const rendered = render(
+      <TestFormWrapper watcher={watcher}><AnySelector /></TestFormWrapper>
     );
+    await waitForLoad(rendered);
 
-    userEvent.click(await findByText("boolean"));
-    userEvent.click(await findByText("true"));
+    await user.click(await rendered.findByText(/boolean/i));
+    await user.click(await rendered.findByText(/true/i));
 
     expect(watcher).toHaveBeenLastCalledWith({
       test: {
@@ -54,7 +33,7 @@ describe("<AnySelector />", () => {
       },
     });
 
-    userEvent.click(await findByText("string"));
+    await user.click(await rendered.findByText(/string/i));
 
     expect(watcher).toHaveBeenLastCalledWith({
       test: {
@@ -65,6 +44,6 @@ describe("<AnySelector />", () => {
       },
     });
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/common/expressions/constantInputs/__tests__/BooleanSelector.spec.js

@@ -1,6 +1,5 @@
-import React from "react";
-import { render } from "@truedat/test/render";
 import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import BooleanSelector from "../BooleanSelector";
 
@@ -13,30 +12,28 @@ describe("<BooleanSelector />", () => {
         "functions.form.required": "required",
       },
     },
-    fallback: "lazy",
   };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(
-      <TestFormWrapper>
-        <BooleanSelector />
-      </TestFormWrapper>,
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
+      <TestFormWrapper><BooleanSelector /></TestFormWrapper>,
       renderOpts
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("user interaction", () => {
+  it("user interaction", async () => {
+    const user = userEvent.setup({ delay: null });
     const watcher = jest.fn();
-    const { container, getByRole } = render(
-      <TestFormWrapper watcher={watcher}>
-        <BooleanSelector />
-      </TestFormWrapper>,
+    const rendered = render(
+      <TestFormWrapper watcher={watcher}><BooleanSelector /></TestFormWrapper>,
       renderOpts
     );
+    await waitForLoad(rendered);
 
-    userEvent.click(getByRole("listbox"));
-    userEvent.click(getByRole("option", { name: /true/i }));
+    await user.click(rendered.getByRole("listbox"));
+    await user.click(rendered.getByRole("option", { name: /true/i }));
 
     expect(watcher).toHaveBeenLastCalledWith({
       test: {
@@ -46,6 +43,6 @@ describe("<BooleanSelector />", () => {
       },
     });
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/common/expressions/constantInputs/__tests__/DefaultSelector.spec.js

@@ -1,50 +1,35 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import { act } from "react-dom/test-utils";
 import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import DefaultSelector from "../DefaultSelector";
 
 describe("<DefaultSelector />", () => {
-  const renderOpts = {
-    messages: {
-      en: {
-        "functions.form.required": "required",
-      },
-    },
-    fallback: "lazy",
-  };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(
-      <TestFormWrapper>
-        <DefaultSelector />
-      </TestFormWrapper>,
-      renderOpts
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
+      <TestFormWrapper><DefaultSelector /></TestFormWrapper>
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("user interaction", async () => {
+    const user = userEvent.setup({ delay: null });
     const watcher = jest.fn();
     const field = "test";
     const defaultValues = {
       [field]: { value: { value: "" } },
     };
-    const { container, findByRole } = render(
+    const rendered = render(
       <TestFormWrapper
         watcher={watcher}
         defaultValues={defaultValues}
         context={{ field }}
-      >
-        <DefaultSelector />
-      </TestFormWrapper>,
-      renderOpts
+      ><DefaultSelector /></TestFormWrapper>
     );
+    await waitForLoad(rendered);
 
-    await act(async () => {
-      userEvent.type(await findByRole("textbox"), "text");
-    });
+    await user.type(rendered.getByRole("textbox"), "text");
 
     expect(watcher).toHaveBeenLastCalledWith({
       test: {
@@ -54,6 +39,6 @@ describe("<DefaultSelector />", () => {
       },
     });
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/common/expressions/constantInputs/__tests__/__snapshots__/AnySelector.spec.js.snap

@@ -30,7 +30,7 @@ exports[`<AnySelector /> matches the latest snapshot 1`] = `
         <span
           class="text"
         >
-          boolean
+          expressions.data_type.boolean
         </span>
       </div>
       <div
@@ -47,7 +47,7 @@ exports[`<AnySelector /> matches the latest snapshot 1`] = `
         <span
           class="text"
         >
-          string
+          expressions.data_type.string
         </span>
       </div>
       <div
@@ -64,7 +64,7 @@ exports[`<AnySelector /> matches the latest snapshot 1`] = `
         <span
           class="text"
         >
-          number
+          expressions.data_type.number
         </span>
       </div>
       <div
@@ -81,7 +81,7 @@ exports[`<AnySelector /> matches the latest snapshot 1`] = `
         <span
           class="text"
         >
-          date
+          expressions.data_type.date
         </span>
       </div>
       <div
@@ -98,7 +98,7 @@ exports[`<AnySelector /> matches the latest snapshot 1`] = `
         <span
           class="text"
         >
-          timestamp
+          expressions.data_type.timestamp
         </span>
       </div>
     </div>
@@ -122,7 +122,7 @@ exports[`<AnySelector /> user interaction 1`] = `
       class="divider text"
       role="alert"
     >
-      string
+      expressions.data_type.string
     </div>
     <i
       aria-hidden="true"
@@ -145,7 +145,7 @@ exports[`<AnySelector /> user interaction 1`] = `
         <span
           class="text"
         >
-          boolean
+          expressions.data_type.boolean
         </span>
       </div>
       <div
@@ -162,7 +162,7 @@ exports[`<AnySelector /> user interaction 1`] = `
         <span
           class="text"
         >
-          string
+          expressions.data_type.string
         </span>
       </div>
       <div
@@ -179,7 +179,7 @@ exports[`<AnySelector /> user interaction 1`] = `
         <span
           class="text"
         >
-          number
+          expressions.data_type.number
         </span>
       </div>
       <div
@@ -196,7 +196,7 @@ exports[`<AnySelector /> user interaction 1`] = `
         <span
           class="text"
         >
-          date
+          expressions.data_type.date
         </span>
       </div>
       <div
@@ -213,7 +213,7 @@ exports[`<AnySelector /> user interaction 1`] = `
         <span
           class="text"
         >
-          timestamp
+          expressions.data_type.timestamp
         </span>
       </div>
     </div>

package/src/components/common/expressions/constantInputs/__tests__/__snapshots__/DefaultSelector.spec.js.snap

@@ -12,7 +12,6 @@ exports[`<DefaultSelector /> matches the latest snapshot 1`] = `
         autocomplete="off"
         required=""
         type="text"
-        value=""
       />
     </div>
   </div>

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

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useContext, useState } from "react";
+import { use, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import { useIntl } from "react-intl";
 import { Icon, Form } from "semantic-ui-react";
@@ -8,7 +8,7 @@ import StructureSelector from "@truedat/dd/components/StructureSelector";
 
 export default function DataStructureSelector({ onChange }) {
   const { formatMessage } = useIntl();
-  const { field, sourceId } = useContext(QxContext);
+  const { field, sourceId } = use(QxContext);
   const { watch } = useFormContext();
   const selectedStructure = watch(`${field}.embedded`);
 

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

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useContext, useState } from "react";
+import { use, useState } from "react";
 import { useIntl } from "react-intl";
 import { Dropdown } from "semantic-ui-react";
 import { matchSorter } from "match-sorter";
@@ -8,7 +8,7 @@ import QxContext from "@truedat/qx/components/QxContext";
 export default function DataViewSelector({ onChange, onBlur, value }) {
   const { formatMessage } = useIntl();
   const [searchTerm, setSearchTerm] = useState("");
-  const { dataViews, sourceId, currentDataViewId } = useContext(QxContext);
+  const { dataViews, sourceId, currentDataViewId } = use(QxContext);
 
   const matchSorterFp = (items) =>
     matchSorter(items, searchTerm, {

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

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useContext, useState } from "react";
+import { use, useState } from "react";
 import { useIntl } from "react-intl";
 import { Dropdown } from "semantic-ui-react";
 import { matchSorter } from "match-sorter";
@@ -8,7 +8,7 @@ import QxContext from "@truedat/qx/components/QxContext";
 export default function ReferenceDatasetSelector({ onChange, onBlur, value }) {
   const { formatMessage } = useIntl();
   const [searchTerm, setSearchTerm] = useState("");
-  const { referenceDatasets } = useContext(QxContext);
+  const { referenceDatasets } = use(QxContext);
 
   const matchSorterFp = (items) =>
     matchSorter(items, searchTerm, {

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

@@ -1,7 +1,4 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
-import { act } from "react-dom/test-utils";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import DataStructureSelector from "../DataStructureSelector";
 
@@ -31,35 +28,14 @@ jest.mock("@truedat/dd/hooks/useStructures", () => {
   };
 });
 
-const renderOpts = {
-  messages: {
-    en: {
-      "queryables.resource.selector.data_structure": "data_structure",
-      "search.placeholder": "search placeholder",
-      "structures.not_found.body": "body",
-      "structures.loading.header": "loading",
-      "structures.search.placeholder": "placeholder",
-      "structures.not_found.header": "header",
-      "structures.loading.header": "loading",
-    },
-  },
-  fallback: "loading",
-};
-
 describe("<DataStructureSelector />", () => {
   it("matches the latest snapshot", async () => {
-    const { container } = render(
+    const rendered = render(
       <TestFormWrapper>
         <DataStructureSelector />
-      </TestFormWrapper>,
-      renderOpts
-    );
-    await waitFor(() =>
-      expect(container.querySelector(".loader")).not.toBeInTheDocument()
+      </TestFormWrapper>
     );
-
-    await act(async () => {
-      expect(container).toMatchSnapshot();
-    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });