@internetarchive/bookreader 5.0.0-6-14 → 5.0.0-60

package/tests/jest/BookReader/ModeSmoothZoom.test.js

@@ -0,0 +1,175 @@
+import sinon from 'sinon';
+import { EventTargetSpy } from '../utils.js';
+import { ModeSmoothZoom } from '@/src/BookReader/ModeSmoothZoom.js';
+/** @typedef {import('@/src/BookReader/ModeSmoothZoom.js').SmoothZoomable} SmoothZoomable */
+
+/**
+ * @param {Partial<SmoothZoomable>} overrides
+ * @returns {SmoothZoomable}
+ */
+function dummy_mode(overrides = {}) {
+  return {
+    $container: document.createElement('div'),
+    $visibleWorld: document.createElement('div'),
+    scale: 1,
+    htmlDimensionsCacher: {
+      clientWidth: 100,
+      clientHeight: 100,
+      boundingClientRect: { left: 0, top: 0 },
+    },
+    scaleCenter: {x: 0.5, y: 0.5},
+    ...overrides
+  };
+}
+
+afterEach(() => sinon.restore());
+
+describe('ModeSmoothZoom', () => {
+  test('preventsDefault on iOS-only gesture events', () => {
+    const mode = dummy_mode();
+    const msz = new ModeSmoothZoom(mode);
+    msz.attach();
+    for (const event_name of ['gesturestart', 'gesturechange', 'gestureend']) {
+      const ev = new Event(event_name, {});
+      const prevDefaultSpy = sinon.spy(ev, 'preventDefault');
+      mode.$container.dispatchEvent(ev);
+      expect(prevDefaultSpy.callCount).toBe(1);
+    }
+  });
+
+  test('pinchCancel alias for pinchEnd', () => {
+    const mode = dummy_mode();
+    const msz = new ModeSmoothZoom(mode);
+    const pinchEndSpy = sinon.spy(msz, '_pinchEnd');
+    msz._pinchStart();
+    msz._pinchCancel();
+    expect(pinchEndSpy.callCount).toBe(1);
+  });
+
+  test('sets will-change', async () => {
+    const mode = dummy_mode();
+    const msz = new ModeSmoothZoom(mode);
+    expect(mode.$visibleWorld.style.willChange).toBeFalsy();
+    msz._pinchStart();
+    expect(mode.$visibleWorld.style.willChange).toBe('transform');
+    await msz._pinchEnd();
+    expect(mode.$visibleWorld.style.willChange).toBe('auto');
+  });
+
+  test('pinch move updates scale', () => {
+    const mode = dummy_mode();
+    const msz = new ModeSmoothZoom(mode);
+    // disable buffering
+    msz.bufferFn = (callback) => callback();
+    msz._pinchStart();
+    expect(mode.scale).toBe(1);
+    msz._pinchMove({ scale: 2, center: { x: 0, y: 0 }});
+    expect(mode.scale).toBe(2);
+  });
+
+  test('updateScaleCenter sets scaleCenter in unitless coordinates', () => {
+    const mode = dummy_mode({
+      htmlDimensionsCacher: {
+        clientWidth: 200,
+        clientHeight: 100,
+        boundingClientRect: {
+          left: 5,
+          top: 50
+        }
+      }
+    });
+    const msz = new ModeSmoothZoom(mode);
+    expect(mode.scaleCenter).toEqual({ x: 0.5, y: 0.5 });
+    msz.updateScaleCenter({ clientX: 85, clientY: 110 });
+    expect(mode.scaleCenter).toEqual({ x: 0.4, y: 0.6 });
+  });
+
+  test('detaches all listeners', () => {
+    const mode = dummy_mode();
+    const msz = new ModeSmoothZoom(mode);
+    const containerEventSpy = EventTargetSpy.wrap(mode.$container);
+    const visibleWorldSpy = EventTargetSpy.wrap(mode.$visibleWorld);
+    const hammerEventSpy = new EventTargetSpy();
+    msz.hammer.on = hammerEventSpy.addEventListener.bind(hammerEventSpy);
+    msz.hammer.off = hammerEventSpy.removeEventListener.bind(hammerEventSpy);
+
+    msz.attach();
+    expect(containerEventSpy._totalListenerCount).toBeGreaterThan(0);
+    expect(hammerEventSpy._totalListenerCount).toBeGreaterThan(0);
+
+    msz.detach();
+    expect(containerEventSpy._totalListenerCount).toBe(0);
+    expect(visibleWorldSpy._totalListenerCount).toBe(0);
+    expect(hammerEventSpy._totalListenerCount).toBe(0);
+  });
+
+  test('attach can be called twice without double attachments', () => {
+    const mode = dummy_mode();
+    const msz = new ModeSmoothZoom(mode);
+    const containerEventSpy = EventTargetSpy.wrap(mode.$container);
+    const visibleWorldSpy = EventTargetSpy.wrap(mode.$visibleWorld);
+    const hammerEventSpy = new EventTargetSpy();
+    msz.hammer.on = hammerEventSpy.addEventListener.bind(hammerEventSpy);
+    msz.hammer.off = hammerEventSpy.removeEventListener.bind(hammerEventSpy);
+    msz.attach();
+
+    const containerListenersCount = containerEventSpy._totalListenerCount;
+    const visibleWorldListenersCount = visibleWorldSpy._totalListenerCount;
+    const hammerListenersCount = hammerEventSpy._totalListenerCount;
+
+    msz.attach();
+    expect(containerEventSpy._totalListenerCount).toBe(containerListenersCount);
+    expect(visibleWorldSpy._totalListenerCount).toBe(visibleWorldListenersCount);
+    expect(hammerEventSpy._totalListenerCount).toBe(hammerListenersCount);
+  });
+
+  describe('_handleCtrlWheel', () => {
+    test('non-ctrl wheel events ignored', () => {
+      const mode = dummy_mode();
+      const msz = new ModeSmoothZoom(mode);
+      expect(mode.scale).toBe(1);
+      const ev = new WheelEvent('wheel', { ctrlKey: false, deltaY: 20 });
+      const preventDefaultSpy = sinon.spy(ev, 'preventDefault');
+      msz._handleCtrlWheel(ev);
+      expect(preventDefaultSpy.callCount).toBe(0);
+      expect(mode.scale).toBe(1);
+    });
+
+    test('ctrl-wheel events update scale', () => {
+      const mode = dummy_mode();
+      const msz = new ModeSmoothZoom(mode);
+      expect(mode.scale).toBe(1);
+      const ev = new WheelEvent('wheel', { ctrlKey: true, deltaY: 20 });
+      const preventDefaultSpy = sinon.spy(ev, 'preventDefault');
+      msz._handleCtrlWheel(ev);
+      expect(preventDefaultSpy.callCount).toBe(1);
+      expect(mode.scale).not.toBe(1);
+    });
+  });
+
+  describe("updateViewportOnZoom", () => {
+    test("adjusts scroll position when zooming in", () => {
+      const mode = dummy_mode();
+      const msz = new ModeSmoothZoom(mode);
+      mode.$container.scrollTop = 100;
+      mode.$container.scrollLeft = 100;
+
+      msz.updateViewportOnZoom(2, 1);
+
+      expect(mode.$container.scrollTop).toBeGreaterThan(100);
+      expect(mode.$container.scrollLeft).toBeGreaterThan(100);
+    });
+
+    test("updates scroll position when zooming out", () => {
+      const mode = dummy_mode();
+      const msz = new ModeSmoothZoom(mode);
+      mode.$container.scrollTop = 100;
+      mode.$container.scrollLeft = 100;
+
+      msz.updateViewportOnZoom(0.5, 1);
+
+      expect(mode.$container.scrollTop).toBeLessThan(100);
+      expect(mode.$container.scrollLeft).toBeLessThan(100);
+    });
+  });
+});

