feat: en-tete allege, compte utilisateur en sidebar et pellicule d'images defilable (molette + fleches) #112

2026-09-23 21:06:41 -04:00
parent b926f01b85
commit a726ad8511
21 changed files with 563 additions and 53 deletions
@@ -0,0 +1,67 @@
+/**
+ * E2E — Header allégé + section compte en bas de la sidebar (#112).
+ *
+ * Le premier test s'exécute partout ; le second (section compte) nécessite
+ * l'authentification activée et se marque `skip` sinon (job CI e2e, serveur
+ * local `run-e2e-local` en auth désactivée). Pour le valider manuellement,
+ * lancer Playwright contre l'instance Docker de test (auth active) :
+ *
+ *   BASE_URL=http://localhost:2020 OBSIGATE_PASS=test123 \
+ *     npx playwright test tests/e2e/header-sidebar.spec.js --project=chromium-desktop
+ */
+
+import { test, expect } from '@playwright/test';
+
+const BASE = process.env.BASE_URL || 'http://localhost:2029';
+
+const CREDS = {
+  username: process.env.OBSIGATE_USER || 'admin',
+  password: process.env.OBSIGATE_PASS || 'test123',
+};
+
+async function login(page) {
+  await page.goto(BASE);
+  const loginForm = page.locator('#login-screen');
+  await expect(loginForm).toBeVisible({ timeout: 5000 }).catch(() => {});
+  if (await loginForm.isVisible()) {
+    await page.fill('#login-username', CREDS.username);
+    await page.fill('#login-password', CREDS.password);
+    await page.click('#login-btn');
+  }
+  await page.waitForFunction(() => window.__OBSIGATE_BOOTED === true, { timeout: 20000 });
+}
+
+async function authEnabled(page) {
+  return page.evaluate(async () => {
+    try {
+      const r = await fetch('/api/auth/status');
+      const d = await r.json();
+      return !!d.auth_enabled;
+    } catch {
+      return false;
+    }
+  });
+}
+
+test.describe('Header allégé + compte en sidebar (#112)', () => {
+  test('le header ne porte plus utilisateur/version/déconnexion ; la version est dans le menu Options', async ({ page }) => {
+    await login(page);
+
+    await expect(page.locator('.header-right #user-menu')).toHaveCount(0);
+    await expect(page.locator('#logout-btn')).toHaveCount(0);
+    await expect(page.locator('.header-right > .version-badge')).toHaveCount(0);
+
+    await page.locator('#header-menu-btn').click();
+    await expect(page.locator('#header-menu-dropdown #version-badge')).toBeVisible();
+  });
+
+  test('le compte est affiché en bas de la sidebar (auth active)', async ({ page }) => {
+    await login(page);
+    test.skip(!(await authEnabled(page)), 'auth disabled in this environment');
+
+    await expect(page.locator('#sidebar-user')).toBeVisible();
+    await expect(page.locator('#sidebar-user-name')).not.toBeEmpty();
+    await expect(page.locator('#sidebar-user-role')).not.toBeEmpty();
+    await expect(page.locator('#sidebar-user-logout')).toBeVisible();
+  });
+});
@@ -159,4 +159,31 @@ test.describe('Image viewer — zoom / pan / navigation (#108)', () => {
    await expect(container).toHaveAttribute('data-inplace', '1');
    await expect(page.locator('#content-area .image-counter')).toContainText('/');
  });
+
+  test('la pellicule est défilable (molette + flèches latérales) sans changer d\'image (#112)', async ({ page }) => {
+    await login(page);
+    await openFile(page, 'TestVault', 'sample-image.png');
+
+    const nav = page.locator('#content-area .image-nav');
+    const strip = page.locator('#content-area .image-nav-strip');
+    await expect(strip).toBeVisible({ timeout: 10000 });
+    await expect(nav).toBeAttached();
+
+    // Les deux flèches de défilement existent (translucides, révélées au survol).
+    const prev = page.locator('#content-area .image-strip-arrow-prev');
+    const next = page.locator('#content-area .image-strip-arrow-next');
+    await expect(prev).toBeAttached();
+    await expect(next).toBeAttached();
+    await expect
+      .poll(() => next.evaluate((el) => getComputedStyle(el).opacity))
+      .not.toBe('1'); // au repos, la flèche n'est pas pleinement visible
+
+    // Faire défiler la pellicule ne change PAS l'image courante.
+    const title = page.locator('#content-area .image-title');
+    const before = await title.innerText();
+    await next.hover();
+    await next.click();
+    await prev.click();
+    await expect(title).toHaveText(before);
+  });
 });