@truedat/qx 5.14.1 → 5.15.0

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

@@ -0,0 +1,293 @@
+import React from "react";
+import { act } from "react-dom/test-utils";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import DataViewEditor from "../DataViewEditor";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "actions.cancel": "cancel",
+      "actions.delete": "delete",
+      "actions.discard.confirmation.content": "content",
+      "actions.discard.confirmation.header": "header",
+      "actions.save": "save",
+      "confirmation.no": "confirmation_no",
+      "confirmation.yes": "confirmation_yes",
+      "dataViews.action.delete.content": "content",
+      "dataViews.action.delete.header": "header",
+      "dataViews.action.new": "new",
+      "dataViews.form.error.empty_select": "empty_select",
+      "dataViews.form.name": "name",
+      "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",
+      "dataViews.form.select": "select",
+      "expression.clause.action.addExpression": "addExpression",
+      "expression.clause.action.addGroup": "addGroup",
+      "expression.condition.customExpression": "customExpression",
+      "expression.condition.selectFunction": "selectFunction",
+      "expression.form.clause": "clause",
+      "form.validation.required": "required",
+      "functions.expression.shape.constant": "constant",
+      "functions.expression.shape.field": "field",
+      "functions.expression.shape.function": "function",
+      "functions.form.add_description": "add_description",
+      "functions.form.required": "required",
+      "group.props.name": "name",
+      "queryables.form.resource": "resource",
+      "queryables.resource.selector.data_structure": "data_structure",
+      "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",
+      "queryables.select.form.alias": "alias",
+    },
+  },
+};
+
+const defaultProps = {
+  selectedDataView: null,
+  context: {},
+  onSubmit: jest.fn(),
+  onCancel: jest.fn(),
+  onDelete: jest.fn(),
+  isSubmitting: false,
+  setDirty: jest.fn(),
+};
+
+describe("<DataViewEditor />", () => {
+  it("matches the latest snapshot for empty", async () => {
+    const { container } = render(
+      <DataViewEditor {...defaultProps} />,
+      renderOpts
+    );
+
+    await act(async () => {
+      expect(container).toMatchSnapshot();
+    });
+  });
+  it("matches the latest snapshot with content", async () => {
+    const props = {
+      ...defaultProps,
+      selectedDataView: {
+        id: 4,
+        description: "Description",
+        name: "StructureView",
+        queryables: [
+          {
+            id: 0,
+            properties: {
+              resource: {
+                embedded: {
+                  fields: [
+                    {
+                      id: 8,
+                      name: "Column1",
+                      parent_name: "ParentTable",
+                      type: "string",
+                    },
+                  ],
+                  id: 123,
+                  name: "ParentTable",
+                },
+                id: 123,
+                type: "data_structure",
+              },
+            },
+            type: "from",
+          },
+        ],
+        select: {
+          properties: {
+            fields: [
+              {
+                alias: "Column1",
+                expression: {
+                  shape: "field",
+                  value: {
+                    id: 8,
+                    name: "Column1",
+                    parent_id: 0,
+                    type: "string",
+                  },
+                },
+                id: 8,
+              },
+            ],
+          },
+          type: "select",
+        },
+      },
+    };
+    const { container } = render(<DataViewEditor {...props} />, renderOpts);
+
+    await act(async () => {
+      expect(container).toMatchSnapshot();
+    });
+  });
+
+  it("handles user interaction", async () => {
+    const onSubmit = jest.fn();
+    const props = {
+      ...defaultProps,
+      onSubmit,
+      selectedDataView: {
+        name: "",
+        description: "",
+        queryables: [
+          {
+            id: 0,
+            alias: "",
+            type: "from",
+            properties: {
+              resource: null,
+            },
+          },
+        ],
+        select: {
+          type: "select",
+        },
+      },
+      context: {
+        dataViews: [
+          {
+            id: 4,
+            description: "Description",
+            name: "AnotherDataView",
+            select: {
+              properties: {
+                fields: [
+                  {
+                    alias: "Column1",
+                    expression: {
+                      shape: "field",
+                      value: {
+                        id: 8,
+                        name: "Column1",
+                        parent_id: 0,
+                        type: "string",
+                      },
+                    },
+                    id: 8,
+                  },
+                ],
+              },
+              type: "select",
+            },
+          },
+        ],
+      },
+    };
+    const { container, getAllByRole, getByRole } = render(
+      <DataViewEditor {...props} />,
+      renderOpts
+    );
+
+    // Insert name
+    userEvent.type(getAllByRole("textbox")[0], "data_view_name");
+
+    // Insert From information
+    userEvent.type(getAllByRole("textbox")[1], "from_alias");
+    userEvent.click(getByRole("option", { name: /data_view/i }));
+    userEvent.click(getByRole("option", { name: /AnotherDataView/i }));
+
+    expect(getByRole("button", { name: /save/i })).toBeDisabled();
+
+    await act(async () => {
+      userEvent.click(getByRole("button", { name: /add_all_select_fields/i }));
+    });
+
+    expect(getByRole("button", { name: /save/i })).toBeEnabled();
+
+    expect(container).toMatchSnapshot();
+
+    await act(async () => {
+      userEvent.click(getByRole("button", { name: /cancel/i }));
+    });
+    await act(async () => {
+      userEvent.click(getByRole("button", { name: /modal-negative-action/i }));
+    });
+
+    await act(async () => {
+      userEvent.click(getByRole("button", { name: /save/i }));
+    });
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      description: "",
+      name: "data_view_name",
+      queryables: [
+        {
+          alias: "from_alias",
+          id: 0,
+          properties: {
+            resource: {
+              embedded: {
+                description: "Description",
+                fields: [
+                  {
+                    id: 0,
+                    name: "Column1",
+                    parent_name: "AnotherDataView",
+                    type: "string",
+                  },
+                ],
+                id: 4,
+                name: "AnotherDataView",
+                select: {
+                  properties: {
+                    fields: [
+                      {
+                        alias: "Column1",
+                        expression: {
+                          shape: "field",
+                          value: {
+                            id: 8,
+                            name: "Column1",
+                            parent_id: 0,
+                            type: "string",
+                          },
+                        },
+                        id: 8,
+                      },
+                    ],
+                  },
+                  type: "select",
+                },
+              },
+              id: 4,
+              type: "data_view",
+            },
+          },
+          type: "from",
+        },
+      ],
+      select: {
+        properties: {
+          fields: [
+            {
+              alias: "Column1",
+              expression: {
+                shape: "field",
+                value: {
+                  id: 0,
+                  name: "Column1",
+                  parent_id: 0,
+                  type: "string",
+                },
+              },
+              id: 0,
+            },
+          ],
+        },
+        type: "select",
+      },
+    });
+  });
+});

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import DataViewSelect from "../DataViewSelect";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "queryables.select.form.add_all_select_fields": "add_all_select_fields",
+      "queryables.select.form.add_select_field": "add_select_field",
+      "dataViews.form.error.empty_select": "empty_select",
+      "dataViews.form.select": "select",
+    },
+  },
+};
+
+describe("<DataViewSelect />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <DataViewSelect />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,57 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+
+import DataViews from "../DataViews";
+
+jest.mock("@truedat/qx/hooks/useDataViews", () => {
+  const originalModule = jest.requireActual("@truedat/qx/hooks/useDataViews");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useDataViews: jest.fn(() => ({
+      data: {
+        data: [
+          {
+            id: 4,
+            description: "Description",
+            name: "StructureView",
+          },
+        ],
+      },
+      loading: false,
+    })),
+    useDataViewCreate: jest.fn(() => ({
+      trigger: jest.fn(() => new Promise(() => {})),
+      isMutating: false,
+    })),
+    useDataViewDelete: jest.fn(() => ({
+      trigger: jest.fn(() => new Promise(() => {})),
+      isMutating: false,
+    })),
+    useDataViewUpdate: jest.fn(() => ({
+      trigger: jest.fn(() => new Promise(() => {})),
+      isMutating: false,
+    })),
+  };
+});
+
+const renderOpts = {
+  messages: {
+    en: {
+      "dataViews.action.new": "new",
+      "dataViews.empty_list": "empty_list",
+      "dataViews.no_selection": "no_selection",
+      "dataViews.subheader": "subheader",
+      "dataViews.header": "header",
+    },
+  },
+};
+
+describe("<DataViews />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<DataViews />, renderOpts);
+
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,201 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import Queryable from "../Queryable";
+
+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",
+      "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("<Queryable />", () => {
+  it("matches the latest snapshot with from queryable", () => {
+    const { container } = render(
+      <TestFormWrapper
+        defaultValues={{
+          queryables: [
+            {
+              id: 0,
+              alias: "",
+              type: "from",
+              properties: {
+                resource: null,
+              },
+            },
+          ],
+        }}
+      >
+        <Queryable index={0} />
+      </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,
+              },
+            },
+          ],
+        }}
+      >
+        <Queryable index={0} />
+      </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: [],
+              },
+            },
+          ],
+        }}
+      >
+        <Queryable index={0} />
+      </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: [],
+              },
+            },
+          ],
+        }}
+      >
+        <Queryable index={0} />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with duplicated alias", () => {
+    const { container } = render(
+      <TestFormWrapper
+        defaultValues={{
+          queryables: [
+            {
+              id: 0,
+              alias: "alias1",
+              type: "from",
+              properties: {
+                resource: null,
+              },
+            },
+            {
+              id: 0,
+              alias: "alias1",
+              type: "group_by",
+              properties: {
+                group_fields: [],
+                aggregate_fields: [],
+              },
+            },
+          ],
+        }}
+      >
+        <Queryable index={0} />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with duplicated resource", () => {
+    const { container } = render(
+      <TestFormWrapper
+        defaultValues={{
+          queryables: [
+            {
+              id: 0,
+              alias: "alias1",
+              type: "from",
+              properties: {
+                resource: { id: 1, type: "data_view" },
+              },
+            },
+            {
+              id: 0,
+              alias: "",
+              type: "join",
+              properties: {
+                resource: { id: 1, type: "data_view" },
+              },
+            },
+          ],
+        }}
+      >
+        <Queryable index={0} />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});