@truedat/qx 7.13.6 → 7.13.8

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

@@ -0,0 +1,260 @@
+import userEvent from "@testing-library/user-event";
+import { act, waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
+import { SOURCE_OPTIONS_QUERY } from "@truedat/cx/sources/api/queries";
+import { sources } from "@truedat/qx/components/qualityControls/__tests__/__fixtures__/qualityControlHelper";
+import AdvancedDataViewEditor from "../advancedForm/AdvancedDataViewEditor";
+
+const sourcesMock = {
+  request: { query: SOURCE_OPTIONS_QUERY },
+  result: { data: { sources } },
+};
+
+const defaultProps = {
+  selectedDataView: null,
+  context: { sourceId: 10 },
+  onSubmit: jest.fn(),
+  onCancel: jest.fn(),
+  onDelete: jest.fn(),
+  isSubmitting: false,
+  setDirty: jest.fn(),
+};
+
+describe("<AdvancedDataViewEditor />", () => {
+  it("matches the latest snapshot for empty", async () => {
+    const rendered = render(<AdvancedDataViewEditor {...defaultProps} />, {
+      mocks: [sourcesMock],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with content", async () => {
+    const props = {
+      ...defaultProps,
+      selectedDataView: {
+        id: 4,
+        source_id: 10,
+        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 rendered = render(<AdvancedDataViewEditor {...props} />, {
+      mocks: [sourcesMock],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("handles user interaction", async () => {
+    const onSubmit = jest.fn();
+    const props = {
+      ...defaultProps,
+      onSubmit,
+      selectedDataView: {
+        name: "",
+        source_id: 10,
+        description: "",
+        queryables: [
+          {
+            id: 0,
+            alias: "",
+            type: "from",
+            properties: {
+              resource: null,
+            },
+          },
+        ],
+        select: {
+          type: "select",
+        },
+      },
+      context: {
+        dataViews: [
+          {
+            id: 4,
+            source_id: 10,
+            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 rendered = render(<AdvancedDataViewEditor {...props} />, {
+      mocks: [sourcesMock],
+    });
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null, skipHover: true });
+
+    // Insert name
+    await user.type(rendered.getAllByRole("textbox")[0], "data_view_name");
+
+    // Insert description
+    await user.type(rendered.getAllByRole("textbox")[1], "data_view_description");
+
+    // Insert From information
+    await user.type(rendered.getByPlaceholderText(/alias/i), "from_alias");
+    await user.click(rendered.getByRole("option", { name: /data_view/i }));
+    await user.click(
+      rendered.getByRole("option", { name: /anotherdataview/i })
+    );
+
+    expect(rendered.getByRole("button", { name: /save/i })).toBeDisabled();
+
+    await user.click(
+      rendered.getByRole("button", { name: /add_all_select_fields/i })
+    );
+
+    await waitFor(() => {
+      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled();
+    });
+
+    expect(rendered.container).toMatchSnapshot();
+
+    await user.click(rendered.getByRole("button", { name: /cancel/i }));
+    await act(async () => {
+      await user.click(rendered.getByRole("button", { name: /save/i }));
+    });
+
+    await waitForLoad(rendered);
+    expect(onSubmit).toHaveBeenCalledWith({
+      description: "data_view_description",
+      source_id: 10,
+      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",
+                },
+                source_id: 10,
+              },
+              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__/DataViewEditor.spec.js

@@ -1,260 +1,194 @@
-import userEvent from "@testing-library/user-event";
-import { act, waitFor } from "@testing-library/react";
+import React from "react";
 import { render, waitForLoad } from "@truedat/test/render";
-import { SOURCE_OPTIONS_QUERY } from "@truedat/cx/sources/api/queries";
-import { sources } from "@truedat/qx/components/qualityControls/__tests__/__fixtures__/qualityControlHelper";
-import DataViewEditor from "../DataViewEditor";
-
-const sourcesMock = {
-  request: { query: SOURCE_OPTIONS_QUERY },
-  result: { data: { sources } },
-};
-
-const defaultProps = {
-  selectedDataView: null,
-  context: { sourceId: 10 },
-  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 rendered = render(<DataViewEditor {...defaultProps} />, {
-      mocks: [sourcesMock],
-    });
-    await waitForLoad(rendered);
-    expect(rendered.container).toMatchSnapshot();
-  });
-
-  it("matches the latest snapshot with content", async () => {
-    const props = {
-      ...defaultProps,
-      selectedDataView: {
-        id: 4,
-        source_id: 10,
-        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,
-              },
+import userEvent from "@testing-library/user-event";
+import { useParams } from "react-router";
+import DataViewEditor, { DataViewDetailEditor } from "../DataViewEditor";
+
+const mockFormatMessage = jest.fn(({ id }) => id);
+jest.mock("react-intl", () => ({
+    ...jest.requireActual("react-intl"),
+    useIntl: () => ({ formatMessage: mockFormatMessage }),
+}));
+
+jest.mock("@truedat/core/routes", () => ({
+    DATA_VIEWS: "/dataviews",
+}));
+
+jest.mock("react-router", () => ({
+    ...jest.requireActual("react-router"),
+    useParams: jest.fn(),
+}));
+
+jest.mock("@apollo/client", () => ({
+    ...jest.requireActual("@apollo/client"),
+    useQuery: jest.fn(() => ({
+        data: {
+            referenceDatasets: [
+                { id: "10", name: "Álpha" },
+                { id: "2", name: "Beta" },
             ],
-          },
-          type: "select",
         },
-      },
-    };
+        loading: false,
+    })),
+}));
+
+const mockUseDataViews = jest.fn();
+const mockUseDataViewFetch = jest.fn();
+
+jest.mock("@truedat/qx/hooks/useDataViews", () => ({
+    useDataViews: () => mockUseDataViews(),
+    useDataViewFetch: (...args) => mockUseDataViewFetch(...args),
+    // mutation hooks are irrelevant here; don’t assert on them
+    useDataViewCreate: () => ({ trigger: jest.fn(), isMutating: false }),
+    useDataViewUpdate: () => ({ trigger: jest.fn(), isMutating: false }),
+    useDataViewDelete: () => ({ trigger: jest.fn(), isMutating: false }),
+}));
+
+const mockUseFunctions = jest.fn(() => ({ data: { data: [] }, loading: false }));
+
+jest.mock("@truedat/qx/hooks/useFunctions", () => ({
+    useFunctions: () => mockUseFunctions(),
+}));
+
+jest.mock("@truedat/core/components", () => ({
+    Loading: () => <div data-testid="loading">loading…</div>,
+    ConfirmModal: ({ trigger, onConfirm }) => <div data-testid="confirm-trigger" onClick={onConfirm}>{trigger}</div>
+}));
+
+jest.mock("../advancedForm/AdvancedDataViewEditor", () => () => (
+    <div data-testid="advanced-editor" />
+));
+jest.mock("../simpleForm/SimpleDataViewEditor", () => () => (
+    <div data-testid="simple-editor" />
+));
+jest.mock("../BreadCrumb", () => ({ text }) => (
+    <div data-testid="breadcrumb">{text}</div>
+));
+
+beforeEach(() => {
+    jest.clearAllMocks();
+    useParams.mockReturnValue({});
+    require("@apollo/client").useQuery.mockImplementation(() => ({
+        data: {
+            referenceDatasets: [
+                { id: "10", name: "Álpha" },
+                { id: "2", name: "Beta" },
+            ],
+        },
+        loading: false,
+    }));
+    mockUseDataViews.mockReturnValue({ data: { data: [] }, loading: false });
+    mockUseDataViewFetch.mockReset();
+});
 
-    const rendered = render(<DataViewEditor {...props} />, {
-      mocks: [sourcesMock],
+describe("<DataViewDetailEditor /> (render behavior only)", () => {
+    it("renders Simple editor by default (guided)", async () => {
+        const rendered = render(<DataViewDetailEditor dataView={undefined} />);
+        await waitForLoad(rendered);
+
+        expect(rendered.getByTestId("simple-editor")).toBeInTheDocument();
+        expect(rendered.queryByTestId("advanced-editor")).not.toBeInTheDocument();
+        expect(rendered.container.querySelector(".ui.segment.loading")).toBeNull();
+
+        const guidedBtn = rendered.getByRole("button", { name: /actions.mode.guided/i });
+        const advancedBtn = rendered.getByRole("button", { name: /actions.mode.advanced/i });
+
+        expect(guidedBtn).toBeDisabled();
+        expect(advancedBtn).not.toBeDisabled();
     });
-    await waitForLoad(rendered);
-    expect(rendered.container).toMatchSnapshot();
-  });
-
-  it("handles user interaction", async () => {
-    const onSubmit = jest.fn();
-    const props = {
-      ...defaultProps,
-      onSubmit,
-      selectedDataView: {
-        name: "",
-        source_id: 10,
-        description: "",
-        queryables: [
-          {
-            id: 0,
-            alias: "",
-            type: "from",
-            properties: {
-              resource: null,
-            },
-          },
-        ],
-        select: {
-          type: "select",
-        },
-      },
-      context: {
-        dataViews: [
-          {
-            id: 4,
-            source_id: 10,
-            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 rendered = render(<DataViewEditor {...props} />, {
-      mocks: [sourcesMock],
+    it("switches to Advanced editor when advanced toggle is confirmed (state managed here)", async () => {
+        const user = userEvent.setup({ delay: null });
+        const rendered = render(<DataViewDetailEditor dataView={undefined} />);
+        await waitForLoad(rendered);
+
+        const advancedBtn = rendered.getByRole("button", { name: /actions.mode.advanced/i });
+        expect(advancedBtn).not.toBeDisabled();
+        await user.click(advancedBtn);
+
+        expect(rendered.getByTestId("advanced-editor")).toBeInTheDocument();
+        expect(rendered.queryByTestId("simple-editor")).not.toBeInTheDocument();
+
+        expect(rendered.getByRole("button", { name: /actions.mode.advanced/i })).toBeDisabled();
+        expect(rendered.getByRole("button", { name: /actions.mode.guided/i })).not.toBeDisabled();
     });
-    await waitForLoad(rendered);
 
-    const user = userEvent.setup({ delay: null, skipHover: true });
+    it("when incoming dataView is advanced, shows Advanced editor and disables switching back to guided", async () => {
+        const dataView = {
+            id: 7,
+            name: "Adv View",
+            description: "",
+            mode: "advanced",
+            queryables: [],
+            select: { type: "select" },
+        };
+        const rendered = render(<DataViewDetailEditor dataView={dataView} />);
+        await waitForLoad(rendered);
+
+        expect(rendered.getByTestId("advanced-editor")).toBeInTheDocument();
+        expect(rendered.queryByTestId("simple-editor")).not.toBeInTheDocument();
+
+        expect(rendered.getByRole("button", { name: /actions.mode.advanced/i })).toBeDisabled();
+        expect(rendered.getByRole("button", { name: /actions.mode.guided/i })).toBeDisabled();
+    });
 
-    // Insert name
-    await user.type(rendered.getAllByRole("textbox")[0], "data_view_name");
+    it("shows loading state when any dependency is loading", () => {
+        mockUseDataViews.mockReturnValue({ data: { data: [] }, loading: true });
+        const rendered = render(<DataViewDetailEditor dataView={undefined} />);
 
-    // Insert From information
-    await user.type(rendered.getByPlaceholderText(/alias/i), "from_alias");
-    await user.click(rendered.getByRole("option", { name: /data_view/i }));
-    await user.click(
-      rendered.getByRole("option", { name: /anotherdataview/i })
-    );
+        expect(rendered.container.querySelector(".ui.segment.loading")).not.toBeNull();
+    });
+});
+
+describe("<DataViewEditor /> (render branches only)", () => {
+    it("renders 'new' breadcrumb and detail editor when there is no id param", async () => {
+        const rendered = render(<DataViewEditor />);
+        await waitForLoad(rendered);
 
-    expect(rendered.getByRole("button", { name: /save/i })).toBeDisabled();
+        expect(rendered.getByTestId("breadcrumb")).toHaveTextContent("dataViews.new");
+        expect(rendered.getByTestId("simple-editor")).toBeInTheDocument();
+    });
 
-    await user.click(
-      rendered.getByRole("button", { name: /add_all_select_fields/i })
-    );
+    it("shows Loading while fetching an existing dataview", async () => {
+        useParams.mockReturnValue({ id: 1 });
+        mockUseDataViewFetch.mockReturnValue({ dataView: null, loading: true, error: undefined });
+        const rendered = render(<DataViewEditor />);
 
-    await waitFor(() => {
-      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled();
+        expect(rendered.getByTestId("loading")).toBeInTheDocument();
     });
 
-    expect(rendered.container).toMatchSnapshot();
+    it("renders nothing when fetch returns error", async () => {
+        useParams.mockReturnValue({ id: 1 });
+        mockUseDataViewFetch.mockReturnValue({ dataView: null, loading: false, error: { foo: "bar" } });
 
-    await user.click(rendered.getByRole("button", { name: /cancel/i }));
-    await user.click(
-      rendered.getByRole("button", { name: /modal-negative-action/i })
-    );
-    await act(async () => {
-      await user.click(rendered.getByRole("button", { name: /save/i }));
+        const rendered = render(<DataViewEditor />);
+        await waitForLoad(rendered);
+
+        expect(rendered.queryByTestId("breadcrumb")).toBeNull();
+        expect(rendered.queryByTestId("simple-editor")).toBeNull();
+        expect(rendered.queryByTestId("advanced-editor")).toBeNull();
     });
 
-    await waitForLoad(rendered);
-    expect(onSubmit).toHaveBeenCalledWith({
-      description: "",
-      source_id: 10,
-      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",
-                },
-                source_id: 10,
-              },
-              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,
+    it("renders breadcrumb with existing name and advanced editor when mode is advanced", async () => {
+        useParams.mockReturnValue({ id: 42 });
+        mockUseDataViewFetch.mockReturnValue({
+            dataView: {
+                id: 42,
+                name: "Existing View Name",
+                description: "desc",
+                mode: "advanced",
+                queryables: [],
+                select: { type: "select" },
             },
-          ],
-        },
-        type: "select",
-      },
+            loading: false,
+            error: undefined,
+        });
+
+        const rendered = render(<DataViewEditor />);
+        await waitForLoad(rendered);
+
+        expect(rendered.getByTestId("breadcrumb")).toHaveTextContent("Existing View Name");
+        expect(rendered.getByTestId("advanced-editor")).toBeInTheDocument();
+        expect(rendered.queryByTestId("simple-editor")).toBeNull();
     });
-  });
 });