74 lines
2.8 KiB
JavaScript
74 lines
2.8 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');
|
|
// The floating button only shows once a file is open (and not on the
|
|
// dashboard), so it cannot cover the assistant's send button.
|
|
await expect(enter).toBeHidden();
|
|
|
|
await page.evaluate(() => window.TabManager.open('TestVault', 'note1.md'));
|
|
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);
|
|
});
|
|
});
|