@truedat/qx 7.5.9 → 7.5.10

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

@@ -1,66 +1,42 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
-import { act } from "react-dom/test-utils";
-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 FunctionParams from "@truedat/qx/components/functions/FunctionParams";
 import ParamSelector from "../ParamSelector";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "functions.form.required": "required",
-      "functions.form.add_description": "add_description",
-      "functions.form.name": "name",
-      "functions.form.add_param": "add_param",
-      "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",
-};
-
 describe("<ParamSelector />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const defaultValues = {
       params: [{ name: "param1", type: "boolean", id: 1 }],
     };
-    const { container } = render(
+    const rendered = render(
       <TestFormWrapper defaultValues={defaultValues}>
         <ParamSelector />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("user interaction", async () => {
+    const user = userEvent.setup({ delay: null, skipHover: true });
     const watcher = jest.fn();
-
     const defaultValues = {
       params: [{ name: "param1", type: "boolean", id: 1 }],
     };
 
-    const { container, queryByText, getByRole } = render(
+    const rendered = render(
       <TestFormWrapper
         watcher={watcher}
         context={{ type: "boolean" }}
         defaultValues={defaultValues}
       >
         <ParamSelector />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitForLoad(rendered);
 
-    await act(async () => {
-      userEvent.click(getByRole("option", { name: /param1/i }));
-    });
+    await user.click(rendered.getByRole("option", { name: /param1/i }));
 
     expect(watcher).toHaveBeenLastCalledWith({
       params: [
@@ -73,33 +49,29 @@ describe("<ParamSelector />", () => {
       test: { value: { id: 1 } },
     });
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("deleting param will clean field", async () => {
+    const user = userEvent.setup({ delay: null, skipHover: true });
     const watcher = jest.fn();
-
     const defaultValues = {
       params: [{ name: "param1", type: "boolean", id: 1 }],
     };
 
-    const { container, queryByText, getAllByRole, getByRole, findByRole } =
-      render(
-        <TestFormWrapper
-          watcher={watcher}
-          context={{ type: "boolean" }}
-          defaultValues={defaultValues}
-        >
-          <FunctionParams />
-          <ParamSelector />
-        </TestFormWrapper>,
-        renderOpts
-      );
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-
-    await act(async () =>
-      userEvent.click(await getByRole("option", { name: /param1/i }))
+    const rendered = render(
+      <TestFormWrapper
+        watcher={watcher}
+        context={{ type: "boolean" }}
+        defaultValues={defaultValues}
+      >
+        <FunctionParams />
+        <ParamSelector />
+      </TestFormWrapper>
     );
+    await waitForLoad(rendered);
+
+    await user.click(rendered.getByRole("option", { name: /param1/i }));
 
     expect(watcher).toHaveBeenLastCalledWith({
       params: [
@@ -112,16 +84,14 @@ describe("<ParamSelector />", () => {
       test: { value: { id: 1 } },
     });
 
-    await act(async () => {
-      userEvent.hover(await findByRole("textbox"));
-      userEvent.click(getAllByRole("button")[0]);
-    });
+    await user.hover(rendered.getByRole("textbox"));
+    await user.click(rendered.getAllByRole("button")[0]);
 
     expect(watcher).toHaveBeenLastCalledWith({
       params: [],
       test: { value: null },
     });
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,57 +1,43 @@
-import React from "react";
-import { waitFor } from "@testing-library/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 ShapeSelector from "../ShapeSelector";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "functions.expression.shape.function": "function",
-      "functions.expression.shape.constant": "constant",
-      "functions.expression.shape.param": "param",
-    },
-  },
-  fallback: "loading",
-};
-
 describe("<ShapeSelector />", () => {
   it("matches the latest snapshot", async () => {
     const defaultValues = {
       params: [{ name: "param1", type: "boolean", id: 1 }],
     };
-    const { container, queryByText } = render(
+    const rendered = render(
       <TestFormWrapper defaultValues={defaultValues}>
         <ShapeSelector />
-      </TestFormWrapper>,
-      renderOpts
-    );
-
-    await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+      </TestFormWrapper>
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
   it("user interaction select param", async () => {
+    const user = userEvent.setup({ delay: null });
     const watcher = jest.fn();
     const defaultValues = {
       params: [{ name: "param1", type: "boolean", id: 1 }],
     };
-    const { container, queryByText, getByRole } = render(
+
+    const rendered = render(
       <TestFormWrapper
         watcher={watcher}
         context={{ type: "boolean" }}
         defaultValues={defaultValues}
       >
         <ShapeSelector />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    await waitForLoad(rendered);
+
+    await user.click(
+      await rendered.findByRole("option", { name: /expression.shape.param/i })
     );
-    userEvent.click(await getByRole("option", { name: /param/i }));
+
     expect(watcher).toHaveBeenLastCalledWith({
       params: [
         {
@@ -62,40 +48,53 @@ describe("<ShapeSelector />", () => {
       ],
       test: { shape: "param", value: { isCondition: undefined } },
     });
-    expect(container).toMatchSnapshot();
+
+    expect(rendered.container).toMatchSnapshot();
   });
   it("user interaction select constant", async () => {
+    const user = userEvent.setup({ delay: null });
     const watcher = jest.fn();
-    const { container, queryByText, getByRole } = render(
+
+    const rendered = render(
       <TestFormWrapper watcher={watcher} context={{ type: "boolean" }}>
         <ShapeSelector />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    await waitForLoad(rendered);
+
+    await user.click(
+      await rendered.findByRole("option", {
+        name: /expression.shape.constant/i,
+      })
     );
-    userEvent.click(await getByRole("option", { name: /constant/i }));
+
     expect(watcher).toHaveBeenLastCalledWith({
       test: { shape: "constant", value: { isCondition: undefined } },
     });
-    expect(container).toMatchSnapshot();
+
+    expect(rendered.container).toMatchSnapshot();
   });
   it("user interaction select function", async () => {
+    const user = userEvent.setup({ delay: null });
     const watcher = jest.fn();
-    const { container, queryByText, getByRole } = render(
+
+    const rendered = render(
       <TestFormWrapper watcher={watcher} context={{ type: "boolean" }}>
         <ShapeSelector />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    await waitForLoad(rendered);
+
+    await user.click(
+      await rendered.findByRole("option", {
+        name: /expression.shape.function/i,
+      })
     );
-    userEvent.click(await getByRole("option", { name: /function/i }));
+
     expect(watcher).toHaveBeenLastCalledWith({
       test: { shape: "function", value: { isCondition: undefined } },
     });
-    expect(container).toMatchSnapshot();
+
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -49,7 +49,7 @@ exports[`<Condition /> matches the latest snapshot 1`] = `
                           </code>
                         </b>
                       </small>
-                      Constant
+                      functions.expression.shape.constant
                     </div>
                   </div>
                   <div
@@ -71,7 +71,7 @@ exports[`<Condition /> matches the latest snapshot 1`] = `
                           </code>
                         </b>
                       </small>
-                      Function
+                      functions.expression.shape.function
                     </div>
                   </div>
                 </div>
@@ -96,7 +96,7 @@ exports[`<Condition /> matches the latest snapshot 1`] = `
               class="condition-operator-trigger"
             >
               <span>
-                Select Function
+                expression.condition.selectFunction
               </span>
             </div>
             <div
@@ -112,7 +112,7 @@ exports[`<Condition /> matches the latest snapshot 1`] = `
                 <span
                   class="text"
                 >
-                  Custom Expression
+                  expression.condition.customExpression
                 </span>
               </div>
             </div>
@@ -162,7 +162,7 @@ exports[`<Condition /> matches the latest snapshot 1`] = `
                           </code>
                         </b>
                       </small>
-                      Constant
+                      functions.expression.shape.constant
                     </div>
                   </div>
                   <div
@@ -184,7 +184,7 @@ exports[`<Condition /> matches the latest snapshot 1`] = `
                           </code>
                         </b>
                       </small>
-                      Function
+                      functions.expression.shape.function
                     </div>
                   </div>
                 </div>

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

@@ -12,7 +12,6 @@ exports[`<ConstantSelector /> matches the latest snapshot 1`] = `
         autocomplete="off"
         required=""
         type="text"
-        value=""
       />
     </div>
   </div>
@@ -35,7 +34,7 @@ exports[`<ConstantSelector /> user interaction 1`] = `
       class="divider text"
       role="alert"
     >
-      string
+      expressions.data_type.string
     </div>
     <i
       aria-hidden="true"
@@ -58,7 +57,7 @@ exports[`<ConstantSelector /> user interaction 1`] = `
         <span
           class="text"
         >
-          boolean
+          expressions.data_type.boolean
         </span>
       </div>
       <div
@@ -75,7 +74,7 @@ exports[`<ConstantSelector /> user interaction 1`] = `
         <span
           class="text"
         >
-          string
+          expressions.data_type.string
         </span>
       </div>
       <div
@@ -92,7 +91,7 @@ exports[`<ConstantSelector /> user interaction 1`] = `
         <span
           class="text"
         >
-          number
+          expressions.data_type.number
         </span>
       </div>
       <div
@@ -109,7 +108,7 @@ exports[`<ConstantSelector /> user interaction 1`] = `
         <span
           class="text"
         >
-          date
+          expressions.data_type.date
         </span>
       </div>
       <div
@@ -126,7 +125,7 @@ exports[`<ConstantSelector /> user interaction 1`] = `
         <span
           class="text"
         >
-          timestamp
+          expressions.data_type.timestamp
         </span>
       </div>
     </div>

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

@@ -42,7 +42,7 @@ exports[`<Expression /> matches the latest snapshot 1`] = `
                     </code>
                   </b>
                 </small>
-                constant
+                functions.expression.shape.constant
               </div>
             </div>
             <div
@@ -64,7 +64,7 @@ exports[`<Expression /> matches the latest snapshot 1`] = `
                     </code>
                   </b>
                 </small>
-                function
+                functions.expression.shape.function
               </div>
             </div>
           </div>
@@ -119,7 +119,7 @@ exports[`<Expression /> shape constant expression 1`] = `
                     </code>
                   </b>
                 </small>
-                constant
+                functions.expression.shape.constant
               </div>
             </div>
             <div
@@ -141,7 +141,7 @@ exports[`<Expression /> shape constant expression 1`] = `
                     </code>
                   </b>
                 </small>
-                function
+                functions.expression.shape.function
               </div>
             </div>
           </div>
@@ -169,7 +169,7 @@ exports[`<Expression /> shape constant expression 1`] = `
               <span
                 class="text"
               >
-                true
+                functions.expression.constant.true
               </span>
             </div>
             <div
@@ -182,7 +182,7 @@ exports[`<Expression /> shape constant expression 1`] = `
               <span
                 class="text"
               >
-                false
+                functions.expression.constant.false
               </span>
             </div>
           </div>
@@ -238,7 +238,7 @@ exports[`<Expression /> shape function expression 1`] = `
                     </code>
                   </b>
                 </small>
-                constant
+                functions.expression.shape.constant
               </div>
             </div>
             <div
@@ -260,7 +260,7 @@ exports[`<Expression /> shape function expression 1`] = `
                     </code>
                   </b>
                 </small>
-                function
+                functions.expression.shape.function
               </div>
             </div>
           </div>
@@ -279,8 +279,8 @@ exports[`<Expression /> shape function expression 1`] = `
                 class="dropdown icon"
               />
               <div
-                aria-expanded="true"
-                class="ui active visible fluid search selection dropdown"
+                aria-expanded="false"
+                class="ui fluid search selection dropdown"
                 role="combobox"
               >
                 <input
@@ -304,7 +304,7 @@ exports[`<Expression /> shape function expression 1`] = `
                   class="dropdown icon"
                 />
                 <div
-                  class="visible menu transition"
+                  class="menu transition"
                   role="listbox"
                 >
                   <div
@@ -427,7 +427,7 @@ exports[`<Expression /> shape function expression 1`] = `
                                     </code>
                                   </b>
                                 </small>
-                                constant
+                                functions.expression.shape.constant
                               </div>
                             </div>
                             <div
@@ -449,7 +449,7 @@ exports[`<Expression /> shape function expression 1`] = `
                                     </code>
                                   </b>
                                 </small>
-                                function
+                                functions.expression.shape.function
                               </div>
                             </div>
                           </div>
@@ -486,7 +486,7 @@ exports[`<Expression /> shape function expression 1`] = `
                                   class="divider text"
                                   role="alert"
                                 >
-                                  function.placeholder
+                                  functions.form.expression.function.placeholder
                                 </div>
                                 <i
                                   aria-hidden="true"
@@ -619,7 +619,7 @@ exports[`<Expression /> shape function expression 1`] = `
                                     </code>
                                   </b>
                                 </small>
-                                constant
+                                functions.expression.shape.constant
                               </div>
                             </div>
                             <div
@@ -641,7 +641,7 @@ exports[`<Expression /> shape function expression 1`] = `
                                     </code>
                                   </b>
                                 </small>
-                                function
+                                functions.expression.shape.function
                               </div>
                             </div>
                           </div>
@@ -678,7 +678,7 @@ exports[`<Expression /> shape function expression 1`] = `
                                   class="divider text"
                                   role="alert"
                                 >
-                                  function.placeholder
+                                  functions.form.expression.function.placeholder
                                 </div>
                                 <i
                                   aria-hidden="true"
@@ -798,7 +798,7 @@ exports[`<Expression /> shape param expression 1`] = `
                     </code>
                   </b>
                 </small>
-                constant
+                functions.expression.shape.constant
               </div>
             </div>
             <div
@@ -820,7 +820,7 @@ exports[`<Expression /> shape param expression 1`] = `
                     </code>
                   </b>
                 </small>
-                function
+                functions.expression.shape.function
               </div>
             </div>
             <div
@@ -842,7 +842,7 @@ exports[`<Expression /> shape param expression 1`] = `
                     </code>
                   </b>
                 </small>
-                param
+                functions.expression.shape.param
               </div>
             </div>
           </div>

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

@@ -6,7 +6,6 @@ exports[`<FunctionArgs /> user interaction 1`] = `
 <div>
   <ul
     class="function-tree"
-    style=""
   >
     <li>
       <div
@@ -74,7 +73,7 @@ exports[`<FunctionArgs /> user interaction 1`] = `
                           </code>
                         </b>
                       </small>
-                      constant
+                      functions.expression.shape.constant
                     </div>
                   </div>
                   <div
@@ -96,7 +95,7 @@ exports[`<FunctionArgs /> user interaction 1`] = `
                           </code>
                         </b>
                       </small>
-                      function
+                      functions.expression.shape.function
                     </div>
                   </div>
                 </div>
@@ -113,7 +112,7 @@ exports[`<FunctionArgs /> user interaction 1`] = `
                   class="divider text"
                   role="alert"
                 >
-                  true
+                  functions.expression.constant.true
                 </div>
                 <i
                   aria-hidden="true"
@@ -132,7 +131,7 @@ exports[`<FunctionArgs /> user interaction 1`] = `
                     <span
                       class="text"
                     >
-                      true
+                      functions.expression.constant.true
                     </span>
                   </div>
                   <div
@@ -145,7 +144,7 @@ exports[`<FunctionArgs /> user interaction 1`] = `
                     <span
                       class="text"
                     >
-                      false
+                      functions.expression.constant.false
                     </span>
                   </div>
                 </div>
@@ -221,7 +220,7 @@ exports[`<FunctionArgs /> user interaction 1`] = `
                           </code>
                         </b>
                       </small>
-                      constant
+                      functions.expression.shape.constant
                     </div>
                   </div>
                   <div
@@ -243,7 +242,7 @@ exports[`<FunctionArgs /> user interaction 1`] = `
                           </code>
                         </b>
                       </small>
-                      function
+                      functions.expression.shape.function
                     </div>
                   </div>
                 </div>
@@ -280,7 +279,7 @@ exports[`<FunctionArgs /> user interaction 1`] = `
                         class="divider text"
                         role="alert"
                       >
-                        function.placeholder
+                        functions.form.expression.function.placeholder
                       </div>
                       <i
                         aria-hidden="true"