@internetarchive/bookreader 5.0.0-3 → 5.0.0-30-a

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

@@ -0,0 +1,149 @@
+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);
+    });
+  });
+});

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');
   });
 });
 
@@ -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 } });
@@ -113,3 +113,75 @@ 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('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/{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', () => {

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

@@ -0,0 +1,136 @@
+import sinon from 'sinon';
+import {
+  clamp,
+  cssPercentage,
+  debounce,
+  decodeURIComponentPlus,
+  encodeURIComponentPlus,
+  escapeHTML,
+  getActiveElement,
+  isInputActive,
+  polyfillCustomEvent,
+  PolyfilledCustomEvent,
+} from '@/src/BookReader/utils.js';
+
+test('clamp function returns Math.min(Math.max(value, min), max)', () => {
+  expect(clamp(2,1,3)).toEqual(2);
+});
+
+test('calculate a percentage suitable for CSS', () => {
+  expect(cssPercentage(2,1)).toEqual('200%');
+});
+
+test('escapeHTML function which replaces the string', () => {
+  expect(escapeHTML('Me & You')).toEqual('Me & You');
+  expect(escapeHTML('Me > You')).toEqual('Me > You');
+  expect(escapeHTML('Me < You')).toEqual('Me &lt; You');
+  expect(escapeHTML('Me " You')).toEqual('Me &quot; You');
+});
+
+test('Decodes a URI component and converts + to emptyStr', () => {
+  expect(decodeURIComponentPlus("https%3A%2F%2Farchive.org%2Fskr+")).toEqual("https://archive.org/skr ");
+  expect(decodeURIComponentPlus("%3Fx%3D+test")).toEqual("?x= test");
+});
+
+test('Encodes a URI component and converts emptyStr to +', () => {
+  expect(encodeURIComponentPlus("?x=test ")).toEqual("%3Fx%3Dtest+");
+  expect(encodeURIComponentPlus("ABC abc 123")).toEqual("ABC+abc+123");
+});
+
+describe('getActiveElement', () => {
+  test('Can ignore shadow DOM', () => {
+    const doc = {activeElement: { shadowRoot: {activeElement: {}}}};
+    expect(getActiveElement(doc, false)).toBe(doc.activeElement);
+  });
+
+  test('Can traverse shadow DOM', () => {
+    const doc = {activeElement: { shadowRoot: {activeElement: {}}}};
+    expect(getActiveElement(doc, true)).toBe(doc.activeElement.shadowRoot.activeElement);
+  });
+
+  test('Handles non-shadow elements', () => {
+    const doc = {activeElement: {}};
+    expect(getActiveElement(doc, true)).toBe(doc.activeElement);
+  });
+
+  test('Handles no active element', () => {
+    const doc = {activeElement: null};
+    expect(getActiveElement(doc, true)).toBe(null);
+  });
+});
+
+describe('isInputActive', () => {
+  test('Handles no activeElement', () => {
+    expect(isInputActive({activeElement: null})).toBe(false);
+  });
+
+  test('Handles deep input activeElement', () => {
+    const doc = {activeElement: { shadowRoot: {activeElement: { tagName: 'INPUT' }}}};
+    expect(isInputActive(doc)).toBe(true);
+  });
+
+  test('Handles deep non-input activeElement', () => {
+    const doc = {activeElement: { shadowRoot: {activeElement: { tagName: 'A' }}}};
+    expect(isInputActive(doc)).toBe(false);
+  });
+
+  test('Handles textarea activeElement', () => {
+    const doc = {activeElement: { tagName: 'TEXTAREA' }};
+    expect(isInputActive(doc)).toBe(true);
+  });
+});
+
+describe('debounce', () => {
+  /** @type {sinon.SinonFakeTimers} */
+  let clock;
+  beforeEach(() => clock = sinon.useFakeTimers());
+  afterEach(() => clock.restore());
+
+  test('testing debounce', () => {
+    const func = jest.fn();
+    const debouncedFunc = debounce(func, 1000);
+    // Call it immediately
+    debouncedFunc();
+    expect(func).toHaveBeenCalledTimes(0); // func not called
+
+    // Call it several times with 500ms between each call
+    for (let i = 0; i < 10; i++) {
+      clock.tick(500);
+      debouncedFunc();
+    }
+    expect(func).toHaveBeenCalledTimes(0); // func not called
+
+    // wait 1000ms
+    clock.tick(1000);
+    expect(func).toHaveBeenCalledTimes(1);  // func called
+  });
+});
+
+
+describe('polyfillCustomEvent', () => {
+  test('Overrides when missing', () => {
+    const win = {};
+    polyfillCustomEvent(win);
+    expect(win).toHaveProperty('CustomEvent');
+  });
+
+  test('Overrides when not a function', () => {
+    const win = { CustomEvent: {} };
+    polyfillCustomEvent(win);
+    expect(typeof win.CustomEvent).toBe('function');
+  });
+});
+
+describe('PolyfilledCustomEvent', () => {
+  test('Can be called as a constructor', () => {
+    new PolyfilledCustomEvent('foo');
+  });
+
+  test('Calls deprecated browser methods', () => {
+    const createEventSpy = sinon.spy(document, 'createEvent');
+    const initCustomEventSpy = sinon.spy(CustomEvent.prototype, 'initCustomEvent');
+    new PolyfilledCustomEvent('foo');
+    expect(createEventSpy.callCount).toBe(1);
+    expect(initCustomEventSpy.callCount).toBe(1);
+  });
+});