feat: add test, increase pagination limit

Author: astandrik

src/store/reducers/operations.ts

@@ -8,7 +8,7 @@ import type {
 
 import {api} from './api';
 
-const DEFAULT_PAGE_SIZE = 10;
+const DEFAULT_PAGE_SIZE = 20;
 
 export const operationsApi = api.injectEndpoints({
     endpoints: (build) => ({

tests/suites/tenant/diagnostics/tabs/OperationsModel.ts

@@ -142,4 +142,56 @@ export class OperationsTable extends BaseModel {
     async getAccessDeniedTitle(): Promise<string> {
         return await this.accessDeniedTitle.innerText();
     }
+
+    async getOperationsCount(): Promise<number> {
+        // The EntitiesCount component renders a Label with the count
+        const countLabel = await this.page
+            .locator('.ydb-entities-count .g-label__content')
+            .textContent();
+        if (!countLabel) {
+            return 0;
+        }
+        const match = countLabel.match(/(\d+)/);
+        return match ? parseInt(match[1], 10) : 0;
+    }
+
+    async waitForOperationsCount(expectedCount: number, timeout = 5000): Promise<void> {
+        await this.page.waitForFunction(
+            (expected) => {
+                const countElement = document.querySelector(
+                    '.ydb-entities-count .g-label__content',
+                );
+                if (!countElement) {
+                    return false;
+                }
+                const text = countElement.textContent || '';
+                const match = text.match(/(\d+)/);
+                const currentCount = match ? parseInt(match[1], 10) : 0;
+                return currentCount === expected;
+            },
+            expectedCount,
+            {timeout},
+        );
+    }
+
+    async waitForOperationsCountToChange(previousCount: number, timeout = 5000): Promise<number> {
+        await this.page.waitForFunction(
+            (prev) => {
+                const countElement = document.querySelector(
+                    '.ydb-entities-count .g-label__content',
+                );
+                if (!countElement) {
+                    return false;
+                }
+                const text = countElement.textContent || '';
+                const match = text.match(/(\d+)/);
+                const currentCount = match ? parseInt(match[1], 10) : 0;
+                return currentCount !== prev;
+            },
+            previousCount,
+            {timeout},
+        );
+        // Now get the actual new count
+        return await this.getOperationsCount();
+    }
 }

tests/suites/tenant/diagnostics/tabs/operations.test.ts

@@ -12,8 +12,8 @@ import {
 
 test.describe('Operations Tab - Infinite Query', () => {
     test('loads initial page of operations on tab click', async ({page}) => {
-        // Setup mocks with 30 operations (3 pages of 10)
-        await setupOperationsMock(page, {totalOperations: 30});
+        // Setup mocks with 80 operations (4 pages of 20)
+        await setupOperationsMock(page, {totalOperations: 80});
 
         const pageQueryParams = {
             schema: tenantName,
@@ -31,10 +31,13 @@ test.describe('Operations Tab - Infinite Query', () => {
         await diagnostics.operations.waitForTableVisible();
         await diagnostics.operations.waitForDataLoad();
 
-        // Verify initial page loaded (should have some rows)
-        const rowCount = await diagnostics.operations.getRowCount();
-        expect(rowCount).toBeGreaterThan(0);
-        expect(rowCount).toBeLessThanOrEqual(20); // Reasonable page size
+        // Wait a bit for the counter to stabilize after initial load
+        await page.waitForTimeout(1000);
+
+        // Verify initial page loaded (should show count in badge)
+        const operationsCount = await diagnostics.operations.getOperationsCount();
+        expect(operationsCount).toBeGreaterThan(0);
+        expect(operationsCount).toBeLessThanOrEqual(20); // Should have up to DEFAULT_PAGE_SIZE operations loaded initially
 
         // Verify first row data structure
         const firstRowData = await diagnostics.operations.getRowData(0);
@@ -53,8 +56,8 @@ test.describe('Operations Tab - Infinite Query', () => {
     });
 
     test('loads more operations on scroll', async ({page}) => {
-        // Setup mocks with 30 operations (3 pages of 10)
-        await setupOperationsMock(page, {totalOperations: 30});
+        // Setup mocks with 80 operations (4 pages of 20)
+        await setupOperationsMock(page, {totalOperations: 80});
 
         const pageQueryParams = {
             schema: tenantName,
@@ -72,26 +75,32 @@ test.describe('Operations Tab - Infinite Query', () => {
         await diagnostics.operations.waitForTableVisible();
         await diagnostics.operations.waitForDataLoad();
 
-        // Get initial row count
-        const initialRowCount = await diagnostics.operations.getRowCount();
-        expect(initialRowCount).toBeGreaterThan(0);
+        // Get initial operations count
+        const initialOperationsCount = await diagnostics.operations.getOperationsCount();
+        expect(initialOperationsCount).toBeGreaterThan(0);
 
         // Scroll to bottom
         await diagnostics.operations.scrollToBottom();
 
-        // Wait a bit for potential loading
-        await page.waitForTimeout(2000);
-
-        // Get final row count
-        const finalRowCount = await diagnostics.operations.getRowCount();
+        // Wait for operations count to potentially change
+        let finalOperationsCount: number;
+        try {
+            finalOperationsCount = await diagnostics.operations.waitForOperationsCountToChange(
+                initialOperationsCount,
+                3000,
+            );
+        } catch (_e) {
+            // If timeout, the count didn't change
+            finalOperationsCount = await diagnostics.operations.getOperationsCount();
+        }
 
-        // Check if more rows were loaded
-        if (finalRowCount > initialRowCount) {
-            // Infinite scroll worked - more rows were loaded
-            expect(finalRowCount).toBeGreaterThan(initialRowCount);
+        // Check if more operations were loaded
+        if (finalOperationsCount > initialOperationsCount) {
+            // Infinite scroll worked - more operations were loaded
+            expect(finalOperationsCount).toBeGreaterThan(initialOperationsCount);
         } else {
-            // No more data to load - row count should stay the same
-            expect(finalRowCount).toBe(initialRowCount);
+            // No more data to load - operations count should stay the same
+            expect(finalOperationsCount).toBe(initialOperationsCount);
         }
     });
 
@@ -150,4 +159,76 @@ test.describe('Operations Tab - Infinite Query', () => {
         const accessDeniedTitle = await diagnostics.operations.getAccessDeniedTitle();
         expect(accessDeniedTitle).toBe('Access denied');
     });
+
+    test('loads all operations when scrolling to the bottom multiple times', async ({page}) => {
+        // Setup mocks with 80 operations (4 pages of 20)
+        await setupOperationsMock(page, {totalOperations: 80});
+
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+        };
+
+        const tenantPageInstance = new TenantPage(page);
+        await tenantPageInstance.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+        await diagnostics.clickTab(DiagnosticsTab.Operations);
+
+        // Wait for initial data
+        await diagnostics.operations.waitForTableVisible();
+        await diagnostics.operations.waitForDataLoad();
+
+        // Wait a bit for the counter to stabilize after initial load
+        await page.waitForTimeout(2000);
+
+        // Get initial operations count (should be around 20)
+        const initialOperationsCount = await diagnostics.operations.getOperationsCount();
+        expect(initialOperationsCount).toBeGreaterThan(0);
+        expect(initialOperationsCount).toBeLessThanOrEqual(20);
+
+        // Keep scrolling until all operations are loaded
+        let previousOperationsCount = initialOperationsCount;
+        let currentOperationsCount = initialOperationsCount;
+        const maxScrollAttempts = 10; // Safety limit to prevent infinite loop
+        let scrollAttempts = 0;
+
+        while (currentOperationsCount < 80 && scrollAttempts < maxScrollAttempts) {
+            // Scroll to bottom
+            await diagnostics.operations.scrollToBottom();
+
+            // Wait for potential loading
+            await page.waitForTimeout(1000);
+
+            // Check if loading more is visible and wait for it to complete
+            const isLoadingVisible = await diagnostics.operations.isLoadingMoreVisible();
+            if (isLoadingVisible) {
+                await diagnostics.operations.waitForLoadingMoreToDisappear();
+            }
+
+            // Wait for operations count to change or timeout
+            try {
+                currentOperationsCount =
+                    await diagnostics.operations.waitForOperationsCountToChange(
+                        previousOperationsCount,
+                        3000,
+                    );
+            } catch (_e) {
+                // If timeout, the count didn't change - we might have reached the end
+                currentOperationsCount = await diagnostics.operations.getOperationsCount();
+            }
+
+            previousOperationsCount = currentOperationsCount;
+            scrollAttempts++;
+        }
+
+        // Verify all 80 operations were loaded
+        expect(currentOperationsCount).toBe(80);
+
+        const rowCount = await diagnostics.operations.getRowCount();
+        // Verify the last operation has the expected ID pattern
+        const lastRowData = await diagnostics.operations.getRowData(rowCount - 1);
+        expect(lastRowData['Operation ID']).toContain('ydb://');
+    });
 });

tests/suites/tenant/diagnostics/tabs/operationsMocks.ts

@@ -123,7 +123,7 @@ export const setupOperationsMock = async (page: Page, options?: OperationMockOpt
         const url = new URL(route.request().url());
         const params = Object.fromEntries(url.searchParams);
 
-        const requestedPageSize = parseInt(params.page_size || '10', 10);
+        const requestedPageSize = parseInt(params.page_size || '20', 10);
         const pageToken = params.page_token;
         const kind = params.kind || 'buildindex';