✅(e2e) adapt tests to impress app

Adapt e2e test to works with Impress.

src/frontend/apps/e2e/__tests__/app-impress/404.spec.ts

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test';
+
+import { keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+  await page.goto('unknown-page404');
+});
+
+test.describe('404', () => {
+  test('Checks all the elements are visible', async ({ page }) => {
+    await expect(page.getByLabel('Image 404')).toBeVisible();
+    await expect(page.getByText('Ouch')).toBeVisible();
+    await expect(
+      page.getByText(
+        'It seems that the page you are looking for does not exist or cannot be displayed correctly.',
+      ),
+    ).toBeVisible();
+    await expect(page.getByText('Back to home page')).toBeVisible();
+  });
+
+  test('checks go back to home page redirects to home page', async ({
+    page,
+  }) => {
+    await page.getByText('Back to home page').click();
+    await expect(page).toHaveURL('/');
+  });
+});

src/frontend/apps/e2e/__tests__/app-impress/common.ts

@@ -0,0 +1,89 @@
+import { Page, expect } from '@playwright/test';
+
+export const keyCloakSignIn = async (page: Page, browserName: string) => {
+  const title = await page.locator('h1').first().textContent({
+    timeout: 5000,
+  });
+
+  if (title?.includes('Sign in to your account')) {
+    await page
+      .getByRole('textbox', { name: 'username' })
+      .fill(`user-e2e-${browserName}`);
+
+    await page
+      .getByRole('textbox', { name: 'password' })
+      .fill(`password-e2e-${browserName}`);
+
+    await page.click('input[type="submit"]', { force: true });
+  }
+};
+
+export const randomName = (name: string, browserName: string, length: number) =>
+  Array.from({ length }, (_el, index) => {
+    return `${browserName}-${Math.floor(Math.random() * 10000)}-${index}-${name}`;
+  });
+
+export const createTeam = async (
+  page: Page,
+  teamName: string,
+  browserName: string,
+  length: number,
+) => {
+  const panel = page.getByLabel('Teams panel').first();
+  const buttonCreate = page.getByRole('button', { name: 'Create the team' });
+
+  const randomTeams = randomName(teamName, browserName, length);
+
+  for (let i = 0; i < randomTeams.length; i++) {
+    await panel.getByRole('button', { name: 'Add a team' }).click();
+    await page.getByText('Team name').fill(randomTeams[i]);
+    await expect(buttonCreate).toBeEnabled();
+    await buttonCreate.click();
+    await expect(
+      panel.locator('li').nth(0).getByText(randomTeams[i]),
+    ).toBeVisible();
+  }
+
+  return randomTeams;
+};
+
+export const addNewMember = async (
+  page: Page,
+  index: number,
+  role: 'Admin' | 'Owner' | 'Member',
+  fillText: string = 'test',
+) => {
+  const responsePromiseSearchUser = page.waitForResponse(
+    (response) =>
+      response.url().includes(`/users/?q=${fillText}`) &&
+      response.status() === 200,
+  );
+  await page.getByLabel('Add members to the team').click();
+  const inputSearch = page.getByLabel(/Find a member to add to the team/);
+
+  // Select a new user
+  await inputSearch.fill(fillText);
+
+  // Intercept response
+  const responseSearchUser = await responsePromiseSearchUser;
+  const users = (await responseSearchUser.json()).results as {
+    name: string;
+  }[];
+
+  // Choose user
+  await page.getByRole('option', { name: users[index].name }).click();
+
+  // Choose a role
+  await page.getByRole('radio', { name: role }).click();
+
+  await page.getByRole('button', { name: 'Validate' }).click();
+
+  const table = page.getByLabel('List members card').getByRole('table');
+
+  await expect(table.getByText(users[index].name)).toBeVisible();
+  await expect(
+    page.getByText(`Member ${users[index].name} added to the team`),
+  ).toBeVisible();
+
+  return users[index].name;
+};

src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts

