✅(app-desk) improve sorting teams test e2e

This tests was becoming very flaky because we create
teams in parallel with the other tests.
We use another approch, we checks the aria are
changing according to the sort, we check
as well the api request and that the response
is ok.

src/frontend/apps/desk/src/features/teams/components/Panel/PanelActions.tsx

@@ -13,6 +13,8 @@ export const PanelActions = () => {
   const { changeOrdering, ordering } = useTeamStore();
   const { colorsTokens } = useCunninghamTheme();
 
+  const isSortAsc = ordering === TeamsOrdering.BY_CREATED_ON;
+
   return (
     <Box
       $direction="row"
@@ -28,14 +30,14 @@ export const PanelActions = () => {
       `}
     >
       <BoxButton
-        aria-label={t('Sort the teams')}
+        aria-label={
+          isSortAsc
+            ? t('Sort the teams by creation date descendent')
+            : t('Sort the teams by creation date ascendent')
+        }
         onClick={changeOrdering}
         $radius="100%"
-        $background={
-          ordering === TeamsOrdering.BY_CREATED_ON
-            ? colorsTokens()['primary-200']
-            : 'transparent'
-        }
+        $background={isSortAsc ? colorsTokens()['primary-200'] : 'transparent'}
         $color={colorsTokens()['primary-600']}
       >
         <IconSort width={30} height={30} aria-label={t('Sort teams icon')} />

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

@@ -9,9 +9,8 @@ test.beforeEach(async ({ page, browserName }) => {
   await keyCloakSignIn(page, browserName);
 });
 
-test.describe.configure({ mode: 'serial' });
 test.describe('Teams Panel', () => {
-  test('001 - checks all the elements are visible', async ({ page }) => {
+  test('checks all the elements are visible', async ({ page }) => {
     const panel = page.getByLabel('Teams panel').first();
 
     await expect(panel.getByText('Recents')).toBeVisible();
@@ -29,26 +28,41 @@ test.describe('Teams Panel', () => {
     ).toBeVisible();
   });
 
-  test('002 - checks the sort button', async ({ page, browserName }) => {
+  test('checks the sort button', async ({ page }) => {
+    const responsePromiseSortDesc = page.waitForResponse(
+      (response) =>
+        response.url().includes('/teams/?page=1&ordering=-created_at') &&
+        response.status() === 200,
+    );
+
+    const responsePromiseSortAsc = page.waitForResponse(
+      (response) =>
+        response.url().includes('/teams/?page=1&ordering=created_at') &&
+        response.status() === 200,
+    );
+
     const panel = page.getByLabel('Teams panel').first();
-    const randomTeams = await createTeam(page, 'team-sort', browserName, 3);
 
     await panel
       .getByRole('button', {
-        name: 'Sort the teams',
+        name: 'Sort the teams by creation date ascendent',
       })
       .click();
 
-    await expect(panel.locator('li').getByText(randomTeams[1])).toBeVisible();
+    const responseSortAsc = await responsePromiseSortAsc;
+    expect(responseSortAsc.ok()).toBeTruthy();
 
-    const allTeams = await panel.locator('li').allTextContents();
-    const sortedTeamTexts = allTeams.filter((team) =>
-      randomTeams.some((randomTeam) => team.includes(randomTeam)),
-    );
-    expect(sortedTeamTexts).toStrictEqual(randomTeams);
+    await panel
+      .getByRole('button', {
+        name: 'Sort the teams by creation date descendent',
+      })
+      .click();
+
+    const responseSortDesc = await responsePromiseSortDesc;
+    expect(responseSortDesc.ok()).toBeTruthy();
   });
 
-  test('003 - checks the infinite scroll', async ({ page, browserName }) => {
+  test('checks the infinite scroll', async ({ page, browserName }) => {
     test.setTimeout(90000);
     const panel = page.getByLabel('Teams panel').first();
 
@@ -66,10 +80,7 @@ test.describe('Teams Panel', () => {
     expect(await panel.locator('li').count()).toBeGreaterThan(20);
   });
 
-  test('004 - checks the hover and selected state', async ({
-    page,
-    browserName,
-  }) => {
+  test('checks the hover and selected state', async ({ page, browserName }) => {
     const panel = page.getByLabel('Teams panel').first();
     await createTeam(page, 'team-hover', browserName, 2);