@truedat/qx 7.13.8 → 7.14.0

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

@@ -6,189 +6,224 @@ import DataViewEditor, { DataViewDetailEditor } from "../DataViewEditor";
 
 const mockFormatMessage = jest.fn(({ id }) => id);
 jest.mock("react-intl", () => ({
-    ...jest.requireActual("react-intl"),
-    useIntl: () => ({ formatMessage: mockFormatMessage }),
+  ...jest.requireActual("react-intl"),
+  useIntl: () => ({ formatMessage: mockFormatMessage }),
 }));
 
 jest.mock("@truedat/core/routes", () => ({
-    DATA_VIEWS: "/dataviews",
+  DATA_VIEWS: "/dataviews",
 }));
 
 jest.mock("react-router", () => ({
-    ...jest.requireActual("react-router"),
-    useParams: jest.fn(),
+  ...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" },
-            ],
-        },
-        loading: false,
-    })),
+  ...jest.requireActual("@apollo/client"),
+  useQuery: jest.fn(() => ({
+    data: {
+      referenceDatasets: [
+        { id: "10", name: "Álpha" },
+        { id: "2", name: "Beta" },
+      ],
+    },
+    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 }),
+  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 }));
+const mockUseFunctions = jest.fn(() => ({
+  data: { data: [] },
+  loading: false,
+}));
 
 jest.mock("@truedat/qx/hooks/useFunctions", () => ({
-    useFunctions: () => mockUseFunctions(),
+  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>
+  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" />
+  <div data-testid="advanced-editor" />
 ));
 jest.mock("../simpleForm/SimpleDataViewEditor", () => () => (
-    <div data-testid="simple-editor" />
+  <div data-testid="simple-editor" />
 ));
 jest.mock("../BreadCrumb", () => ({ text }) => (
-    <div data-testid="breadcrumb">{text}</div>
+  <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();
+  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();
 });
 
 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();
+  it("renders Simple editor by default (guided)", async () => {
+    const rendered = render(<DataViewDetailEditor dataView={undefined} />);
+    await waitForLoad(rendered);
 
-        const guidedBtn = rendered.getByRole("button", { name: /actions.mode.guided/i });
-        const advancedBtn = rendered.getByRole("button", { name: /actions.mode.advanced/i });
+    expect(rendered.getByTestId("simple-editor")).toBeInTheDocument();
+    expect(rendered.queryByTestId("advanced-editor")).not.toBeInTheDocument();
+    expect(rendered.container.querySelector(".ui.segment.loading")).toBeNull();
 
-        expect(guidedBtn).toBeDisabled();
-        expect(advancedBtn).not.toBeDisabled();
+    const guidedBtn = rendered.getByRole("button", {
+      name: /actions.mode.guided/i,
     });
-
-    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();
+    const advancedBtn = rendered.getByRole("button", {
+      name: /actions.mode.advanced/i,
     });
 
-    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();
-    });
+    expect(guidedBtn).toBeDisabled();
+    expect(advancedBtn).not.toBeDisabled();
+  });
 
-    it("shows loading state when any dependency is loading", () => {
-        mockUseDataViews.mockReturnValue({ data: { data: [] }, loading: true });
-        const rendered = render(<DataViewDetailEditor dataView={undefined} />);
+  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);
 
-        expect(rendered.container.querySelector(".ui.segment.loading")).not.toBeNull();
+    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();
+  });
+
+  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();
+  });
+
+  it("shows loading state when any dependency is loading", () => {
+    mockUseDataViews.mockReturnValue({ data: { data: [] }, loading: true });
+    const rendered = render(<DataViewDetailEditor dataView={undefined} />);
+
+    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.getByTestId("breadcrumb")).toHaveTextContent("dataViews.new");
-        expect(rendered.getByTestId("simple-editor")).toBeInTheDocument();
+  it("renders 'new' breadcrumb and detail editor when there is no id param", async () => {
+    const rendered = render(<DataViewEditor />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("breadcrumb")).toHaveTextContent(
+      "dataViews.new"
+    );
+    expect(rendered.getByTestId("simple-editor")).toBeInTheDocument();
+  });
+
+  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 />);
 
-    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 />);
+    expect(rendered.getByTestId("loading")).toBeInTheDocument();
+  });
 
-        expect(rendered.getByTestId("loading")).toBeInTheDocument();
+  it("renders nothing when fetch returns error", async () => {
+    useParams.mockReturnValue({ id: 1 });
+    mockUseDataViewFetch.mockReturnValue({
+      dataView: null,
+      loading: false,
+      error: { foo: "bar" },
     });
 
-    it("renders nothing when fetch returns error", async () => {
-        useParams.mockReturnValue({ id: 1 });
-        mockUseDataViewFetch.mockReturnValue({ dataView: null, loading: false, error: { foo: "bar" } });
-
-        const rendered = render(<DataViewEditor />);
-        await waitForLoad(rendered);
-
-        expect(rendered.queryByTestId("breadcrumb")).toBeNull();
-        expect(rendered.queryByTestId("simple-editor")).toBeNull();
-        expect(rendered.queryByTestId("advanced-editor")).toBeNull();
+    const rendered = render(<DataViewEditor />);
+    await waitForLoad(rendered);
+
+    expect(rendered.queryByTestId("breadcrumb")).toBeNull();
+    expect(rendered.queryByTestId("simple-editor")).toBeNull();
+    expect(rendered.queryByTestId("advanced-editor")).toBeNull();
+  });
+
+  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" },
+      },
+      loading: false,
+      error: undefined,
     });
 
-    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" },
-            },
-            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();
-    });
+    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();
+  });
 });