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 810eced6..7f5fbfa0 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 @@ -292,16 +292,25 @@ test.describe('Doc Tree', () => { const selectedSubDoc = await getTreeRow(page, docChild); await expect(selectedSubDoc).toHaveAttribute('aria-selected', 'true'); - const resizeHandle = page.locator('[data-panel-resize-handle-id]').first(); - await expect(resizeHandle).toBeVisible(); - await selectedSubDoc.focus(); await expect(selectedSubDoc).toBeFocused(); await page.keyboard.press('Tab'); - await expect(resizeHandle).toBeFocused(); + + await expect(page.getByLabel('Open onboarding menu')).toBeFocused(); + + await page.keyboard.press('Tab'); + + await expect( + page.locator('[data-panel-resize-handle-id]').first(), + ).toBeFocused(); await page.keyboard.press('Shift+Tab'); + + await expect(page.getByLabel('Open onboarding menu')).toBeFocused(); + + await page.keyboard.press('Shift+Tab'); + await expect(selectedSubDoc).toBeFocused(); }); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/help.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/help.spec.ts new file mode 100644 index 00000000..2d503237 --- /dev/null +++ b/src/frontend/apps/e2e/__tests__/app-impress/help.spec.ts @@ -0,0 +1,101 @@ +import { expect, test } from '@playwright/test'; + +import { overrideConfig } from './utils-common'; + +test.describe('Help feature', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/'); + }); + + test.describe('Onboarding modal', () => { + test('Help menu not displayed if onboarding is disabled', async ({ + page, + }) => { + await overrideConfig(page, { + theme_customization: { + onboarding: { + enabled: false, + }, + }, + }); + + await expect(page.getByRole('button', { name: 'New doc' })).toBeVisible(); + + await expect( + page.getByRole('button', { name: 'Open onboarding menu' }), + ).toBeHidden(); + }); + + test('opens onboarding modal from help menu and can navigate/close', async ({ + page, + }) => { + await overrideConfig(page, { + theme_customization: { + onboarding: { + enabled: true, + learn_more_url: 'https://example.com/learn-more', + }, + }, + }); + + await page.getByRole('button', { name: 'Open onboarding menu' }).click(); + + await page.getByRole('menuitem', { name: 'Onboarding' }).click(); + + const modal = page.getByTestId('onboarding-modal'); + await expect(modal).toBeVisible(); + + await expect(page.getByTestId('onboarding-step-0')).toHaveAttribute( + 'tabindex', + '0', + ); + + await page.getByTestId('onboarding-next').click(); + await expect(page.getByTestId('onboarding-step-1')).toHaveAttribute( + 'tabindex', + '0', + ); + + await page.getByTestId('onboarding-step-2').click(); + await expect(page.getByTestId('onboarding-step-2')).toHaveAttribute( + 'tabindex', + '0', + ); + + await page.getByTestId('onboarding-step-3').click(); + await expect(page.getByTestId('onboarding-step-3')).toHaveAttribute( + 'tabindex', + '0', + ); + + const learnMoreLink = page.getByRole('link', { + name: 'Learn more docs features', + }); + await expect(learnMoreLink).toHaveAttribute( + 'href', + 'https://example.com/learn-more', + ); + await learnMoreLink.click(); + + await page.getByRole('button', { name: /understood|compris/i }).click(); + await expect(modal).toBeHidden(); + }); + + test('closes modal with Skip button', async ({ page }) => { + await page.getByRole('button', { name: 'Open onboarding menu' }).click(); + await page.getByRole('menuitem', { name: 'Onboarding' }).click(); + + const modal = page.getByTestId('onboarding-modal'); + await expect(modal).toBeVisible(); + + await expect( + page.getByRole('link', { + name: 'Learn more docs features', + }), + ).toBeHidden(); + + await page.getByRole('button', { name: /skip/i }).click(); + await expect(modal).toBeHidden(); + }); + }); +});