@truedat/qx 5.12.2 → 5.12.7

package/src/components/functions/__tests__/FunctionEditor.spec.js

@@ -0,0 +1,195 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import FunctionEditor from "../FunctionEditor";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "functions.expression.shape.function": "function",
+      "functions.expression.shape.constant": "constant",
+      "functions.expression.shape.param": "param",
+      "functions.form.expression.function.placeholder": "function.placeholder",
+      "group.props.name": "name",
+      "functions.form.name": "name",
+      "functions.form.add_description": "add_description",
+      "functions.form.name": "name",
+      "functions.form.add_param": "add_param",
+      "actions.save": "save",
+      "actions.cancel": "cancel",
+      "actions.delete": "delete",
+      "functions.action.delete.header": "delete_header",
+      "functions.action.delete.content": "delete_content",
+      "functions.form.output": "output",
+      "functions.form.params": "params",
+      "form.validation.required": "required",
+      "confirmation.yes": "confirm_yes",
+      "confirmation.no": "confirm_no",
+      "actions.discard.confirmation.header": "confirmation_header",
+      "actions.discard.confirmation.content": "confirmation_content",
+      "functions.expression.constant.false": "false",
+      "functions.expression.constant.true": "true",
+      "functions.form.description": "description",
+    },
+  },
+  fallback: "lazy",
+};
+
+const props = {
+  selectedFunction: {
+    name: "",
+    description: "",
+    type: "boolean",
+    params: [],
+    expression: { shape: "function", value: null },
+  },
+  functions: [
+    {
+      name: "eq",
+      type: "boolean",
+      params: [
+        { name: "arg1", type: "any" },
+        { name: "arg2", type: "any" },
+      ],
+    },
+  ],
+  onSubmit: jest.fn(),
+  onCancel: jest.fn(),
+  onDelete: jest.fn(),
+  isSubmitting: false,
+  setDirty: jest.fn(),
+};
+
+describe("<FunctionEditor />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<FunctionEditor {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches snapshot without selected function", async () => {
+    const props = { setDirty: jest.fn() };
+    const { container, queryByText } = render(
+      <FunctionEditor {...props} />,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches snapshot without onDelete", () => {
+    const thisProps = {
+      ...props,
+      onDelete: null,
+    };
+    const { container } = render(<FunctionEditor {...thisProps} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("test cancel button", () => {
+    const onCancel = jest.fn();
+    const thisProps = { ...props, onCancel };
+    const { getByRole } = render(<FunctionEditor {...thisProps} />, renderOpts);
+
+    userEvent.click(getByRole("button", { name: /cancel/i }));
+    expect(onCancel).toHaveBeenCalled();
+  });
+
+  it("test cancel button with confirm", async () => {
+    const onCancel = jest.fn();
+    const thisProps = { ...props, onCancel };
+    const { container, getByRole, getAllByRole } = render(
+      <FunctionEditor {...thisProps} />,
+      renderOpts
+    );
+
+    userEvent.type(getAllByRole("textbox")[0], "name");
+    userEvent.click(getByRole("option", { name: /string/ }));
+    userEvent.click(getAllByRole("listitem")[0]);
+    userEvent.type(getAllByRole("textbox")[1], "description");
+
+    userEvent.click(getByRole("option", { name: /boolean/ }));
+    userEvent.click(getByRole("option", { name: /constant/i }));
+    userEvent.click(getByRole("option", { name: /true/i }));
+
+    await waitFor(() =>
+      expect(getByRole("button", { name: /save/i })).toBeEnabled()
+    );
+
+    userEvent.click(getByRole("button", { name: /cancel/i }));
+    expect(onCancel).toHaveBeenCalledTimes(0);
+
+    userEvent.click(getByRole("button", { name: /modal-negative-action/i }));
+    expect(onCancel).toHaveBeenCalledTimes(0);
+
+    userEvent.click(getByRole("button", { name: /cancel/i }));
+    expect(onCancel).toHaveBeenCalledTimes(0);
+
+    expect(container).toMatchSnapshot();
+
+    userEvent.click(getByRole("button", { name: /modal-affirmative-action/i }));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it("test delete button", () => {
+    const onDelete = jest.fn();
+    const thisProps = { ...props, onDelete };
+    const { container, getByRole } = render(
+      <FunctionEditor {...thisProps} />,
+      renderOpts
+    );
+
+    userEvent.click(getByRole("button", { name: /delete/i }));
+    expect(onDelete).toHaveBeenCalledTimes(0);
+
+    userEvent.click(getByRole("button", { name: /modal-negative-action/i }));
+    expect(onDelete).toHaveBeenCalledTimes(0);
+
+    userEvent.click(getByRole("button", { name: /delete/i }));
+    expect(onDelete).toHaveBeenCalledTimes(0);
+
+    expect(container).toMatchSnapshot();
+
+    userEvent.click(getByRole("button", { name: /modal-affirmative-action/i }));
+    expect(onDelete).toHaveBeenCalledTimes(1);
+  });
+
+  it("test submit", async () => {
+    const onSubmit = jest.fn();
+    const thisProps = { ...props, onSubmit };
+    const { getByRole, getAllByRole } = render(
+      <FunctionEditor {...thisProps} />,
+      renderOpts
+    );
+
+    expect(getByRole("button", { name: /save/i })).toBeDisabled();
+
+    userEvent.type(getAllByRole("textbox")[0], "name");
+    userEvent.click(getByRole("option", { name: /constant/i }));
+    userEvent.click(getByRole("option", { name: /true/i }));
+
+    await waitFor(() =>
+      expect(getByRole("button", { name: /save/i })).toBeEnabled()
+    );
+
+    userEvent.click(getByRole("button", { name: /save/i }));
+
+    await waitFor(() =>
+      expect(getByRole("button", { name: /save/i })).toBeEnabled()
+    );
+
+    expect(onSubmit.mock.calls[0][0]).toEqual({
+      description: "",
+      expression: {
+        shape: "constant",
+        value: {
+          type: "boolean",
+          value: "true",
+        },
+      },
+      name: "name",
+      params: [],
+      type: "boolean",
+    });
+  });
+});

package/src/components/functions/__tests__/FunctionParams.spec.js

@@ -0,0 +1,108 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+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",
+      "functions.form.description": "description",
+    },
+  },
+  fallback: "lazy",
+};
+
+describe("<FunctionParams />", () => {
+  it("matches the latest snapshot without param", async () => {
+    const { container, queryByText } = render(
+      <TestFormWrapper>
+        <FunctionParams />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with param", async () => {
+    const defaultValues = {
+      params: [{ name: "param1", type: "boolean", id: 1 }],
+    };
+    const { container, queryByText } = render(
+      <TestFormWrapper defaultValues={defaultValues}>
+        <FunctionParams />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(container).toMatchSnapshot();
+  });
+
+  it("user interaction", async () => {
+    const watcher = jest.fn();
+
+    const testArgName = "test_arg_name";
+    const testArgDescription = "test_arg_description";
+
+    const { queryByText, getByRole, getByPlaceholderText, getByText } = render(
+      <TestFormWrapper watcher={watcher}>
+        <FunctionParams />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    userEvent.click(getByRole("button", { name: /add_param/i }));
+
+    const argInput = getByPlaceholderText(/name/i);
+    const typeSelector = getByRole("listbox");
+    const stringOption = getByRole("option", { name: /string/i });
+    const descriptionInputLabel = getByText(/add_description/i);
+
+    await waitFor(() => expect(argInput).toBeInTheDocument());
+    await waitFor(() => expect(typeSelector).toBeInTheDocument());
+    await waitFor(() => expect(descriptionInputLabel).toBeInTheDocument());
+
+    userEvent.click(typeSelector);
+    await waitFor(() => expect(descriptionInputLabel).toBeInTheDocument());
+
+    userEvent.click(stringOption);
+
+    userEvent.type(argInput, testArgName);
+
+    userEvent.click(descriptionInputLabel);
+    const descriptionInput = getByPlaceholderText(/description/i);
+    await waitFor(() => expect(descriptionInput).toBeInTheDocument());
+
+    userEvent.type(descriptionInput, testArgDescription);
+
+    expect(watcher).lastCalledWith({
+      params: [
+        {
+          description: "test_arg_description",
+          id: 1,
+          name: "test_arg_name",
+          type: "string",
+        },
+      ],
+    });
+
+    userEvent.hover(argInput);
+    const deleteButton = getByRole("button", { name: /delete/i });
+    await waitFor(() => expect(deleteButton).toBeInTheDocument());
+    userEvent.unhover(argInput);
+    await waitFor(() => expect(deleteButton).not.toBeInTheDocument());
+
+    userEvent.hover(argInput);
+    const newDeleteButton = getByRole("button", { name: /delete/i });
+    userEvent.click(newDeleteButton);
+    await waitFor(() => expect(argInput).not.toBeInTheDocument());
+
+    expect(watcher).lastCalledWith({ params: [] });
+  });
+});

package/src/components/functions/__tests__/Functions.spec.js

@@ -0,0 +1,95 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import Functions from "../Functions";
+
+jest.mock("@truedat/qx/hooks/useFunctions", () => {
+  const originalModule = jest.requireActual("@truedat/qx/hooks/useFunctions");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useFunctions: jest.fn(() => ({
+      data: {
+        data: [
+          {
+            name: "eq",
+            type: "boolean",
+            params: [
+              { name: "arg1", type: "any" },
+              { name: "arg2", type: "any" },
+            ],
+          },
+          {
+            name: "user_false",
+            type: "boolean",
+            params: [],
+            expression: {
+              shape: "constant",
+              value: { type: "boolean", value: "false" },
+            },
+          },
+        ],
+      },
+      loading: false,
+    })),
+    useFunctionCreate: jest.fn(() => ({
+      trigger: jest.fn(() => new Promise(() => {})),
+      isMutating: false,
+    })),
+    useFunctionDelete: jest.fn(() => ({
+      trigger: jest.fn(() => new Promise(() => {})),
+      isMutating: false,
+    })),
+    useFunctionUpdate: jest.fn(() => ({
+      trigger: jest.fn(() => new Promise(() => {})),
+      isMutating: false,
+    })),
+  };
+});
+
+describe("<Functions />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "functions.header": "functions.header",
+        "functions.subheader": "functions.subheader",
+        "functions.no_selection": "functions.no_selection",
+        "functions.empty_list": "functions.empty_list",
+        "functions.action.new": "functions.action.new",
+        "functions.expression.shape.function": "function",
+        "functions.expression.shape.constant": "constant",
+        "functions.expression.shape.param": "param",
+        "functions.form.expression.function.placeholder":
+          "function.placeholder",
+        "group.props.name": "name",
+        "functions.form.name": "name",
+        "functions.form.add_description": "add_description",
+        "functions.form.name": "name",
+        "functions.form.add_param": "add_param",
+        "actions.save": "save",
+        "actions.cancel": "cancel",
+        "actions.delete": "delete",
+        "functions.action.delete.header": "delete_header",
+        "functions.action.delete.content": "delete_content",
+        "functions.form.output": "output",
+        "functions.form.params": "params",
+        "form.validation.required": "required",
+        "confirmation.yes": "confirm_yes",
+        "confirmation.no": "confirm_no",
+        "actions.discard.confirmation.header": "confirmation_header",
+        "actions.discard.confirmation.content": "confirmation_content",
+        "functions.expression.constant.false": "false",
+        "functions.expression.constant.true": "true",
+        "functions.form.description": "description",
+      },
+    },
+    fallback: "lazy",
+  };
+
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(<Functions />, renderOpts);
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(container).toMatchSnapshot();
+  });
+});