Files
ObsiGate/tests/e2e/mobile-editor.spec.js
T
bruno 45be3125de
CI / lint (push) Successful in 1m3s
CI / security (push) Successful in 46s
CI / test (push) Successful in 2m43s
CI / build (push) Successful in 38s
CI / e2e (push) Successful in 11m12s
Desktop Build / build-windows (push) Canceled after 0s
Desktop Build / build-linux (push) Canceled after 0s
feat(mobile): editeur mobile natif - interface tactile optimisee (#69)
Barre d'outils Markdown flottante (gras/italique/code/liste/lien) sur la selection CodeMirror, bouton Coller persistant (contournement iOS), zoom par pincement + hauteur ajustable persistes, raccourcis swipe (gauche -> liens entrants, droite -> table des matieres), mode lecture plein ecran avec navigation entre fichiers du dossier. 22 tests JSDOM + spec E2E mobile. Docs: fiche feature, CHANGELOG, ROADMAP, guide i18n FR/EN, README.
2026-09-11 23:51:16 -04:00

69 lines
2.5 KiB
JavaScript

/**
* E2E tests for the native mobile editor UX (ROADMAP #69).
*
* Runs only under the `chromium-mobile` Playwright project (viewport ≤ 768px);
* skipped on the desktop project that the CI job executes.
*
* Prerequisites:
* cd tests/e2e && npm install && npx playwright install chromium
*
* Run:
* npx playwright test tests/e2e/mobile-editor.spec.js --project=chromium-mobile
*/
import { test, expect } from '@playwright/test';
const MOBILE_MAX_WIDTH = 768;
async function boot(page) {
await page.goto('/');
// Auth may be disabled (test env) or a session may already exist.
await page
.waitForSelector('#app:not(.hidden)', { timeout: 15000 })
.catch(() => {});
await page.waitForTimeout(500);
}
test.describe('Mobile editor (#69)', () => {
test('reading mode button toggles the distraction-free class', async ({ page, viewport }) => {
test.skip((viewport?.width ?? 0) > MOBILE_MAX_WIDTH, 'Mobile viewport required');
await boot(page);
const enter = page.locator('#me-reading-btn');
await expect(enter).toBeVisible();
await enter.click();
await expect(page.locator('body')).toHaveClass(/reading-mode/);
await expect(page.locator('.header')).toBeHidden();
await page.locator('#me-reading-exit').click();
await expect(page.locator('body')).not.toHaveClass(/reading-mode/);
});
test('editor modal exposes the floating formatting toolbar', async ({ page, viewport }) => {
test.skip((viewport?.width ?? 0) > MOBILE_MAX_WIDTH, 'Mobile viewport required');
await boot(page);
// Force the editor modal open — the toolbar visibility is pure CSS.
await page.evaluate(() => document.getElementById('editor-modal').classList.add('active'));
const toolbar = page.locator('#me-toolbar');
await expect(toolbar).toBeVisible();
for (const action of ['bold', 'italic', 'code', 'list', 'link']) {
await expect(page.locator('#me-fmt-' + action)).toBeVisible();
}
await expect(page.locator('#me-paste')).toBeVisible();
});
test('font zoom buttons persist the editor font size', async ({ page, viewport }) => {
test.skip((viewport?.width ?? 0) > MOBILE_MAX_WIDTH, 'Mobile viewport required');
await boot(page);
await page.evaluate(() => document.getElementById('editor-modal').classList.add('active'));
await page.locator('#me-font-plus').click();
await page.locator('#me-font-plus').click();
const stored = await page.evaluate(() => localStorage.getItem('obsigate-editor-font-size'));
expect(Number(stored)).toBeGreaterThan(13.5);
});
});