@truedat/qx 7.5.7 → 7.5.10

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

@@ -6,6 +6,186 @@ exports[`<Select /> handles add all fields 1`] = `
     class="ui list"
     role="list"
   >
+    <div
+      class="item"
+      role="listitem"
+    >
+      <div>
+        <div
+          class="ui grid"
+        >
+          <div
+            class="row"
+          >
+            <div
+              class="column"
+            />
+            <div
+              class="nine wide column"
+            >
+              <div
+                class="ui grid"
+              >
+                <div
+                  class="sixteen wide column"
+                >
+                  <div
+                    class="expression-container"
+                  >
+                    <div
+                      aria-expanded="false"
+                      class="ui top left pointing dropdown"
+                      role="listbox"
+                      tabindex="0"
+                    >
+                      <div
+                        class="shape-selector-trigger"
+                      >
+                        [F]
+                      </div>
+                      <div
+                        class="menu transition"
+                      >
+                        <div
+                          aria-checked="false"
+                          aria-selected="false"
+                          class="item"
+                          role="option"
+                          style="pointer-events: all;"
+                        >
+                          <div
+                            class="text flex-center"
+                          >
+                            <small
+                              style="margin-right: 5px;"
+                            >
+                              <b>
+                                <code>
+                                  [π]
+                                </code>
+                              </b>
+                            </small>
+                            functions.expression.shape.constant
+                          </div>
+                        </div>
+                        <div
+                          aria-checked="false"
+                          aria-selected="false"
+                          class="item"
+                          role="option"
+                          style="pointer-events: all;"
+                        >
+                          <div
+                            class="text flex-center"
+                          >
+                            <small
+                              style="margin-right: 5px;"
+                            >
+                              <b>
+                                <code>
+                                  f(x)
+                                </code>
+                              </b>
+                            </small>
+                            functions.expression.shape.function
+                          </div>
+                        </div>
+                        <div
+                          aria-checked="true"
+                          aria-selected="true"
+                          class="active selected item"
+                          role="option"
+                          style="pointer-events: all;"
+                        >
+                          <div
+                            class="text flex-center"
+                          >
+                            <small
+                              style="margin-right: 5px;"
+                            >
+                              <b>
+                                <code>
+                                  [F]
+                                </code>
+                              </b>
+                            </small>
+                            functions.expression.shape.field
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      aria-expanded="false"
+                      class="ui fluid selection scrolling pointing dropdown select-field-dropdown"
+                      role="listbox"
+                      tabindex="0"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        class="divider text"
+                        role="alert"
+                      >
+                        <div
+                          class="ui label"
+                        />
+                        abc
+                      </div>
+                      <i
+                        aria-hidden="true"
+                        class="dropdown icon"
+                      />
+                      <div
+                        class="menu transition"
+                      >
+                        <div
+                          aria-checked="true"
+                          aria-selected="true"
+                          class="active selected item"
+                          role="option"
+                          style="pointer-events: all;"
+                        >
+                          <div
+                            class="ui label"
+                          />
+                          <span
+                            class="text"
+                          >
+                            abc
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="six wide column"
+            >
+              <div
+                class="inline fields no-margin"
+              >
+                <div
+                  class="field"
+                >
+                  <div
+                    class="ui input"
+                  >
+                    <input
+                      autocomplete="off"
+                      placeholder="queryables.select.form.alias"
+                      type="text"
+                      value="abc"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <div
       class="item"
       role="listitem"
@@ -13,12 +193,7 @@ exports[`<Select /> handles add all fields 1`] = `
       <button
         class="ui button"
       >
-        add_select_field
-      </button>
-      <button
-        class="ui button"
-      >
-        add_all_select_fields
+        queryables.select.form.add_select_field
       </button>
     </div>
   </div>
@@ -38,14 +213,14 @@ exports[`<Select /> matches the latest snapshot 1`] = `
       <button
         class="ui button"
       >
-        add_select_field
+        queryables.select.form.add_select_field
       </button>
       <button
         class="ui disabled button"
         disabled=""
         tabindex="-1"
       >
-        add_all_select_fields
+        queryables.select.form.add_all_select_fields
       </button>
     </div>
   </div>
@@ -117,7 +292,7 @@ exports[`<Select /> matches the latest snapshot with content 1`] = `
                                 </code>
                               </b>
                             </small>
