From 6dfcba6513b18d0e8c31274d934afd28e749faaf Mon Sep 17 00:00:00 2001 From: Maxi <76120220+MaxiLein@users.noreply.github.com> Date: Mon, 18 Nov 2024 12:50:05 +0100 Subject: [PATCH] Process-list scroll and pagination (#397) * Process-list scroll and pagination * fix tests * adapt multi page tests * ran prettier --------- Co-authored-by: Felipe Trost H. --- .../components/process-list.tsx | 5 ++- tests/ms2/processes/process-list.spec.ts | 45 ++++++++++++++----- 2 files changed, 37 insertions(+), 13 deletions(-) diff --git a/src/management-system-v2/components/process-list.tsx b/src/management-system-v2/components/process-list.tsx index 3132ba69d..548c6673f 100644 --- a/src/management-system-v2/components/process-list.tsx +++ b/src/management-system-v2/components/process-list.tsx @@ -409,7 +409,10 @@ const ProcessManagementList: FC = ({ onExportProcess={onExportProcess} processActions={processActions} tableProps={{ - scroll: { x: metaPanelisOpened ? '71vw' : '85.5vw' }, + scroll: { + y: `${window?.innerHeight - 32 /* Footer */ - 64 /* Header */ - 82 /* Table-Search etc */ - 60 /* Table-head */ - 60 /* Table-Footer / Pagination */}px`, + }, + pagination: { position: ['bottomCenter'], pageSize: 20 }, onRow: (item) => ({ // onDoubleClick: () => // router.push( diff --git a/tests/ms2/processes/process-list.spec.ts b/tests/ms2/processes/process-list.spec.ts index 8d76d5938..6a08c9cec 100644 --- a/tests/ms2/processes/process-list.spec.ts +++ b/tests/ms2/processes/process-list.spec.ts @@ -1,6 +1,7 @@ import { test, expect } from './processes.fixtures'; import { openModal, closeModal, waitForHydration } from '../testUtils'; import { asyncMap } from 'proceed-management-system/src/shared-frontend-backend/helpers/javascriptHelpers'; +import { Page } from '@playwright/test'; test('create a new process and remove it again', async ({ processListPage }) => { const { page } = processListPage; @@ -507,10 +508,11 @@ test('sorting process list columns', async ({ processListPage }) => { } async function getColumnValues(col: number) { - const tableRows = await page.locator('tbody tr.ant-table-row').all(); + const tableRows = await page.locator('tbody>tr:not(.ant-table-measure-row)').all(); const rowNames: { text: string; ariaLabel: string }[] = []; for (const row of tableRows) { const icon = row.locator('td').nth(2).locator('span').first(); + const ariaLabel = await icon.evaluate((el) => el.getAttribute('aria-label')); const text = await row.locator('td').nth(col).textContent(); @@ -697,6 +699,7 @@ test.describe('shortcuts in process-list', () => { const { page } = processListPage; /* Create 3 Processes */ const processIDs = []; + for (let i = 0; i < 3; i++) { processIDs.push( await processListPage.createProcess({ @@ -811,7 +814,9 @@ test.describe('shortcuts in process-list', () => { /* Check if Process has been added */ await expect( - page.locator('tbody>tr.ant-table-row'), + page.locator( + 'tbody>tr:not(.ant-table-measure-row)', + ) /* Ant-Design added a measure row -> ignore */, 'Could not find copied process in Process-List', ).toHaveCount(2); /* Check with name */ @@ -842,7 +847,9 @@ test.describe('shortcuts in process-list', () => { } /* Check if Process has been added */ - await expect(page.locator('tbody>tr.ant-table-row')).toHaveCount(3); + await expect(page.locator('tbody>tr:not(.ant-table-measure-row)')).toHaveCount( + 3, + ); /* Ignore measurement row */ /* Check with name */ await expect(page.locator('tbody')).toContainText(processName + ' - Meta'); }); @@ -900,7 +907,9 @@ test.describe('shortcuts in process-list', () => { await page.waitForTimeout(1_000); /* Ensure that animation is over */ /* Check if Processes have been added */ - await expect(page.locator('tbody>tr.ant-table-row')).toHaveCount(4); + await expect(page.locator('tbody>tr:not(.ant-table-measure-row)')).toHaveCount( + 4, + ); /* Ignore measurement row */ /* Check with names */ for (const name of names) { @@ -1398,7 +1407,16 @@ test.describe('Favourites', () => { // await console.log('Name Column Width:', await getColumnwidth('Name')); // }); test.describe('Selecting Processes', () => { + test.slow(); // triples test time (see https://playwright.dev/docs/test-timeouts) + + /* When copying many processes, not all of them will be added to processListPage.definitionsIDs, hence, we track the number of added processes */ + let numberOfProcesses = 0; + const getNumberOfSelectedProcesses = async (page: Page) => { + return Number.parseInt(await page.getByRole('note').textContent()); + }; + test.beforeEach(async ({ processListPage }) => { + numberOfProcesses = 0; const { page } = processListPage; /* TODO: The number of processes necessary to cause second page depends on viewport height */ /* Create 10 processes + XYZ Process ( =11) */ @@ -1407,15 +1425,19 @@ test.describe('Selecting Processes', () => { processName: `Process ${i}`, returnToProcessList: true, }); + numberOfProcesses++; } - await page.getByRole('main').press('ControlOrMeta+a'); - /* Copy + Paste until multiple pages */ while ((await page.locator('.ant-pagination-next').getAttribute('aria-disabled')) === 'true') { + await page.getByRole('main').press('ControlOrMeta+a'); + const adding = await getNumberOfSelectedProcesses(page); + await page.getByRole('main').press('ControlOrMeta+c'); const modal = await openModal(page, () => page.getByRole('main').press('ControlOrMeta+v')); await closeModal(modal, () => page.getByRole('main').press('ControlOrMeta+Enter')); + + numberOfProcesses += adding; } /* Add Copys to processListPage.processDefinitionIds */ @@ -1444,18 +1466,18 @@ test.describe('Selecting Processes', () => { processName: 'XYZ', returnToProcessList: true, }); + numberOfProcesses++; }); - function getNumberOfVisibleRows(page) { - return page.locator('tbody tr.ant-table-row').count(); /* There is also a measurement row */ - } + const getNumberOfVisibleRows = async (page: Page) => { + return await page.locator('tbody>tr:not(.ant-table-measure-row)').count(); // Ignore measurement row + }; test('Selecting Processes with click', async ({ processListPage }) => { const { page } = processListPage; const inputSearch = await page.locator('.ant-input-affix-wrapper'); const processIDs = processListPage.getDefinitionIds(); - /* ____________________________________ */ /* Selection persists after page change */ /* Select the first process*/ @@ -1532,7 +1554,6 @@ test.describe('Selecting Processes', () => { processListPage, }) => { const { page } = processListPage; - const processIDs = processListPage.getDefinitionIds(); /* Select all with ctrl + a */ await page.getByRole('main').press('ControlOrMeta+a'); @@ -1543,6 +1564,6 @@ test.describe('Selecting Processes', () => { ); /* Check if displayed note show correct number */ - await expect(await page.getByRole('note')).toContainText(`${processIDs.length}`); + await expect(await page.getByRole('note')).toContainText(`${numberOfProcesses}`); }); });