feat(api,ai): #72 OpenAPI 3.1 enrichie + fiabilisation de l'outil AI UI

API (#72): - backend/openapi_docs.py: 18 tags documentes, assignation auto par prefixe, securite bearerAuth/cookieAuth, erreurs 401/403/404/422/500, exemples, page /api autonome (liens /docs, /redoc, /openapi.json) - backend/schemas.py: response_model Pydantic pour ~35 endpoints sans modele - main.py: FastAPI enrichi + override app.openapi; routes /api et /api/ - ai_routes/bookslm_routes: response_model + doc SSE - frontend: entree 'API' du menu (i18n FR/EN) - tests/test_openapi.py (58 tests) AI UI: - BooksLM: requetes authentifiees (AuthManager), parsing SSE {token}/error, message utilisateur correct (plus le placeholder vide), barre de contexte - AI Editor: Ctrl/Cmd+J lie une seule fois, libelles i18n, modale de reecriture accessible a la place de window.prompt() - tests/frontend/ai.test.mjs (7 tests) + CI
2026-09-11 01:40:21 -04:00
parent 75ef597ece
commit 62023acd4d
18 changed files with 2001 additions and 154 deletions
@@ -0,0 +1,239 @@
+#!/usr/bin/env node
+/**
+ * ObsiGate - JSDOM integration tests for the AI tooling (#72 / AI UX).
+ *
+ * Covers the regressions fixed for the AI editor toolbar and BooksLM:
+ *   - custom-rewrite modal replaces window.prompt()
+ *   - Ctrl/Cmd+J inline-completion shortcut is bound exactly once
+ *   - BooksLM sends the user message (not the empty placeholder) and parses
+ *     the `{token}` SSE frames streamed by the backend
+ *   - BooksLM uses the authenticated request helper
+ *
+ * Usage: node tests/frontend/ai.test.mjs
+ */
+
+import { strict as assert } from "node:assert";
+import { JSDOM } from "jsdom";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import path from "node:path";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const JS_DIR = path.resolve(__dirname, "..", "..", "frontend", "js");
+
+// ── JSDOM bootstrap ────────────────────────────────────────────────────────
+const dom = new JSDOM(
+  `<!DOCTYPE html>
+<html>
+<body>
+  <div id="editor-modal" class="active"></div>
+  <div id="ai-toolbar-container"></div>
+</body>
+</html>`,
+  { url: "http://localhost/", pretendToBeVisual: true }
+);
+
+const w = dom.window;
+globalThis.window = w;
+globalThis.document = w.document;
+globalThis.HTMLElement = w.HTMLElement;
+globalThis.Element = w.Element;
+globalThis.Node = w.Node;
+globalThis.Event = w.Event;
+globalThis.CustomEvent = w.CustomEvent;
+globalThis.KeyboardEvent = w.KeyboardEvent;
+globalThis.MessageEvent = w.MessageEvent;
+globalThis.localStorage = w.localStorage;
+globalThis.sessionStorage = w.sessionStorage;
+Object.defineProperty(globalThis, "navigator", {
+  value: w.navigator,
+  configurable: true,
+  writable: true,
+});
+globalThis.MutationObserver = w.MutationObserver;
+globalThis.getComputedStyle = w.getComputedStyle.bind(w);
+globalThis.requestAnimationFrame = (cb) => setTimeout(cb, 0);
+globalThis.cancelAnimationFrame = (id) => clearTimeout(id);
+
+// ── Test harness ───────────────────────────────────────────────────────────
+let testCount = 0;
+let passCount = 0;
+
+async function test(name, fn) {
+  testCount++;
+  try {
+    await fn();
+    console.log(`  \u2713 ${name}`);
+    passCount++;
+  } catch (e) {
+    console.log(`  \u2717 ${name}`);
+    console.log(`      ${e.message}`);
+  }
+}
+
+function freshToolbarContainer() {
+  const container = document.createElement("div");
+  container.id = "ai-toolbar-container";
+  document.body.appendChild(container);
+  return container;
+}
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+// ── Main ───────────────────────────────────────────────────────────────────
+async function main() {
+  // A minimal fetch mock: AI status reports one available provider and
+  // inline-complete counts how many times it was invoked.
+  let inlineCompleteCalls = 0;
+  globalThis.fetch = async (url) => {
+    const u = String(url);
+    if (u.includes("/api/ai/status")) {
+      return { ok: true, status: 200, json: async () => ({ configured: true, providers: { deepseek: { available: true, model: "deepseek-chat" } } }) };
+    }
+    if (u.includes("/api/config/ai-models")) {
+      return { ok: true, status: 200, json: async () => ({ models: ["deepseek-chat"], source: "fallback" }) };
+    }
+    if (u.includes("/api/ai/inline-complete")) {
+      inlineCompleteCalls++;
+      return { ok: true, status: 200, json: async () => ({ result: "complété", provider: "deepseek" }) };
+    }
+    return { ok: true, status: 200, json: async () => ({}) };
+  };
+
+  const ai = await import(pathToFileURL(path.join(JS_DIR, "ai.js")).href);
+  const bookslmMod = await import(pathToFileURL(path.join(JS_DIR, "bookslm.js")).href);
+  const { BooksLM } = bookslmMod;
+
+  // ── 1. Rewrite modal resolves with the typed instruction ──
+  await test("rewrite modal returns the typed instruction on confirm", async () => {
+    const promise = ai._promptRewriteInstruction();
+    const overlay = document.querySelector(".ai-modal-overlay");
+    assert.ok(overlay, "modal overlay should be rendered");
+    const input = overlay.querySelector(".ai-modal-input");
+    input.value = "Rends le ton plus formel";
+    overlay.querySelector(".ai-modal-ok").click();
+    const result = await promise;
+    assert.equal(result, "Rends le ton plus formel");
+    assert.equal(document.querySelector(".ai-modal-overlay"), null, "overlay removed");
+  });
+
+  // ── 2. Rewrite modal cancels on Escape ──
+  await test("rewrite modal returns null on Escape", async () => {
+    const promise = ai._promptRewriteInstruction();
+    document.dispatchEvent(new w.KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    const result = await promise;
+    assert.equal(result, null);
+  });
+
+  // ── 3. Ctrl+J inline completion fires exactly once after multiple toolbar builds ──
+  await test("Ctrl+J shortcut is bound once across toolbar re-creations", async () => {
+    const view = {
+      state: {
+        selection: { main: { from: 0, to: 5 } },
+        doc: { toString: () => "hello", sliceString: () => "hello" },
+      },
+      dispatch: () => {},
+    };
+    inlineCompleteCalls = 0;
+    await ai.createAIToolbar(freshToolbarContainer(), () => view);
+    await ai.createAIToolbar(freshToolbarContainer(), () => view);
+
+    document.dispatchEvent(new w.KeyboardEvent("keydown", { key: "j", ctrlKey: true, bubbles: true }));
+    await sleep(20);
+    assert.equal(inlineCompleteCalls, 1, `expected 1 inline-complete call, got ${inlineCompleteCalls}`);
+  });
+
+  // ── 4. BooksLM sends the user message and parses {token} SSE frames ──
+  await test("BooksLM streams assistant tokens and sends the user message", async () => {
+    const sse =
+      'event: message\ndata: {"token":"Bonjour le monde","provider":"deepseek","model":"deepseek-chat"}\n\n' +
+      "event: done\ndata: {}\n\n";
+
+    let capturedBody = null;
+    const encoder = new TextEncoder();
+    const chunks = [encoder.encode(sse)];
+    const reader = {
+      read: async () => (chunks.length ? { done: false, value: chunks.shift() } : { done: true }),
+    };
+    globalThis.fetch = async (url, opts) => {
+      if (String(url).includes("/api/ai/bookslm/chat")) {
+        capturedBody = JSON.parse(opts.body);
+        return { ok: true, status: 200, body: { getReader: () => reader } };
+      }
+      return { ok: true, status: 200, json: async () => ({}) };
+    };
+
+    const panel = document.createElement("div");
+    panel.innerHTML = `
+      <div class="bookslm-suggestions"></div>
+      <div class="bookslm-messages"></div>
+      <textarea></textarea>
+      <button class="bookslm-btn-send"></button>`;
+    document.body.appendChild(panel);
+
+    const b = new BooksLM();
+    b._panel = panel;
+    b._vault = "TestVault";
+    b._directory = "notes";
+    b._contextFiles = [{ path: "notes/a.md" }];
+    panel.querySelector("textarea").value = "Résume ce dossier";
+
+    await b._sendMessage();
+
+    const assistant = b._messages[b._messages.length - 1];
+    assert.equal(assistant.role, "assistant");
+    assert.equal(assistant.content, "Bonjour le monde", "assistant token should be rendered");
+    assert.equal(capturedBody.message, "Résume ce dossier", "current user message must be sent");
+    assert.equal(capturedBody.vault, "TestVault");
+    assert.deepEqual(capturedBody.conversation_history, [], "history excludes the current message");
+    panel.remove();
+  });
+
+  // ── 5. Source guards: no window.prompt() and authenticated BooksLM ──
+  await test("ai.js no longer uses window.prompt()", async () => {
+    const { readFileSync } = await import("node:fs");
+    const raw = readFileSync(path.join(JS_DIR, "ai.js"), "utf-8");
+    const code = raw.replace(/\/\*[\s\S]*?\*\//g, "").split("\n").map((l) => l.replace(/\/\/.*$/, "")).join("\n");
+    assert.ok(!/\bprompt\s*\(/.test(code), "ai.js should not call prompt()");
+    assert.ok(code.includes("_promptRewriteInstruction"), "rewrite modal helper present");
+  });
+
+  await test("bookslm.js uses the authenticated API helper", async () => {
+    const { readFileSync } = await import("node:fs");
+    const src = readFileSync(path.join(JS_DIR, "bookslm.js"), "utf-8");
+    assert.ok(/import\s*\{[^}]*AuthManager[^}]*\}\s*from\s*['"]\.\/auth\.js['"]/.test(src), "AuthManager imported");
+    assert.ok(src.includes("data.token"), "SSE token field parsed");
+  });
+
+  // ── 6. Every t() key used by the AI tooling exists in FR and EN ──
+  await test("AI/BooksLM i18n keys exist in fr.json and en.json", async () => {
+    const { readFileSync } = await import("node:fs");
+    const localesDir = path.resolve(JS_DIR, "..", "locales");
+    const fr = JSON.parse(readFileSync(path.join(localesDir, "fr.json"), "utf-8"));
+    const en = JSON.parse(readFileSync(path.join(localesDir, "en.json"), "utf-8"));
+
+    const keys = new Set();
+    for (const file of ["ai.js", "bookslm.js"]) {
+      const src = readFileSync(path.join(JS_DIR, file), "utf-8");
+      for (const m of src.matchAll(/\bt\(\s*['"]([a-z0-9_.]+)['"]/g)) {
+        keys.add(m[1]);
+      }
+    }
+    assert.ok(keys.size > 20, "should discover AI translation keys");
+    const missingFr = [...keys].filter((k) => !(k in fr));
+    const missingEn = [...keys].filter((k) => !(k in en));
+    assert.deepEqual(missingFr, [], `missing FR keys: ${missingFr.join(", ")}`);
+    assert.deepEqual(missingEn, [], `missing EN keys: ${missingEn.join(", ")}`);
+  });
+
+  // ── Summary ──
+  console.log(`\n${passCount}/${testCount} tests passed`);
+  if (passCount !== testCount) {
+    process.exit(1);
+  }
+}
+
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});