-                            constant
+                            functions.expression.shape.constant
                           </div>
                         </div>
                         <div
@@ -139,7 +314,7 @@ exports[`<Select /> matches the latest snapshot with content 1`] = `
                                 </code>
                               </b>
                             </small>
-                            function
+                            functions.expression.shape.function
                           </div>
                         </div>
                         <div
@@ -161,7 +336,7 @@ exports[`<Select /> matches the latest snapshot with content 1`] = `
                                 </code>
                               </b>
                             </small>
-                            field
+                            functions.expression.shape.field
                           </div>
                         </div>
                       </div>
@@ -215,9 +390,8 @@ exports[`<Select /> matches the latest snapshot with content 1`] = `
                   >
                     <input
                       autocomplete="off"
-                      placeholder="alias"
+                      placeholder="queryables.select.form.alias"
                       type="text"
-                      value=""
                     />
                   </div>
                 </div>
@@ -286,7 +460,7 @@ exports[`<Select /> matches the latest snapshot with content 1`] = `
                                 </code>
                               </b>
                             </small>
-                            constant
+                            functions.expression.shape.constant
                           </div>
                         </div>
                         <div
@@ -308,7 +482,7 @@ exports[`<Select /> matches the latest snapshot with content 1`] = `
                                 </code>
                               </b>
                             </small>
-                            function
+                            functions.expression.shape.function
                           </div>
                         </div>
                         <div
@@ -330,7 +504,7 @@ exports[`<Select /> matches the latest snapshot with content 1`] = `
                                 </code>
                               </b>
                             </small>
-                            field
+                            functions.expression.shape.field
                           </div>
                         </div>
                       </div>
@@ -384,7 +558,7 @@ exports[`<Select /> matches the latest snapshot with content 1`] = `
                   >
                     <input
                       autocomplete="off"
-                      placeholder="alias"
+                      placeholder="queryables.select.form.alias"
                       type="text"
                       value=""
                     />
@@ -403,7 +577,7 @@ exports[`<Select /> matches the latest snapshot with content 1`] = `
       <button
         class="ui button"
       >
-        add_select_field
+        queryables.select.form.add_select_field
       </button>
     </div>
   </div>

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

@@ -55,7 +55,7 @@ exports[`<SelectField /> matches the latest snapshot for group_by 1`] = `
                             </code>
                           </b>
                         </small>
-                        constant
+                        functions.expression.shape.constant
                       </div>
                     </div>
                     <div
@@ -77,7 +77,7 @@ exports[`<SelectField /> matches the latest snapshot for group_by 1`] = `
                             </code>
                           </b>
                         </small>
-                        function
+                        functions.expression.shape.function
                       </div>
                     </div>
                   </div>
@@ -100,9 +100,8 @@ exports[`<SelectField /> matches the latest snapshot for group_by 1`] = `
               >
                 <input
                   autocomplete="off"
-                  placeholder="alias"
+                  placeholder="queryables.select.form.alias"
                   type="text"
-                  value=""
                 />
               </div>
             </div>
@@ -169,7 +168,7 @@ exports[`<SelectField /> matches the latest snapshot for select 1`] = `
                             </code>
                           </b>
                         </small>
-                        constant
+                        functions.expression.shape.constant
                       </div>
                     </div>
                     <div
@@ -191,7 +190,7 @@ exports[`<SelectField /> matches the latest snapshot for select 1`] = `
                             </code>
                           </b>
                         </small>
-                        function
+                        functions.expression.shape.function
                       </div>
                     </div>
                   </div>
@@ -214,9 +213,8 @@ exports[`<SelectField /> matches the latest snapshot for select 1`] = `
               >
                 <input
                   autocomplete="off"
-                  placeholder="alias"
+                  placeholder="queryables.select.form.alias"
                   type="text"
-                  value=""
                 />
               </div>
             </div>

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

@@ -6,7 +6,7 @@ exports[`<Where /> matches the latest snapshot 1`] = `
     class="field"
   >
     <label>
-      Clause
+      expression.form.clause
     </label>
     <div
       class="ui horizontal divider"
@@ -14,7 +14,7 @@ exports[`<Where /> matches the latest snapshot 1`] = `
       <button
         class="ui mini button"
       >
