@truedat/qx 7.5.9 → 7.5.10

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

@@ -1,5 +1,4 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import Clauses from "../Clauses";
 
@@ -11,21 +10,22 @@ const renderOpts = {
       "expression.clause.action.addExpression": "addExpression",
     },
   },
-  fallback: "lazy",
 };
 
 describe("<Clauses />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
       <TestFormWrapper>
         <Clauses />
       </TestFormWrapper>,
       renderOpts
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
-  it("matches the latest snapshot with content", () => {
-    const { container } = render(
+
+  it("matches the latest snapshot with content", async () => {
+    const rendered = render(
       <TestFormWrapper
         context={{
           field: "test",
@@ -48,6 +48,7 @@ describe("<Clauses />", () => {
       </TestFormWrapper>,
       renderOpts
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,36 +1,16 @@
-import React from "react";
-import { act } from "react-dom/test-utils";
-import { render } from "@truedat/test/render";
-import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import Condition from "../Condition";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "functions.form.required": "Required",
-      "expression.condition.selectFunction": "Select Function",
-      "expression.condition.customExpression": "Custom Expression",
-      "functions.form.expression.function.placeholder": "function placeholder",
-      "functions.expression.shape.function": "Function",
-      "functions.expression.shape.constant": "Constant",
-    },
-  },
-};
-
 describe("<Condition />", () => {
   it("matches the latest snapshot", async () => {
-    const { container } = render(
+    const rendered = render(
       <TestFormWrapper>
         <Condition />
-      </TestFormWrapper>,
-      renderOpts
-    );
-    await waitFor(() =>
-      expect(container.querySelector(".loader")).not.toBeInTheDocument()
+      </TestFormWrapper>
     );
-    await act(async () => {
-      expect(container).toMatchSnapshot();
-    });
+    await waitForLoad(rendered);
+
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,48 +1,32 @@
-import React from "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 ConstantSelector from "../ConstantSelector";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "functions.expression.constant.false": "false",
-      "functions.expression.constant.true": "true",
-      "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",
-    },
-  },
-  fallback: "lazy",
-};
-
 describe("<ConstantSelector />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
       <TestFormWrapper>
         <ConstantSelector />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("user interaction", async () => {
+    const user = userEvent.setup({ delay: null });
     const watcher = jest.fn();
 
-    const { container, findByText } = render(
+    const rendered = render(
       <TestFormWrapper watcher={watcher} context={{ type: "any" }}>
         <ConstantSelector />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
+    await waitForLoad(rendered);
 
-    userEvent.click(await findByText("boolean"));
-    userEvent.click(await findByText("true"));
+    await user.click(await rendered.findByText(/boolean/i));
+    await user.click(await rendered.findByText(/true/i));
 
     expect(watcher).toHaveBeenLastCalledWith({
       test: {
@@ -53,7 +37,7 @@ describe("<ConstantSelector />", () => {
       },
     });
 
-    userEvent.click(await findByText("string"));
+    await user.click(await rendered.findByText(/string/i));
 
     expect(watcher).toHaveBeenLastCalledWith({
       test: {
@@ -64,6 +48,6 @@ describe("<ConstantSelector />", () => {
       },
     });
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,37 +1,20 @@
-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 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", async () => {
-    const { container, queryByText } = render(
+    const rendered = render(
       <TestFormWrapper>
         <Expression />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
   it("shape function expression", async () => {
+    const user = userEvent.setup({ delay: null });
     const watcher = jest.fn();
     const functions = [
       {
@@ -48,43 +31,53 @@ describe("<Expression />", () => {
         shape: "function",
       },
     };
-    const { container, getByRole, getAllByRole, queryByText } = render(
+
+    const rendered = render(
       <TestFormWrapper
         watcher={watcher}
         context={{ type: "boolean", functions }}
         defaultValues={defaultValues}
       >
         <Expression />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
+    );
+    await waitForLoad(rendered);
+
+    await user.click(
+      await rendered.findByRole("option", { name: /shape.function/i })
     );
-    const listboxes = await waitFor(() => getAllByRole("listbox"));
-    const listbox = listboxes[0];
-    userEvent.click(listbox);
-    const option = await waitFor(() => getByRole("option", { name: /eq/i }));
-    userEvent.click(option);
+    await user.click(await rendered.findByRole("option", { name: /eq/i }));
+
+    await waitForLoad(rendered);
     expect(watcher).toHaveBeenLastCalledWith({
       test: {
         shape: "function",
         value: {
+          args: {
+            arg1: { shape: "function", value: undefined },
+            arg2: { shape: "function", value: undefined },
+          },
           name: "eq",
           type: "boolean",
         },
       },
     });
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
   it("shape constant expression", async () => {
+    const user = userEvent.setup({ delay: null });
     const watcher = jest.fn();
-    const { container, getByRole, getAllByRole, queryByText } = render(
+
+    const rendered = render(
       <TestFormWrapper watcher={watcher} context={{ type: "boolean" }}>
         <Expression />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    userEvent.click(getAllByRole("listbox")[0]);
-    userEvent.click(getByRole("option", { name: /constant/i }));
+    await waitForLoad(rendered);
+
+    await user.click(rendered.getByRole("option", { name: /constant/i }));
+
     expect(watcher).toHaveBeenLastCalledWith({
       test: {
         shape: "constant",
@@ -93,35 +86,35 @@ describe("<Expression />", () => {
         },
       },
     });
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument(), {
-      timeout: 10000,
-    });
-    expect(container).toMatchSnapshot();
+
+    expect(rendered.container).toMatchSnapshot();
   });
   it("shape param expression", async () => {
+    const user = userEvent.setup({ delay: null });
     const watcher = jest.fn();
     const defaultValues = {
       params: [{ name: "param1", type: "boolean", id: 1 }],
     };
-    const { container, getByRole, getAllByRole, queryByText } = render(
+
+    const rendered = render(
       <TestFormWrapper
         watcher={watcher}
         context={{ type: "boolean" }}
         defaultValues={defaultValues}
       >
         <Expression />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    userEvent.click(getAllByRole("listbox")[0]);
-    userEvent.click(getByRole("option", { name: /param/i }));
+    await waitForLoad(rendered);
+
+    await user.click(rendered.getByRole("option", { name: /param/i }));
+    // userEvent.click(getAllByRole("listbox")[0]);
+    // userEvent.click(getByRole("option", { name: /param/i }));
     expect(watcher).toHaveBeenLastCalledWith({
       params: [{ name: "param1", type: "boolean", id: 1 }],
       test: { shape: "param", value: { id: undefined } },
     });
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument(), {
-      timeout: 10000,
-    });
-    expect(container).toMatchSnapshot();
+
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

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

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

@@ -1,8 +1,6 @@
-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 { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import FunctionArgs from "../FunctionArgs";
 
@@ -32,38 +30,19 @@ jest.mock("@truedat/dd/hooks/useStructures", () => {
   };
 });
 
-const renderOpts = {
-  messages: {
-    en: {
-      "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",
-};
-
 describe("<FunctionArgs />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
       <TestFormWrapper>
         <FunctionArgs />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("user interaction", async () => {
+    const user = userEvent.setup({ delay: null });
     const watcher = jest.fn();
 
     const functions = [
@@ -87,32 +66,27 @@ describe("<FunctionArgs />", () => {
       },
     };
 
-    const { container, getAllByRole, queryByText, getByRole } = render(
+    const rendered = render(
       <TestFormWrapper
         watcher={watcher}
         context={{ type: "boolean", functions }}
         defaultValues={defaultValues}
       >
         <FunctionArgs />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    await waitFor(() => {
-      expect(queryByText(/lazy/i)).not.toBeInTheDocument();
-      expect(container.querySelector(".loader")).not.toBeInTheDocument();
-    });
-
-    userEvent.click(getAllByRole("listbox")[0]);
+    await waitForLoad(rendered);
 
-    act(() =>
-      userEvent.click(getAllByRole("option", { name: /constant/i })[0])
-    );
+    await user.click(rendered.getAllByRole("listbox")[0]);
+    await user.click(rendered.getAllByRole("option", { name: /constant/i })[0]);
 
     await waitFor(() => {
-      expect(getByRole("option", { name: /true/i })).toBeInTheDocument();
+      expect(
+        rendered.getByRole("option", { name: /true/i })
+      ).toBeInTheDocument();
     });
 
-    userEvent.click(getByRole("option", { name: /true/i }));
+    await user.click(rendered.getByRole("option", { name: /true/i }));
 
     expect(watcher).toHaveBeenLastCalledWith({
       test: {
@@ -134,6 +108,6 @@ describe("<FunctionArgs />", () => {
       },
     });
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,33 +1,21 @@
-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 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(
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
       <TestFormWrapper>
         <FunctionSelector />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("user interaction", async () => {
+    const user = userEvent.setup({ delay: null });
     const watcher = jest.fn();
 
     const functions = [
@@ -41,15 +29,14 @@ describe("<FunctionSelector />", () => {
       },
     ];
 
-    const { container, getByRole, queryByText } = render(
+    const rendered = render(
       <TestFormWrapper watcher={watcher} context={{ type: "any", functions }}>
         <FunctionSelector />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitForLoad(rendered);
 
-    userEvent.click(await getByRole("option", { name: /eq/i }));
+    await user.click(rendered.getByRole("option", { name: /eq/i }));
 
     expect(watcher).toHaveBeenLastCalledWith({
       test: {
@@ -60,10 +47,15 @@ describe("<FunctionSelector />", () => {
       },
     });
 
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+
+    expect(rendered.container).toMatchSnapshot();
 
-    userEvent.click(container.getElementsByClassName("no-padding")[0]);
+    await user.click(
+      rendered.container.getElementsByClassName("no-padding")[0]
+    );
 
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });