From 4f4c8905ff80f514cd6e2299a353b3276fc4c95c Mon Sep 17 00:00:00 2001 From: Nathan Panchout Date: Mon, 16 Dec 2024 10:21:28 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=85(frontend)=20update=20tests?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Enhanced test coverage for document sharing, member roles, and visibility settings --- .../apps/e2e/__tests__/app-impress/common.ts | 14 +- .../__tests__/app-impress/doc-editor.spec.ts | 15 +- .../__tests__/app-impress/doc-header.spec.ts | 88 +++--- .../app-impress/doc-member-create.spec.ts | 266 +++++++----------- .../app-impress/doc-member-list.spec.ts | 207 +++++++------- .../app-impress/doc-visibility.spec.ts | 166 ++++------- 6 files changed, 302 insertions(+), 454 deletions(-) diff --git a/src/frontend/apps/e2e/__tests__/app-impress/common.ts b/src/frontend/apps/e2e/__tests__/app-impress/common.ts index 017001c8..7e1c7ff5 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/common.ts +++ b/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.getByRole('option', { name: role }).click(); - await page.getByRole('button', { name: 'Validate' }).click(); - - await expect( - page.getByText(`User ${users[index].email} added to the document.`), - ).toBeVisible(); + await page.getByLabel('doc-role-dropdown').click(); + await page.getByRole('button', { name: role }).click(); + await page.getByRole('button', { name: 'Invite' }).click(); return users[index].email; }; diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts index 2e8c41d7..aaf1e6b7 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts +++ b/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', { - name: 'Visibility', - }); + const selectVisibility = page.getByLabel('Visibility', { exact: true }); // 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', { - name: 'Authenticated', + .getByRole('button', { + name: 'Connected', }) .click(); @@ -274,9 +272,10 @@ test.describe('Doc Editor', () => { await goToGridDoc(page); - await expect( - page.getByText('Read only, you cannot edit this document.'), - ).toBeVisible(); + const card = page.getByLabel('It is the card information'); + await expect(card).toBeVisible(); + + await expect(card.getByText('Reader')).toBeVisible(); }); test('it adds an image to the doc editor', async ({ page, browserName }) => { diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts index 66b10ba1..ff2cee26 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts +++ b/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( - shareModal.getByRole('combobox', { - name: 'Visibility', - }), - ).not.toHaveAttribute('disabled'); - await expect(shareModal.getByText('Search by email')).toBeVisible(); + await expect(page.getByPlaceholder('Type a name or 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' }), - ).toBeEnabled(); - await expect( - invitationCard.getByRole('button', { + page.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' }), - ).toBeEnabled(); + memberCard.getByText('test@accesses.test').first(), + ).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( - shareModal.getByRole('combobox', { - name: 'Visibility', - }), - ).toHaveAttribute('disabled'); - await expect(shareModal.getByText('Search by email')).toBeHidden(); + await expect(page.getByPlaceholder('Type a name or 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' }), - ).toHaveAttribute('disabled'); - await expect( - invitationCard.getByRole('button', { - name: 'delete', - }), + invitationCard.getByRole('button', { name: 'more_vert' }), ).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' }), - ).toHaveAttribute('disabled'); - await expect( - memberCard.getByRole('button', { - name: 'delete', - }), + memberCard.getByRole('button', { name: 'more_vert' }), ).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( - shareModal.getByRole('combobox', { - name: 'Visibility', - }), - ).toHaveAttribute('disabled'); - await expect(shareModal.getByText('Search by email')).toBeHidden(); + await expect(page.getByPlaceholder('Type a name or 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' }), - ).toHaveAttribute('disabled'); - await expect( - invitationCard.getByRole('button', { - name: 'delete', - }), + invitationCard.getByRole('button', { name: 'more_vert' }), ).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' }), - ).toHaveAttribute('disabled'); - await expect( - memberCard.getByRole('button', { - name: 'delete', - }), + memberCard.getByRole('button', { name: 'more_vert' }), ).toBeHidden(); }); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts index 8450b6f3..c316fc39 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts +++ b/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(); - - // 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(); + await quickSearchContent.getByText(email).click(); + await expect(list.getByText(email)).toBeVisible(); // Check roles are displayed - await page.getByRole('combobox', { name: /Choose a role/ }).click(); - - await expect(page.getByRole('option', { name: 'Reader' })).toBeVisible(); - await expect(page.getByRole('option', { name: 'Editor' })).toBeVisible(); + await list.getByLabel('doc-role-dropdown').click(); + await expect(page.getByRole('button', { name: 'Reader' })).toBeVisible(); + await expect(page.getByRole('button', { 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 ({ - page, - browserName, - }) => { - const responsePromiseSearchUser = page.waitForResponse( - (response) => - response.url().includes('/users/?q=user') && response.status() === 200, - ); + // Validate + await page.getByRole('button', { name: 'Administrator' }).click(); + await page.getByRole('button', { name: 'Invite' }).click(); - await createDoc(page, 'user-invitation', browserName, 1); - - await page.getByRole('button', { name: 'Share' }).click(); - - const inputSearch = page.getByLabel(/Find a member to add to the document/); - - 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 invitation added + await expect( + quickSearchContent.getByText('Pending invitations'), + ).toBeVisible(); + await expect(quickSearchContent.getByText(email).first()).toBeVisible(); // 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(); - await page.getByRole('option', { name: 'Owner' }).click(); + const container = page.getByTestId('doc-share-add-member-list'); + 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: '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(); 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 page.getByRole('option', { name: 'Owner' }).click(); + await container.getByLabel('doc-role-dropdown').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( - /Trouver un membre à ajouter au 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: /Choisissez un rôle/ }).click(); - await page.getByRole('option', { name: 'Administrateur' }).click(); + const container = page.getByTestId('doc-share-add-member-list'); + 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(); - await page.getByRole('option', { name: 'Administrator' }).click(); + const container = page.getByTestId('doc-share-add-member-list'); + 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 li = listInvitation.locator('li').filter({ - hasText: email, - }); - await expect(li.getByText(email)).toBeVisible(); + const listInvitation = page.getByTestId('doc-share-quick-search'); + const userInvitation = listInvitation.getByTestId( + `doc-share-invitation-row-${email}`, + ); + await expect(userInvitation).toBeVisible(); - await li.getByRole('combobox', { name: /Role/ }).click(); - await li.getByRole('option', { name: 'Reader' }).click(); - await expect(page.getByText(`The role has been updated.`)).toBeVisible(); - await li.getByText('delete').click(); - await expect( - page.getByText(`The invitation has been removed.`), - ).toBeVisible(); - await expect(listInvitation.locator('li').getByText(email)).toBeHidden(); + await userInvitation.getByLabel('doc-role-dropdown').click(); + await page.getByRole('button', { name: 'Reader' }).click(); + + const moreActions = userInvitation.getByRole('button', { + name: 'more_vert', + }); + await moreActions.click(); + + await page.getByRole('button', { name: 'Delete' }).click(); + + await expect(userInvitation).toBeHidden(); }); }); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts index fba63bb0..51b6a3db 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts +++ b/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, - next: 'http://anything/?page=2', + count: 40, + 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'); - await expect(list.locator('li')).toHaveCount(20); - await list.getByText(`impress@impress.world-page-${1}-18`).hover(); - const loadMoreButton = page - .getByLabel('List members card') - .getByRole('button', { name: 'arrow_downward Load more' }); - await loadMoreButton.scrollIntoViewIfNeeded(); - await waitForElementCount(list.locator('li'), 21, 10000); + const prefix = 'doc-share-member-row'; + const elements = page.locator(`[data-testid^="${prefix}"]`); + const loadMore = page.getByTestId('load-more-members'); - expect(await list.locator('li').count()).toBeGreaterThan(20); - await expect(list.getByText(`Impress World Page 1-16`)).toBeVisible(); - await expect( - list.getByText(`impress@impress.world-page-1-16`), - ).toBeVisible(); - await expect(list.getByText(`Impress World Page 2-15`)).toBeVisible(); - await expect( - list.getByText(`impress@impress.world-page-2-15`), - ).toBeVisible(); + await expect(elements).toHaveCount(20); + await expect(page.getByText(`Impress World Page 1-16`)).toBeVisible(); + + await loadMore.click(); + await expect(elements).toHaveCount(40); + await expect(page.getByText(`Impress World Page 2-15`)).toBeVisible(); + + await expect(loadMore).toBeHidden(); }); 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, - next: 'http://anything/?page=2', + count: 40, + 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 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(elements).toHaveCount(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.getByLabel('List members card').locator('ul'); - - await expect(list.getByText(`user@${browserName}.e2e`)).toBeVisible(); - - const soleOwner = list.getByText( + const list = page.getByTestId('doc-share-quick-search'); + await expect(list).toBeVisible(); + const currentUser = list.getByTestId( + `doc-share-member-row-user@chromium.e2e`, + ); + 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(); - - await expect(soleOwner).toBeHidden(); - - const otherOwner = list.getByText( + const otherOwner = page.getByText( `You cannot update the role or remove other owner.`, ); + await newUserRoles.click(); await expect(otherOwner).toBeVisible(); + await list.click(); - const SelectRoleCurrentUser = list - .locator('li') - .filter({ - hasText: `user@${browserName}.e2e`, - }) - .getByRole('combobox', { name: 'Role' }); + await currentUserRole.click(); + await page.getByRole('button', { name: 'Administrator' }).click(); + await list.click(); + await expect(currentUserRole).toBeVisible(); - await SelectRoleCurrentUser.click(); - await page.getByRole('option', { name: 'Administrator' }).click(); - await expect(page.getByText('The role has been updated')).toBeVisible(); - - 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'); + await currentUserRole.click(); + await page.getByRole('button', { name: 'Reader' }).click(); + await list.click(); + await expect(currentUserRole).toBeHidden(); }); 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`; - await expect(list.getByText(nameMyself)).toBeVisible(); + const emailMyself = `user@${browserName}.e2e`; + const mySelf = list.getByTestId(`doc-share-member-row-${emailMyself}`); + const mySelfMoreActions = mySelf.getByRole('button', { name: 'more_vert' }); - const userOwner = await addNewMember(page, 0, 'Owner'); - await expect(list.getByText(userOwner)).toBeVisible(); + const userOwnerEmail = await addNewMember(page, 0, 'Owner'); + 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 expect(list.getByText(userReader)).toBeVisible(); + await page.getByRole('button', { name: 'close' }).first().click(); + await page.getByRole('button', { name: 'Share' }).click(); - await list - .locator('li') - .filter({ - hasText: userReader, - }) - .getByText('delete') - .click(); + const userReaderEmail = await addNewMember(page, 0, 'Reader'); - 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 - .locator('li') - .filter({ - hasText: nameMyself, - }) - .getByText('delete') - .click(); + await expect(mySelf).toBeVisible(); + await expect(userOwner).toBeVisible(); + await expect(userReader).toBeVisible(); - 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(); }); }); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts index c5a0cc77..c41ff81d 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts +++ b/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', { - name: 'Visibility', - }); + const selectVisibility = page.getByLabel('Visibility', { exact: true }); - 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', { - name: 'Authenticated', + .getByRole('button', { + name: 'Connected', }) .click(); - await expect(page.getByLabel('Read only')).toBeVisible(); - await expect(page.getByLabel('Can read and edit')).toBeVisible(); + await expect(page.getByLabel('Visibility mode')).toBeVisible(); await selectVisibility.click(); await page - .getByRole('option', { + .getByRole('button', { name: 'Public', }) .click(); - await expect(page.getByLabel('Read only')).toBeVisible(); - await expect(page.getByLabel('Can read and edit')).toBeVisible(); + await expect(page.getByLabel('Visibility mode')).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(); - await page.getByRole('option', { name: 'Administrator' }).click(); + const container = page.getByTestId('doc-share-add-member-list'); + await container.getByLabel('doc-role-dropdown').click(); + await page.getByRole('button', { name: 'Administrator' }).click(); - await page.getByRole('button', { name: 'Validate' }).click(); - - await expect( - page.getByText(`User ${username} added to the document.`), - ).toBeVisible(); + await page.getByRole('button', { name: 'Invite' }).click(); 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 - .getByRole('combobox', { - name: 'Visibility', - }) - .click(); + const selectVisibility = page.getByLabel('Visibility', { exact: true }); + await selectVisibility.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({ - position: { x: 0, y: 0 }, - }); + await page.getByRole('button', { name: 'close' }).click(); 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( - page.getByText('Read only, you cannot edit this document'), - ).toBeVisible(); + const card = page.getByLabel('It is the card information'); + await expect(card).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 - .getByRole('combobox', { - name: 'Visibility', - }) - .click(); + const selectVisibility = page.getByLabel('Visibility', { exact: true }); + await selectVisibility.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({ - position: { x: 0, y: 0 }, - }); + await page.getByRole('button', { name: 'close' }).click(); 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', { - name: 'Visibility', - }) - .click(); - await page - .getByRole('option', { - name: 'Authenticated', + .getByRole('button', { + name: 'Connected', }) .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({ - position: { x: 0, y: 0 }, - }); + await page.getByRole('button', { name: 'close' }).click(); 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', { - name: 'Visibility', - }) - .click(); - await page - .getByRole('option', { - name: 'Authenticated', + .getByRole('button', { + name: 'Connected', }) .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({ - position: { x: 0, y: 0 }, - }); + await page.getByRole('button', { name: 'close' }).click(); 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( - shareModal.getByRole('combobox', { - name: 'Visibility', - }), - ).toHaveAttribute('disabled'); - await expect(shareModal.getByText('Search by email')).toBeHidden(); - await expect(shareModal.getByLabel('List members card')).toBeHidden(); + const inputSearch = page.getByRole('combobox', { + name: 'Quick search input', + }); + await expect(inputSearch).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', { - name: 'Visibility', - }) - .click(); - await page - .getByRole('option', { - name: 'Authenticated', + .getByRole('button', { + name: 'Connected', }) .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.getByRole('button', { name: 'Share' }).click(); - - 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({ - position: { x: 0, y: 0 }, - }); + await page.getByRole('button', { name: 'close' }).click(); 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( - shareModal.getByRole('combobox', { - name: 'Visibility', - }), - ).toHaveAttribute('disabled'); - await expect(shareModal.getByText('Search by email')).toBeHidden(); - await expect(shareModal.getByLabel('List members card')).toBeHidden(); + const inputSearch = page.getByRole('combobox', { + name: 'Quick search input', + }); + await expect(inputSearch).toBeHidden(); }); });