@truedat/qx 5.14.1 → 5.15.0

package/src/components/{functions → common}/expressions/__tests__/Expression.spec.js

@@ -46,7 +46,10 @@ describe("<Expression />", () => {
     ];
 
     const { container, getByRole, getAllByRole, queryByText } = render(
-      <TestFormWrapper watcher={watcher} type="boolean" functions={functions}>
+      <TestFormWrapper
+        watcher={watcher}
+        context={{ type: "boolean", functions }}
+      >
         <Expression />
       </TestFormWrapper>,
       renderOpts
@@ -72,7 +75,7 @@ describe("<Expression />", () => {
     const watcher = jest.fn();
 
     const { container, getByRole, getAllByRole, queryByText } = render(
-      <TestFormWrapper watcher={watcher} type="boolean">
+      <TestFormWrapper watcher={watcher} context={{ type: "boolean" }}>
         <Expression />
       </TestFormWrapper>,
       renderOpts
@@ -106,9 +109,8 @@ describe("<Expression />", () => {
     const { container, getByRole, getAllByRole, queryByText } = render(
       <TestFormWrapper
         watcher={watcher}
-        type="boolean"
+        context={{ type: "boolean" }}
         defaultValues={defaultValues}
-        s
       >
         <Expression />
       </TestFormWrapper>,
@@ -119,7 +121,7 @@ describe("<Expression />", () => {
 
     expect(watcher).lastCalledWith({
       params: [{ name: "param1", type: "boolean", id: 1 }],
-      test: { shape: "param" },
+      test: { shape: "param", value: { id: undefined } },
     });
 
     await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument(), {

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import FieldSelector from "../FieldSelector";
+
+describe("<FieldSelector />", () => {
+  it("matches the latest snapshot", () => {
+    const fields = [{ id: 1, parent_id: 2, name: "name" }];
+    const { container } = render(
+      <TestFormWrapper context={{ fields }}>
+        <FieldSelector />
+      </TestFormWrapper>
+    );
+    expect(container).toMatchSnapshot();
+  });
+  it("matches the latest snapshot empty", () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <FieldSelector />
+      </TestFormWrapper>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/{functions → common}/expressions/__tests__/FunctionArgs.spec.js

@@ -11,6 +11,15 @@ const renderOpts = {
       "functions.expression.shape.function": "function",
       "functions.expression.shape.constant": "constant",
       "functions.form.expression.function.placeholder": "function.placeholder",
+      "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",
+      "functions.expression.constant.false": "false",
+      "functions.expression.constant.true": "true",
     },
   },
   fallback: "lazy",
@@ -35,8 +44,8 @@ describe("<FunctionArgs />", () => {
         name: "eq",
         type: "boolean",
         params: [
-          { name: "arg1", type: "any" },
-          { name: "arg2", type: "any" },
+          { name: "arg1", type: "boolean" },
+          { name: "arg2", type: "boolean" },
         ],
       },
     ];
@@ -54,8 +63,7 @@ describe("<FunctionArgs />", () => {
     const { container, getAllByRole, queryByText } = render(
       <TestFormWrapper
         watcher={watcher}
-        type="boolean"
-        functions={functions}
+        context={{ type: "boolean", functions }}
         defaultValues={defaultValues}
       >
         <FunctionArgs />
@@ -72,8 +80,14 @@ describe("<FunctionArgs />", () => {
         shape: "function",
         value: {
           args: {
-            arg1: { shape: "constant" },
-            arg2: { shape: "function" },
+            arg1: {
+              shape: "constant",
+              value: { type: "boolean", value: undefined },
+            },
+            arg2: {
+              shape: "function",
+              value: undefined,
+            },
           },
           name: "eq",
           type: "boolean",

package/src/components/{functions → common}/expressions/__tests__/FunctionSelector.spec.js

@@ -42,7 +42,7 @@ describe("<FunctionSelector />", () => {
     ];
 
     const { container, getByRole, queryByText } = render(
-      <TestFormWrapper watcher={watcher} type="any" functions={functions}>
+      <TestFormWrapper watcher={watcher} context={{ type: "any", functions }}>
         <FunctionSelector />
       </TestFormWrapper>,
       renderOpts

package/src/components/{functions → common}/expressions/__tests__/ParamSelector.spec.js

@@ -1,10 +1,11 @@
 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 TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import FunctionParams from "@truedat/qx/components/functions/FunctionParams";
 import ParamSelector from "../ParamSelector";
-import FunctionParams from "../../FunctionParams";
 
 const renderOpts = {
   messages: {
@@ -13,6 +14,12 @@ const renderOpts = {
       "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",
@@ -42,7 +49,7 @@ describe("<ParamSelector />", () => {
     const { container, queryByText, getByRole } = render(
       <TestFormWrapper
         watcher={watcher}
-        type="boolean"
+        context={{ type: "boolean" }}
         defaultValues={defaultValues}
       >
         <ParamSelector />
@@ -51,7 +58,9 @@ describe("<ParamSelector />", () => {
     );
     await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
 
-    userEvent.click(getByRole("option", { name: /param1/i }));
+    await act(async () => {
+      userEvent.click(getByRole("option", { name: /param1/i }));
+    });
 
     expect(watcher).lastCalledWith({
       params: [
@@ -61,7 +70,7 @@ describe("<ParamSelector />", () => {
           type: "boolean",
         },
       ],
-      test: { value: 1 },
+      test: { value: { id: 1 } },
     });
 
     expect(container).toMatchSnapshot();
@@ -78,7 +87,7 @@ describe("<ParamSelector />", () => {
       render(
         <TestFormWrapper
           watcher={watcher}
-          type="boolean"
+          context={{ type: "boolean" }}
           defaultValues={defaultValues}
         >
           <FunctionParams />
@@ -88,7 +97,9 @@ describe("<ParamSelector />", () => {
       );
     await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
 
-    userEvent.click(await getByRole("option", { name: /param1/i }));
+    await act(async () =>
+      userEvent.click(await getByRole("option", { name: /param1/i }))
+    );
 
     expect(watcher).lastCalledWith({
       params: [
@@ -98,12 +109,13 @@ describe("<ParamSelector />", () => {
           type: "boolean",
         },
       ],
-      test: { value: 1 },
+      test: { value: { id: 1 } },
     });
 
-    userEvent.hover(await findByRole("textbox"));
-
-    userEvent.click(getAllByRole("button")[0]);
+    await act(async () => {
+      userEvent.hover(await findByRole("textbox"));
+      userEvent.click(getAllByRole("button")[0]);
+    });
 
     expect(watcher).lastCalledWith({
       params: [],

package/src/components/{functions → common}/expressions/__tests__/ShapeSelector.spec.js

@@ -40,7 +40,7 @@ describe("<ShapeSelector />", () => {
     const { container, queryByText, getByRole } = render(
       <TestFormWrapper
         watcher={watcher}
-        type="boolean"
+        context={{ type: "boolean" }}
         defaultValues={defaultValues}
       >
         <ShapeSelector />
@@ -69,7 +69,7 @@ describe("<ShapeSelector />", () => {
     const watcher = jest.fn();
 
     const { container, queryByText, getByRole } = render(
-      <TestFormWrapper watcher={watcher} type="boolean">
+      <TestFormWrapper watcher={watcher} context={{ type: "boolean" }}>
         <ShapeSelector />
       </TestFormWrapper>,
       renderOpts
@@ -89,7 +89,7 @@ describe("<ShapeSelector />", () => {
     const watcher = jest.fn();
 
     const { container, queryByText, getByRole } = render(
-      <TestFormWrapper watcher={watcher} type="boolean">
+      <TestFormWrapper watcher={watcher} context={{ type: "boolean" }}>
         <ShapeSelector />
       </TestFormWrapper>,
       renderOpts

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

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Clauses /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="field"
+  >
+    <label>
+      Clause
+    </label>
+    <div
+      class="ui horizontal divider"
+    >
+      <button
+        class="ui mini button"
+      >
+        Add Group
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Clauses /> matches the latest snapshot with content 1`] = `
+<div>
+  <div
+    class="field"
+  >
+    <label>
+      Clause
+    </label>
+    <div>
+      <div
+        class="ui segment"
+      >
+        <div
+          class="clause-and-group"
+        />
+        <div
+          class="ui horizontal divider"
+        >
+          <button
+            class="ui mini button"
+          >
+            addExpression
+          </button>
+        </div>
+      </div>
+      <div
+        class="ui horizontal divider"
+      />
+    </div>
+    <div
+      class="ui horizontal divider"
+    >
+      <button
+        class="ui mini button"
+      >
+        Add Group
+      </button>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,316 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Condition /> matches the latest snapshot 1`] = `
+<div>
+  <div>
+    <div
+      class="ui grid condition-row"
+    >
+      <div
+        class="six wide column"
+      >
+        <div
+          class="ui grid"
+        >
+          <div
+            class="sixteen wide column"
+          >
+            <div
+              class="expression-container"
+            >
+              <div
+                aria-expanded="false"
+                class="ui top left pointing dropdown"
+                role="listbox"
+                tabindex="0"
+              >
+                <div
+                  class="shape-selector-trigger"
+                >
+                  f(x)
+                </div>
+                <div
+                  class="menu transition"
+                >
+                  <div
+                    aria-checked="false"
+                    aria-selected="false"
+                    class="item"
+                    role="option"
+                    style="pointer-events: all;"
+                  >
+                    <div
+                      class="text flex-center"
+                    >
+                      <small
+                        style="margin-right: 5px;"
+                      >
+                        <b>
+                          <code>
+                            [π]
+                          </code>
+                        </b>
+                      </small>
+                      Constant
+                    </div>
+                  </div>
+                  <div
+                    aria-checked="true"
+                    aria-selected="true"
+                    class="active selected item"
+                    role="option"
+                    style="pointer-events: all;"
+                  >
+                    <div
+                      class="text flex-center"
+                    >
+                      <small
+                        style="margin-right: 5px;"
+                      >
+                        <b>
+                          <code>
+                            f(x)
+                          </code>
+                        </b>
+                      </small>
+                      Function
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="accordion ui fluid no-margin"
+              >
+                <div
+                  class="active title no-padding"
+                >
+                  <div
+                    class="flex-center"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="dropdown icon"
+                    />
+                    <div
+                      aria-expanded="false"
+                      class="ui fluid 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"
+                      >
+                        function 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="content active no-padding"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="three wide column"
+      >
+        <div
+          class="flex-justify-center"
+        >
+          <div
+            aria-expanded="false"
+            class="ui top left pointing dropdown"
+            role="listbox"
+            tabindex="0"
+          >
+            <div
+              class="condition-operator-trigger"
+            >
+              <span>
+                Select Function
+              </span>
+            </div>
+            <div
+              class="menu transition"
+            >
+              <div
+                aria-checked="false"
+                aria-selected="true"
+                class="selected item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <span
+                  class="text"
+                >
+                  Custom Expression
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="six wide column"
+      >
+        <div
+          class="ui grid"
+        >
+          <div
+            class="sixteen wide column"
+          >
+            <div
+              class="expression-container"
+            >
+              <div
+                aria-expanded="false"
+                class="ui top left pointing dropdown"
+                role="listbox"
+                tabindex="0"
+              >
+                <div
+                  class="shape-selector-trigger"
+                >
+                  f(x)
+                </div>
+                <div
+                  class="menu transition"
+                >
+                  <div
+                    aria-checked="false"
+                    aria-selected="false"
+                    class="item"
+                    role="option"
+                    style="pointer-events: all;"
+                  >
+                    <div
+                      class="text flex-center"
+                    >
+                      <small
+                        style="margin-right: 5px;"
+                      >
+                        <b>
+                          <code>
+                            [π]
+                          </code>
+                        </b>
+                      </small>
+                      Constant
+                    </div>
+                  </div>
+                  <div
+                    aria-checked="true"
+                    aria-selected="true"
+                    class="active selected item"
+                    role="option"
+                    style="pointer-events: all;"
+                  >
+                    <div
+                      class="text flex-center"
+                    >
+                      <small
+                        style="margin-right: 5px;"
+                      >
+                        <b>
+                          <code>
+                            f(x)
+                          </code>
+                        </b>
+                      </small>
+                      Function
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="accordion ui fluid no-margin"
+              >
+                <div
+                  class="active title no-padding"
+                >
+                  <div
+                    class="flex-center"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="dropdown icon"
+                    />
+                    <div
+                      aria-expanded="false"
+                      class="ui fluid 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"
+                      >
+                        function 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="content active no-padding"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="middle aligned one wide column"
+      />
+    </div>
+  </div>
+</div>
+`;

package/src/components/{functions → common}/expressions/__tests__/__snapshots__/ConstantSelector.spec.js.snap

@@ -92,7 +92,7 @@ exports[`<ConstantSelector /> user interaction 1`] = `
         <span
           class="text"
         >
-          numeric
+          number
         </span>
       </div>
       <div