@truedat/qx 8.5.1 → 8.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "8.5.1",
+  "version": "8.5.2",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
   "module": "src/index.js",
@@ -56,7 +56,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.5.1",
+    "@truedat/test": "8.5.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -89,5 +89,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "d29d6cba24bb1c464650348851cfaf1911bbedfd"
+  "gitHead": "d0bbace3698b98e458856143676b7f631ee8e18f"
 }

package/src/components/common/expressions/Clauses.js

@@ -51,19 +51,15 @@ const ClauseExpression = ({ groupIndex, removeGroup, lastGroup }) => {
   const { formatMessage } = useIntl();
   const context = use(QxContext);
   const { field } = context;
-  const [isShownDelete, setIsShownDelete] = useState();
   const { fields, append, remove } = useFieldArray({
     name: `${field}[${groupIndex}].expressions`,
   });
 
   return (
-    <div
-      onMouseEnter={() => setIsShownDelete(true)}
-      onMouseLeave={() => setIsShownDelete(false)}
-    >
+    <>
       <Segment>
         <div className="clause-and-group">
-          {isShownDelete && removeGroup ? (
+          {removeGroup ? (
             <Button
               size="tiny"
               onClick={() => removeGroup(groupIndex)}
@@ -74,7 +70,7 @@ const ClauseExpression = ({ groupIndex, removeGroup, lastGroup }) => {
             />
           ) : null}
         </div>
-
+        <Divider hidden />
         {fields.map((_clauseExpression, expressionIndex) => (
           <div key={`and-${groupIndex}-${expressionIndex}`}>
             <QxContext
@@ -86,7 +82,7 @@ const ClauseExpression = ({ groupIndex, removeGroup, lastGroup }) => {
             >
               <Condition
                 onDelete={
-                  _.size(fields) < 2 ? null : () => remove(expressionIndex)
+                  expressionIndex > 0 ? () => remove(expressionIndex) : null
                 }
               />
             </QxContext>
@@ -108,7 +104,7 @@ const ClauseExpression = ({ groupIndex, removeGroup, lastGroup }) => {
         </Divider>
       </Segment>
       <Divider horizontal>{lastGroup ? null : "OR"}</Divider>
-    </div>
+    </>
   );
 };
 

package/src/components/common/expressions/Condition.js

@@ -1,6 +1,6 @@
 import _ from "lodash/fp";
 import { useIntl } from "react-intl";
-import { useState, use } from "react";
+import { use } from "react";
 import PropTypes from "prop-types";
 import { Dropdown, Button, Form, Grid, Label } from "semantic-ui-react";
 import { Controller, useFormContext } from "react-hook-form";
@@ -25,7 +25,6 @@ const isConditionExpression = (expression, functions) => {
 
 export default function Condition({ onDelete }) {
   const { formatMessage } = useIntl();
-  const [isShownDelete, setIsShownDelete] = useState();
   const context = use(QxContext);
   const { control, watch, setValue } = useFormContext();
   const { field, functions } = context;
@@ -69,10 +68,7 @@ export default function Condition({ onDelete }) {
     );
   };
   return (
-    <div
-      onMouseEnter={() => setIsShownDelete(true)}
-      onMouseLeave={() => setIsShownDelete(false)}
-    >
+    <>
       {!isCondition ? (
         <QxContext
           value={{
@@ -81,7 +77,7 @@ export default function Condition({ onDelete }) {
             omitLogicOperators: true,
           }}
         >
-          <Expression onDelete={isShownDelete ? onDelete : null} deletable />
+          <Expression onDelete={onDelete} deletable />
         </QxContext>
       ) : (
         <Grid className="condition-row">
@@ -115,35 +111,38 @@ export default function Condition({ onDelete }) {
                   },
                 }}
                 render={({
-                  field: { onBlur, onChange, value },
+                  field: { onBlur, onChange },
                   fieldState: { error },
-                }) => (
-                  <Form.Field error={!!error?.message}>
-                    <Dropdown
-                      options={condFuncOptions}
-                      onBlur={onBlur}
-                      value={value || ""}
-                      fluid
-                      onChange={(_e, { value }) => {
-                        if (value == "customExpression") {
-                          setValue(`${field}.value`, { isCondition: false });
-                        } else {
-                          onChange(value);
-                          setValue(`${field}.value.type`, "boolean");
-                          setValue(`${field}.value.isCondition`, true);
-                        }
-                      }}
-                      trigger={operatorTrigger(value)}
-                      pointing="top left"
-                      icon={null}
-                    />
-                    {error?.message && (
-                      <Label prompt pointing>
-                        {error?.message}
-                      </Label>
-                    )}
-                  </Form.Field>
-                )}
+                }) => {
+                  const displayValue = expression?.value?.name ?? "";
+                  return (
+                    <Form.Field error={!!error?.message}>
+                      <Dropdown
+                        options={condFuncOptions}
+                        onBlur={onBlur}
+                        value={displayValue || ""}
+                        fluid
+                        onChange={(_e, { value }) => {
+                          if (value == "customExpression") {
+                            setValue(`${field}.value`, { isCondition: false });
+                          } else {
+                            onChange(value);
+                            setValue(`${field}.value.type`, "boolean");
+                            setValue(`${field}.value.isCondition`, true);
+                          }
+                        }}
+                        trigger={operatorTrigger(displayValue)}
+                        pointing="top left"
+                        icon={null}
+                      />
+                      {error?.message && (
+                        <Label prompt pointing>
+                          {error?.message}
+                        </Label>
+                      )}
+                    </Form.Field>
+                  );
+                }}
               />
             </div>
           </Grid.Column>
@@ -163,7 +162,7 @@ export default function Condition({ onDelete }) {
           </Grid.Column>
 
           <Grid.Column width={1} verticalAlign="top">
-            {onDelete && isShownDelete ? (
+            {onDelete ? (
               <div className="delete-expression-column">
                 <Button
                   size="mini"
@@ -178,7 +177,7 @@ export default function Condition({ onDelete }) {
           </Grid.Column>
         </Grid>
       )}
-    </div>
+    </>
   );
 }
 

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

@@ -1,3 +1,5 @@
+import { act, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import Clauses from "../Clauses";
@@ -13,6 +15,14 @@ const renderOpts = {
 };
 
 describe("<Clauses />", () => {
+  beforeEach(() => {
+    jest.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
   it("matches the latest snapshot", async () => {
     const rendered = render(
       <TestFormWrapper>
@@ -51,4 +61,81 @@ describe("<Clauses />", () => {
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
+
+  it("adds and removes clause groups", async () => {
+    const user = userEvent.setup({ delay: null });
+    const formValuesRef = { current: {} };
+    const rendered = render(
+      <TestFormWrapper
+        context={{
+          field: "test",
+        }}
+        defaultValues={{
+          test: [{ expressions: [{ shape: "function", value: null }] }],
+        }}
+        watcher={(values) => {
+          formValuesRef.current = values;
+        }}
+      >
+        <Clauses />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    await waitForLoad(rendered);
+
+    await act(async () => {
+      await user.click(rendered.getByText(/add group/i));
+    });
+    await waitFor(() => expect(formValuesRef.current.test).toHaveLength(2));
+    await waitFor(() =>
+      expect(formValuesRef.current.test[1].expressions).toHaveLength(1)
+    );
+    await waitFor(() =>
+      expect(formValuesRef.current.test[1].expressions[0]).toEqual(
+        expect.objectContaining({ shape: "function" })
+      )
+    );
+    await waitFor(() =>
+      expect(rendered.getAllByLabelText(/delete/i)).toHaveLength(2)
+    );
+
+    await act(async () => {
+      await user.click(rendered.getAllByLabelText(/delete/i)[0]);
+    });
+    await waitFor(() => expect(formValuesRef.current.test).toHaveLength(1));
+  });
+
+  it("adds expression into a clause group", async () => {
+    const user = userEvent.setup({ delay: null });
+    const formValuesRef = { current: {} };
+    const rendered = render(
+      <TestFormWrapper
+        context={{
+          field: "test",
+        }}
+        defaultValues={{
+          test: [{ expressions: [{ shape: "function", value: null }] }],
+        }}
+        watcher={(values) => {
+          formValuesRef.current = values;
+        }}
+      >
+        <Clauses />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    await waitForLoad(rendered);
+
+    await act(async () => {
+      await user.click(rendered.getByText(/addexpression/i));
+    });
+    await waitFor(() =>
+      expect(formValuesRef.current.test[0].expressions).toHaveLength(2)
+    );
+    await waitFor(() =>
+      expect(formValuesRef.current.test[0].expressions[1]).toEqual(
+        expect.objectContaining({ shape: "function" })
+      )
+    );
+  });
 });

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

@@ -1,6 +1,22 @@
+import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
+import PropTypes from "prop-types";
 import { render, waitForLoad } from "@truedat/test/render";
+import { useFormContext } from "react-hook-form";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
-import Condition from "../Condition";
+import Condition, { isConditionFunction } from "../Condition";
+
+function ValidationTrigger({ name }) {
+  const { trigger } = useFormContext();
+  return (
+    <button type="button" onClick={() => trigger(name)}>
+      validate
+    </button>
+  );
+}
+ValidationTrigger.propTypes = {
+  name: PropTypes.string.isRequired,
+};
 
 describe("<Condition />", () => {
   it("matches the latest snapshot", async () => {
@@ -13,4 +29,207 @@ describe("<Condition />", () => {
 
     expect(rendered.container).toMatchSnapshot();
   });
+
+  it("identifies valid condition functions", () => {
+    expect(
+      isConditionFunction({
+        type: "boolean",
+        params: [
+          { name: "arg1", type: "any" },
+          { name: "arg2", type: "any" },
+        ],
+      })
+    ).toBe(true);
+
+    expect(
+      isConditionFunction({
+        type: "string",
+        params: [
+          { name: "arg1", type: "any" },
+          { name: "arg2", type: "any" },
+        ],
+      })
+    ).toBe(false);
+  });
+
+  it("shows delete action and handles delete click for condition rows", async () => {
+    const user = userEvent.setup({ delay: null });
+    const onDelete = jest.fn();
+    const rendered = render(
+      <TestFormWrapper
+        context={{
+          field: "test",
+          functions: [
+            {
+              name: "eq",
+              type: "boolean",
+              params: [
+                { name: "arg1", type: "any" },
+                { name: "arg2", type: "any" },
+              ],
+            },
+          ],
+        }}
+        defaultValues={{
+          test: {
+            shape: "function",
+            value: {
+              name: "eq",
+              type: "boolean",
+              args: { arg1: { shape: "field" }, arg2: { shape: "field" } },
+            },
+          },
+        }}
+      >
+        <Condition onDelete={onDelete} />
+      </TestFormWrapper>
+    );
+    await waitForLoad(rendered);
+
+    await user.click(rendered.getByLabelText(/delete/i));
+    expect(onDelete).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows required validation for condition function name", async () => {
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(
+      <TestFormWrapper
+        context={{
+          field: "test",
+          functions: [
+            {
+              name: "eq",
+              type: "boolean",
+              params: [
+                { name: "arg1", type: "any" },
+                { name: "arg2", type: "any" },
+              ],
+            },
+          ],
+        }}
+        defaultValues={{
+          test: {
+            shape: "function",
+            value: {
+              name: "",
+              type: "boolean",
+              isCondition: true,
+              args: { arg1: { shape: "field" }, arg2: { shape: "field" } },
+            },
+          },
+        }}
+      >
+        <Condition />
+        <ValidationTrigger name="test.value.name" />
+      </TestFormWrapper>
+    );
+    await waitForLoad(rendered);
+
+    await user.click(rendered.getByText(/validate/i));
+    await waitFor(() =>
+      expect(rendered.getByText(/functions.form.required/i)).toBeInTheDocument()
+    );
+  });
+
+  it("switches from condition to custom expression option", async () => {
+    const user = userEvent.setup({ delay: null });
+    const formValuesRef = { current: {} };
+    const rendered = render(
+      <TestFormWrapper
+        context={{
+          field: "test",
+          functions: [
+            {
+              name: "eq",
+              type: "boolean",
+              params: [
+                { name: "arg1", type: "any" },
+                { name: "arg2", type: "any" },
+              ],
+            },
+          ],
+        }}
+        defaultValues={{
+          test: {
+            shape: "function",
+            value: {
+              name: "eq",
+              type: "boolean",
+              isCondition: true,
+              args: { arg1: { shape: "field" }, arg2: { shape: "field" } },
+            },
+          },
+        }}
+        watcher={(values) => {
+          formValuesRef.current = values;
+        }}
+      >
+        <Condition />
+      </TestFormWrapper>
+    );
+    await waitForLoad(rendered);
+
+    await user.click(rendered.getAllByRole("listbox")[1]);
+    await user.click(
+      rendered.getByText(/expression.condition.customexpression/i)
+    );
+
+    await waitFor(() =>
+      expect(formValuesRef.current.test.value).toEqual({ isCondition: false })
+    );
+  });
+
+  it("marks selected operator as condition function", async () => {
+    const user = userEvent.setup({ delay: null });
+    const formValuesRef = { current: {} };
+    const rendered = render(
+      <TestFormWrapper
+        context={{
+          field: "test",
+          functions: [
+            {
+              name: "eq",
+              type: "boolean",
+              params: [
+                { name: "arg1", type: "any" },
+                { name: "arg2", type: "any" },
+              ],
+            },
+          ],
+        }}
+        defaultValues={{
+          test: {
+            shape: "function",
+            value: {
+              name: "",
+              type: "boolean",
+              isCondition: true,
+              args: { arg1: { shape: "field" }, arg2: { shape: "field" } },
+            },
+          },
+        }}
+        watcher={(values) => {
+          formValuesRef.current = values;
+        }}
+      >
+        <Condition />
+      </TestFormWrapper>
+    );
+    await waitForLoad(rendered);
+
+    await user.click(
+      rendered.getByText(/expression.condition.selectfunction/i)
+    );
+    await user.click(rendered.getByText(/eq/i));
+
+    await waitFor(() =>
+      expect(formValuesRef.current.test.value).toEqual(
+        expect.objectContaining({
+          name: "eq",
+          type: "boolean",
+          isCondition: true,
+        })
+      )
+    );
+  });
 });

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

@@ -37,35 +37,36 @@ exports[`<Clauses /> matches the latest snapshot with content 1`] = `
     <label>
       Clause
     </label>
-    <div>
+    <div
+      class="ui segment"
+    >
+      <div
+        class="clause-and-group"
+      />
       <div
-        class="ui segment"
+        class="ui hidden divider"
+      />
+      <div
+        class="ui horizontal divider"
       >
         <div
-          class="clause-and-group"
-        />
-        <div
-          class="ui horizontal divider"
+          class="ui medium basic buttons"
         >
-          <div
-            class="ui medium basic buttons"
+          <button
+            class="ui button"
           >
-            <button
-              class="ui button"
-            >
-              <i
-                aria-hidden="true"
-                class="plus icon"
-              />
-              addExpression
-            </button>
-          </div>
+            <i
+              aria-hidden="true"
+              class="plus icon"
+            />
+            addExpression
+          </button>
         </div>
       </div>
-      <div
-        class="ui horizontal divider"
-      />
     </div>
+    <div
+      class="ui horizontal divider"
+    />
     <div
       class="ui horizontal divider"
     >