@truedat/qx 7.5.7 → 7.5.10

package/src/components/dataViews/__tests__/Queryables.spec.js

@@ -1,48 +1,12 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
-import { act } from "react-dom/test-utils";
 import userEvent from "@testing-library/user-event";
-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 Queryables from "../Queryables";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "dataViews.form.error.empty_select": "empty_select",
-      "dataViews.form.error.empty_select": "empty_select",
-      "dataViews.form.queryable.alias": "alias",
-      "dataViews.form.queryable.from": "from",
-      "dataViews.form.queryable.group_by": "group_by",
-      "dataViews.form.queryable.join": "join",
-      "dataViews.form.queryable.select": "select",
-      "dataViews.form.queryable.where": "where",
-      "expression.clause.action.addGroup": "addGroup",
-      "expression.form.clause": "clause",
-      "joinType.full_outer": "full_outer",
-      "joinType.inner": "inner",
-      "joinType.left": "left",
-      "joinType.right": "right",
-      "queryables.form.join.type": "type",
-      "queryables.form.resource": "resource",
-      "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.resource.selector.data_view": "data_view",
-      "queryables.resource.type.data_structure": "data_structure",
-      "queryables.resource.type.data_view": "data_view",
-      "queryables.resource.type.reference_dataset": "reference_dataset",
-      "queryables.resource.type": "type",
-      "queryables.select.form.add_all_select_fields": "add_all_select_fields",
-      "queryables.select.form.add_select_field": "add_select_field",
-    },
-  },
-};
-
 describe("<Queryables />", () => {
-  it("matches the latest snapshot with from queryable", () => {
-    const { container } = render(
+  it("matches the latest snapshot with from queryable", async () => {
+    const rendered = render(
       <TestFormWrapper
         defaultValues={{
           queryables: [
@@ -58,15 +22,14 @@ describe("<Queryables />", () => {
         }}
       >
         <Queryables />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot with join queryable", () => {
-    const { container } = render(
+  it("matches the latest snapshot with join queryable", async () => {
+    const rendered = render(
       <TestFormWrapper
         defaultValues={{
           queryables: [
@@ -82,15 +45,14 @@ describe("<Queryables />", () => {
         }}
       >
         <Queryables />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot with select queryable", () => {
-    const { container } = render(
+  it("matches the latest snapshot with select queryable", async () => {
+    const rendered = render(
       <TestFormWrapper
         defaultValues={{
           queryables: [
@@ -106,15 +68,14 @@ describe("<Queryables />", () => {
         }}
       >
         <Queryables />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot with from queryable", () => {
-    const { container } = render(
+  it("matches the latest snapshot with from queryable", async () => {
+    const rendered = render(
       <TestFormWrapper
         defaultValues={{
           queryables: [
@@ -131,15 +92,15 @@ describe("<Queryables />", () => {
         }}
       >
         <Queryables />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("test delete queryable", async () => {
-    const { container, getByRole, getAllByRole, queryByText } = render(
+    const user = userEvent.setup({ delay: null, skipHover: true });
+    const rendered = render(
       <TestFormWrapper
         defaultValues={{
           queryables: [
@@ -152,7 +113,7 @@ describe("<Queryables />", () => {
               },
             },
             {
-              id: 0,
+              id: 1,
               alias: "",
               type: "group_by",
               properties: {
@@ -164,20 +125,20 @@ describe("<Queryables />", () => {
         }}
       >
         <Queryables />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
+    await waitForLoad(rendered);
 
-    userEvent.hover(getAllByRole("textbox")[1]);
+    await user.hover(rendered.getAllByRole("textbox")[1]);
 
-    await act(async () => {
-      userEvent.click(getByRole("button", { name: /delete/i }));
-    });
+    await user.click(rendered.getByRole("button", { name: "delete" }));
 
-    await waitFor(() =>
-      expect(queryByText(/add_group_field/i)).not.toBeInTheDocument()
-    );
+    await waitFor(() => {
+      expect(
+        rendered.queryByText("queryables.group_by.form.add_group_field")
+      ).not.toBeInTheDocument();
+    });
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/dataViews/__tests__/__snapshots__/DataViewEditor.spec.js.snap

@@ -23,7 +23,7 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
             class="required field"
           >
             <label>
-              name
+              group.props.name
             </label>
             <div
               class="field"
@@ -33,7 +33,7 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
               >
                 <input
                   autocomplete="off"
-                  placeholder="name"
+                  placeholder="dataViews.form.name"
                   type="text"
                   value="data_view_name"
                 />
@@ -54,7 +54,7 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
               style="font-style: italic; font-size: 13px; padding: 9.5px 14px;"
               tabindex="0"
             >
-              add_description
+              functions.form.add_description
             </a>
           </div>
         </div>
@@ -64,7 +64,7 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
       class="required field"
     >
       <label>
-        source
+        dataViews.form.source
       </label>
       <div
         class="field"
@@ -90,7 +90,7 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
             class="divider text"
             role="alert"
           >
-            placeholder
+            source.search.placeholder
           </div>
           <i
             aria-hidden="true"
@@ -141,7 +141,7 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
                   <div
                     class="ui blue ribbon label"
                   >
-                    from
+                    dataViews.form.queryable.from
                   </div>
                 </div>
                 <div
@@ -151,14 +151,14 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
                     class="field"
                   >
                     <label>
-                      alias
+                      dataViews.form.queryable.alias
                     </label>
                     <div
                       class="ui input"
                     >
                       <input
                         autocomplete="off"
-                        placeholder="alias"
+                        placeholder="dataViews.form.queryable.alias"
                         type="text"
                         value="from_alias"
                       />
@@ -172,7 +172,7 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
                     class="required field"
                   >
                     <label>
-                      resource
+                      queryables.form.resource
                     </label>
                     <div
                       aria-expanded="false"
@@ -186,7 +186,7 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
                         class="divider text"
                         role="alert"
                       >
-                        data_view
+                        queryables.resource.type.data_view
                       </div>
                       <i
                         aria-hidden="true"
@@ -205,7 +205,7 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
                           <span
                             class="text"
                           >
-                            data_structure
+                            queryables.resource.type.data_structure
                           </span>
                         </div>
                         <div
@@ -218,7 +218,7 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
                           <span
                             class="text"
                           >
-                            data_view
+                            queryables.resource.type.data_view
                           </span>
                         </div>
                       </div>
@@ -284,22 +284,22 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
           <button
             class="ui button"
           >
-            join
+            dataViews.form.queryable.join
           </button>
           <button
             class="ui button"
           >
-            where
+            dataViews.form.queryable.where
           </button>
           <button
             class="ui button"
           >
-            select
+            dataViews.form.queryable.select
           </button>
           <button
             class="ui button"
           >
-            group_by
+            dataViews.form.queryable.group_by
           </button>
         </div>
       </div>
@@ -320,7 +320,7 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
               <div
                 class="ui ribbon label"
               >
-                select
+                dataViews.form.select
               </div>
             </div>
             <div
@@ -389,7 +389,7 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
                                             </code>
                                           </b>
                                         </small>
-                                        constant
+                                        functions.expression.shape.constant
                                       </div>
                                     </div>
                                     <div
@@ -411,7 +411,7 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
                                             </code>
                                           </b>
                                         </small>
-                                        function
+                                        functions.expression.shape.function
                                       </div>
                                     </div>
                                     <div
@@ -433,7 +433,7 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
                                             </code>
                                           </b>
                                         </small>
-                                        field
+                                        functions.expression.shape.field
                                       </div>
                                     </div>
                                   </div>
@@ -502,7 +502,7 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
                               >
                                 <input
                                   autocomplete="off"
-                                  placeholder="alias"
+                                  placeholder="queryables.select.form.alias"
                                   type="text"
                                   value="Column1"
                                 />
@@ -521,7 +521,7 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
                   <button
                     class="ui button"
                   >
-                    add_select_field
+                    queryables.select.form.add_select_field
                   </button>
                 </div>
               </div>
@@ -539,17 +539,17 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
       <button
         class="ui primary button"
       >
-        save
+        actions.save
       </button>
       <button
         class="ui button"
       >
-        cancel
+        actions.cancel
       </button>
       <button
         class="ui red button"
       >
-        delete
+        actions.delete
       </button>
     </div>
   </form>
@@ -562,7 +562,6 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
 <div>
   <form
     class="ui form"
-    style=""
   >
     <h3
       class="ui dividing header"
@@ -582,7 +581,7 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
             class="required field"
           >
             <label>
-              name
+              group.props.name
             </label>
             <div
               class="field"
@@ -592,7 +591,7 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
               >
                 <input
                   autocomplete="off"
-                  placeholder="name"
+                  placeholder="dataViews.form.name"
                   type="text"
                   value="StructureView"
                 />
@@ -623,16 +622,16 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
       class="required field"
     >
       <label>
-        source
+        dataViews.form.source
       </label>
       <div
         class="disabled field"
       >
         <div
-          aria-busy="true"
+          aria-busy="false"
           aria-disabled="true"
           aria-expanded="false"
-          class="ui disabled loading search selection dropdown"
+          class="ui disabled search selection dropdown"
           role="combobox"
         >
           <input
@@ -649,7 +648,7 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
             class="divider text"
             role="alert"
           >
-            placeholder
+            source.search.placeholder
           </div>
           <i
             aria-hidden="true"
@@ -660,9 +659,17 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
             role="listbox"
           >
             <div
-              class="message"
+              aria-checked="false"
+              aria-selected="true"
+              class="selected item"
+              role="option"
+              style="pointer-events: all;"
             >
-              No results found.
+              <span
+                class="text"
+              >
+                external_source_id
+              </span>
             </div>
           </div>
         </div>
@@ -692,7 +699,7 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
                   <div
                     class="ui blue ribbon label"
                   >
-                    from
+                    dataViews.form.queryable.from
                   </div>
                 </div>
                 <div
@@ -702,16 +709,15 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
                     class="field"
                   >
                     <label>
-                      alias
+                      dataViews.form.queryable.alias
                     </label>
                     <div
                       class="ui input"
                     >
                       <input
                         autocomplete="off"
-                        placeholder="alias"
+                        placeholder="dataViews.form.queryable.alias"
                         type="text"
-                        value=""
                       />
                     </div>
                   </div>
@@ -723,7 +729,7 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
                     class="required field"
                   >
                     <label>
-                      resource
+                      queryables.form.resource
                     </label>
                     <div
                       aria-expanded="false"
@@ -737,7 +743,7 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
                         class="divider text"
                         role="alert"
                       >
-                        data_structure
+                        queryables.resource.type.data_structure
                       </div>
                       <i
                         aria-hidden="true"
@@ -756,7 +762,7 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
                           <span
                             class="text"
                           >
-                            data_structure
+                            queryables.resource.type.data_structure
                           </span>
                         </div>
                       </div>
@@ -770,7 +776,7 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
                     >
                       <input
                         class="action-pointer"
-                        placeholder="data_structure"
+                        placeholder="queryables.resource.selector.data_structure"
                         required=""
                         type="text"
                         value="ParentTable"
@@ -793,22 +799,22 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
           <button
             class="ui button"
           >
-            join
+            dataViews.form.queryable.join
           </button>
           <button
             class="ui button"
           >
-            where
+            dataViews.form.queryable.where
           </button>
           <button
             class="ui button"
           >
-            select
+            dataViews.form.queryable.select
           </button>
           <button
             class="ui button"
           >
-            group_by
+            dataViews.form.queryable.group_by
           </button>
         </div>
       </div>
@@ -829,7 +835,7 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
               <div
                 class="ui ribbon label"
               >
-                select
+                dataViews.form.select
               </div>
             </div>
             <div
@@ -898,7 +904,7 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
                                             </code>
                                           </b>
                                         </small>
-                                        constant
+                                        functions.expression.shape.constant
                                       </div>
                                     </div>
                                     <div
@@ -920,7 +926,7 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
                                             </code>
                                           </b>
                                         </small>
-                                        function
+                                        functions.expression.shape.function
                                       </div>
                                     </div>
                                     <div
@@ -942,7 +948,7 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
                                             </code>
                                           </b>
                                         </small>
-                                        field
+                                        functions.expression.shape.field
                                       </div>
                                     </div>
                                   </div>
@@ -1011,7 +1017,7 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
                               >
                                 <input
                                   autocomplete="off"
-                                  placeholder="alias"
+                                  placeholder="queryables.select.form.alias"
                                   type="text"
                                   value="Column1"
                                 />
@@ -1030,7 +1036,7 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
                   <button
                     class="ui button"
                   >
-                    add_select_field
+                    queryables.select.form.add_select_field
                   </button>
                 </div>
               </div>
@@ -1050,17 +1056,17 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
         disabled=""
         tabindex="-1"
       >
-        save
+        actions.save
       </button>
       <button
         class="ui button"
       >
-        cancel
+        actions.cancel
       </button>
       <button
         class="ui red button"
       >
-        delete
+        actions.delete
       </button>
     </div>
   </form>

package/src/components/dataViews/__tests__/__snapshots__/DataViews.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`<DataViews /> matches the latest snapshot 1`] = `
 <div>
   <div
-    class="ui loading segment"
+    class="ui segment"
   >
     <h2
       class="ui header"
@@ -15,11 +15,11 @@ exports[`<DataViews /> matches the latest snapshot 1`] = `
       <div
         class="content"
       >
-        header
+        dataViews.header
         <div
           class="sub header"
         >
-          subheader
+          dataViews.subheader
         </div>
       </div>
     </h2>
@@ -32,7 +32,7 @@ exports[`<DataViews /> matches the latest snapshot 1`] = `
         <button
           class="ui fluid button"
         >
-          new
+          dataViews.action.new
         </button>
         <div
           class="ui divided selection list"
@@ -67,7 +67,7 @@ exports[`<DataViews /> matches the latest snapshot 1`] = `
           <div
             class="sub header"
           >
-            no_selection
+            dataViews.no_selection
           </div>
         </h2>
       </div>