⚡️(app-desk) add infinite scrool to teams list

If we have a big list of teams, we need to add infinite
scroll to avoid loading all the teams at once.

src/frontend/apps/e2e/__tests__/app-desk/teams.spec.ts

@@ -1,5 +1,7 @@
 import { expect, test } from '@playwright/test';
 
+import { waitForElementCount } from '../helpers';
+
 import { keyCloakSignIn } from './common';
 
 test.beforeEach(async ({ page }) => {
@@ -7,8 +9,9 @@ test.beforeEach(async ({ page }) => {
   await keyCloakSignIn(page);
 });
 
+test.describe.configure({ mode: 'serial' });
 test.describe('Teams', () => {
-  test('checks all the elements are visible', async ({ page }) => {
+  test('001 - checks all the elements are visible', async ({ page }) => {
     const panel = page.getByLabel('Teams panel').first();
 
     await expect(panel.getByText('Recents')).toBeVisible();
@@ -32,14 +35,20 @@ test.describe('Teams', () => {
     ).toBeVisible();
   });
 
-  test('check sort button', async ({ page }) => {
+  test('002 - check sort button', async ({ page, browserName }) => {
     const panel = page.getByLabel('Teams panel').first();
 
+    await page.getByRole('button', { name: 'Add a team' }).click();
+
+    const randomTeams = Array.from({ length: 3 }, () => {
+      return `team-sort-${browserName}-${Math.floor(Math.random() * 1000)}`;
+    });
+
     for (let i = 0; i < 3; i++) {
-      await page.getByText('Team name').fill(`team-sort${i}`);
+      await page.getByText('Team name').fill(`${randomTeams[i]}-${i}`);
       await page.getByRole('button', { name: 'Create a team' }).click();
       await expect(
-        panel.locator('li').getByText(`team-sort${i}`),
+        panel.locator('li').nth(0).getByText(`${randomTeams[i]}-${i}`),
       ).toBeVisible();
     }
 
@@ -51,11 +60,32 @@ test.describe('Teams', () => {
 
     for (let i = 0; i < 3; i++) {
       await expect(
-        panel
-          .locator('li')
-          .nth(i)
-          .getByText(`team-sort${i + 1}`),
+        panel.locator('li').nth(i).getByText(`${randomTeams[i]}-${i}`),
       ).toBeVisible();
     }
   });
+
+  test('003 - check the infinite scrool', async ({ page, browserName }) => {
+    test.setTimeout(90000);
+    const panel = page.getByLabel('Teams panel').first();
+
+    await page.getByRole('button', { name: 'Add a team' }).click();
+
+    const randomTeams = Array.from({ length: 40 }, () => {
+      return `team-infinite-${browserName}-${Math.floor(Math.random() * 10000)}`;
+    });
+    for (let i = 0; i < 40; i++) {
+      await page.getByText('Team name').fill(`${randomTeams[i]}-${i}`);
+      await page.getByRole('button', { name: 'Create Team' }).click();
+      await expect(
+        panel.locator('li').getByText(`${randomTeams[i]}-${i}`),
+      ).toBeVisible();
+    }
+
+    await expect(panel.locator('li')).toHaveCount(20);
+    await panel.getByText(`${randomTeams[24]}-${24}`).click();
+
+    await waitForElementCount(panel.locator('li'), 21, 10000);
+    expect(await panel.locator('li').count()).toBeGreaterThan(20);
+  });
 });

src/frontend/apps/e2e/__tests__/helpers.ts

@@ -0,0 +1,21 @@
+import { Locator } from '@playwright/test';
+
+export async function waitForElementCount(
+  locator: Locator,
+  count: number,
+  timeout: number,
+) {
+  let elapsedTime = 0;
+  const interval = 200; // Check every 200 ms
+  while (elapsedTime < timeout) {
+    const currentCount = await locator.count();
+    if (currentCount >= count) {
+      return true;
+    }
+    await locator.page().waitForTimeout(interval); // Wait for the interval before checking again
+    elapsedTime += interval;
+  }
+  throw new Error(
+    `Timeout after ${timeout}ms waiting for element count to be at least ${count}`,
+  );
+}