package/tests/jest/BookReader/ModeThumb.test.js

@@ -0,0 +1,71 @@
+
+import sinon from 'sinon';
+import BookReader from '@/src/BookReader.js';
+/** @typedef {import('@/src/BookReader/options.js').BookReaderOptions} BookReaderOptions */
+
+beforeAll(() => {
+  global.alert = jest.fn();
+});
+afterEach(() => {
+  jest.restoreAllMocks();
+  sinon.restore();
+});
+
+/** @type {BookReaderOptions['data']} */
+const SAMPLE_DATA = [
+  [
+    { width: 123, height: 123, uri: 'https://archive.org/image0.jpg', pageNum: '1' },
+  ],
+  [
+    { width: 123, height: 123, uri: 'https://archive.org/image1.jpg', pageNum: '2' },
+    { width: 123, height: 123, uri: 'https://archive.org/image2.jpg', pageNum: '3' },
+  ],
+  [
+    { width: 123, height: 123, uri: 'https://archive.org/image3.jpg', pageNum: '4' },
+    { width: 123, height: 123, uri: 'https://archive.org/image4.jpg', pageNum: '5' },
+  ],
+  [
+    { width: 123, height: 123, uri: 'https://archive.org/image5.jpg', pageNum: '6' },
+  ],
+];
+
+describe('zoom', () => {
+  const br = new BookReader({ data: SAMPLE_DATA });
+  br.init();
+
+  test('initializes with default columns', () => {
+    expect(br.thumbColumns).toBe(br.options.thumbColumns);
+  });
+
+  test('removes column and redraws zooming in', () => {
+    const prepare = sinon.spy(br._modes.modeThumb, 'prepare');
+    const startColumns = br.thumbColumns;
+    br._modes.modeThumb.zoom('in');
+    expect(br.thumbColumns).toBe(startColumns - 1);
+    expect(prepare.callCount).toBe(1);
+  });
+
+  test('adds column and redraws zooming out', () => {
+    const prepare = sinon.spy(br._modes.modeThumb, 'prepare');
+    const startColumns = br.thumbColumns;
+    br._modes.modeThumb.zoom('out');
+    expect(br.thumbColumns).toBe(startColumns + 1);
+    expect(prepare.callCount).toBe(1);
+  });
+
+  test('keeps columns and no redraw at zooming in limit', () => {
+    const prepare = sinon.spy(br._modes.modeThumb, 'prepare');
+    br.thumbColumns = br.options.thumbMinZoomColumns;
+    br._modes.modeThumb.zoom('in');
+    expect(br.thumbColumns).toBe(br.options.thumbMinZoomColumns);
+    expect(prepare.callCount).toBe(0);
+  });
+
+  test('keeps columns and no redraw at zooming out limit', () => {
+    const prepare = sinon.spy(br._modes.modeThumb, 'prepare');
+    br.thumbColumns = br.options.thumbMaxZoomColumns;
+    br._modes.modeThumb.zoom('out');
+    expect(br.thumbColumns).toBe(br.options.thumbMaxZoomColumns);
+    expect(prepare.callCount).toBe(0);
+  });
+});

