@truedat/qx 5.12.2 → 5.12.7

package/src/components/functions/expressions/ShapeSelector.js

@@ -0,0 +1,74 @@
+import _ from "lodash/fp";
+import React, { useContext } from "react";
+import { useIntl } from "react-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import { Dropdown } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+
+const shapeToSymbol = {
+  function: "f(x)",
+  constant: "[π]",
+  param: "[P]",
+  field: "[F]",
+};
+
+export default function ShapeSelector() {
+  const { formatMessage } = useIntl();
+  const { fields, field, type } = useContext(QxContext);
+  const { control, watch, setValue } = useFormContext();
+
+  const params = watch("params");
+
+  const emptyTypeParams = _.flow(
+    _.filter((param) => type === "any" || param.type == type),
+    _.isEmpty
+  )(params);
+  const emptyTypeFields = _.flow(
+    _.filter((field) => type === "any" || field.type == type),
+    _.isEmpty
+  )(fields);
+
+  const shapes = _.reject(
+    (shape) =>
+      (shape === "param" && emptyTypeParams) ||
+      (shape === "field" && emptyTypeFields)
+  )(["constant", "function", "param", "field"]);
+
+  const shapeDropdownOptions = _.map((v) => ({
+    key: v,
+    value: v,
+    content: (
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <small style={{ marginRight: "5px" }}>
+          <b>
+            <code>{shapeToSymbol[v]}</code>
+          </b>
+        </small>
+        {formatMessage({ id: `functions.expression.shape.${v}` })}
+      </div>
+    ),
+  }))(shapes);
+
+  return (
+    <Controller
+      name={`${field}.shape`}
+      control={control}
+      render={({ field: { onBlur, onChange, value } }) => (
+        <Dropdown
+          onBlur={onBlur}
+          options={shapeDropdownOptions}
+          onChange={(_e, { value }) => {
+            onChange(value);
+            setValue(`${field}.value`, undefined);
+          }}
+          trigger={
+            <div className="shape-selector-trigger">{shapeToSymbol[value]}</div>
+          }
+          value={value}
+          pointing="top left"
+          icon={null}
+        />
+      )}
+    />
+  );
+}

package/src/components/functions/expressions/__tests__/ConstantSelector.spec.js