-        Add Group
+        expression.clause.action.addGroup
       </button>
     </div>
   </div>

package/src/components/functions/FunctionEditor.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect } from "react";
+import { Fragment, useEffect } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import {
@@ -118,18 +118,16 @@ export default function FunctionEditor({
               </Grid.Row>
             </GridColumn>
           </Grid>
-
           <Header as="h5" dividing>
             {formatMessage({ id: "functions.form.params" })}
           </Header>
           <FunctionParams />
-
           <Header as="h5" dividing>
             {formatMessage({ id: "functions.form.output" })}
           </Header>
-          <QxContext.Provider value={{ functions, type, field: "expression" }}>
+          <QxContext value={{ functions, type, field: "expression" }}>
             <Expression />
-          </QxContext.Provider>
+          </QxContext>
           <Divider hidden />
           <Container textAlign="right">
             <Button

package/src/components/functions/FunctionParams.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Controller, useFormContext, useFieldArray } from "react-hook-form";
@@ -12,7 +12,6 @@ export default function FunctionParams() {
     name: "params",
     keyName: "key",
   });
-
   const maxParamId = _.flow(_.map("id"), _.max)(fields) || 0;
   const newParam = () => ({
     name: "",
@@ -48,7 +47,7 @@ const ParamItem = ({ index, onDelete }) => {
     >
       <Grid>
         <Grid.Row>
-          <Grid.Column></Grid.Column>
+          <Grid.Column />
           <Grid.Column width={15}>
             <Grid.Row>
               <Form.Group inline className="no-margin">

package/src/components/functions/Functions.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
 import {
   Button,
@@ -85,7 +85,6 @@ export default function Functions() {
           </Header.Subheader>
         </Header.Content>
       </Header>
-
       <Grid>
         <GridColumn width={4}>
           <Button fluid onClick={setStateNewFunction} disabled={isDirty}>
@@ -100,8 +99,8 @@ export default function Functions() {
                 >
                   <List.Content>
                     <List.Header>
-                      {typeLabel(func.type)} {func.name || "Function"}/
-                      {func.params.length}
+                      {typeLabel(func.type)}
+                      {func.name || "Function"}/{func.params.length}
                     </List.Header>
                   </List.Content>
                 </List.Item>

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

@@ -1,13 +1,11 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
-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 { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import FunctionEditor from "../FunctionEditor";
 
 const renderOpts = {
   messages,
-  fallback: "lazy",
 };
 
 const props = {
@@ -36,120 +34,126 @@ const props = {
 };
 
 describe("<FunctionEditor />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(<FunctionEditor {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<FunctionEditor {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.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();
+    const rendered = render(<FunctionEditor {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches snapshot without onDelete", () => {
+  it("matches snapshot without onDelete", async () => {
     const thisProps = {
       ...props,
       onDelete: null,
     };
-    const { container } = render(<FunctionEditor {...thisProps} />, renderOpts);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<FunctionEditor {...thisProps} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("test cancel button", () => {
+  it("test cancel button", async () => {
+    const user = userEvent.setup({ delay: null });
     const onCancel = jest.fn();
     const thisProps = { ...props, onCancel };
-    const { getByRole } = render(<FunctionEditor {...thisProps} />, renderOpts);
+    const rendered = render(<FunctionEditor {...thisProps} />, renderOpts);
+    await waitForLoad(rendered);
 
-    userEvent.click(getByRole("button", { name: /cancel/i }));
+    await user.click(rendered.getByRole("button", { name: /cancel/i }));
     expect(onCancel).toHaveBeenCalled();
   });
 
   it("test cancel button with confirm", async () => {
+    const user = userEvent.setup({ delay: null });
     const onCancel = jest.fn();
     const thisProps = { ...props, onCancel };
-    const { container, getByRole, getAllByRole } = render(
-      <FunctionEditor {...thisProps} />,
-      renderOpts
-    );
+    const rendered = render(<FunctionEditor {...thisProps} />, renderOpts);
+    await waitForLoad(rendered);
 
-    userEvent.type(getAllByRole("textbox")[0], "name");
-    userEvent.click(getByRole("option", { name: /string/ }));
-    userEvent.click(getAllByRole("listitem")[0]);
-    userEvent.type(getAllByRole("textbox")[1], "description");
+    await user.type(rendered.getAllByRole("textbox")[0], "name");
+    await user.click(rendered.getByRole("option", { name: /string/i }));
+    await user.click(rendered.getAllByRole("listitem")[0]);
+    await user.type(rendered.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 user.click(rendered.getByRole("option", { name: /boolean/i }));
+    await user.click(rendered.getByRole("option", { name: /constant/i }));
+    await user.click(rendered.getByRole("option", { name: /true/i }));
 
     await waitFor(() =>
-      expect(getByRole("button", { name: /save/i })).toBeEnabled()
+      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled()
     );
 
-    userEvent.click(getByRole("button", { name: /cancel/i }));
+    await user.click(rendered.getByRole("button", { name: /cancel/i }));
     expect(onCancel).toHaveBeenCalledTimes(0);
 
-    userEvent.click(getByRole("button", { name: /modal-negative-action/i }));
+    await user.click(
+      rendered.getByRole("button", { name: /modal-negative-action/i })
+    );
     expect(onCancel).toHaveBeenCalledTimes(0);
 
-    userEvent.click(getByRole("button", { name: /cancel/i }));
+    await user.click(rendered.getByRole("button", { name: /cancel/i }));
     expect(onCancel).toHaveBeenCalledTimes(0);
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
 
-    userEvent.click(getByRole("button", { name: /modal-affirmative-action/i }));
+    await user.click(
+      rendered.getByRole("button", { name: /modal-affirmative-action/i })
+    );
     expect(onCancel).toHaveBeenCalledTimes(1);
   });
 
-  it("test delete button", () => {
+  it("test delete button", async () => {
+    const user = userEvent.setup({ delay: null });
     const onDelete = jest.fn();
     const thisProps = { ...props, onDelete };
-    const { container, getByRole } = render(
-      <FunctionEditor {...thisProps} />,
-      renderOpts
-    );
+    const rendered = render(<FunctionEditor {...thisProps} />, renderOpts);
+    await waitForLoad(rendered);
 
-    userEvent.click(getByRole("button", { name: /delete/i }));
+    await user.click(rendered.getByRole("button", { name: /delete/i }));
     expect(onDelete).toHaveBeenCalledTimes(0);
 
-    userEvent.click(getByRole("button", { name: /modal-negative-action/i }));
+    await user.click(
+      rendered.getByRole("button", { name: /modal-negative-action/i })
+    );
     expect(onDelete).toHaveBeenCalledTimes(0);
 
-    userEvent.click(getByRole("button", { name: /delete/i }));
+    await user.click(rendered.getByRole("button", { name: /delete/i }));
     expect(onDelete).toHaveBeenCalledTimes(0);
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
 
-    userEvent.click(getByRole("button", { name: /modal-affirmative-action/i }));
+    await user.click(
+      rendered.getByRole("button", { name: /modal-affirmative-action/i })
+    );
     expect(onDelete).toHaveBeenCalledTimes(1);
   });
 
   it("test submit", async () => {
+    const user = userEvent.setup({ delay: null });
     const onSubmit = jest.fn();
     const thisProps = { ...props, onSubmit };
-    const { getByRole, getAllByRole } = render(
-      <FunctionEditor {...thisProps} />,
-      renderOpts
-    );
+    const rendered = render(<FunctionEditor {...thisProps} />, renderOpts);
+    await waitForLoad(rendered);
 
-    expect(getByRole("button", { name: /save/i })).toBeDisabled();
+    expect(rendered.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 user.type(rendered.getAllByRole("textbox")[0], "name");
+    await user.click(rendered.getByRole("option", { name: /constant/i }));
+    await user.click(rendered.getByRole("option", { name: /true/i }));
 
     await waitFor(() =>
-      expect(getByRole("button", { name: /save/i })).toBeEnabled()
+      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled()
     );
 
-    userEvent.click(getByRole("button", { name: /save/i }));
+    await user.click(rendered.getByRole("button", { name: /save/i }));
 
     await waitFor(() =>
-      expect(getByRole("button", { name: /save/i })).toBeEnabled()
+      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled()
     );
 
     expect(onSubmit.mock.calls[0][0]).toEqual({