package/tests/{BookReader → jest/BookReader}/Navbar/Navbar.test.js

@@ -1,19 +1,19 @@
 import sinon from 'sinon';
-import { getNavPageNumHtml } from '../../../src/BookReader/Navbar/Navbar.js';
-import BookReader from '../../../src/BookReader.js';
+import { getNavPageNumHtml } from '@/src/BookReader/Navbar/Navbar.js';
+import BookReader from '@/src/BookReader.js';
 
 describe('getNavPageNumHtml', () => {
   const f = getNavPageNumHtml;
   test('handle n-prefixed page numbers', () => {
-    expect(f(3, 40, 'n3', '', 40)).toBe('Page (4 of 40)');
+    expect(f(3, 40, 'n3', '', 40)).toBe('(4 of 40)');
   });
 
   test('handle regular page numbers', () => {
-    expect(f(3, 40, '14', '', 40)).toBe('Page 14 of 40');
+    expect(f(3, 40, '14', '', 40)).toBe('14 of 40');
   });
 
   test('handle no max page', () => {
-    expect(f(3, 40, '14', '', null)).toBe('Page 14');
+    expect(f(3, 40, '14', '', null)).toBe('14');
   });
 });
 
@@ -63,14 +63,14 @@ describe('Navbar slider', () => {
 
   test('on slide change, actual page changes', () => {
     const $slider = navbar.$root.find('.BRpager');
-    const jumpToIndexSpy = sinon.spy(br, 'jumpToIndex');
+    const jumpToIndexStub = sinon.stub(br, 'jumpToIndex');
     expect(br.currentIndex()).toBe(0);
 
     $slider.trigger('slidechange', { value: 3 });
 
     expect(navbar.$root.find('.BRcurrentpage').text().includes('3'));
-    expect(jumpToIndexSpy.callCount).toBe(1);
-    expect(jumpToIndexSpy.args[0][0]).toBe(3);
+    expect(jumpToIndexStub.callCount).toBe(1);
+    expect(jumpToIndexStub.args[0][0]).toBe(3);
   });
 });
 
