feat: chargement à la demande des lignes cachées des tableurs #153

A9bis : sous une feuille tronquée, un pied de page « N lignes affichées
sur M · Charger la suite » fetch la fenêtre suivante (limit=500) au clic
ou à l'approche du bas du tableau (sentinelle de défilement, marge 120px).
Les lignes ajoutées passent par le même pipeline d'édition que le rendu
initial (setupCell factorisé) : éditables et sauvegardables immédiatement.
Fetch échoué → bouton restauré (retry) + toast ; feuille complète → pied
de page masqué (class done).

Vérifié : xlsx-viewer.test.mjs 19/19 (5 nouveaux, contre-preuve
wireLazyRows désactivé → 5 échecs), E2E 8/8 (A520 visible et éditable
après clic), validate-imports 40 modules, unit.test.mjs 12/12, i18n parity.

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <[email protected]>

tests/e2e/xlsx-viewer.spec.js

@@ -210,4 +210,25 @@ test.describe('Excel viewer — troncature et navigation (#153 A8/A9)', () => {
     expect(win.html).toContain('Operation 519');
     expect(win.html).not.toContain('data-cell="A1"');
   });
+
+  test('le bouton « charger la suite » ajoute les lignes cachées (#153 A9bis)', async ({ page }) => {
+    await login(page);
+    await openXlsx(page, LARGE);
+
+    // La ligne 500 est la dernière rendue ; le pied de page l'annonce.
+    const foot = page.locator('#content-area .xlsx-load-more');
+    await expect(foot).toBeVisible();
+    await expect(foot).toContainText('Charger la suite');
+    await expect(page.locator('#content-area td[data-cell="A501"]')).toHaveCount(0);
+
+    // Un clic fetch la suite (offset 500, 20 lignes) et l'insère dans la table.
+    await foot.click();
+    await expect(page.locator('#content-area td[data-cell="A520"]')).toBeVisible({ timeout: 10000 });
+    // Une ligne nouvellement arrivée est éditable comme les autres.
+    const cell = page.locator('#content-area td[data-cell="A520"]');
+    await cell.click();
+    await expect(cell).toBeFocused();
+    // Tout est chargé → le pied de page est masqué.
+    await expect(foot).toBeHidden();
+  });
 });

tests/frontend/xlsx-viewer.test.mjs

@@ -8,6 +8,9 @@
  *         retries with `force: true` (or gives up when refused);
  *  - A4 : the f(x) toggle flips `allow_formula` in the save payload.
  *  - A8 : a sheet bigger than the render caps shows the truncation notice.
+ *  - A9bis : the tail of a truncated sheet is fetched window by window from
+ *         GET …/xlsx/sheet (scroll sentinel + click), and the appended rows are
+ *         editable like the initial ones.
  *
  * Usage: node tests/frontend/xlsx-viewer.test.mjs
  */
