From 91f755306b04bfab8180e411133681d18cdbe287 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Wed, 27 Mar 2024 11:37:11 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=85(app-desk)=20improve=20sorting=20teams?=
 =?UTF-8?q?=20test=20e2e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../teams/components/Panel/PanelActions.tsx   | 14 +++---
 .../__tests__/app-desk/teams-panel.spec.ts    | 43 ++++++++++++-------
 2 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/src/frontend/apps/desk/src/features/teams/components/Panel/PanelActions.tsx b/src/frontend/apps/desk/src/features/teams/components/Panel/PanelActions.tsx
index 93e5c28..cfe16d4 100644
--- a/src/frontend/apps/desk/src/features/teams/components/Panel/PanelActions.tsx
+++ b/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')} />
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/teams-panel.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/teams-panel.spec.ts
index d664e90..6440fd3 100644
--- a/src/frontend/apps/e2e/__tests__/app-desk/teams-panel.spec.ts
+++ b/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);