@@ -0,0 +1,64 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import ConstantSelector from "../ConstantSelector";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "functions.expression.constant.false": "false",
+      "functions.expression.constant.true": "true",
+      "functions.form.required": "required",
+    },
+  },
+  fallback: "lazy",
+};
+
+describe("<ConstantSelector />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <ConstantSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("user interaction", async () => {
+    const watcher = jest.fn();
+
+    const { container, findByText } = render(
+      <TestFormWrapper watcher={watcher} type="any">
+        <ConstantSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    userEvent.click(await findByText("boolean"));
+    userEvent.click(await findByText("true"));
+
+    expect(watcher).lastCalledWith({
+      test: {
+        value: {
+          type: "boolean",
+          value: "true",
+        },
+      },
+    });
+
+    userEvent.click(await findByText("string"));
+
+    expect(watcher).lastCalledWith({
+      test: {
+        value: {
+          type: "string",
+          value: "",
+        },
+      },
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/functions/expressions/__tests__/Expression.spec.js

@@ -0,0 +1,131 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import Expression from "../Expression";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "functions.expression.constant.false": "false",
+      "functions.expression.constant.true": "true",
+      "functions.form.required": "required",
+      "functions.expression.shape.function": "function",
+      "functions.expression.shape.constant": "constant",
+      "functions.expression.shape.param": "param",
+      "functions.form.expression.function.placeholder": "function.placeholder",
+    },
+  },
+  fallback: "lazy",
+};
+
+describe("<Expression />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <Expression />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("shape function expression", async () => {
+    const watcher = jest.fn();
+
+    const functions = [
+      {
+        name: "eq",
+        type: "boolean",
+        params: [
+          { name: "arg1", type: "any" },
+          { name: "arg2", type: "any" },
+        ],
+      },
+    ];
+
+    const { container, getByRole, getAllByRole, queryByText } = render(
+      <TestFormWrapper watcher={watcher} type="boolean" functions={functions}>
+        <Expression />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    userEvent.click(getAllByRole("listbox")[1]);
+    userEvent.click(getByRole("option", { name: /eq/i }));
+
+    expect(watcher).lastCalledWith({
+      test: {
+        shape: "function",
+        value: {
+          name: "eq",
+          type: "boolean",
+        },
+      },
+    });
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("shape constant expression", async () => {
+    const watcher = jest.fn();
+
+    const { container, getByRole, getAllByRole, queryByText } = render(
+      <TestFormWrapper watcher={watcher} type="boolean">
+        <Expression />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    userEvent.click(getAllByRole("listbox")[0]);
+    userEvent.click(getByRole("option", { name: /constant/i }));
+
+    expect(watcher).lastCalledWith({
+      test: {
+        shape: "constant",
+        value: {
+          type: "boolean",
+        },
+      },
+    });
+
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument(), {
+      timeout: 10000,
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("shape param expression", async () => {
+    const watcher = jest.fn();
+
+    const defaultValues = {
+      params: [{ name: "param1", type: "boolean", id: 1 }],
+    };
+
+    const { container, getByRole, getAllByRole, queryByText } = render(
+      <TestFormWrapper
+        watcher={watcher}
+        type="boolean"
+        defaultValues={defaultValues}
+        s
+      >
+        <Expression />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    userEvent.click(getAllByRole("listbox")[0]);
+    userEvent.click(getByRole("option", { name: /param/i }));
+
+    expect(watcher).lastCalledWith({
+      params: [{ name: "param1", type: "boolean", id: 1 }],
+      test: { shape: "param" },
+    });
+
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument(), {
+      timeout: 10000,
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/functions/expressions/__tests__/FunctionArgs.spec.js

@@ -0,0 +1,86 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import FunctionArgs from "../FunctionArgs";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "functions.expression.shape.function": "function",
+      "functions.expression.shape.constant": "constant",
+      "functions.form.expression.function.placeholder": "function.placeholder",
+    },
+  },
+  fallback: "lazy",
+};
+
+describe("<FunctionArgs />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <FunctionArgs />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("user interaction", async () => {
+    const watcher = jest.fn();
+
+    const functions = [
+      {
+        name: "eq",
+        type: "boolean",
+        params: [
+          { name: "arg1", type: "any" },
+          { name: "arg2", type: "any" },
+        ],
+      },
+    ];
+
+    const defaultValues = {
+      test: {
+        shape: "function",
+        value: {
+          name: "eq",
+          type: "boolean",
+        },
+      },
+    };
+
+    const { container, getAllByRole, queryByText } = render(
+      <TestFormWrapper
+        watcher={watcher}
+        type="boolean"
+        functions={functions}
+        defaultValues={defaultValues}
+      >
+        <FunctionArgs />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+
+    userEvent.click(getAllByRole("listbox")[0]);
+    userEvent.click(getAllByRole("option", { name: /constant/i })[0]);
+
+    expect(watcher).lastCalledWith({
+      test: {
+        shape: "function",
+        value: {
+          args: {
+            arg1: { shape: "constant" },
+            arg2: { shape: "function" },
+          },
+          name: "eq",
+          type: "boolean",
+        },
+      },
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/functions/expressions/__tests__/FunctionSelector.spec.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import FunctionSelector from "../FunctionSelector";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "functions.expression.shape.function": "function",
+      "functions.expression.shape.constant": "constant",
+      "functions.form.expression.function.placeholder": "function.placeholder",
+    },
+  },
+  fallback: "lazy",
+};
+
+describe("<FunctionSelector />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <FunctionSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("user interaction", async () => {
+    const watcher = jest.fn();
+
+    const functions = [
+      {
+        name: "eq",
+        type: "boolean",
+        params: [
+          { name: "arg1", type: "any" },
+          { name: "arg2", type: "any" },
+        ],
+      },
+    ];
+
+    const { container, getByRole, queryByText } = render(
+      <TestFormWrapper watcher={watcher} type="any" functions={functions}>
+        <FunctionSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+
+    userEvent.click(await getByRole("option", { name: /eq/i }));
+
+    expect(watcher).lastCalledWith({
+      test: {
+        value: {
+          name: "eq",
+          type: "boolean",
+        },
+      },
+    });
+
+    expect(container).toMatchSnapshot();
+
+    userEvent.click(container.getElementsByClassName("no-padding")[0]);
+
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,115 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import ParamSelector from "../ParamSelector";
+import FunctionParams from "../../FunctionParams";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "functions.form.required": "required",
+      "functions.form.add_description": "add_description",
+      "functions.form.name": "name",
+      "functions.form.add_param": "add_param",
+    },
+  },
+  fallback: "lazy",
+};
+
+describe("<ParamSelector />", () => {
+  it("matches the latest snapshot", () => {
+    const defaultValues = {
+      params: [{ name: "param1", type: "boolean", id: 1 }],
+    };
+    const { container } = render(
+      <TestFormWrapper defaultValues={defaultValues}>
+        <ParamSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("user interaction", async () => {
+    const watcher = jest.fn();
+
+    const defaultValues = {
+      params: [{ name: "param1", type: "boolean", id: 1 }],
+    };
+
+    const { container, queryByText, getByRole } = render(
+      <TestFormWrapper
+        watcher={watcher}
+        type="boolean"
+        defaultValues={defaultValues}
+      >
+        <ParamSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+
+    userEvent.click(getByRole("option", { name: /param1/i }));
+
+    expect(watcher).lastCalledWith({
+      params: [
+        {
+          id: 1,
+          name: "param1",
+          type: "boolean",
+        },
+      ],
+      test: { value: 1 },
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("deleting param will clean field", async () => {
+    const watcher = jest.fn();
+
+    const defaultValues = {
+      params: [{ name: "param1", type: "boolean", id: 1 }],
+    };
+
+    const { container, queryByText, getAllByRole, getByRole, findByRole } =
+      render(
+        <TestFormWrapper
+          watcher={watcher}
+          type="boolean"
+          defaultValues={defaultValues}
+        >
+          <FunctionParams />
+          <ParamSelector />
+        </TestFormWrapper>,
+        renderOpts
+      );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+
+    userEvent.click(await getByRole("option", { name: /param1/i }));
+
+    expect(watcher).lastCalledWith({
+      params: [
+        {
+          id: 1,
+          name: "param1",
+          type: "boolean",
+        },
+      ],
+      test: { value: 1 },
+    });
+
+    userEvent.hover(await findByRole("textbox"));
+
+    userEvent.click(getAllByRole("button")[0]);
+
+    expect(watcher).lastCalledWith({
+      params: [],
+      test: { value: null },
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,107 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+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: "lazy",
+};
+
+describe("<ShapeSelector />", () => {
+  it("matches the latest snapshot", () => {
+    const defaultValues = {
+      params: [{ name: "param1", type: "boolean", id: 1 }],
+    };
+    const { container } = render(
+      <TestFormWrapper defaultValues={defaultValues}>
+        <ShapeSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("user interaction select param", async () => {
+    const watcher = jest.fn();
+
+    const defaultValues = {
+      params: [{ name: "param1", type: "boolean", id: 1 }],
+    };
+
+    const { container, queryByText, getByRole } = render(
+      <TestFormWrapper
+        watcher={watcher}
+        type="boolean"
+        defaultValues={defaultValues}
+      >
+        <ShapeSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+
+    userEvent.click(await getByRole("option", { name: /param/i }));
+
+    expect(watcher).lastCalledWith({
+      params: [
+        {
+          id: 1,
+          name: "param1",
+          type: "boolean",
+        },
+      ],
+      test: { shape: "param" },
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("user interaction select constant", async () => {
+    const watcher = jest.fn();
+
+    const { container, queryByText, getByRole } = render(
+      <TestFormWrapper watcher={watcher} type="boolean">
+        <ShapeSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+
+    userEvent.click(await getByRole("option", { name: /constant/i }));
+
+    expect(watcher).lastCalledWith({
+      test: { shape: "constant" },
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("user interaction select function", async () => {
+    const watcher = jest.fn();
+
+    const { container, queryByText, getByRole } = render(
+      <TestFormWrapper watcher={watcher} type="boolean">
+        <ShapeSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+
+    userEvent.click(await getByRole("option", { name: /function/i }));
+
+    expect(watcher).lastCalledWith({
+      test: { shape: "function" },
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+});