@truedat/qx 7.5.7 → 7.5.10

package/src/components/dataViews/queryableProperties/SelectField.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState, useContext, useEffect } from "react";
+import { useState, use, useEffect } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Controller, useFormContext } from "react-hook-form";
@@ -14,7 +14,7 @@ export const newSelectField = (id) => ({
 });
 
 export default function SelectField({ onDelete }) {
-  const context = useContext(QxContext);
+  const context = use(QxContext);
   const { field } = context;
   const { formatMessage } = useIntl();
   const { control, watch, setValue } = useFormContext();
@@ -58,7 +58,7 @@ export default function SelectField({ onDelete }) {
         <Grid.Row>
           <Grid.Column></Grid.Column>
           <GridColumn width={9}>
-            <QxContext.Provider
+            <QxContext
               value={{
                 ...context,
                 type: "any",
@@ -67,7 +67,7 @@ export default function SelectField({ onDelete }) {
               }}
             >
               <Expression />
-            </QxContext.Provider>
+            </QxContext>
           </GridColumn>
           <Grid.Column width={6}>
             <Form.Group inline className="no-margin">

package/src/components/dataViews/queryableProperties/Where.js

@@ -1,15 +1,15 @@
-import React, { useContext } from "react";
+import { use } from "react";
 
 import { Clauses } from "@truedat/qx/components/common/expressions";
 import QxContext from "@truedat/qx/components/QxContext";
 
 export default function Where() {
-  const context = useContext(QxContext);
+  const context = use(QxContext);
   const { field } = context;
 
   return (
-    <QxContext.Provider value={{ ...context, field: `${field}.clauses` }}>
+    <QxContext value={{ ...context, field: `${field}.clauses` }}>
       <Clauses />
-    </QxContext.Provider>
+    </QxContext>
   );
 }

package/src/components/dataViews/queryableProperties/__tests__/From.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import { render } from "@truedat/test/render";
 

package/src/components/dataViews/queryableProperties/__tests__/GroupBy.spec.js

@@ -1,32 +1,12 @@
-import React from "react";
-import { act } from "react-dom/test-utils";
 import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
-import { render } from "@truedat/test/render";
-
 import GroupBy from "../GroupBy";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "dataViews.form.error.empty_select": "empty_select",
-      "queryables.group_by.form.add_aggregate_field": "add_aggregate_field",
-      "queryables.group_by.form.add_group_field": "add_group_field",
-      "queryables.group_by.form.aggregate_fields": "aggregate_fields",
-      "queryables.group_by.form.group_fields": "group_fields",
-      "queryables.select.form.alias": "alias",
-      "functions.form.required": "required",
-      "functions.form.expression.function.placeholder": "placeholder",
-      "functions.expression.shape.function": "function",
-      "functions.expression.shape.constant": "constant",
-      "functions.form.required": "required",
-    },
-  },
-};
-
 describe("<GroupBy />", () => {
   it("matches the latest snapshot", async () => {
-    const { container, getByRole, getAllByRole } = render(
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(
       <TestFormWrapper
         context={{
           field: "queryables[0].properties",
@@ -46,30 +26,24 @@ describe("<GroupBy />", () => {
         }}
       >
         <GroupBy />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
+    await waitForLoad(rendered);
 
-    await act(async () => {
-      userEvent.click(getByRole("button", { name: /add_group_field/i }));
-    });
+    await user.click(
+      rendered.getByRole("button", { name: /add_group_field/i })
+    );
 
-    userEvent.hover(getAllByRole("textbox")[2]);
-    await act(async () => {
-      userEvent.click(getByRole("button", { name: /delete/i }));
-    });
+    await user.hover(rendered.getAllByRole("textbox")[2]);
+    await user.click(rendered.getByRole("button", { name: /delete/i }));
 
-    await act(async () => {
-      userEvent.click(getByRole("button", { name: /add_aggregate_field/i }));
-    });
+    await user.click(
+      rendered.getByRole("button", { name: /add_aggregate_field/i })
+    );
 
-    userEvent.hover(getAllByRole("textbox")[3]);
-    await act(async () => {
-      userEvent.click(getByRole("button", { name: /delete/i }));
-    });
+    await user.hover(rendered.getAllByRole("textbox")[3]);
+    await user.click(rendered.getByRole("button", { name: /delete/i }));
 
-    await act(async () => {
-      expect(container).toMatchSnapshot();
-    });
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/dataViews/queryableProperties/__tests__/Join.spec.js

@@ -1,38 +1,15 @@
-import React from "react";
+import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
-import { render } from "@truedat/test/render";
-
 import Join from "../Join";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "dataViews.form.queryable.alias": "alias",
-      "joinType.full_outer": "full_outer",
-      "joinType.inner": "inner",
-      "joinType.left": "left",
-      "joinType.right": "right",
-      "queryables.form.join.type": "type",
-      "expression.clause.action.addGroup": "addGroup",
-      "expression.form.clause": "clause",
-      "queryables.resource.type": "type",
-      "queryables.form.resource": "resource",
-      "queryables.resource.type.data_view": "data_view",
-      "queryables.resource.type.reference_dataset": "reference_dataset",
-      "queryables.resource.type.data_structure": "data_structure",
-    },
-  },
-};
-
 describe("<Join />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
       <TestFormWrapper>
         <Join />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/dataViews/queryableProperties/__tests__/JoinTypeIcon.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 
 import JoinTypeIcon from "../JoinTypeIcon";

package/src/components/dataViews/queryableProperties/__tests__/Select.spec.js

@@ -1,39 +1,22 @@
-import React from "react";
-import { act } from "react-dom/test-utils";
 import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
-import { render } from "@truedat/test/render";
-
 import Select from "../Select";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "dataViews.form.error.empty_select": "empty_select",
-      "queryables.select.form.add_select_field": "add_select_field",
-      "queryables.select.form.add_all_select_fields": "add_all_select_fields",
-      "queryables.select.form.alias": "alias",
-      "functions.expression.shape.field": "field",
-      "functions.expression.shape.function": "function",
-      "functions.expression.shape.constant": "constant",
-      "functions.form.required": "required",
-    },
-  },
-};
-
 describe("<Select />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
       <TestFormWrapper>
         <Select />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
+
   it("matches the latest snapshot with content", async () => {
-    const { container, getByRole } = render(
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(
       <TestFormWrapper
         context={{
           fields: [{ name: "abc", id: 1 }],
@@ -73,20 +56,19 @@ describe("<Select />", () => {
         }}
       >
         <Select />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
+    await waitForLoad(rendered);
 
-    await act(async () => {
-      userEvent.click(getByRole("button", { name: /add_select_field/i }));
-    });
-
-    await act(async () => {
-      expect(container).toMatchSnapshot();
-    });
+    await user.click(
+      rendered.getByRole("button", { name: /add_select_field/i })
+    );
+    expect(rendered.container).toMatchSnapshot();
   });
+
   it("handles add all fields", async () => {
-    const { container, getByRole, getAllByRole } = render(
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(
       <TestFormWrapper
         context={{
           fields: [{ name: "abc", id: 1 }],
@@ -123,22 +105,16 @@ describe("<Select />", () => {
         }}
       >
         <Select />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
+    await waitForLoad(rendered);
 
-    await act(async () => {
-      userEvent.click(getByRole("button", { name: /add_all_select_fields/i }));
-    });
-
-    userEvent.hover(getAllByRole("textbox")[0]);
-
-    await act(async () => {
-      userEvent.click(getByRole("button", { name: /delete/i }));
-    });
+    await user.click(
+      rendered.getByRole("button", { name: /add_all_select_fields/i })
+    );
+    await user.hover(rendered.getAllByRole("textbox")[0]);
+    await user.click(rendered.getByRole("button", { name: /delete/i }));
 
-    await act(async () => {
-      expect(container).toMatchSnapshot();
-    });
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/dataViews/queryableProperties/__tests__/SelectField.spec.js

@@ -1,29 +1,11 @@
-import React from "react";
-import { act } from "react-dom/test-utils";
-import { 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 { render } from "@truedat/test/render";
-
 import SelectField from "../SelectField";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "dataViews.form.queryable.alias.duplicated": "duplicated",
-      "functions.form.required": "required",
-      "queryables.select.form.alias": "alias",
-      "functions.form.expression.function.placeholder": "placeholder",
-      "functions.expression.shape.function": "function",
-      "functions.expression.shape.constant": "constant",
-    },
-  },
-  fallback: "loading",
-};
-
 describe("<SelectField />", () => {
   it("matches the latest snapshot for select", async () => {
-    const { container, queryByText } = render(
+    const rendered = render(
       <TestFormWrapper
         context={{
           field: "select.properties.fields[0]",
@@ -38,17 +20,13 @@ describe("<SelectField />", () => {
         }}
       >
         <SelectField />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
-    );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
-
   it("matches the latest snapshot for group_by", async () => {
-    const { container, queryByText } = render(
+    const rendered = render(
       <TestFormWrapper
         context={{
           functions: [{ class: "aggregator", name: "func", type: "number" }],
@@ -67,18 +45,15 @@ describe("<SelectField />", () => {
         }}
       >
         <SelectField />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
-    );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
-
   it("handles delete", async () => {
+    const user = userEvent.setup({ delay: null, skipHover: true });
     const onDelete = jest.fn();
-    const { getByRole, getAllByRole } = render(
+    const rendered = render(
       <TestFormWrapper
         context={{
           functions: [{ class: "aggregator", name: "func", type: "number" }],
@@ -97,17 +72,17 @@ describe("<SelectField />", () => {
         }}
       >
         <SelectField onDelete={onDelete} />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
+    await waitForLoad(rendered);
+
+    const { getByRole, getAllByRole } = rendered;
 
-    userEvent.hover(getAllByRole("textbox")[0]);
-    userEvent.unhover(getAllByRole("textbox")[0]);
-    userEvent.hover(getAllByRole("textbox")[0]);
+    await user.hover(getAllByRole("textbox")[0]);
+    await user.unhover(getAllByRole("textbox")[0]);
+    await user.hover(getAllByRole("textbox")[0]);
 
-    await act(async () => {
-      userEvent.click(getByRole("button", { name: /delete/i }));
-    });
+    await user.click(getByRole("button", { name: /delete/i }));
 
     expect(onDelete).toHaveBeenCalledTimes(1);
   });

package/src/components/dataViews/queryableProperties/__tests__/Where.spec.js

@@ -1,27 +1,16 @@
-import React from "react";
+import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
-import { render } from "@truedat/test/render";
-
 import Where from "../Where";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "expression.clause.action.addGroup": "Add Group",
-      "expression.form.clause": "Clause",
-    },
-  },
-};
-
 describe("<Where />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
       <TestFormWrapper>
         <Where />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
+    await waitForLoad(rendered);
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 });