diff --git a/CHANGELOG.md b/CHANGELOG.md index a21793b07c..9ebdfd4074 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to - ⚡️(frontend) improve accessibility: - #1248 - #1235 + - #1275 - #1255 - #1262 - #1244 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 41098f2526..15dec9b734 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 @@ -93,7 +93,7 @@ test.describe('Doc Editor', () => { await page.getByRole('button', { name: 'Share' }).click(); - const selectVisibility = page.getByLabel('Visibility', { exact: true }); + const selectVisibility = page.getByTestId('doc-visibility'); // When the visibility is changed, the ws should close the connection (backend signal) const wsClosePromise = webSocket.waitForEvent('close'); @@ -561,7 +561,7 @@ test.describe('Doc Editor', () => { await page.getByRole('button', { name: 'Share' }).click(); - await page.getByLabel('Visibility', { exact: true }).click(); + await page.getByTestId('doc-visibility').click(); await page .getByRole('menuitem', { @@ -573,7 +573,7 @@ test.describe('Doc Editor', () => { page.getByText('The document visibility has been updated.'), ).toBeVisible(); - await page.getByLabel('Visibility mode').click(); + await page.getByTestId('doc-access-mode').click(); await page.getByRole('menuitem', { name: 'Editing' }).click(); // Close the modal @@ -655,7 +655,7 @@ test.describe('Doc Editor', () => { await page.getByRole('button', { name: 'Share' }).click(); - await page.getByLabel('Visibility mode').click(); + await page.getByTestId('doc-access-mode').click(); await page.getByRole('menuitem', { name: 'Reading' }).click(); // Close the modal 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 a1542353bf..e7b2a20148 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 @@ -30,7 +30,7 @@ test.describe('Doc Header', () => { await page.getByRole('button', { name: 'Share' }).click(); - await page.getByLabel('Visibility', { exact: true }).click(); + await page.getByTestId('doc-visibility').click(); await page .getByRole('menuitem', { diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts index ad2bea5a77..a3d52c16c5 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts @@ -259,6 +259,10 @@ test.describe('Doc Tree: Inheritance', () => { test.use({ storageState: { cookies: [], origins: [] } }); test('A child inherit from the parent', async ({ page, browserName }) => { + // test.slow() to extend timeout since this scenario chains Keycloak login + redirects, + // doc creation/navigation and async doc-tree loading (/documents/:id/tree), which can exceed 30s (especially in CI). + test.slow(); + await page.goto('/'); await keyCloakSignIn(page, browserName); @@ -271,7 +275,7 @@ test.describe('Doc Tree: Inheritance', () => { await verifyDocName(page, docParent); await page.getByRole('button', { name: 'Share' }).click(); - const selectVisibility = page.getByLabel('Visibility', { exact: true }); + const selectVisibility = page.getByTestId('doc-visibility'); await selectVisibility.click(); await page @@ -307,6 +311,7 @@ test.describe('Doc Tree: Inheritance', () => { await expect(page.locator('h2').getByText(docChild)).toBeVisible(); const docTree = page.getByTestId('doc-tree'); + await expect(docTree).toBeVisible({ timeout: 10000 }); await expect(docTree.getByText(docParent)).toBeVisible(); }); }); 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 25bf4b8bbe..eca0a0197e 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 @@ -41,7 +41,7 @@ test.describe('Doc Visibility', () => { await page.getByRole('button', { name: 'Share' }).click(); - const selectVisibility = page.getByLabel('Visibility', { exact: true }); + const selectVisibility = page.getByTestId('doc-visibility'); await expect(selectVisibility.getByText('Private')).toBeVisible(); @@ -51,13 +51,13 @@ test.describe('Doc Visibility', () => { await selectVisibility.click(); await page.getByLabel('Connected').click(); - await expect(page.getByLabel('Visibility mode')).toBeVisible(); + await expect(page.getByTestId('doc-access-mode')).toBeVisible(); await selectVisibility.click(); await page.getByLabel('Public', { exact: true }).click(); - await expect(page.getByLabel('Visibility mode')).toBeVisible(); + await expect(page.getByTestId('doc-access-mode')).toBeVisible(); }); }); @@ -205,7 +205,7 @@ test.describe('Doc Visibility: Public', () => { await verifyDocName(page, docTitle); await page.getByRole('button', { name: 'Share' }).click(); - const selectVisibility = page.getByLabel('Visibility', { exact: true }); + const selectVisibility = page.getByTestId('doc-visibility'); await selectVisibility.click(); await page @@ -218,8 +218,8 @@ test.describe('Doc Visibility: Public', () => { page.getByText('The document visibility has been updated.'), ).toBeVisible(); - await expect(page.getByLabel('Visibility mode')).toBeVisible(); - await page.getByLabel('Visibility mode').click(); + await expect(page.getByTestId('doc-access-mode')).toBeVisible(); + await page.getByTestId('doc-access-mode').click(); await page .getByRole('menuitem', { name: 'Reading', @@ -289,7 +289,7 @@ test.describe('Doc Visibility: Public', () => { await verifyDocName(page, docTitle); await page.getByRole('button', { name: 'Share' }).click(); - const selectVisibility = page.getByLabel('Visibility', { exact: true }); + const selectVisibility = page.getByTestId('doc-visibility'); await selectVisibility.click(); await page @@ -302,7 +302,7 @@ test.describe('Doc Visibility: Public', () => { page.getByText('The document visibility has been updated.'), ).toBeVisible(); - await page.getByLabel('Visibility mode').click(); + await page.getByTestId('doc-access-mode').click(); await page.getByLabel('Editing').click(); await expect( @@ -358,7 +358,7 @@ test.describe('Doc Visibility: Authenticated', () => { await verifyDocName(page, docTitle); await page.getByRole('button', { name: 'Share' }).click(); - const selectVisibility = page.getByLabel('Visibility', { exact: true }); + const selectVisibility = page.getByTestId('doc-visibility'); await selectVisibility.click(); await page .getByRole('menuitem', { @@ -410,7 +410,7 @@ test.describe('Doc Visibility: Authenticated', () => { await verifyDocName(page, docTitle); await page.getByRole('button', { name: 'Share' }).click(); - const selectVisibility = page.getByLabel('Visibility', { exact: true }); + const selectVisibility = page.getByTestId('doc-visibility'); await selectVisibility.click(); await page .getByRole('menuitem', { @@ -495,6 +495,7 @@ test.describe('Doc Visibility: Authenticated', () => { page, browserName, }) => { + test.slow(); await page.goto('/'); await keyCloakSignIn(page, browserName); @@ -508,7 +509,7 @@ test.describe('Doc Visibility: Authenticated', () => { await verifyDocName(page, docTitle); await page.getByRole('button', { name: 'Share' }).click(); - const selectVisibility = page.getByLabel('Visibility', { exact: true }); + const selectVisibility = page.getByTestId('doc-visibility'); await selectVisibility.click(); await page .getByRole('menuitem', { @@ -521,7 +522,7 @@ test.describe('Doc Visibility: Authenticated', () => { ).toBeVisible(); const urlDoc = page.url(); - await page.getByLabel('Visibility mode').click(); + await page.getByTestId('doc-access-mode').click(); await page.getByLabel('Editing').click(); await expect( @@ -539,13 +540,17 @@ test.describe('Doc Visibility: Authenticated', () => { const otherBrowser = BROWSERS.find((b) => b !== browserName); await keyCloakSignIn(page, otherBrowser!); - await expect(page.getByTestId('header-logo-link')).toBeVisible(); + await expect(page.getByTestId('header-logo-link')).toBeVisible({ + timeout: 10000, + }); await page.goto(urlDoc); await verifyDocName(page, docTitle); await page.getByRole('button', { name: 'Share' }).click(); await page.getByRole('button', { name: 'Copy link' }).click(); - await expect(page.getByText('Link Copied !')).toBeVisible(); + await expect(page.getByText('Link Copied !')).toBeVisible({ + timeout: 10000, + }); }); }); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/utils-share.ts b/src/frontend/apps/e2e/__tests__/app-impress/utils-share.ts index 535f7aae9a..f815d37963 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/utils-share.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/utils-share.ts @@ -45,7 +45,7 @@ export const updateShareLink = async ( linkReach: LinkReach, linkRole?: LinkRole | null, ) => { - await page.getByRole('button', { name: 'Visibility', exact: true }).click(); + await page.getByTestId('doc-visibility').click(); await page.getByRole('menuitem', { name: linkReach }).click(); const visibilityUpdatedText = page @@ -55,9 +55,7 @@ export const updateShareLink = async ( await expect(visibilityUpdatedText).toBeVisible(); if (linkRole) { - await page - .getByRole('button', { name: 'Visibility mode', exact: true }) - .click(); + await page.getByTestId('doc-access-mode').click(); await page.getByRole('menuitem', { name: linkRole }).click(); await expect(visibilityUpdatedText).toBeVisible(); } diff --git a/src/frontend/apps/impress/src/components/DropButton.tsx b/src/frontend/apps/impress/src/components/DropButton.tsx index 0232616701..9f50d41d0e 100644 --- a/src/frontend/apps/impress/src/components/DropButton.tsx +++ b/src/frontend/apps/impress/src/components/DropButton.tsx @@ -48,6 +48,7 @@ export interface DropButtonProps { isOpen?: boolean; onOpenChange?: (isOpen: boolean) => void; label?: string; + testId?: string; } export const DropButton = ({ @@ -57,6 +58,7 @@ export const DropButton = ({ onOpenChange, children, label, + testId, }: PropsWithChildren) => { const { themeTokens } = useCunninghamTheme(); const font = themeTokens['font']?.['families']['base']; @@ -79,6 +81,7 @@ export const DropButton = ({ ref={triggerRef} onPress={() => onOpenChangeHandler(true)} aria-label={label} + data-testid={testId} $css={css` font-family: ${font}; ${buttonCss}; diff --git a/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx b/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx index 207c962dd0..55101d4da8 100644 --- a/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx +++ b/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx @@ -38,6 +38,7 @@ export type DropdownMenuProps = { topMessage?: string; selectedValues?: string[]; afterOpenChange?: (isOpen: boolean) => void; + testId?: string; }; export const DropdownMenu = ({ @@ -52,6 +53,7 @@ export const DropdownMenu = ({ topMessage, afterOpenChange, selectedValues, + testId, }: PropsWithChildren) => { const { spacingsTokens, colorsTokens } = useCunninghamTheme(); const [isOpen, setIsOpen] = useState(opened ?? false); @@ -100,6 +102,7 @@ export const DropdownMenu = ({ onOpenChange={onOpenChange} label={label} buttonCss={buttonCss} + testId={testId} button={ showArrow ? ( - {!loading && } + {!loading && ( +