ObsiGate/tests/frontend/ai.test.mjs

#!/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);
});