feat: visionneuse XLSX - ruban groupe, onglets permanents et badges d'etat #154

tests/frontend/xlsx-viewer.test.mjs

@@ -718,6 +718,88 @@ await test("two windows in a row walk the whole sheet", async () => {
   assert.equal(area.querySelector(".xlsx-load-more").classList.contains("done"), true);
 });
 
+// ── #154-A1 — command bar, sheet tabs, status pills ─────────────────────────
+
+await test("a single-sheet workbook still shows its tab and a + button", () => {
+  const area = mount();
+  assert.ok(area.querySelector(".xlsx-tabs"), "the tab strip is always rendered");
+  assert.equal(area.querySelectorAll(".xlsx-tab").length, 1);
+  const add = area.querySelector("#xlsx-tab-add");
+  assert.ok(add, "the + button is present for an editable sheet");
+  assert.equal(add.getAttribute("title"), FR["xlsx.tabs_add_sheet"]);
+});
+
+await test("a csv shows no tab strip and no + button", () => {
+  const area = document.getElementById("content-area");
+  area.innerHTML = "";
+  renderXlsxViewer(area, {
+    vault: "V", path: "data.csv", is_csv: true,
+    xlsx_sheets: [{ name: "Feuille1", html: sheetHtml("100") }],
+    xlsx_lossy_features: [],
+  });
+  assert.equal(area.querySelector(".xlsx-tabs"), null);
+  assert.equal(area.querySelector("#xlsx-tab-add"), null);
+});
+
+await test("the + button adds a sheet through the structure endpoint", async () => {
+  const area = mount();
+  const realPrompt = globalThis.prompt;
+  globalThis.prompt = () => "Feuille 2";
+  apiQueue.push({ ok: true, status: 200, body: { status: "ok" } }); // PUT
+  apiQueue.push({
+    ok: true, status: 200,
+    body: { is_xlsx: true, vault: "V", path: "data.xlsx", xlsx_sheets: [{ name: "Feuille 2", html: sheetHtml("neuf") }], xlsx_lossy_features: [] },
+  }); // re-read
+  area.querySelector("#xlsx-tab-add").click();
+  await new Promise((r) => setTimeout(r, 5));
+  globalThis.prompt = realPrompt;
+  assert.equal(calls.length, 2);
+  assert.match(calls[0].url, /\/xlsx\/structure\?path=data\.xlsx/);
+  assert.deepEqual(calls[0].body.actions, [{ op: "sheet_add", name: "Feuille 2" }]);
+  assert.equal(area.querySelector('td[data-cell="A1"]')?.textContent, "neuf");
+});
+
+await test("a read-only workbook shows the read-only pill and offers no editing", () => {
+  const area = document.getElementById("content-area");
+  area.innerHTML = "";
+  renderXlsxViewer(area, {
+    vault: "V", path: "data.xls", is_xlsx: true, xlsx_readonly: true,
+    xlsx_sheets: [{ name: "Feuille1", html: sheetHtml("100") }],
+    xlsx_lossy_features: [],
+  });
+  const pill = area.querySelector(".xlsx-status-readonly");
+  assert.ok(pill, "read-only pill");
+  assert.ok(pill.textContent.includes(FR["xlsx.readonly_badge"]), pill.textContent);
+  assert.equal(area.querySelector("#xlsx-tab-add"), null, "no + for read-only");
+  assert.equal(area.querySelector("#xlsx-structure-btn"), null, "no structure for read-only");
+  assert.equal(area.querySelector('td[data-cell="A1"]').getAttribute("contenteditable"), null, "cells are not editable");
+});
+
+await test("the formulas-not-recalculated pill is shown for xlsx but not csv", () => {
+  const area = mount();
+  const pill = area.querySelector(".xlsx-status-formula");
+  assert.ok(pill, "formula pill on xlsx");
+  assert.ok(pill.textContent.includes(FR["xlsx.formulas_note"]), pill.textContent);
+
+  const csvArea = document.getElementById("content-area");
+  csvArea.innerHTML = "";
+  renderXlsxViewer(csvArea, {
+    vault: "V", path: "data.csv", is_csv: true,
+    xlsx_sheets: [{ name: "Feuille1", html: sheetHtml("100") }],
+    xlsx_lossy_features: [],
+  });
+  assert.equal(csvArea.querySelector(".xlsx-status-formula"), null);
+});
+
+await test("the command bar exposes grouped actions with a primary save", () => {
+  const area = mount();
+  assert.ok(area.querySelector(".xlsx-cmdbar"), "grouped command bar");
+  assert.ok(area.querySelector('#xlsx-save-btn').classList.contains("xlsx-save-primary"));
+  assert.ok(area.querySelector(".xlsx-cmd-group[data-group='formulas']"));
+  assert.ok(area.querySelector(".xlsx-cmd-group[data-group='insert']"));
+  assert.ok(area.querySelector(".xlsx-cmd-group[data-group='file']"));
+});
+
 // ── Report ──────────────────────────────────────────────────────────────────
 console.log(`\n${passCount}/${testCount} tests passed\n`);
 process.exit(passCount === testCount ? 0 : 1);