From 177dc044e9e1fea1c3b8657a4780f7bb13584fc6 Mon Sep 17 00:00:00 2001 From: Ashish Gupta Date: Tue, 22 Jul 2025 14:04:18 +0530 Subject: [PATCH] #22480: fix the table query pagination showing incorrect pageSize (#22487) * fix the table query pagination showing incorrect pageSize * added playwright test --------- Co-authored-by: Shrushti Polekar --- .../e2e/Features/QueryEntity.spec.ts | 78 +++++++++++++++++++ .../TableQueries/TableQueries.test.tsx | 38 ++++++++- .../Database/TableQueries/TableQueries.tsx | 4 +- 3 files changed, 117 insertions(+), 3 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/QueryEntity.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/QueryEntity.spec.ts index 83587ba1c73..e6ceb559f6c 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/QueryEntity.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/QueryEntity.spec.ts @@ -281,6 +281,84 @@ test('Verify query duration', async ({ page }) => { expect(durationText).toContain('6.199 sec'); }); +test('Verify Query Pagination', async ({ page, browser }) => { + test.slow(true); + + const { apiContext, afterAction } = await createNewPage(browser); + + Array.from({ length: 26 }).forEach(async (_, index) => { + await table1.createQuery( + apiContext, + `select * from table ${table1.entity.name} ${index}` + ); + }); + + await redirectToHomePage(page); + await table1.visitEntityPageWithCustomSearchBox(page); + const queryResponse = page.waitForResponse( + '/api/v1/search/query?q=*&index=query_search_index*' + ); + await page.click(`[data-testid="table_queries"]`); + await queryResponse; + + await page.waitForSelector('[data-testid="loader"]', { + state: 'detached', + }); + + await expect(page.getByTestId('previous')).toBeDisabled(); + + const nextResponse = page.waitForResponse( + '/api/v1/search/query?q=*&index=query_search_index&from=15&size=15**' + ); + await page.click('[data-testid="next"]'); + await nextResponse; + + await page.waitForSelector('[data-testid="loader"]', { + state: 'detached', + }); + + await expect(page.getByTestId('next')).toBeDisabled(); + + const previousResponse = page.waitForResponse( + '/api/v1/search/query?q=*&index=query_search_index&from=0&size=15**' + ); + await page.click('[data-testid="previous"]'); + await previousResponse; + + await page.waitForSelector('[data-testid="loader"]', { + state: 'detached', + }); + + await expect(page.getByTestId('previous')).toBeDisabled(); + + await expect(page.getByText('15 / page')).toBeVisible(); + + // Change page size to 25 + await page.locator('.ant-pagination-options-size-changer').click(); + const pageSizeResponse = page.waitForResponse( + '/api/v1/search/query?q=*&index=query_search_index&from=0&size=25&query_filter=**' + ); + await page.getByTitle('25 / Page').click(); + await pageSizeResponse; + + await page.waitForSelector('[data-testid="loader"]', { + state: 'detached', + }); + + await expect(page.getByText('25 / page')).toBeVisible(); + + // check if the page size list is same as the page size list in the dropdown + await page.locator('.ant-pagination-options-size-changer').click(); + + // This is to check in the options only 3 sizes are visible. + // 15, 25, 50 Derived from locator which is overall and not contain to check the exact text + await expect(page.locator('.ant-pagination-options')).toHaveText( + '25 / page15255015 / page25 / page50 / page' + ); + + await afterAction(); +}); + test.afterAll(async ({ browser }) => { const { afterAction, apiContext } = await createNewPage(browser); for (const entity of entityData) { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueries.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueries.test.tsx index 83e8b600929..7313a5e6854 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueries.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueries.test.tsx @@ -14,11 +14,13 @@ import { findAllByText, findByTestId, + fireEvent, render, screen, } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; import { SearchIndex } from '../../../enums/search.enum'; +import { usePaging } from '../../../hooks/paging/usePaging'; import { MOCK_QUERIES, MOCK_QUERIES_ES_DATA, @@ -39,6 +41,16 @@ jest.mock('./TableQueryRightPanel/TableQueryRightPanel.component', () => { .fn() .mockImplementation(() =>
TableQueryRightPanel.component
); }); + +jest.mock('../../PaginationComponent/PaginationComponent', () => { + return jest.fn().mockImplementation(({ onChange }) => ( +
+ PaginationComponent + +
+ )); +}); + jest.mock('../../SearchDropdown/SearchDropdown', () => { return jest .fn() @@ -81,6 +93,21 @@ jest.mock('../../../rest/miscAPI', () => ({ .mockImplementation(() => Promise.resolve({ data: [] })), })); +jest.mock('../../../hooks/paging/usePaging', () => ({ + usePaging: jest.fn().mockReturnValue({ + currentPage: 1, + pageSize: 25, + paging: { + currentPage: 1, + pageSize: 25, + }, + showPagination: true, + handlePageChange: jest.fn(), + handlePagingChange: jest.fn(), + handlePageSizeChange: jest.fn(), + }), +})); + describe('Test TableQueries Component', () => { it('Check if TableQueries component has all child elements', async () => { render(, { @@ -132,6 +159,8 @@ describe('Test TableQueries Component', () => { }); it('If paging count is more than 15, pagination should be visible', async () => { + const mockUsePaging = usePaging as jest.Mock; + (searchQuery as jest.Mock).mockImplementationOnce(() => Promise.resolve({ hits: { total: { value: 16 }, hits: MOCK_QUERIES_ES_DATA }, @@ -140,8 +169,15 @@ describe('Test TableQueries Component', () => { render(, { wrapper: MemoryRouter, }); - const pagingComponent = await screen.findByTestId('query-pagination'); + const pagingComponent = await screen.findByText('PaginationComponent'); expect(pagingComponent).toBeInTheDocument(); + + fireEvent.click(screen.getByText('PaginationComponentButton')); + + const mockHandlePageSizeChange = + mockUsePaging.mock.results[0].value.handlePageSizeChange; + + expect(mockHandlePageSizeChange).toHaveBeenCalledWith(25); }); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueries.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueries.tsx index 42ad6e3c0d6..0da4cf6d649 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueries.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueries.tsx @@ -431,10 +431,11 @@ const TableQueries: FC = ({ } }; - const pagingHandler = (currentPage: number) => { + const pagingHandler = (currentPage: number, pageSize: number) => { fetchFilteredQueries({ pageNumber: currentPage, }); + handlePageSizeChange(pageSize); }; const handleSortFieldChange = (value: string) => { @@ -656,7 +657,6 @@ const TableQueries: FC = ({ pageSize={pageSize} total={paging.total} onChange={pagingHandler} - onShowSizeChange={handlePageSizeChange} /> )}