diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue index 4123115140..14abfac66f 100644 --- a/apps/desktop/src/components/grid/DataGrid.vue +++ b/apps/desktop/src/components/grid/DataGrid.vue @@ -8008,8 +8008,8 @@ function onCanvasScroll(event: Event) { } if (scrollTopChanged || viewportHeightChanged) { updateGridVerticalScrollbar(scroller); - maybeCheckInfiniteScroll(scroller); } + maybeCheckInfiniteScroll(scroller); if (viewportWidthChanged || viewportHeightChanged) { const gutter = scrollbarGutterWidth(scroller); if (gridScrollbarGutter.value !== gutter) gridScrollbarGutter.value = gutter; diff --git a/apps/desktop/src/components/grid/__tests__/DataGridPaginationShortcuts.spec.ts b/apps/desktop/src/components/grid/__tests__/DataGridPaginationShortcuts.spec.ts index 4c471c3fcc..7c5beb7f58 100644 --- a/apps/desktop/src/components/grid/__tests__/DataGridPaginationShortcuts.spec.ts +++ b/apps/desktop/src/components/grid/__tests__/DataGridPaginationShortcuts.spec.ts @@ -317,6 +317,60 @@ describe("DataGrid pagination shortcuts", () => { }); }); +describe("DataGrid infinite scroll", () => { + it("requests the next Dameng table-data segment after dragging the canvas scrollbar to the bottom", async () => { + const { host, paginate, gridState } = mountGrid({ infiniteScroll: true, pageOffset: 0, totalRowCount: 300 }); + gridState.value = { + databaseType: "dameng", + context: "table-data", + pageLimit: 100, + pageOffset: 0, + totalRowCount: 300, + result: { + columns: ["id"], + rows: Array.from({ length: 100 }, (_, index) => [index + 1]), + affected_rows: 0, + execution_time_ms: 0, + }, + }; + await settle(); + await new Promise((resolve) => requestAnimationFrame(() => resolve())); + + const scroller = host.querySelector(".canvas-grid-scroller"); + expect(scroller).not.toBeNull(); + Object.defineProperties(scroller!, { + clientHeight: { configurable: true, value: 300 }, + scrollHeight: { configurable: true, value: 2600 }, + scrollTop: { configurable: true, writable: true, value: 0 }, + }); + scroller!.dispatchEvent(new Event("scroll")); + await settle(); + + const scrollbar = host.querySelector(".data-grid-vertical-scrollbar"); + expect(scrollbar).not.toBeNull(); + vi.spyOn(scrollbar!, "getBoundingClientRect").mockReturnValue({ + x: 0, + y: 0, + width: 10, + height: 300, + top: 0, + right: 10, + bottom: 300, + left: 0, + toJSON: () => ({}), + }); + scrollbar!.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, cancelable: true, clientY: 300 })); + await new Promise((resolve) => requestAnimationFrame(() => resolve())); + expect(scroller!.scrollTop).toBe(2300); + + scroller!.dispatchEvent(new Event("scroll")); + await new Promise((resolve) => requestAnimationFrame(() => resolve())); + + await vi.waitFor(() => expect(paginate).toHaveBeenCalledOnce()); + expect(paginate.mock.calls[0]?.slice(0, 2)).toEqual([100, 100]); + }); +}); + describe("DataGrid custom page size persistence", () => { it("applying a custom page size is temporary and does not write editor settings", async () => { const { host, paginate, settingsStore } = mountGrid();