@truedat/qx 7.13.6 → 7.13.8

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

@@ -1,6 +1,6 @@
 import { render } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
-import DataViewSelect from "../DataViewSelect";
+import DataViewSelect from "../advancedForm/DataViewSelect";
 
 const renderOpts = {
   messages: {

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

@@ -1,69 +1,142 @@
+import React from "react";
 import { render, waitForLoad } from "@truedat/test/render";
-import { REFERENCE_DATASETS_HEADERS_QUERY } from "@truedat/dd/api/queries";
+import userEvent from "@testing-library/user-event";
 import DataViews from "../DataViews";
+import { useDataViews, useDataViewDelete } from "@truedat/qx/hooks/useDataViews";
 
-jest.mock("@truedat/qx/hooks/useFunctions", () => {
-  const originalModule = jest.requireActual("@truedat/qx/hooks/useFunctions");
+const mockFormatMessage = jest.fn(({ id }) => id);
 
-  return {
-    __esModule: true,
-    ...originalModule,
-    useFunctions: jest.fn(() => ({})),
-  };
-});
+jest.mock("react-intl", () => ({
+  ...jest.requireActual("react-intl"),
+  useIntl: () => ({
+    formatMessage: mockFormatMessage,
+  }),
+}));
+
+jest.mock("@truedat/core/routes", () => ({
+  DATA_VIEW: "/dataviews/:id",
+  DATA_VIEWS_NEW: "/dataviews/new",
+}));
+
+jest.mock("@truedat/qx/hooks/useDataViews", () => ({
+  useDataViews: jest.fn(),
+  useDataViewDelete: jest.fn(),
+}));
+
+
+describe("<DataViews />", () => {
+  beforeEach(() => {
+    useDataViewDelete.mockReturnValue({
+      trigger: jest.fn().mockResolvedValue({}),
+      isMutating: false,
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders empty state when no data views", async () => {
+    useDataViews.mockReturnValue({
+      data: { data: [] },
+      loading: false,
+    });
 
-jest.mock("@truedat/qx/hooks/useDataViews", () => {
-  const originalModule = jest.requireActual("@truedat/qx/hooks/useDataViews");
+    const rendered = render(<DataViews />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByRole("heading", { name: /dataViews.header/i })).toBeInTheDocument();
+    expect(rendered.getByText(/dataViews.empty_list/i)).toBeInTheDocument();
+
+    expect(rendered.getByRole("button", { name: /dataViews.action.new/i })).toBeInTheDocument();
+    expect(rendered.container).toMatchSnapshot();
+  });
 
-  return {
-    __esModule: true,
-    ...originalModule,
-    useDataViews: jest.fn(() => ({
+  it("renders cards and the mode label, and the Open link points to the correct route", async () => {
+    useDataViews.mockReturnValue({
       data: {
         data: [
-          {
-            id: 4,
-            description: "Description",
-            name: "StructureView",
-          },
+          { id: 2, name: "Inventory", description: "Stock levels", mode: "advanced" },
+          { id: 1, name: "Users Spain", description: "Active users in Spain", mode: "guided" },
         ],
       },
       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 dataSet = {
-  id: "7",
-  name: "dataset1",
-  headers: ["campo1", "campo2"],
-};
+    const rendered = render(<DataViews />);
+    await waitForLoad(rendered);
 
-const referenceDatasetsMock = {
-  request: { query: REFERENCE_DATASETS_HEADERS_QUERY },
-  result: { data: { referenceDatasets: [dataSet], loading: false } },
-};
+    // Ordered by id asc: first card should be id=1 "Users Spain"
+    expect(rendered.getByText("Users Spain")).toBeInTheDocument();
+    expect(rendered.getByText("Inventory")).toBeInTheDocument();
 
-const renderOpts = {
-  mocks: [referenceDatasetsMock],
-};
+  
+    const guidedIcon = rendered.container.querySelector(".dataViews\\.mode\\.icon\\.guided.icon");
+    const advancedIcon = rendered.container.querySelector(".dataViews\\.mode\\.icon\\.advanced.icon");
+    expect(guidedIcon).toBeInTheDocument();
+    expect(advancedIcon).toBeInTheDocument();
 
-describe("<DataViews />", () => {
-  it("matches the latest snapshot", async () => {
-    const rendered = render(<DataViews />, renderOpts);
-    await waitForLoad(rendered);
+    const dataViewLinks = rendered.container.querySelectorAll('a[href^="/dataviews/"]');
+    expect(dataViewLinks.length).toBe(3);
+    
+    const hrefs = Array.from(dataViewLinks).map(a => a.getAttribute("href"));
+    expect(hrefs).toContain("/dataviews/1");
+    expect(hrefs).toContain("/dataviews/2");
     expect(rendered.container).toMatchSnapshot();
   });
+
+  it("filters by search input across name and description", async () => {
+    const user = userEvent.setup({ delay: null });
+    useDataViews.mockReturnValue({
+      data: {
+        data: [
+          { id: 1, name: "Revenue Report", description: "Monthly KPIs", mode: "advanced" },
+          { id: 2, name: "Users", description: "Active users in Spain", mode: "guided" },
+          { id: 3, name: "Inventory", description: "Stock and SKUs", mode: "advanced" },
+        ],
+      },
+      loading: false,
+    });
+
+    const rendered = render(<DataViews />);
+    await waitForLoad(rendered);
+
+    // All cards visible initially
+    expect(rendered.getByText("Revenue Report")).toBeInTheDocument();
+    expect(rendered.getByText("Users")).toBeInTheDocument();
+    expect(rendered.getByText("Inventory")).toBeInTheDocument();
+
+    const input = rendered.getByPlaceholderText(/search/i);
+    await user.type(input, "spain");
+
+    // Only "Users" card should remain
+    expect(rendered.queryByText("Revenue Report")).not.toBeInTheDocument();
+    expect(rendered.getByText("Users")).toBeInTheDocument();
+    expect(rendered.queryByText("Inventory")).not.toBeInTheDocument();
+  });
+
+  it("shows untitled message when name is missing", async () => {
+    useDataViews.mockReturnValue({
+      data: { data: [{ id: 1, name: "", description: "desc", mode: "guided" }] },
+      loading: false,
+    });
+
+    const rendered = render(<DataViews />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText("dataViews.untitled")).toBeInTheDocument();
+  });
+
+  it("has a button to create new data view linking to the create route", () => {
+    useDataViews.mockReturnValue({
+      data: { data: [] },
+      loading: false,
+    });
+
+    const rendered = render(<DataViews />);
+
+    const newBtn = rendered.getByRole("button", { name: /dataViews.action.new/i });
+    expect(newBtn).toBeInTheDocument();
+    expect(newBtn.getAttribute("href")).toBe("/dataviews/new");
+  });
 });

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

@@ -1,6 +1,6 @@
 import { render } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
-import Queryable from "../Queryable";
+import Queryable from "../advancedForm/Queryable";
 
 const renderOpts = {
   messages: {

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

@@ -2,7 +2,7 @@ import userEvent from "@testing-library/user-event";
 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";
+import Queryables from "../advancedForm/Queryables";
 
 describe("<Queryables />", () => {
   it("matches the latest snapshot with from queryable", async () => {

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

@@ -0,0 +1,164 @@
+import React from "react";
+import { render, waitForLoad } from "@truedat/test/render";
+import { screen } from "@testing-library/react";
+import SimpleDataViewEditor from "../simpleForm/SimpleDataViewEditor";
+
+// Keep intl messages simple (just echo the id)
+const mockFormatMessage = jest.fn(({ id }) => id);
+jest.mock("react-intl", () => ({
+    ...jest.requireActual("react-intl"),
+    useIntl: () => ({ formatMessage: mockFormatMessage }),
+}));
+
+// We DO NOT mock child forms; they will render as-is.
+// We also keep QxContext and action buttons unmocked.
+
+// Helpers
+const baseSelected = {
+    id: undefined,
+    name: "",
+    description: "",
+    mode: "guided",
+    queryables: [{ alias: "a", type: "from", properties: { resource: 1 } }],
+    select: { type: "select" },
+};
+const baseContext = {
+    dataViews: [],
+    referenceDatasets: [],
+    functions: [],
+    currentDataViewId: undefined,
+};
+
+describe("<SimpleDataViewEditor /> (own rendering only, no child mocks)", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("returns null when selectedDataView is not provided", async () => {
+        const rendered = render(
+            <SimpleDataViewEditor
+                selectedDataView={undefined}
+                context={baseContext}
+                onSubmit={jest.fn()}
+                onCancel={jest.fn()}
+                isSubmitting={false}
+                mode="guided"
+            />
+        );
+        await waitForLoad(rendered);
+        expect(rendered.container).toBeEmptyDOMElement();
+    });
+
+    it("renders step headers and the forward action on initial step", async () => {
+        const rendered = render(
+            <SimpleDataViewEditor
+                selectedDataView={{ ...baseSelected, source_id: 10 }}
+                context={baseContext}
+                onSubmit={jest.fn()}
+                onCancel={jest.fn()}
+                isSubmitting={false}
+                mode="guided"
+            />
+        );
+        await waitForLoad(rendered);
+
+        // Step titles (they come from this component via formatMessage)
+        expect(
+            rendered.getByText("dataViews.form.step.information.title")
+        ).toBeInTheDocument();
+        expect(
+            rendered.getByText("dataViews.form.step.dataset.title")
+        ).toBeInTheDocument();
+        expect(
+            rendered.getByText("dataViews.form.step.aggregations.title")
+        ).toBeInTheDocument();
+        expect(
+            rendered.getByText("dataViews.form.step.select.title")
+        ).toBeInTheDocument();
+
+        // Initial actions: Cancel exists; Forward exists; Back should not (step 0)
+        expect(
+            screen.getByRole("button", { name: /dataViews\.action\.forward/i })
+        ).toBeInTheDocument();
+        expect(
+            screen.queryByRole("button", { name: /dataViews\.action\.back/i })
+        ).not.toBeInTheDocument();
+
+        // Save button only appears on last step → not present yet
+        expect(
+            screen.queryByRole("button", { name: /actions\.save/i })
+        ).not.toBeInTheDocument();
+    });
+
+
+    it("disables the forward action (and keeps back hidden) when isSubmitting is true on step 0", async () => {
+        const rendered = render(
+            <SimpleDataViewEditor
+                selectedDataView={{ ...baseSelected, source_id: 10 }}
+                context={baseContext}
+                onSubmit={jest.fn()}
+                onCancel={jest.fn()}
+                isSubmitting={true}
+                mode="guided"
+            />
+        );
+        await waitForLoad(rendered);
+
+        const forward = screen.getByRole("button", {
+            name: /dataViews\.action\.forward/i,
+        });
+        expect(forward).toBeDisabled();
+
+        expect(
+            screen.queryByRole("button", { name: /dataViews\.action\.back/i })
+        ).not.toBeInTheDocument();
+    });
+
+    it("renders Cancel and Forward buttons consistently on initial render", async () => {
+        const rendered = render(
+            <SimpleDataViewEditor
+                selectedDataView={{ ...baseSelected, source_id: 123 }}
+                context={baseContext}
+                onSubmit={jest.fn()}
+                onCancel={jest.fn()}
+                isSubmitting={false}
+                mode="guided"
+            />
+        );
+        await waitForLoad(rendered);
+
+        expect(rendered.getByText(/cancel/i)).toBeInTheDocument();
+
+        const forward = rendered.getByRole("button", {
+            name: /dataViews\.action\.forward/i,
+        });
+        expect(forward).toBeInTheDocument();
+    });
+
+    it("renders step descriptions (from this component) regardless of child internals", async () => {
+        const rendered = render(
+            <SimpleDataViewEditor
+                selectedDataView={{ ...baseSelected, source_id: 10 }}
+                context={baseContext}
+                onSubmit={jest.fn()}
+                onCancel={jest.fn()}
+                isSubmitting={false}
+                mode="guided"
+            />
+        );
+        await waitForLoad(rendered);
+
+        expect(
+            rendered.getByText("dataViews.form.step.information.description")
+        ).toBeInTheDocument();
+        expect(
+            rendered.getByText("dataViews.form.step.dataset.description")
+        ).toBeInTheDocument();
+        expect(
+            rendered.getByText("dataViews.form.step.aggregations.description")
+        ).toBeInTheDocument();
+        expect(
+            rendered.getByText("dataViews.form.step.select.description")
+        ).toBeInTheDocument();
+    });
+});