@@ -0,0 +1,43 @@
+import { expect, test } from '@playwright/test';
+
+import { keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+});
+
+test.describe('Header', () => {
+  test('checks all the elements are visible', async ({ page }) => {
+    const header = page.locator('header').first();
+
+    await expect(header.getByAltText('Marianne Logo')).toBeVisible();
+
+    await expect(
+      header.getByAltText('Freedom Equality Fraternity Logo'),
+    ).toBeVisible();
+
+    await expect(header.getByAltText('Impress Logo')).toBeVisible();
+    await expect(header.locator('h2').getByText('Impress')).toHaveCSS(
+      'color',
+      'rgb(0, 0, 145)',
+    );
+    await expect(header.locator('h2').getByText('Impress')).toHaveCSS(
+      'font-family',
+      /Marianne/i,
+    );
+
+    await expect(
+      header.getByText('Les applications de La Suite numérique'),
+    ).toBeVisible();
+
+    await expect(header.getByAltText('Language Icon')).toBeVisible();
+
+    await expect(header.getByText('John Doe')).toBeVisible();
+    await expect(
+      header.getByRole('img', {
+        name: 'profile picture',
+      }),
+    ).toBeVisible();
+  });
+});

src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test';
+
+import { keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+});
+
+test.describe('Language', () => {
+  test('checks the language picker', async ({ page }) => {
+    await expect(
+      page.getByRole('button', {
+        name: 'Create a new pad',
+      }),
+    ).toBeVisible();
+
+    const header = page.locator('header').first();
+    await header.getByRole('combobox').getByText('EN').click();
+    await header.getByRole('option', { name: 'FR' }).click();
+    await expect(header.getByRole('combobox').getByText('FR')).toBeVisible();
+
+    await expect(
+      page.getByRole('button', {
+        name: 'Créer un nouveau pad',
+      }),
+    ).toBeVisible();
+  });
+});

src/frontend/apps/e2e/__tests__/app-impress/menu.spec.ts

@@ -0,0 +1,81 @@
+import { expect, test } from '@playwright/test';
+
+import { keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+});
+
+test.describe('Menu', () => {
+  const menuItems = [
+    { name: 'Search', isDefault: true },
+    { name: 'Favorite', isDefault: false },
+    { name: 'Recent', isDefault: false },
+    { name: 'Contacts', isDefault: false },
+    { name: 'Groups', isDefault: false },
+  ];
+  for (const { name, isDefault } of menuItems) {
+    test(`checks that ${name} menu item is displaying correctly`, async ({
+      page,
+    }) => {
+      const menu = page.locator('menu').first();
+
+      const buttonMenu = menu.getByLabel(`${name} button`);
+      await expect(buttonMenu).toBeVisible();
+      await buttonMenu.hover();
+      await expect(menu.getByLabel('tooltip')).toHaveText(name);
+
+      // Checks the tooltip is with inactive color
+      await expect(menu.getByLabel('tooltip')).toHaveCSS(
+        'background-color',
+        isDefault ? 'rgb(255, 255, 255)' : 'rgb(22, 22, 22)',
+      );
+
+      await buttonMenu.click();
+
+      // Checks the tooltip has active color
+      await buttonMenu.hover();
+      await expect(menu.getByLabel('tooltip')).toHaveCSS(
+        'background-color',
+        'rgb(255, 255, 255)',
+      );
+    });
+
+    test(`checks that ${name} menu item is routing correctly`, async ({
+      page,
+    }) => {
+      await expect(
+        page.getByRole('button', {
+          name: 'Create a new pad',
+        }),
+      ).toBeVisible();
+
+      const menu = page.locator('menu').first();
+
+      const buttonMenu = menu.getByLabel(`${name} button`);
+      await buttonMenu.click();
+
+      /* eslint-disable playwright/no-conditional-expect */
+      /* eslint-disable playwright/no-conditional-in-test */
+      if (isDefault) {
+        await expect(
+          page.getByRole('button', {
+            name: 'Create a new pad',
+          }),
+        ).toBeVisible();
+      } else {
+        await expect(
+          page.getByRole('button', {
+            name: 'Create a new pad',
+          }),
+        ).toBeHidden();
+
+        const reg = new RegExp(name.toLowerCase());
+        await expect(page).toHaveURL(reg);
+      }
+      /* eslint-enable playwright/no-conditional-expect */
+      /* eslint-enable playwright/no-conditional-in-test */
+    });
+  }
+});

src/frontend/apps/e2e/__tests__/app-impress/pad-create.specWI.ts

