✅(frontend) add e2e test for onboarding modal

Ensure onboarding entrypoint and modal navigation work end-to-end.
2026-03-13 17:22:54 +01:00
parent 6c493c24d5
commit 9e313e30a7
2 changed files with 114 additions and 4 deletions
@@ -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();
  });

@@ -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();
+    });
+  });
+});