@@ -97,9 +97,9 @@ describe('Navbar controls overrides', () => {
     const $viewMode = navbar.$root.find('.viewmode');
 
     expect($viewMode.find('.icon-thumb').length).toBe(1);
-    $viewMode.click();
+    $viewMode.trigger("click");
     expect($viewMode.find('.icon-twopg').length).toBe(1);
-    $viewMode.click();
+    $viewMode.trigger("click");
     expect($viewMode.find('.icon-thumb').length).toBe(1);
   });
 

package/tests/{BookReader → jest/BookReader}/PageContainer.test.js

@@ -1,4 +1,4 @@
-import {PageContainer} from '../../src/BookReader/PageContainer.js';
+import {PageContainer, boxToSVGRect, createSVGPageLayer, renderBoxesInPageContainerLayer} from '@/src/BookReader/PageContainer.js';
 
 describe('constructor', () => {
   test('protected books', () => {
@@ -31,7 +31,7 @@ describe('constructor', () => {
   });
 });
 
-describe('update', async () => {
+describe('update', () => {
   test('dimensions sets CSS', () => {
     const pc = new PageContainer(null, {});
     pc.update({ dimensions: { left: 20 } });
@@ -62,17 +62,18 @@ describe('update', async () => {
     expect(pc.$img[0].style.background).toBe('');
   });
 
-  test('removes image between updates', () => {
+  test('removes image between updates only if changed', () => {
     const fakeImageCache = {
       imageLoaded: () => true,
-      image: () => $('<img/>'),
+      image: (index, reduce) => $(`<img src="page${index}-${reduce}.jpg" />`),
     };
     const pc = new PageContainer({index: 12}, {imageCache: fakeImageCache});
     pc.update({ reduce: 7 });
     const $im1 = pc.$img;
     pc.update({ reduce: 7 });
-    const $im2 = pc.$img;
-    expect($im1).not.toBe($im2);
+    expect(pc.$img).toBe($im1);
+    pc.update({ reduce: 16 });
+    expect(pc.$img).not.toBe($im1);
     expect($im1.parent().length).toBe(0);
   });
 
@@ -113,3 +114,84 @@ describe('update', async () => {
     expect(pc.$img.css('background')).toBeFalsy();
   });
 });
+
+describe('createSVGPageLayer', () => {
+  test('Does what it says', () => {
+    const svg = createSVGPageLayer({ width: 100, height: 200}, 'myClass');
+    expect(svg.getAttribute('viewBox')).toBe('0 0 100 200');
+    expect(svg.getAttribute('class')).toContain('myClass');
+  });
+});
+
+describe('boxToSVGRect', () => {
+  test('Does what it says', () => {
+    const rect = boxToSVGRect({ l: 100, r: 200, t: 300, b: 500 });
+    expect(rect.getAttribute('x')).toBe('100');
+    expect(rect.getAttribute('y')).toBe('300');
+    expect(rect.getAttribute('width')).toBe('100');
+    expect(rect.getAttribute('height')).toBe('200');
+  });
+});
+
+describe('renderBoxesInPageContainerLayer', () => {
+  test('Handles missing layer', () => {
+    const container = document.createElement('div');
+    const page = { width: 100, height: 200 };
+    const boxes = [{l: 1, r: 2, t: 3, b: 4}];
+    renderBoxesInPageContainerLayer('foo', boxes, page, container);
+    expect(container.querySelector('.foo')).toBeTruthy();
+    expect(container.querySelectorAll('.foo rect').length).toBe(1);
+  });
+
+  test('Handles existing layer', () => {
+    const container = document.createElement('div');
+    const layer = document.createElement('svg');
+    layer.classList.add('foo');
+    container.append(layer);
+
+    const page = { width: 100, height: 200 };
+    const boxes = [{l: 1, r: 2, t: 3, b: 4}];
+    renderBoxesInPageContainerLayer('foo', boxes, page, container);
+    expect(container.querySelector('.foo')).toBe(layer);
+    expect(container.querySelectorAll('.foo rect').length).toBe(1);
+  });
+
+  test('Adds layer after image if it exists', () => {
+    const container = document.createElement('div');
+    const img = document.createElement('img');
+    img.classList.add('BRpageimage');
+    container.append(img);
+
+    const page = { width: 100, height: 200 };
+    const boxes = [{l: 1, r: 2, t: 3, b: 4}];
+    renderBoxesInPageContainerLayer('foo', boxes, page, container);
+    expect(container.querySelector('.foo')).toBeTruthy();
+    expect(container.children[0].getAttribute('class')).toBe('BRpageimage');
+    expect(container.children[1].getAttribute('class')).toBe('BRPageLayer foo');
+  });
+
+  test('Renders all boxes', () => {
+    const container = document.createElement('div');
+    const page = { width: 100, height: 200 };
+    const boxes = [{l: 1, r: 2, t: 3, b: 4}, {l: 1, r: 2, t: 3, b: 4}, {l: 1, r: 2, t: 3, b: 4}];
+    renderBoxesInPageContainerLayer('foo', boxes, page, container);
+    expect(container.querySelectorAll('.foo rect').length).toBe(3);
+  });
+
+  test('Adds optional classes', () => {
+    const container = document.createElement('div');
+    const page = { width: 100, height: 200 };
+    const boxes = [{l: 1, r: 2, t: 3, b: 4}, {l: 1, r: 2, t: 3, b: 4}, {l: 1, r: 2, t: 3, b: 4}];
+    renderBoxesInPageContainerLayer('foo', boxes, page, container, ['match-1', 'match-2', 'match-3']);
+    const rects = Array.from(container.querySelectorAll('.foo rect'));
+    expect(rects.map(r => r.getAttribute('class'))).toEqual(['match-1', 'match-2', 'match-3']);
+  });
+
+  test('Handles no boxes', () => {
+    const container = document.createElement('div');
+    const page = { width: 100, height: 200 };
+    const boxes = [];
+    renderBoxesInPageContainerLayer('foo', boxes, page, container);
+    expect(container.querySelectorAll('.foo rect').length).toBe(0);
+  });
+});

package/tests/{BookReader → jest/BookReader}/ReduceSet.test.js

@@ -1,4 +1,4 @@
-import {IntegerReduceSet, Pow2ReduceSet} from '../../src/BookReader/ReduceSet.js';
+import {IntegerReduceSet, Pow2ReduceSet} from '@/src/BookReader/ReduceSet.js';
 
 describe('IntegerReduceSet', () => {
   test('floor', () => {

package/tests/{BookReader → jest/BookReader}/Toolbar/Toolbar.test.js

@@ -1,10 +1,10 @@
 import sinon from 'sinon';
 
-import { createPopup } from '../../../src/BookReader/Toolbar/Toolbar.js';
+import { createPopup } from '@/src/BookReader/Toolbar/Toolbar.js';
 
 afterEach(() => {
   sinon.restore();
-})
+});
 
 describe('createPopup', () => {
   test('calls window.open', () => {

package/tests/jest/BookReader/utils/HTMLDimensionsCacher.test.js

@@ -0,0 +1,59 @@
+// @ts-check
+import  sinon from 'sinon';
+import { HTMLDimensionsCacher } from '@/src/BookReader/utils/HTMLDimensionsCacher';
+
+describe('HTMLDimensionsCacher', () => {
+  test('Does not read from element directly', () => {
+    const element = document.createElement('div');
+    const getBoundingClientRectStub = element.getBoundingClientRect = sinon.stub().returns({ top: 10, left: 20 });
+    const clientWidthStub = sinon.stub().returns(300);
+    const clientHeightStub = sinon.stub().returns(500);
+    Object.defineProperty(element, 'clientWidth', { get: clientWidthStub });
+    Object.defineProperty(element, 'clientHeight', { get: clientHeightStub });
+
+    const hdc = new HTMLDimensionsCacher(element);
+    hdc.clientHeight;
+    expect(getBoundingClientRectStub.callCount).toBe(0);
+    expect(clientWidthStub.callCount).toBe(0);
+    expect(clientHeightStub.callCount).toBe(0);
+  });
+
+  test('Read from element when calling update', () => {
+    const element = document.createElement('div');
+    const getBoundingClientRectStub = element.getBoundingClientRect = sinon.stub().returns({ top: 10, left: 20 });
+    const clientWidthStub = sinon.stub().returns(300);
+    const clientHeightStub = sinon.stub().returns(500);
+    Object.defineProperty(element, 'clientWidth', { get: clientWidthStub });
+    Object.defineProperty(element, 'clientHeight', { get: clientHeightStub });
+
+    const hdc = new HTMLDimensionsCacher(element);
+    hdc.updateClientSizes();
+    expect(getBoundingClientRectStub.callCount).toBe(1);
+    expect(clientWidthStub.callCount).toBe(1);
+    expect(clientHeightStub.callCount).toBe(1);
+
+    expect(hdc.boundingClientRect).toEqual({ top: 10, left: 20 });
+    expect(hdc.clientWidth).toBe(300);
+    expect(hdc.clientHeight).toBe(500);
+  });
+
+  test('Does not listen for window resizes when not attached', () => {
+    const element = document.createElement('div');
+    const hdc = new HTMLDimensionsCacher(element);
+    const dummyWindow = new EventTarget();
+    const debouncedUpdateSpy = sinon.spy(hdc, 'debouncedUpdateClientSizes');
+
+    dummyWindow.dispatchEvent(new Event('resize', {}));
+    expect(debouncedUpdateSpy.callCount).toBe(0);
+
+    hdc.attachResizeListener(dummyWindow);
+
+    dummyWindow.dispatchEvent(new Event('resize', {}));
+    expect(debouncedUpdateSpy.callCount).toBe(1);
+
+    hdc.detachResizeListener(dummyWindow);
+
+    dummyWindow.dispatchEvent(new Event('resize', {}));
+    expect(debouncedUpdateSpy.callCount).toBe(1);
+  });
+});

package/tests/jest/BookReader/utils/ScrollClassAdder.test.js

@@ -0,0 +1,49 @@
+// @ts-check
+import  sinon from 'sinon';
+import { ScrollClassAdder } from '@/src/BookReader/utils/ScrollClassAdder';
+
+describe('ScrollClassAdder', () => {
+  test('Does not attach during construction', () => {
+    const element = document.createElement('div');
+    const attachSpy = sinon.spy(ScrollClassAdder.prototype, 'attach');
+    new ScrollClassAdder(element, 'foo');
+    expect(attachSpy.callCount).toBe(0);
+  });
+
+  test('Attach/detach call correct methods', () => {
+    const el = document.createElement('div');
+    const addEventListenerSpy = sinon.spy(el, 'addEventListener');
+    const removeEventListenerSpy = sinon.spy(el, 'removeEventListener');
+    const sca = new ScrollClassAdder(el, 'foo');
+    expect(addEventListenerSpy.callCount).toBe(0);
+    sca.attach();
+    expect(addEventListenerSpy.callCount).toBe(1);
+    sca.detach();
+    expect(removeEventListenerSpy.callCount).toBe(1);
+  });
+
+  test('onScroll adds class at right time', () => {
+    const clock = sinon.useFakeTimers();
+    const el = document.createElement('div');
+    const sca = new ScrollClassAdder(el, 'foo');
+    expect(el.getAttribute('class')).toBeFalsy();
+    sca.onScroll();
+    expect(el.getAttribute('class')).toBe('foo');
+    clock.tick(600);
+    expect(el.getAttribute('class')).toBeFalsy();
+
+    sca.onScroll();
+    expect(el.getAttribute('class')).toBe('foo');
+    clock.tick(500);
+    expect(el.getAttribute('class')).toBe('foo');
+    sca.onScroll();
+    expect(el.getAttribute('class')).toBe('foo');
+    clock.tick(100);
+    expect(el.getAttribute('class')).toBe('foo');
+    clock.tick(499);
+    expect(el.getAttribute('class')).toBe('foo');
+    clock.tick(1);
+    expect(el.getAttribute('class')).toBeFalsy();
+    clock.restore();
+  });
+});

package/tests/{BookReader → jest/BookReader}/utils/classes.test.js

@@ -1,4 +1,4 @@
-import { exposeOverrideable } from '../../../src/BookReader/utils/classes.js';
+import { exposeOverrideable } from '@/src/BookReader/utils/classes.js';
 
 describe('exposeOverrideable', () => {
   test('adds method to To class', () => {