Change segment view to allow for infinite scroll within a book

Author: alex-rawlings-yyc

cspell.json

@@ -38,12 +38,16 @@
     "morphosyntactic",
     "nums",
     "okina",
+    "overscan",
     "papi",
     "paranext",
     "paratext",
     "pdpf",
     "plusplus",
     "punct",
+    "recentered",
+    "recentering",
+    "recenters",
     "relayout",
     "sandboxed",
     "scriptio",
@@ -54,6 +58,7 @@
     "Stylesheet",
     "typedefs",
     "unhover",
+    "unobserves",
     "unphrased",
     "unreviewed",
     "unsub",

jest.config.ts

@@ -108,7 +108,11 @@ const config: Config = {
   modulePathIgnorePatterns: ['<rootDir>/dist'],
 
   /** Load @testing-library/jest-dom matchers and browser API stubs for React component tests. */
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.resize-observer.js', '<rootDir>/jest.setup.ts'],
+  setupFilesAfterEnv: [
+    '<rootDir>/jest.setup.resize-observer.js',
+    '<rootDir>/jest.setup.intersection-observer.js',
+    '<rootDir>/jest.setup.ts',
+  ],
 
   /** Use jsdom for React component tests; parser tests run fine in jsdom (no DOM use). */
   testEnvironment: 'jsdom',

jest.setup.intersection-observer.js

@@ -0,0 +1,42 @@
+/* eslint-disable no-underscore-dangle */
+// jsdom does not implement IntersectionObserver; stub it so hooks that use it don't throw.
+// Plain JS to avoid TypeScript/ESLint restrictions on type assertions and class rules.
+//
+// The stub records every constructed observer and the elements it observes on `global.ioInstances`
+// so tests can drive intersections deterministically. `triggerIntersection(el, isIntersecting)`
+// finds the observer watching `el` and invokes its callback with a minimal entry.
+global.ioInstances = [];
+
+global.IntersectionObserver = function IntersectionObserver(callback, options) {
+  const targets = new Set();
+  const instance = {
+    callback,
+    options,
+    targets,
+    observe(el) {
+      targets.add(el);
+    },
+    unobserve(el) {
+      targets.delete(el);
+    },
+    disconnect() {
+      targets.clear();
+      const i = global.ioInstances.indexOf(instance);
+      if (i !== -1) global.ioInstances.splice(i, 1);
+    },
+    takeRecords() {
+      return [];
+    },
+  };
+  global.ioInstances.push(instance);
+  return instance;
+};
+
+// Fires an intersection for `el` on whichever observer is watching it.
+global.triggerIntersection = function triggerIntersection(el, isIntersecting) {
+  global.ioInstances.forEach((instance) => {
+    if (instance.targets.has(el)) {
+      instance.callback([{ target: el, isIntersecting }], instance);
+    }
+  });
+};