@@ -36,6 +39,7 @@ const dom = new JSDOM(
 const w = dom.window;
 globalThis.window = w;
 globalThis.document = w.document;
+globalThis.DOMParser = w.DOMParser;
 globalThis.HTMLElement = w.HTMLElement;
 globalThis.Element = w.Element;
 globalThis.Node = w.Node;
@@ -90,7 +94,11 @@ async function test(name, fn) {
   confirmCalls = 0;
   confirmPrompts = [];
   confirmAnswer = true;
-  nextResponse = () => ({ ok: true, status: 200, body: { status: "ok" } });
+  apiQueue = [];
+  nextResponse = () => {
+    if (apiQueue.length) return apiQueue.shift();
+    return { ok: true, status: 200, body: { status: "ok" } };
+  };
   try {
     await fn();
     console.log(`  ✓ ${name}`);
@@ -117,6 +125,11 @@ const sheetHtml = (value) =>
   `<tr><th class="xlsx-rownum">1</th><td data-cell="A1">${value}</td></tr>` +
   "</tbody></table></div>";
 
+// The JSDOM fetch double serves locale files; everything else is a recorded
+// API call answered by `nextResponse`. `apiQueue` lets a test script the
+// successive windows a lazy-loading sheet will request.
+let apiQueue = [];
+
 function mount({ lossy = [], sheet = {} } = {}) {
   const area = document.getElementById("content-area");
   area.innerHTML = "";
@@ -130,6 +143,13 @@ function mount({ lossy = [], sheet = {} } = {}) {
   return area;
 }
 
+/** Mount a sheet flagged truncated so wireLazyRows() arms the footnote. */
+function mountTruncated({ total = 520, rows = 1 } = {}) {
+  return mount({
+    sheet: { rows, cols: 3, total_rows: total, total_cols: 3, max_rows: 500, max_cols: 40, truncated: total > 500 },
+  });
+}
+
 /** Mark a cell dirty the way a user edit would. */
 function editCell(area, ref, text) {
   const td = area.querySelector(`td[data-cell="${ref}"]`);
@@ -312,6 +332,114 @@ await test("a payload without the dimensions shows no notice", () => {
   assert.ok(!area.textContent.includes("NaN"));
 });
 
+// ── A9bis — lazy loading of the truncated tail ──────────────────────────────
+
+const windowHtml = (from, to) =>
+  '<div class="csv-table-wrapper"><table class="csv-table xlsx-table">' +
+  "<tbody>" +
+  Array.from({ length: to - from + 1 }, (_, i) => {
+    const r = from + i;
+    return `<tr><th class="xlsx-rownum">${r}</th><td data-cell="A${r}">Ligne ${r}</td></tr>`;
+  }).join("") +
+  "</tbody></table></div>";
+
+await test("a truncated sheet gets a load-more footnote, a normal one does not", () => {
+  const truncated = mountTruncated();
+  assert.ok(truncated.querySelector(".xlsx-load-more"), "footnote absent");
+  assert.ok(truncated.querySelector(".xlsx-load-more").textContent.includes(FR["xlsx.load_more"]));
+
+  const plain = mount({ sheet: { rows: 10, cols: 2, total_rows: 10, total_cols: 2, max_rows: 500, max_cols: 40, truncated: false } });
+  assert.equal(plain.querySelector(".xlsx-load-more"), null);
+});
+
+await test("clicking the footnote fetches the next window with the right query", async () => {
+  const area = mountTruncated();
+  apiQueue.push({
+    ok: true,
+    status: 200,
+    body: { sheet: "Feuille1", offset: 1, limit: 500, rows: 2, total_rows: 3, truncated: true, has_more: false, html: windowHtml(2, 3) },
+  });
+  area.querySelector(".xlsx-load-more").click();
+  await new Promise((r) => setTimeout(r, 5));
+  assert.equal(calls.length, 1);
+  assert.match(calls[0].url, /\/api\/file\/V\/xlsx\/sheet\?path=data\.xlsx&sheet=Feuille1&offset=1&limit=500/);
+  // Rows 2 and 3 landed in the table with their real coordinates.
+  assert.ok(area.querySelector('td[data-cell="A2"]'));
+  assert.ok(area.querySelector('td[data-cell="A3"]'));
+  assert.ok(area.querySelector('th.xlsx-rownum') && area.textContent.includes("Ligne 3"));
+  // Everything loaded → the footnote is hidden (kept in the DOM, class `done`).
+  const foot = area.querySelector(".xlsx-load-more");
+  assert.ok(foot, "the footnote element survives");
+  assert.equal(foot.classList.contains("done"), true);
+  assert.ok(!foot.textContent.includes(FR["xlsx.load_more"]), foot.textContent);
+});
+
+await test("appended rows are editable and tracked as dirty", async () => {
+  const area = mountTruncated();
+  apiQueue.push({
+    ok: true,
+    status: 200,
+    body: { sheet: "Feuille1", offset: 1, limit: 500, rows: 1, total_rows: 3, truncated: true, has_more: false, html: windowHtml(2, 2) },
+  });
+  area.querySelector(".xlsx-load-more").click();
+  await new Promise((r) => setTimeout(r, 5));
+  editCell(area, "A2", "modifié");
+  area.querySelector("#xlsx-save-btn").click();
+  await new Promise((r) => setTimeout(r, 5));
+  assert.equal(calls.length, 2, "the save went out");
+  assert.equal(calls[1].url.includes("/xlsx/save"), true);
+  assert.deepEqual(calls[1].body.cells, { A2: "modifié" });
+  assert.equal(calls[1].body.sheet, "Feuille1");
+});
+
+await test("a failed window fetch keeps the footnote and shows an error toast", async () => {
+  const area = mountTruncated();
+  apiQueue.push({ ok: false, status: 500, body: { detail: "boom" } });
+  area.querySelector(".xlsx-load-more").click();
+  await new Promise((r) => setTimeout(r, 5));
+  const foot = area.querySelector(".xlsx-load-more");
+  assert.ok(foot, "footnote must survive a failed fetch");
+  assert.ok(foot.textContent.includes(FR["xlsx.load_more"]), foot.textContent);
+  // `api()` itself toasts the failure (shared behaviour, asserted in E2E);
+  // here we assert the local consequence: the footnote keeps its label.
+  // Retrying works once the server answers again.
+  apiQueue.push({
+    ok: true,
+    status: 200,
+    body: { sheet: "Feuille1", offset: 1, limit: 500, rows: 1, total_rows: 3, truncated: true, has_more: false, html: windowHtml(2, 2) },
+  });
+  foot.click();
+  await new Promise((r) => setTimeout(r, 5));
+  assert.ok(area.querySelector('td[data-cell="A2"]'));
+  assert.equal(area.querySelector(".xlsx-load-more").classList.contains("done"), true);
+});
+
+await test("two windows in a row walk the whole sheet", async () => {
+  const area = mountTruncated({ total: 1200 });
+  apiQueue.push({
+    ok: true,
+    status: 200,
+    body: { sheet: "Feuille1", offset: 1, limit: 500, rows: 500, total_rows: 1200, truncated: true, has_more: true, html: windowHtml(2, 501) },
+  });
+  area.querySelector(".xlsx-load-more").click();
+  await new Promise((r) => setTimeout(r, 5));
+  assert.ok(area.querySelector('td[data-cell="A501"]'));
+  // The footnote still shows, with the updated progress.
+  let foot = area.querySelector(".xlsx-load-more");
+  assert.ok(foot, "more rows remain");
+  assert.ok(foot.textContent.includes("501"), foot.textContent);
+
+  apiQueue.push({
+    ok: true,
+    status: 200,
+    body: { sheet: "Feuille1", offset: 501, limit: 500, rows: 200, total_rows: 1200, truncated: true, has_more: false, html: windowHtml(502, 701) },
+  });
+  foot.click();
+  await new Promise((r) => setTimeout(r, 5));
+  assert.ok(area.querySelector('td[data-cell="A701"]'));
+  assert.equal(area.querySelector(".xlsx-load-more").classList.contains("done"), true);
+});
+
 // ── Report ──────────────────────────────────────────────────────────────────
 console.log(`\n${passCount}/${testCount} tests passed\n`);
 process.exit(passCount === testCount ? 0 : 1);