✅(frontend) update tests

- Enhanced test coverage for document sharing, member roles, and
visibility settings

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

@@ -67,7 +67,9 @@ export const addNewMember = async (
       response.status() === 200,
   );
 
-  const inputSearch = page.getByLabel(/Find a member to add to the document/);
+  const inputSearch = page.getByRole('combobox', {
+    name: 'Quick search input',
+  });
 
   // Select a new user
   await inputSearch.fill(fillText);
@@ -82,13 +84,9 @@ export const addNewMember = async (
   await page.getByRole('option', { name: users[index].email }).click();
 
   // Choose a role
-  await page.getByRole('combobox', { name: /Choose a role/ }).click();
+  await page.getByLabel('doc-role-dropdown').click();
-  await page.getByRole('option', { name: role }).click();
+  await page.getByRole('button', { name: role }).click();
-  await page.getByRole('button', { name: 'Validate' }).click();
+  await page.getByRole('button', { name: 'Invite' }).click();
-
-  await expect(
-    page.getByText(`User ${users[index].email} added to the document.`),
-  ).toBeVisible();
 
   return users[index].email;
 };

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

@@ -121,17 +121,15 @@ test.describe('Doc Editor', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const selectVisibility = page.getByRole('combobox', {
+    const selectVisibility = page.getByLabel('Visibility', { exact: true });
-      name: 'Visibility',
-    });
 
     // When the visibility is changed, the ws should closed the connection (backend signal)
     const wsClosePromise = webSocket.waitForEvent('close');
 
     await selectVisibility.click();
     await page
-      .getByRole('option', {
+      .getByRole('button', {
-        name: 'Authenticated',
+        name: 'Connected',
       })
       .click();
 
@@ -274,9 +272,10 @@ test.describe('Doc Editor', () => {
 
     await goToGridDoc(page);
 
-    await expect(
+    const card = page.getByLabel('It is the card information');
-      page.getByText('Read only, you cannot edit this document.'),
+    await expect(card).toBeVisible();
-    ).toBeVisible();
+
+    await expect(card.getByText('Reader')).toBeVisible();
   });
 
   test('it adds an image to the doc editor', async ({ page, browserName }) => {

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

@@ -155,34 +155,40 @@ test.describe('Doc Header', () => {
     await page.getByRole('button', { name: 'Share' }).click();
 
     const shareModal = page.getByLabel('Share modal');
+    await expect(shareModal).toBeVisible();
+    await expect(page.getByText('Share the document')).toBeVisible();
 
-    await expect(
+    await expect(page.getByPlaceholder('Type a name or email')).toBeVisible();
-      shareModal.getByRole('combobox', {
-        name: 'Visibility',
-      }),
-    ).not.toHaveAttribute('disabled');
-    await expect(shareModal.getByText('Search by email')).toBeVisible();
 
     const invitationCard = shareModal.getByLabel('List invitation card');
+    await expect(invitationCard).toBeVisible();
     await expect(
-      invitationCard.getByText('test@invitation.test'),
+      invitationCard.getByText('test@invitation.test').first(),
     ).toBeVisible();
+    await expect(invitationCard.getByLabel('doc-role-dropdown')).toBeVisible();
+
+    await invitationCard.getByRole('button', { name: 'more_vert' }).click();
+
     await expect(
-      invitationCard.getByRole('combobox', { name: 'Role' }),
+      page.getByRole('button', {
-    ).toBeEnabled();
-    await expect(
-      invitationCard.getByRole('button', {
         name: 'delete',
       }),
     ).toBeEnabled();
+    await invitationCard.click();
 
     const memberCard = shareModal.getByLabel('List members card');
-    await expect(memberCard.getByText('test@accesses.test')).toBeVisible();
+    await expect(memberCard).toBeVisible();
     await expect(
-      memberCard.getByRole('combobox', { name: 'Role' }),
+      memberCard.getByText('test@accesses.test').first(),
-    ).toBeEnabled();
+    ).toBeVisible();
+    await expect(memberCard.getByLabel('doc-role-dropdown')).toBeVisible();
     await expect(
-      memberCard.getByRole('button', {
+      memberCard.getByRole('button', { name: 'more_vert' }),
+    ).toBeVisible();
+    await memberCard.getByRole('button', { name: 'more_vert' }).click();
+
+    await expect(
+      page.getByRole('button', {
         name: 'delete',
       }),
     ).toBeEnabled();
@@ -229,36 +235,24 @@ test.describe('Doc Header', () => {
     await page.getByRole('button', { name: 'Share' }).click();
 
     const shareModal = page.getByLabel('Share modal');
+    await expect(page.getByText('Share the document')).toBeVisible();
 
-    await expect(
+    await expect(page.getByPlaceholder('Type a name or email')).toBeHidden();
-      shareModal.getByRole('combobox', {
-        name: 'Visibility',
-      }),
-    ).toHaveAttribute('disabled');
-    await expect(shareModal.getByText('Search by email')).toBeHidden();
 
     const invitationCard = shareModal.getByLabel('List invitation card');
     await expect(
-      invitationCard.getByText('test@invitation.test'),
+      invitationCard.getByText('test@invitation.test').first(),
     ).toBeVisible();
+    await expect(invitationCard.getByLabel('doc-role-text')).toBeVisible();
     await expect(
-      invitationCard.getByRole('combobox', { name: 'Role' }),
+      invitationCard.getByRole('button', { name: 'more_vert' }),
-    ).toHaveAttribute('disabled');
-    await expect(
-      invitationCard.getByRole('button', {
-        name: 'delete',
-      }),
     ).toBeHidden();
 
     const memberCard = shareModal.getByLabel('List members card');
     await expect(memberCard.getByText('test@accesses.test')).toBeVisible();
+    await expect(memberCard.getByLabel('doc-role-text')).toBeVisible();
     await expect(
-      memberCard.getByRole('combobox', { name: 'Role' }),
+      memberCard.getByRole('button', { name: 'more_vert' }),
-    ).toHaveAttribute('disabled');
-    await expect(
-      memberCard.getByRole('button', {
-        name: 'delete',
-      }),
     ).toBeHidden();
   });
 
@@ -303,36 +297,24 @@ test.describe('Doc Header', () => {
     await page.getByRole('button', { name: 'Share' }).click();
 
     const shareModal = page.getByLabel('Share modal');
+    await expect(page.getByText('Share the document')).toBeVisible();
 
-    await expect(
+    await expect(page.getByPlaceholder('Type a name or email')).toBeHidden();
-      shareModal.getByRole('combobox', {
-        name: 'Visibility',
-      }),
-    ).toHaveAttribute('disabled');
-    await expect(shareModal.getByText('Search by email')).toBeHidden();
 
     const invitationCard = shareModal.getByLabel('List invitation card');
     await expect(
-      invitationCard.getByText('test@invitation.test'),
+      invitationCard.getByText('test@invitation.test').first(),
     ).toBeVisible();
+    await expect(invitationCard.getByLabel('doc-role-text')).toBeVisible();
     await expect(
-      invitationCard.getByRole('combobox', { name: 'Role' }),
+      invitationCard.getByRole('button', { name: 'more_vert' }),
-    ).toHaveAttribute('disabled');
-    await expect(
-      invitationCard.getByRole('button', {
-        name: 'delete',
-      }),
     ).toBeHidden();
 
     const memberCard = shareModal.getByLabel('List members card');
     await expect(memberCard.getByText('test@accesses.test')).toBeVisible();
+    await expect(memberCard.getByLabel('doc-role-text')).toBeVisible();
     await expect(
-      memberCard.getByRole('combobox', { name: 'Role' }),
+      memberCard.getByRole('button', { name: 'more_vert' }),
-    ).toHaveAttribute('disabled');
-    await expect(
-      memberCard.getByRole('button', {
-        name: 'delete',
-      }),
     ).toBeHidden();
   });
 

src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts

@@ -16,163 +16,82 @@ test.describe('Document create member', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const inputSearch = page.getByLabel(/Find a member to add to the document/);
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Quick search input',
+    });
     await expect(inputSearch).toBeVisible();
 
-    // Select user 1
+    // Select user 1 and verify tag
     await inputSearch.fill('user');
-
     const response = await responsePromise;
     const users = (await response.json()).results as {
       email: string;
+      full_name: string;
     }[];
 
-    await page.getByRole('option', { name: users[0].email }).click();
+    const list = page.getByTestId('doc-share-add-member-list');
+    await expect(list).toBeHidden();
+    const quickSearchContent = page.getByTestId('doc-share-quick-search');
+    await quickSearchContent
+      .getByTestId(`search-user-row-${users[0].email}`)
+      .click();
 
-    // Select user 2
+    await expect(list).toBeVisible();
+    await expect(
+      list.getByTestId(`doc-share-add-member-${users[0].email}`),
+    ).toBeVisible();
+    await expect(list.getByText(`${users[0].full_name}`)).toBeVisible();
+
+    // Select user 2 and verify tag
     await inputSearch.fill('user');
-    await page.getByRole('option', { name: users[1].email }).click();
+    await quickSearchContent
+      .getByTestId(`search-user-row-${users[1].email}`)
+      .click();
 
-    // Select email
+    await expect(
+      list.getByTestId(`doc-share-add-member-${users[1].email}`),
+    ).toBeVisible();
+    await expect(list.getByText(`${users[1].full_name}`)).toBeVisible();
+
+    // Select email and verify tag
     const email = randomName('test@test.fr', browserName, 1)[0];
     await inputSearch.fill(email);
-    await page.getByRole('option', { name: email }).click();
+    await quickSearchContent.getByText(email).click();
-
+    await expect(list.getByText(email)).toBeVisible();
-    // Check user 1 tag
-    await expect(
-      page.getByText(`${users[0].email}`, { exact: true }),
-    ).toBeVisible();
-    await expect(page.getByLabel(`Remove ${users[0].email}`)).toBeVisible();
-
-    // Check user 2 tag
-    await expect(
-      page.getByText(`${users[1].email}`, { exact: true }),
-    ).toBeVisible();
-    await expect(page.getByLabel(`Remove ${users[1].email}`)).toBeVisible();
-
-    // Check invitation tag
-    await expect(page.getByText(email, { exact: true })).toBeVisible();
-    await expect(page.getByLabel(`Remove ${email}`)).toBeVisible();
 
     // Check roles are displayed
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
+    await list.getByLabel('doc-role-dropdown').click();
-
+    await expect(page.getByRole('button', { name: 'Reader' })).toBeVisible();
-    await expect(page.getByRole('option', { name: 'Reader' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Editor' })).toBeVisible();
-    await expect(page.getByRole('option', { name: 'Editor' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Owner' })).toBeVisible();
     await expect(
-      page.getByRole('option', { name: 'Administrator' }),
+      page.getByRole('button', { name: 'Administrator' }),
     ).toBeVisible();
-    await expect(page.getByRole('option', { name: 'Owner' })).toBeVisible();
-  });
 
-  test('it sends a new invitation and adds a new user', async ({
+    // Validate
-    page,
+    await page.getByRole('button', { name: 'Administrator' }).click();
-    browserName,
+    await page.getByRole('button', { name: 'Invite' }).click();
-  }) => {
-    const responsePromiseSearchUser = page.waitForResponse(
-      (response) =>
-        response.url().includes('/users/?q=user') && response.status() === 200,
-    );
 
-    await createDoc(page, 'user-invitation', browserName, 1);
+    // Check invitation added
-
+    await expect(
-    await page.getByRole('button', { name: 'Share' }).click();
+      quickSearchContent.getByText('Pending invitations'),
-
+    ).toBeVisible();
-    const inputSearch = page.getByLabel(/Find a member to add to the document/);
+    await expect(quickSearchContent.getByText(email).first()).toBeVisible();
-
-    const email = randomName('test@test.fr', browserName, 1)[0];
-    await inputSearch.fill(email);
-    await page.getByRole('option', { name: email }).click();
-
-    // Select a new user
-    await inputSearch.fill('user');
-    const responseSearchUser = await responsePromiseSearchUser;
-    const [user] = (await responseSearchUser.json()).results as {
-      email: string;
-    }[];
-    await page.getByRole('option', { name: user.email }).click();
-
-    // Choose a role
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
-    await page.getByRole('option', { name: 'Administrator' }).click();
-
-    const responsePromiseCreateInvitation = page.waitForResponse(
-      (response) =>
-        response.url().includes('/invitations/') && response.status() === 201,
-    );
-    const responsePromiseAddUser = page.waitForResponse(
-      (response) =>
-        response.url().includes('/accesses/') && response.status() === 201,
-    );
-
-    await page.getByRole('button', { name: 'Validate' }).click();
-
-    // Check invitation sent
-    await expect(page.getByText(`Invitation sent to ${email}`)).toBeVisible();
-    const responseCreateInvitation = await responsePromiseCreateInvitation;
-    expect(responseCreateInvitation.ok()).toBeTruthy();
-    expect(
-      responseCreateInvitation.request().headers()['content-language'],
-    ).toBe('en-us');
 
     // Check user added
+    await expect(page.getByText('Share with 3 users')).toBeVisible();
     await expect(
-      page.getByText(`User ${user.email} added to the document.`),
+      quickSearchContent.getByText(users[0].full_name).first(),
     ).toBeVisible();
-    const responseAddUser = await responsePromiseAddUser;
-    expect(responseAddUser.ok()).toBeTruthy();
-    expect(responseAddUser.request().headers()['content-language']).toBe(
-      'en-us',
-    );
-
-    const listInvitation = page.getByLabel('List invitation card');
-    await expect(listInvitation.locator('li').getByText(email)).toBeVisible();
     await expect(
-      listInvitation.locator('li').getByText('Invited'),
+      quickSearchContent.getByText(users[0].email).first(),
     ).toBeVisible();
-
-    const listMember = page.getByLabel('List members card');
-    await expect(listMember.locator('li').getByText(user.email)).toBeVisible();
-  });
-
-  test('it try to add twice the same user', async ({ page, browserName }) => {
-    const responsePromiseSearchUser = page.waitForResponse(
-      (response) =>
-        response.url().includes('/users/?q=user') && response.status() === 200,
-    );
-
-    await createDoc(page, 'user-twice', browserName, 1);
-
-    await page.getByRole('button', { name: 'Share' }).click();
-
-    const inputSearch = page.getByLabel(/Find a member to add to the document/);
-    await inputSearch.fill('user');
-    const responseSearchUser = await responsePromiseSearchUser;
-    const [user] = (await responseSearchUser.json()).results as {
-      email: string;
-    }[];
-    await page.getByRole('option', { name: user.email }).click();
-
-    // Choose a role
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
-    await page.getByRole('option', { name: 'Owner' }).click();
-
-    const responsePromiseAddMember = page.waitForResponse(
-      (response) =>
-        response.url().includes('/accesses/') && response.status() === 201,
-    );
-
-    await page.getByRole('button', { name: 'Validate' }).click();
-
     await expect(
-      page.getByText(`User ${user.email} added to the document.`),
+      quickSearchContent.getByText(users[1].email).first(),
+    ).toBeVisible();
+    await expect(
+      quickSearchContent.getByText(users[1].full_name).first(),
     ).toBeVisible();
-    const responseAddMember = await responsePromiseAddMember;
-    expect(responseAddMember.ok()).toBeTruthy();
-
-    await inputSearch.fill('user');
-    await expect(page.getByText('Loading...')).toBeHidden();
-    await expect(page.getByRole('option', { name: user.email })).toBeHidden();
   });
 
   test('it try to add twice the same invitation', async ({
@@ -183,40 +102,43 @@ test.describe('Document create member', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const inputSearch = page.getByLabel(/Find a member to add to the document/);
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Quick search input',
+    });
 
     const [email] = randomName('test@test.fr', browserName, 1);
     await inputSearch.fill(email);
-    await page.getByRole('option', { name: email }).click();
+    await page.getByTestId(`search-user-row-${email}`).click();
 
     // Choose a role
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
+    const container = page.getByTestId('doc-share-add-member-list');
-    await page.getByRole('option', { name: 'Owner' }).click();
+    await container.getByLabel('doc-role-dropdown').click();
+    await page.getByRole('button', { name: 'Owner' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
         response.url().includes('/invitations/') && response.status() === 201,
     );
-
+    await page.getByRole('button', { name: 'Invite' }).click();
-    await page.getByRole('button', { name: 'Validate' }).click();
 
     // Check invitation sent
-    await expect(page.getByText(`Invitation sent to ${email}`)).toBeVisible();
+
     const responseCreateInvitation = await responsePromiseCreateInvitation;
     expect(responseCreateInvitation.ok()).toBeTruthy();
 
     await inputSearch.fill(email);
-    await page.getByRole('option', { name: email }).click();
+    await page.getByTestId(`search-user-row-${email}`).click();
+
     // Choose a role
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
+    await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('option', { name: 'Owner' }).click();
+    await page.getByRole('button', { name: 'Owner' }).click();
 
     const responsePromiseCreateInvitationFail = page.waitForResponse(
       (response) =>
         response.url().includes('/invitations/') && response.status() === 400,
     );
 
-    await page.getByRole('button', { name: 'Validate' }).click();
+    await page.getByRole('button', { name: 'Invite' }).click();
     await expect(
       page.getByText(`"${email}" is already invited to the document.`),
     ).toBeVisible();
@@ -233,31 +155,32 @@ test.describe('Document create member', () => {
 
     const header = page.locator('header').first();
     await header.getByRole('combobox').getByText('EN').click();
-    await header.getByRole('option', { name: 'FR' }).click();
+    await header.getByRole('option', { name: 'translate Français' }).click();
 
     await page.getByRole('button', { name: 'Partager' }).click();
 
-    const inputSearch = page.getByLabel(
+    const inputSearch = page.getByRole('combobox', {
-      /Trouver un membre à ajouter au document/,
+      name: 'Quick search input',
-    );
+    });
 
     const email = randomName('test@test.fr', browserName, 1)[0];
     await inputSearch.fill(email);
-    await page.getByRole('option', { name: email }).click();
+    await page.getByTestId(`search-user-row-${email}`).click();
 
     // Choose a role
-    await page.getByRole('combobox', { name: /Choisissez un rôle/ }).click();
+    const container = page.getByTestId('doc-share-add-member-list');
-    await page.getByRole('option', { name: 'Administrateur' }).click();
+    await container.getByLabel('doc-role-dropdown').click();
+    await page.getByRole('button', { name: 'Administrateur' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
         response.url().includes('/invitations/') && response.status() === 201,
     );
 
-    await page.getByRole('button', { name: 'Valider' }).click();
+    await page.getByRole('button', { name: 'Invite' }).click();
 
     // Check invitation sent
-    await expect(page.getByText(`Invitation envoyée à ${email}`)).toBeVisible();
+
     const responseCreateInvitation = await responsePromiseCreateInvitation;
     expect(responseCreateInvitation.ok()).toBeTruthy();
     expect(
@@ -270,41 +193,46 @@ test.describe('Document create member', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const inputSearch = page.getByLabel(/Find a member to add to the document/);
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Quick search input',
+    });
 
     const email = randomName('test@test.fr', browserName, 1)[0];
     await inputSearch.fill(email);
-    await page.getByRole('option', { name: email }).click();
+    await page.getByTestId(`search-user-row-${email}`).click();
 
     // Choose a role
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
+    const container = page.getByTestId('doc-share-add-member-list');
-    await page.getByRole('option', { name: 'Administrator' }).click();
+    await container.getByLabel('doc-role-dropdown').click();
+    await page.getByRole('button', { name: 'Administrator' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
         response.url().includes('/invitations/') && response.status() === 201,
     );
 
-    await page.getByRole('button', { name: 'Validate' }).click();
+    await page.getByRole('button', { name: 'Invite' }).click();
 
     // Check invitation sent
-    await expect(page.getByText(`Invitation sent to ${email}`)).toBeVisible();
     const responseCreateInvitation = await responsePromiseCreateInvitation;
     expect(responseCreateInvitation.ok()).toBeTruthy();
 
-    const listInvitation = page.getByLabel('List invitation card');
+    const listInvitation = page.getByTestId('doc-share-quick-search');
-    const li = listInvitation.locator('li').filter({
+    const userInvitation = listInvitation.getByTestId(
-      hasText: email,
+      `doc-share-invitation-row-${email}`,
-    });
+    );
-    await expect(li.getByText(email)).toBeVisible();
+    await expect(userInvitation).toBeVisible();
 
-    await li.getByRole('combobox', { name: /Role/ }).click();
+    await userInvitation.getByLabel('doc-role-dropdown').click();
-    await li.getByRole('option', { name: 'Reader' }).click();
+    await page.getByRole('button', { name: 'Reader' }).click();
-    await expect(page.getByText(`The role has been updated.`)).toBeVisible();
+
-    await li.getByText('delete').click();
+    const moreActions = userInvitation.getByRole('button', {
-    await expect(
+      name: 'more_vert',
-      page.getByText(`The invitation has been removed.`),
+    });
-    ).toBeVisible();
+    await moreActions.click();
-    await expect(listInvitation.locator('li').getByText(email)).toBeHidden();
+
+    await page.getByRole('button', { name: 'Delete' }).click();
+
+    await expect(userInvitation).toBeHidden();
   });
 });

src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts

@@ -1,7 +1,5 @@
 import { expect, test } from '@playwright/test';
 
-import { waitForElementCount } from '../helpers';
-
 import { addNewMember, createDoc, goToGridDoc, verifyDocName } from './common';
 
 test.beforeEach(async ({ page }) => {
@@ -15,10 +13,11 @@ test.describe('Document list members', () => {
       async (route) => {
         const request = route.request();
         const url = new URL(request.url());
-        const pageId = url.searchParams.get('page');
+        const pageId = url.searchParams.get('page') ?? '1';
+
         const accesses = {
-          count: 100,
+          count: 40,
-          next: 'http://anything/?page=2',
+          next: +pageId < 2 ? 'http://anything/?page=2' : undefined,
           previous: null,
           results: Array.from({ length: 20 }, (_, i) => ({
             id: `2ff1ec07-86c1-4534-a643-f41824a6c53a-${pageId}-${i}`,
@@ -47,28 +46,23 @@ test.describe('Document list members', () => {
       },
     );
 
-    await goToGridDoc(page);
+    const docTitle = await goToGridDoc(page);
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const list = page.getByLabel('List members card').locator('ul');
+    const prefix = 'doc-share-member-row';
-    await expect(list.locator('li')).toHaveCount(20);
+    const elements = page.locator(`[data-testid^="${prefix}"]`);
-    await list.getByText(`impress@impress.world-page-${1}-18`).hover();
+    const loadMore = page.getByTestId('load-more-members');
-    const loadMoreButton = page
-      .getByLabel('List members card')
-      .getByRole('button', { name: 'arrow_downward Load more' });
-    await loadMoreButton.scrollIntoViewIfNeeded();
-    await waitForElementCount(list.locator('li'), 21, 10000);
 
-    expect(await list.locator('li').count()).toBeGreaterThan(20);
+    await expect(elements).toHaveCount(20);
-    await expect(list.getByText(`Impress World Page 1-16`)).toBeVisible();
+    await expect(page.getByText(`Impress World Page 1-16`)).toBeVisible();
-    await expect(
+
-      list.getByText(`impress@impress.world-page-1-16`),
+    await loadMore.click();
-    ).toBeVisible();
+    await expect(elements).toHaveCount(40);
-    await expect(list.getByText(`Impress World Page 2-15`)).toBeVisible();
+    await expect(page.getByText(`Impress World Page 2-15`)).toBeVisible();
-    await expect(
+
-      list.getByText(`impress@impress.world-page-2-15`),
+    await expect(loadMore).toBeHidden();
-    ).toBeVisible();
   });
 
   test('it checks a big list of invitations', async ({ page }) => {
@@ -77,10 +71,10 @@ test.describe('Document list members', () => {
       async (route) => {
         const request = route.request();
         const url = new URL(request.url());
-        const pageId = url.searchParams.get('page');
+        const pageId = url.searchParams.get('page') ?? '1';
         const accesses = {
-          count: 100,
+          count: 40,
-          next: 'http://anything/?page=2',
+          next: +pageId < 2 ? 'http://anything/?page=2' : null,
           previous: null,
           results: Array.from({ length: 20 }, (_, i) => ({
             id: `2ff1ec07-86c1-4534-a643-f41824a6c53a-${pageId}-${i}`,
@@ -106,28 +100,26 @@ test.describe('Document list members', () => {
       },
     );
 
-    await goToGridDoc(page);
+    const docTitle = await goToGridDoc(page);
-
+    await verifyDocName(page, docTitle);
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const list = page.getByLabel('List invitation card').locator('ul');
+    const prefix = 'doc-share-invitation';
+    const elements = page.locator(`[data-testid^="${prefix}"]`);
+    const loadMore = page.getByTestId('load-more-invitations');
 
-    await expect(list.locator('li')).toHaveCount(20);
+    await expect(elements).toHaveCount(20);
-    await list.getByText(`impress@impress.world-page-${1}-18`).hover();
-    const loadMoreButton = page
-      .getByLabel('List invitation card')
-      .getByRole('button', { name: 'arrow_downward Load more' });
-    await loadMoreButton.scrollIntoViewIfNeeded();
-
-    await waitForElementCount(list.locator('li'), 21, 10000);
-
-    expect(await list.locator('li').count()).toBeGreaterThan(20);
     await expect(
-      list.getByText(`impress@impress.world-page-1-16`),
+      page.getByText(`impress@impress.world-page-1-16`).first(),
     ).toBeVisible();
+
+    await loadMore.click();
+    await expect(elements).toHaveCount(40);
     await expect(
-      list.getByText(`impress@impress.world-page-2-15`),
+      page.getByText(`impress@impress.world-page-2-16`).first(),
     ).toBeVisible();
+
+    await expect(loadMore).toBeHidden();
   });
 
   test('it checks the role rules', async ({ page, browserName }) => {
@@ -136,59 +128,47 @@ test.describe('Document list members', () => {
     await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
-
+    const list = page.getByTestId('doc-share-quick-search');
-    const list = page.getByLabel('List members card').locator('ul');
+    await expect(list).toBeVisible();
-
+    const currentUser = list.getByTestId(
-    await expect(list.getByText(`user@${browserName}.e2e`)).toBeVisible();
+      `doc-share-member-row-user@chromium.e2e`,
-
+    );
-    const soleOwner = list.getByText(
+    const currentUserRole = currentUser.getByLabel('doc-role-dropdown');
+    await expect(currentUser).toBeVisible();
+    await expect(currentUserRole).toBeVisible();
+    await currentUserRole.click();
+    const soloOwner = page.getByText(
       `You are the sole owner of this group, make another member the group owner before you can change your own role or be removed from your document.`,
     );
+    await expect(soloOwner).toBeVisible();
+    await list.click();
+    const newUserEmail = await addNewMember(page, 0, 'Owner');
+    const newUser = list.getByTestId(`doc-share-member-row-${newUserEmail}`);
+    const newUserRoles = newUser.getByLabel('doc-role-dropdown');
 
-    await expect(soleOwner).toBeVisible();
+    await expect(newUser).toBeVisible();
 
-    const username = await addNewMember(page, 0, 'Owner');
+    await currentUserRole.click();
+    await expect(soloOwner).toBeHidden();
+    await list.click();
 
-    await expect(list.getByText(username)).toBeVisible();
+    const otherOwner = page.getByText(
-
-    await expect(soleOwner).toBeHidden();
-
-    const otherOwner = list.getByText(
       `You cannot update the role or remove other owner.`,
     );
 
+    await newUserRoles.click();
     await expect(otherOwner).toBeVisible();
+    await list.click();
 
-    const SelectRoleCurrentUser = list
+    await currentUserRole.click();
-      .locator('li')
+    await page.getByRole('button', { name: 'Administrator' }).click();
-      .filter({
+    await list.click();
-        hasText: `user@${browserName}.e2e`,
+    await expect(currentUserRole).toBeVisible();
-      })
-      .getByRole('combobox', { name: 'Role' });
 
-    await SelectRoleCurrentUser.click();
+    await currentUserRole.click();
-    await page.getByRole('option', { name: 'Administrator' }).click();
+    await page.getByRole('button', { name: 'Reader' }).click();
-    await expect(page.getByText('The role has been updated')).toBeVisible();
+    await list.click();
-
+    await expect(currentUserRole).toBeHidden();
-    const shareModal = page.getByLabel('Share modal');
-
-    // Admin still have the right to share
-    await expect(
-      shareModal.getByRole('combobox', {
-        name: 'Visibility',
-      }),
-    ).not.toHaveAttribute('disabled');
-
-    await SelectRoleCurrentUser.click();
-    await page.getByRole('option', { name: 'Reader' }).click();
-    await expect(page.getByText('The role has been updated')).toBeVisible();
-
-    // Reader does not have the right to share
-    await expect(
-      shareModal.getByRole('combobox', {
-        name: 'Visibility',
-      }),
-    ).toHaveAttribute('disabled');
   });
 
   test('it checks the delete members', async ({ page, browserName }) => {
@@ -198,43 +178,48 @@ test.describe('Document list members', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const list = page.getByLabel('List members card').locator('ul');
+    const list = page.getByTestId('doc-share-quick-search');
 
-    const nameMyself = `user@${browserName}.e2e`;
+    const emailMyself = `user@${browserName}.e2e`;
-    await expect(list.getByText(nameMyself)).toBeVisible();
+    const mySelf = list.getByTestId(`doc-share-member-row-${emailMyself}`);
+    const mySelfMoreActions = mySelf.getByRole('button', { name: 'more_vert' });
 
-    const userOwner = await addNewMember(page, 0, 'Owner');
+    const userOwnerEmail = await addNewMember(page, 0, 'Owner');
-    await expect(list.getByText(userOwner)).toBeVisible();
+    const userOwner = list.getByTestId(
+      `doc-share-member-row-${userOwnerEmail}`,
+    );
+    const userOwnerMoreActions = userOwner.getByRole('button', {
+      name: 'more_vert',
+    });
 
-    const userReader = await addNewMember(page, 0, 'Reader');
+    await page.getByRole('button', { name: 'close' }).first().click();
-    await expect(list.getByText(userReader)).toBeVisible();
+    await page.getByRole('button', { name: 'Share' }).click();
 
-    await list
+    const userReaderEmail = await addNewMember(page, 0, 'Reader');
-      .locator('li')
-      .filter({
-        hasText: userReader,
-      })
-      .getByText('delete')
-      .click();
 
-    await expect(list.getByText(userReader)).toBeHidden();
+    const userReader = list.getByTestId(
+      `doc-share-member-row-${userReaderEmail}`,
+    );
+    const userReaderMoreActions = userReader.getByRole('button', {
+      name: 'more_vert',
+    });
 
-    await list
+    await expect(mySelf).toBeVisible();
-      .locator('li')
+    await expect(userOwner).toBeVisible();
-      .filter({
+    await expect(userReader).toBeVisible();
-        hasText: nameMyself,
-      })
-      .getByText('delete')
-      .click();
 
-    await expect(list.getByText(nameMyself)).toBeHidden();
+    await expect(userOwnerMoreActions).toBeVisible();
+    await expect(userReaderMoreActions).toBeVisible();
+    await expect(mySelfMoreActions).toBeVisible();
 
+    await userReaderMoreActions.click();
+    await page.getByRole('button', { name: 'Delete' }).click();
+    await expect(userReader).toBeHidden();
+
+    await mySelfMoreActions.click();
+    await page.getByRole('button', { name: 'Delete' }).click();
     await expect(
-      page.getByText('The member has been removed from the document').first(),
+      page.getByText('You do not have permission to perform this action.'),
     ).toBeVisible();
-
-    await expect(
-      page.getByRole('heading', { name: 'Share', level: 3 }),
-    ).toBeHidden();
   });
 });

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

@@ -36,35 +36,31 @@ test.describe('Doc Visibility', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const selectVisibility = page.getByRole('combobox', {
+    const selectVisibility = page.getByLabel('Visibility', { exact: true });
-      name: 'Visibility',
-    });
 
-    await expect(selectVisibility.getByText('Restricted')).toBeVisible();
+    await expect(selectVisibility.getByText('Private')).toBeVisible();
 
     await expect(page.getByLabel('Read only')).toBeHidden();
     await expect(page.getByLabel('Can read and edit')).toBeHidden();
 
     await selectVisibility.click();
     await page
-      .getByRole('option', {
+      .getByRole('button', {
-        name: 'Authenticated',
+        name: 'Connected',
       })
       .click();
 
-    await expect(page.getByLabel('Read only')).toBeVisible();
+    await expect(page.getByLabel('Visibility mode')).toBeVisible();
-    await expect(page.getByLabel('Can read and edit')).toBeVisible();
 
     await selectVisibility.click();
 
     await page
-      .getByRole('option', {
+      .getByRole('button', {
         name: 'Public',
       })
       .click();
 
-    await expect(page.getByLabel('Read only')).toBeVisible();
+    await expect(page.getByLabel('Visibility mode')).toBeVisible();
-    await expect(page.getByLabel('Can read and edit')).toBeVisible();
   });
 });
 
@@ -143,7 +139,9 @@ test.describe('Doc Visibility: Restricted', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const inputSearch = page.getByLabel(/Find a member to add to the document/);
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Quick search input',
+    });
 
     const otherBrowser = browsersName.find((b) => b !== browserName);
     const username = `user@${otherBrowser}.e2e`;
@@ -151,14 +149,11 @@ test.describe('Doc Visibility: Restricted', () => {
     await page.getByRole('option', { name: username }).click();
 
     // Choose a role
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
+    const container = page.getByTestId('doc-share-add-member-list');
-    await page.getByRole('option', { name: 'Administrator' }).click();
+    await container.getByLabel('doc-role-dropdown').click();
+    await page.getByRole('button', { name: 'Administrator' }).click();
 
-    await page.getByRole('button', { name: 'Validate' }).click();
+    await page.getByRole('button', { name: 'Invite' }).click();
-
-    await expect(
-      page.getByText(`User ${username} added to the document.`),
-    ).toBeVisible();
 
     await page.locator('.c__modal__backdrop').click({
       position: { x: 0, y: 0 },
@@ -201,14 +196,11 @@ test.describe('Doc Visibility: Public', () => {
     await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
-    await page
+    const selectVisibility = page.getByLabel('Visibility', { exact: true });
-      .getByRole('combobox', {
+    await selectVisibility.click();
-        name: 'Visibility',
-      })
-      .click();
 
     await page
-      .getByRole('option', {
+      .getByRole('button', {
         name: 'Public',
       })
       .click();
@@ -217,15 +209,18 @@ test.describe('Doc Visibility: Public', () => {
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
-    await page.getByLabel('Read only').click();
+    await page.getByLabel('Visibility mode').click();
+    await page
+      .getByRole('button', {
+        name: 'Reading',
+      })
+      .click();
 
     await expect(
       page.getByText('The document visibility has been updated.').first(),
     ).toBeVisible();
 
-    await page.locator('.c__modal__backdrop').click({
+    await page.getByRole('button', { name: 'close' }).click();
-      position: { x: 0, y: 0 },
-    });
 
     const cardContainer = page.getByLabel(
       'It is the card information about the document.',
@@ -251,9 +246,10 @@ test.describe('Doc Visibility: Public', () => {
 
     await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
     await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
-    await expect(
+    const card = page.getByLabel('It is the card information');
-      page.getByText('Read only, you cannot edit this document'),
+    await expect(card).toBeVisible();
-    ).toBeVisible();
+
+    await expect(card.getByText('Reader')).toBeVisible();
   });
 
   test('It checks a public doc in editable mode', async ({
@@ -268,14 +264,11 @@ test.describe('Doc Visibility: Public', () => {
     await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
-    await page
+    const selectVisibility = page.getByLabel('Visibility', { exact: true });
-      .getByRole('combobox', {
+    await selectVisibility.click();
-        name: 'Visibility',
-      })
-      .click();
 
     await page
-      .getByRole('option', {
+      .getByRole('button', {
         name: 'Public',
       })
       .click();
@@ -284,15 +277,14 @@ test.describe('Doc Visibility: Public', () => {
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
-    await page.getByLabel('Can read and edit').click();
+    await page.getByLabel('Visibility mode').click();
+    await page.getByLabel('Edition').click();
 
     await expect(
       page.getByText('The document visibility has been updated.').first(),
     ).toBeVisible();
 
-    await page.locator('.c__modal__backdrop').click({
+    await page.getByRole('button', { name: 'close' }).click();
-      position: { x: 0, y: 0 },
-    });
 
     const cardContainer = page.getByLabel(
       'It is the card information about the document.',
@@ -318,9 +310,6 @@ test.describe('Doc Visibility: Public', () => {
 
     await verifyDocName(page, docTitle);
     await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
-    await expect(
-      page.getByText('Read only, you cannot edit this document'),
-    ).toBeHidden();
   });
 });
 
@@ -344,14 +333,11 @@ test.describe('Doc Visibility: Authenticated', () => {
     await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
+    const selectVisibility = page.getByLabel('Visibility', { exact: true });
+    await selectVisibility.click();
     await page
-      .getByRole('combobox', {
+      .getByRole('button', {
-        name: 'Visibility',
+        name: 'Connected',
-      })
-      .click();
-    await page
-      .getByRole('option', {
-        name: 'Authenticated',
       })
       .click();
 
@@ -359,9 +345,7 @@ test.describe('Doc Visibility: Authenticated', () => {
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
-    await page.locator('.c__modal__backdrop').click({
+    await page.getByRole('button', { name: 'close' }).click();
-      position: { x: 0, y: 0 },
-    });
 
     const urlDoc = page.url();
 
@@ -396,14 +380,11 @@ test.describe('Doc Visibility: Authenticated', () => {
     await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
+    const selectVisibility = page.getByLabel('Visibility', { exact: true });
+    await selectVisibility.click();
     await page
-      .getByRole('combobox', {
+      .getByRole('button', {
-        name: 'Visibility',
+        name: 'Connected',
-      })
-      .click();
-    await page
-      .getByRole('option', {
-        name: 'Authenticated',
       })
       .click();
 
@@ -411,9 +392,7 @@ test.describe('Doc Visibility: Authenticated', () => {
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
-    await page.locator('.c__modal__backdrop').click({
+    await page.getByRole('button', { name: 'close' }).click();
-      position: { x: 0, y: 0 },
-    });
 
     const urlDoc = page.url();
 
@@ -430,19 +409,13 @@ test.describe('Doc Visibility: Authenticated', () => {
 
     await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
     await page.getByRole('button', { name: 'Share' }).click();
-    await expect(
-      page.getByText('Read only, you cannot edit this document'),
-    ).toBeVisible();
 
-    const shareModal = page.getByLabel('Share modal');
+    await expect(selectVisibility).toBeHidden();
 
-    await expect(
+    const inputSearch = page.getByRole('combobox', {
-      shareModal.getByRole('combobox', {
+      name: 'Quick search input',
-        name: 'Visibility',
+    });
-      }),
+    await expect(inputSearch).toBeHidden();
-    ).toHaveAttribute('disabled');
-    await expect(shareModal.getByText('Search by email')).toBeHidden();
-    await expect(shareModal.getByLabel('List members card')).toBeHidden();
   });
 
   test('It checks a authenticated doc in editable mode', async ({
@@ -462,14 +435,11 @@ test.describe('Doc Visibility: Authenticated', () => {
     await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
+    const selectVisibility = page.getByLabel('Visibility', { exact: true });
+    await selectVisibility.click();
     await page
-      .getByRole('combobox', {
+      .getByRole('button', {
-        name: 'Visibility',
+        name: 'Connected',
-      })
-      .click();
-    await page
-      .getByRole('option', {
-        name: 'Authenticated',
       })
       .click();
 
@@ -477,23 +447,15 @@ test.describe('Doc Visibility: Authenticated', () => {
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
-    await page.locator('.c__modal__backdrop').click({
-      position: { x: 0, y: 0 },
-    });
-
     const urlDoc = page.url();
-
+    await page.getByLabel('Visibility mode').click();
-    await page.getByRole('button', { name: 'Share' }).click();
+    await page.getByLabel('Edition').click();
-
-    await page.getByLabel('Can read and edit').click();
 
     await expect(
       page.getByText('The document visibility has been updated.').first(),
     ).toBeVisible();
 
-    await page.locator('.c__modal__backdrop').click({
+    await page.getByRole('button', { name: 'close' }).click();
-      position: { x: 0, y: 0 },
-    });
 
     await page
       .getByRole('button', {
@@ -508,18 +470,12 @@ test.describe('Doc Visibility: Authenticated', () => {
 
     await verifyDocName(page, docTitle);
     await page.getByRole('button', { name: 'Share' }).click();
-    await expect(
-      page.getByText('Read only, you cannot edit this document'),
-    ).toBeHidden();
 
-    const shareModal = page.getByLabel('Share modal');
+    await expect(selectVisibility).toBeHidden();
 
-    await expect(
+    const inputSearch = page.getByRole('combobox', {
-      shareModal.getByRole('combobox', {
+      name: 'Quick search input',
-        name: 'Visibility',
+    });
-      }),
+    await expect(inputSearch).toBeHidden();
-    ).toHaveAttribute('disabled');
-    await expect(shareModal.getByText('Search by email')).toBeHidden();
-    await expect(shareModal.getByLabel('List members card')).toBeHidden();
   });
 });