@@ -0,0 +1,127 @@
+import { expect, test } from '@playwright/test';
+
+import { keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+});
+
+test.describe('Pad Create', () => {
+  test('checks all the create pad elements are visible', async ({ page }) => {
+    const buttonCreateHomepage = page.getByRole('button', {
+      name: 'Create a new pad',
+    });
+    await buttonCreateHomepage.click();
+    await expect(buttonCreateHomepage).toBeHidden();
+
+    const card = page.getByLabel('Create new pad card').first();
+
+    await expect(card.getByLabel('Pad name')).toBeVisible();
+
+    await expect(card.getByLabel('icon group')).toBeVisible();
+
+    await expect(
+      card.getByRole('heading', {
+        name: 'Name the pad',
+        level: 3,
+      }),
+    ).toBeVisible();
+
+    await expect(
+      card.getByRole('button', {
+        name: 'Create the pad',
+      }),
+    ).toBeVisible();
+
+    await expect(
+      card.getByRole('button', {
+        name: 'Cancel',
+      }),
+    ).toBeVisible();
+  });
+
+  test('checks the cancel button interaction', async ({ page }) => {
+    const buttonCreateHomepage = page.getByRole('button', {
+      name: 'Create a new pad',
+    });
+    await buttonCreateHomepage.click();
+    await expect(buttonCreateHomepage).toBeHidden();
+
+    const card = page.getByLabel('Create new pad card').first();
+
+    await card
+      .getByRole('button', {
+        name: 'Cancel',
+      })
+      .click();
+
+    await expect(buttonCreateHomepage).toBeVisible();
+  });
+
+  test('checks the routing on new pad created', async ({
+    page,
+    browserName,
+  }) => {
+    const panel = page.getByLabel('Pads panel').first();
+
+    await panel.getByRole('button', { name: 'Add a pad' }).click();
+
+    const padName = `My routing pad ${browserName}-${Math.floor(Math.random() * 1000)}`;
+    await page.getByText('Pad name').fill(padName);
+    await page.getByRole('button', { name: 'Create the pad' }).click();
+
+    const elPad = page.getByText(`Members of “${padName}“`);
+    await expect(elPad).toBeVisible();
+
+    await panel.getByRole('button', { name: 'Add a pad' }).click();
+    await expect(elPad).toBeHidden();
+
+    await panel.locator('li').getByText(padName).click();
+    await expect(elPad).toBeVisible();
+  });
+
+  test('checks alias pads url with homepage', async ({ page }) => {
+    await expect(page).toHaveURL('/');
+
+    const buttonCreateHomepage = page.getByRole('button', {
+      name: 'Create a new pad',
+    });
+
+    await expect(buttonCreateHomepage).toBeVisible();
+
+    await page.goto('/pads');
+    await expect(buttonCreateHomepage).toBeVisible();
+    await expect(page).toHaveURL(/\/pads$/);
+  });
+
+  test('checks error when duplicate pad', async ({ page, browserName }) => {
+    const panel = page.getByLabel('Pads panel').first();
+
+    await panel.getByRole('button', { name: 'Add a pad' }).click();
+
+    const padName = `My duplicate pad ${browserName}-${Math.floor(Math.random() * 1000)}`;
+    await page.getByText('Pad name').fill(padName);
+    await page.getByRole('button', { name: 'Create the pad' }).click();
+
+    await panel.getByRole('button', { name: 'Add a pad' }).click();
+
+    await page.getByText('Pad name').fill(padName);
+    await page.getByRole('button', { name: 'Create the pad' }).click();
+
+    await expect(
+      page.getByText('Pad with this Slug already exists.'),
+    ).toBeVisible();
+  });
+
+  test('checks 404 on pads/[id] page', async ({ page }) => {
+    await page.goto('/pads/some-unknown-pad');
+    await expect(
+      page.getByText(
+        'It seems that the page you are looking for does not exist or cannot be displayed correctly.',
+      ),
+    ).toBeVisible({
+      timeout: 15000,
+    });
+  });
+});

src/frontend/apps/e2e/__tests__/app-impress/pad-panel.specWI.ts

