@truedat/qx 5.14.1 → 5.15.0

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

@@ -0,0 +1,183 @@
+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 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(
+      <TestFormWrapper
+        defaultValues={{
+          queryables: [
+            {
+              id: 0,
+              alias: "",
+              type: "from",
+              properties: {
+                resource: null,
+              },
+            },
+          ],
+        }}
+      >
+        <Queryables />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with join queryable", () => {
+    const { container } = render(
+      <TestFormWrapper
+        defaultValues={{
+          queryables: [
+            {
+              id: 0,
+              alias: "",
+              type: "join",
+              properties: {
+                resource: null,
+              },
+            },
+          ],
+        }}
+      >
+        <Queryables />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with select queryable", () => {
+    const { container } = render(
+      <TestFormWrapper
+        defaultValues={{
+          queryables: [
+            {
+              id: 0,
+              alias: "",
+              type: "select",
+              properties: {
+                fields: [],
+              },
+            },
+          ],
+        }}
+      >
+        <Queryables />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with from queryable", () => {
+    const { container } = render(
+      <TestFormWrapper
+        defaultValues={{
+          queryables: [
+            {
+              id: 0,
+              alias: "",
+              type: "group_by",
+              properties: {
+                group_fields: [],
+                aggregate_fields: [],
+              },
+            },
+          ],
+        }}
+      >
+        <Queryables />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("test delete queryable", async () => {
+    const { container, getByRole, getAllByRole, queryByText } = render(
+      <TestFormWrapper
+        defaultValues={{
+          queryables: [
+            {
+              id: 0,
+              alias: "",
+              type: "from",
+              properties: {
+                resource: null,
+              },
+            },
+            {
+              id: 0,
+              alias: "",
+              type: "group_by",
+              properties: {
+                group_fields: [],
+                aggregate_fields: [],
+              },
+            },
+          ],
+        }}
+      >
+        <Queryables />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    userEvent.hover(getAllByRole("textbox")[1]);
+
+    await act(async () => {
+      userEvent.click(getByRole("button", { name: /delete/i }));
+    });
+
+    await waitFor(() =>
+      expect(queryByText(/add_group_field/i)).not.toBeInTheDocument()
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});