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. <[email protected]>
PROCEED-Labs · Nov 18, 2024 · 6dfcba6 · 6dfcba6
1 parent ec7150e
commit 6dfcba6
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 13 deletions.
diff --git 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<ProcessManagementListProps> = ({
       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
@@ -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}`);
   });
 });