@@ -0,0 +1,92 @@
+import { expect, test } from '@playwright/test';
+
+import { waitForElementCount } from '../helpers';
+
+import { createTeam, keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+});
+
+test.describe('Pads Panel', () => {
+  test('checks all the elements are visible', async ({ page }) => {
+    const panel = page.getByLabel('Pads panel').first();
+
+    await expect(panel.getByText('Recents')).toBeVisible();
+
+    await expect(
+      panel.getByRole('button', {
+        name: 'Sort the pads',
+      }),
+    ).toBeVisible();
+
+    await expect(
+      panel.getByRole('button', {
+        name: 'Add a pad',
+      }),
+    ).toBeVisible();
+  });
+
+  test('checks the sort button', async ({ page }) => {
+    const responsePromiseSortDesc = page.waitForResponse(
+      (response) =>
+        response.url().includes('/pads/?page=1&ordering=-created_at') &&
+        response.status() === 200,
+    );
+
+    const responsePromiseSortAsc = page.waitForResponse(
+      (response) =>
+        response.url().includes('/pads/?page=1&ordering=created_at') &&
+        response.status() === 200,
+    );
+
+    const panel = page.getByLabel('Pads panel').first();
+
+    await panel
+      .getByRole('button', {
+        name: 'Sort the pads by creation date ascendent',
+      })
+      .click();
+
+    const responseSortAsc = await responsePromiseSortAsc;
+    expect(responseSortAsc.ok()).toBeTruthy();
+
+    await panel
+      .getByRole('button', {
+        name: 'Sort the pads by creation date descendent',
+      })
+      .click();
+
+    const responseSortDesc = await responsePromiseSortDesc;
+    expect(responseSortDesc.ok()).toBeTruthy();
+  });
+
+  test('checks the infinite scroll', async ({ page, browserName }) => {
+    test.setTimeout(90000);
+    const panel = page.getByLabel('Pads panel').first();
+
+    const randomTeams = await createTeam(page, 'pad-infinite', browserName, 40);
+
+    await expect(panel.locator('li')).toHaveCount(20);
+    await panel.getByText(randomTeams[24]).click();
+
+    await waitForElementCount(panel.locator('li'), 21, 10000);
+    expect(await panel.locator('li').count()).toBeGreaterThan(20);
+  });
+
+  test('checks the hover and selected state', async ({ page, browserName }) => {
+    const panel = page.getByLabel('Pads panel').first();
+    await createTeam(page, 'pad-hover', browserName, 2);
+
+    const selectedTeam = panel.locator('li').nth(0);
+    await expect(selectedTeam).toHaveCSS(
+      'background-color',
+      'rgb(202, 202, 251)',
+    );
+
+    const hoverTeam = panel.locator('li').nth(1);
+    await hoverTeam.hover();
+    await expect(hoverTeam).toHaveCSS('background-color', 'rgb(227, 227, 253)');
+  });
+});

src/frontend/apps/e2e/__tests__/app-impress/pad.specWI.ts

@@ -0,0 +1,62 @@
+import { expect, test } from '@playwright/test';
+
+import { createTeam, keyCloakSignIn, randomName } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+});
+
+test.describe('Team', () => {
+  test('checks all the top box elements are visible', async ({
+    page,
+    browserName,
+  }) => {
+    const teamName = (
+      await createTeam(page, 'team-top-box', browserName, 1)
+    ).shift();
+
+    await expect(page.getByLabel('icon group')).toBeVisible();
+    await expect(
+      page.getByRole('heading', {
+        name: `Members of “${teamName}“`,
+        level: 3,
+      }),
+    ).toBeVisible();
+    await expect(
+      page.getByText(`Add people to the “${teamName}“ group.`),
+    ).toBeVisible();
+
+    await expect(page.getByText(`1 member`)).toBeVisible();
+
+    const today = new Date(Date.now());
+    const todayFormated = today.toLocaleDateString('en', {
+      month: '2-digit',
+      day: '2-digit',
+      year: 'numeric',
+    });
+    await expect(page.getByText(`Created at ${todayFormated}`)).toBeVisible();
+    await expect(
+      page.getByText(`Last update at ${todayFormated}`),
+    ).toBeVisible();
+  });
+
+  test('it updates the team name', async ({ page, browserName }) => {
+    await createTeam(page, 'team-update-name', browserName, 1);
+
+    await page.getByLabel(`Open the team options`).click();
+    await page.getByRole('button', { name: `Update the team` }).click();
+
+    const teamName = randomName('new-team-update-name', browserName, 1)[0];
+    await page.getByText('New name...', { exact: true }).fill(teamName);
+
+    await page
+      .getByRole('button', { name: 'Validate the modification' })
+      .click();
+
+    await expect(page.getByText('The team has been updated.')).toBeVisible();
+    await expect(
+      page.getByText(`Add people to the “${teamName}“ group.`),
+    ).toBeVisible();
+  });
+});