@internetarchive/bookreader 5.0.0-5-multiple-files → 5.0.0-50-a1

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

@@ -0,0 +1,176 @@
+import BookReader from '@/src/BookReader';
+import { sleep } from '@/src/BookReader/utils.js';
+import sinon from 'sinon';
+
+beforeAll(() => {
+  global.alert = sinon.fake();
+});
+afterEach(() => {
+  sinon.restore();
+});
+
+describe('BookReader.prototype.toggleFullscreen', ()  => {
+  test('uses `isFullscreen` to check fullscreen state', () => {
+    const isFSmock = sinon.fake();
+    // isFSmock.mockReturnValueOnce(false);
+    const br = new BookReader();
+    br.mode = br.constMode1up;
+    br.enterFullscreen = sinon.fake();
+    br.isFullscreen = isFSmock;
+
+    br.toggleFullscreen();
+    expect(br.isFullscreen.callCount).toEqual(1);
+  });
+
+  test('will always emit an event', async () => {
+    const br = new BookReader();
+    br.mode = br.constMode2up;
+    br.trigger = sinon.fake();
+    br.switchMode = sinon.fake();
+    br.updateBrClasses = sinon.fake();
+    br.refs.$brContainer = {
+      css: sinon.fake(),
+      animate: (options, speed, style, callback) => callback()
+    };
+    br.refs.$br = {
+      updateBrClasses: sinon.fake(),
+      removeClass: sinon.fake(),
+      addClass: sinon.fake(),
+      css: sinon.fake(),
+      animate: (options, speed, style, callback) => callback()
+    };
+
+    await br.toggleFullscreen();
+    expect(br.trigger.callCount).toBeGreaterThan(0);
+  });
+
+  test('will start with opening fullscreen', () => {
+    const br = new BookReader();
+    br.mode = br.constMode2up;
+    br.enterFullscreen = sinon.fake();
+
+    br.toggleFullscreen();
+    expect(br.enterFullscreen.callCount).toEqual(1);
+  });
+
+  test('will close fullscreen if BookReader is in fullscreen', () => {
+    const br = new BookReader();
+    br.mode = br.constMode1up;
+    br.exitFullScreen = sinon.fake();
+    br.isFullscreenActive = true;
+
+    br.toggleFullscreen();
+    expect(br.exitFullScreen.callCount).toEqual(1);
+  });
+});
+
+describe('BookReader.prototype.enterFullscreen', ()  => {
+  test('will bind `_fullscreenCloseHandler` by default', () => {
+    const br = new BookReader();
+    br.mode = br.constMode1up;
+    br.switchMode = sinon.fake();
+    br.updateBrClasses = sinon.fake();
+    br.refs.$brContainer = {
+      css: sinon.fake(),
+      animate: sinon.fake(),
+    };
+    expect(br._fullscreenCloseHandler).toBeUndefined();
+
+    br.enterFullscreen();
+    expect(br._fullscreenCloseHandler).toBeDefined();
+  });
+
+  test('fires certain events when called', async () => {
+    const br = new BookReader();
+    br.mode = br.constMode2up;
+    br.switchMode = sinon.fake();
+    br.updateBrClasses = sinon.fake();
+    br.trigger = sinon.fake();
+    br.resize = sinon.fake();
+    br.jumpToIndex = sinon.fake();
+    br.refs.$brContainer = {
+      css: sinon.fake(),
+      animate: (options, speed, style, callback) => callback()
+    };
+
+    await br.enterFullscreen();
+    expect(br.switchMode.callCount).toEqual(1);
+    expect(br.updateBrClasses.callCount).toEqual(1);
+    expect(br.trigger.callCount).toEqual(2); // fragmentChange, fullscreenToggled
+    expect(br.jumpToIndex.callCount).toEqual(1);
+
+    await sleep(0);
+    expect(br.resize.callCount).toEqual(1);
+  });
+});
+
+describe('BookReader.prototype.exitFullScreen', () => {
+  test('fires certain events when called', async () => {
+    const br = new BookReader();
+    br.mode = br.constMode2up;
+    br.switchMode = sinon.fake();
+    br.updateBrClasses = sinon.fake();
+    br.trigger = sinon.fake();
+    br.resize = sinon.fake();
+    br.refs.$brContainer = {
+      css: sinon.fake(),
+      animate: (options, speed, style, callback) => callback()
+    };
+    await br.exitFullScreen();
+    expect(br.switchMode.callCount).toEqual(1);
+    expect(br.updateBrClasses.callCount).toEqual(1);
+    expect(br.trigger.callCount).toEqual(2); // fragmentChange, fullscreenToggled
+    expect(br.resize.callCount).toEqual(1);
+  });
+});
+
+describe('BookReader.prototype.trigger', () => {
+  test('fires custom event', () => {
+    const br = new BookReader();
+    global.br = br;
+    global.dispatchEvent = sinon.fake();
+
+    const props = {bar: 1};
+    br.trigger('foo', props);
+    expect(global.dispatchEvent.callCount).toBe(1);
+  });
+});
+
+describe('`BookReader.prototype.prev`', () => {
+  const br = new BookReader();
+  global.br = br;
+  br.trigger = sinon.fake();
+  br._modes.mode2Up.flipBackToIndex = sinon.fake();
+  br.jumpToIndex = sinon.fake();
+
+  test('does not take action if user is on front page', () => {
+    br.firstIndex = 0;
+    br.prev();
+    expect(br.trigger.callCount).toBe(0);
+    expect(br._modes.mode2Up.flipBackToIndex.callCount).toBe(0);
+    expect(br.jumpToIndex.callCount).toBe(0);
+  });
+
+  describe('2up mode', () => {
+    test('fires event and turns the page', () => {
+      br.firstIndex = 10;
+      br.mode = br.constMode2up;
+      br.prev();
+      expect(br.jumpToIndex.callCount).toBe(0); // <--  does not get called
+      expect(br.trigger.callCount).toBe(1);
+      expect(br._modes.mode2Up.flipBackToIndex.callCount).toBe(1);
+    });
+  });
+
+  describe('non 2up mode', () => {
+    test('jumps to provided index', () => {
+      br.firstIndex = 100;
+      br.mode = br.constMode1up;
+      br.prev();
+      expect(br.jumpToIndex.callCount).toBe(1);  // <--  gets called
+      expect(br.trigger.callCount).toBe(1); // <-- gets called by `jumpToIndex` internally
+      expect(br._modes.mode2Up.flipBackToIndex.callCount).toBe(1); // <-- gets called by `jumpToIndex` internally
+    });
+  });
+});
+

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

@@ -1,5 +1,5 @@
 import sinon from 'sinon';
-import { DebugConsole } from '../../src/BookReader/DebugConsole.js';
+import { DebugConsole } from '@/src/BookReader/DebugConsole.js';
 
 beforeEach(() => {
   sinon.stub(console, 'log');

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

@@ -1,8 +1,8 @@
 import sinon from 'sinon';
-import { BookModel } from '../../src/BookReader/BookModel.js';
-import { ImageCache } from '../../src/BookReader/ImageCache.js';
-import { Pow2ReduceSet } from '../../src/BookReader/ReduceSet.js';
-/** @typedef {import('../../src/BookReader/options.js').BookReaderOptions} BookReaderOptions */
+import { BookModel } from '@/src/BookReader/BookModel.js';
+import { ImageCache } from '@/src/BookReader/ImageCache.js';
+import { Pow2ReduceSet } from '@/src/BookReader/ReduceSet.js';
+/** @typedef {import('@/src/BookReader/options.js').BookReaderOptions} BookReaderOptions */
 
 afterEach(() => {
   jest.restoreAllMocks();

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

@@ -0,0 +1,92 @@
+import { BookModel } from '@/src/BookReader/BookModel.js';
+import { Mode1UpLit } from '@/src/BookReader/Mode1UpLit.js';
+
+/** @type {import('@/src/BookReader/options.js').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' },
+  ],
+];
+
+function make_dummy_br(overrides = {}) {
+  return Object.assign({
+    updateFirstIndex() {},
+    _components: {
+      navbar: {
+        updateNavIndexThrottled() {},
+      }
+    },
+    data: []
+  }, overrides);
+}
+
+describe('pageTops', () => {
+  afterEach(() => document.body.innerHTML = '');
+
+  test('Works with empty book', async () => {
+    const br = make_dummy_br({ data: [] });
+    const book = new BookModel(br);
+    const mode = new Mode1UpLit(book, br);
+    document.body.appendChild(mode);
+    mode.requestUpdate();
+    await mode.updateComplete;
+    expect(mode.pageTops).toEqual({});
+  });
+
+  test('Iterates all pages', async () => {
+    const br = make_dummy_br({ data: SAMPLE_DATA });
+    const book = new BookModel(br);
+    const mode = new Mode1UpLit(book, br);
+    document.body.appendChild(mode);
+    await mode.requestUpdate();
+    expect(Object.values(mode.pageTops)).toHaveLength(6);
+  });
+
+  test('Computes tops', async () => {
+    const br = make_dummy_br({ data: SAMPLE_DATA });
+    const book = new BookModel(br);
+    const mode = new Mode1UpLit(book, br);
+    document.body.appendChild(mode);
+    await mode.requestUpdate();
+    const tops = Object.entries(mode.pageTops);
+    expect(tops.map(([index, top]) => [index, top.toFixed(1)])).toEqual([
+      // Recall these are in inches
+      ['0', '0.2'],
+      ['1', '0.6'],
+      ['2', '1.1'],
+      ['3', '1.5'],
+      ['4', '2.0'],
+      ['5', '2.4'],
+    ]);
+  });
+});
+
+describe('worldUnitsToRenderedPixels', () => {
+  test('0 case', () => {
+    const mode = new Mode1UpLit(null, null);
+    expect(mode.worldUnitsToRenderedPixels(0)).toBe(0);
+  });
+  test('Misc cases', () => {
+    const mode = new Mode1UpLit(null, null);
+    mode.screenDPI = 100;
+    mode.realWorldReduce = 1;
+    expect(mode.worldUnitsToRenderedPixels(1)).toBe(100);
+    mode.screenDPI = 100;
+    mode.realWorldReduce = 2;
+    expect(mode.worldUnitsToRenderedPixels(1)).toBe(50);
+    mode.screenDPI = 78;
+    mode.realWorldReduce = 1;
+    expect(mode.worldUnitsToRenderedPixels(1)).toBe(78);
+  });
+});

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

@@ -1,12 +1,12 @@
 
 import sinon from 'sinon';
 import { deepCopy } from '../utils.js';
-import BookReader from '../../src/BookReader.js';
-/** @typedef {import('../../src/BookReader/options.js').BookReaderOptions} BookReaderOptions */
+import BookReader from '@/src/BookReader.js';
+/** @typedef {import('@/src/BookReader/options.js').BookReaderOptions} BookReaderOptions */
 
 beforeAll(() => {
   global.alert = jest.fn();
-})
+});
 afterEach(() => {
   jest.restoreAllMocks();
   sinon.restore();
@@ -47,6 +47,29 @@ describe('zoom', () => {
   });
 });
 
+describe('page flip directions', () => {
+  test('animates the left page in the correct direction', () => {
+    const br = new BookReader({ data: SAMPLE_DATA });
+    br.init();
+
+    const fake = sinon.fake();
+    const fakeAnimWithCB = sinon.fake.yields();
+    const fakeAnim = sinon.fake((...args) =>
+      typeof args[args.length - 1] === 'function' ? fakeAnimWithCB(...args) : fake
+    );
+    sinon.replace(jQuery.prototype, 'animate', fakeAnim);
+
+    const fakeCSS = sinon.spy(jQuery.prototype, 'css');
+
+    br.next();
+
+    expect(fakeAnimWithCB.callCount).toBe(2);
+    // Find the call to .css() immediately preceding the second animation with a callback (i.e., the left page animation)
+    const preSecondAnimCssCallIndex = fakeCSS.getCalls().findIndex(call => call.calledAfter(fakeAnimWithCB.getCall(1))) - 1;
+    expect(fakeCSS.getCall(preSecondAnimCssCallIndex).args[0].left).toBe('');
+  });
+});
+
 describe('prefetch', () => {
   test('loads nearby pages', () => {
     const br = new BookReader({ data: SAMPLE_DATA });
@@ -83,7 +106,7 @@ describe('draw 2up leaves', () => {
 
     br.init();
     expect(drawLeafs.callCount).toBe(1);
-  })
+  });
 
   test('sets `this.displayedIndices`', () => {
     const extremelyWrongValueForDisplayedIndices = null;
@@ -98,7 +121,7 @@ describe('draw 2up leaves', () => {
     expect(br.displayedIndices).not.toBe(extremelyWrongValueForDisplayedIndices);
     expect(br.displayedIndices.length).toBe(2); // is array
     expect(br.displayedIndices).toEqual([-1, 0]); // default to starting index on right, placeholder for left
-  })
+  });
 });
 
 describe('resizeSpread', () => {
@@ -122,13 +145,13 @@ describe('2up Container sizing', () => {
   test('baseLeafCss', () => {
     const br = new BookReader({ data: SAMPLE_DATA });
     br.init();
-    br.calculateSpreadSize();
+    br._modes.mode2Up.calculateSpreadSize();
     expect(Object.keys(br._modes.mode2Up.baseLeafCss)).toEqual(['position', 'right', 'top', 'zIndex']);
   });
   test('heightCss', () => {
     const br = new BookReader({ data: SAMPLE_DATA });
     br.init();
-    br.calculateSpreadSize();
+    br._modes.mode2Up.calculateSpreadSize();
     const heightStub = 1000;
     br.twoPage.height = heightStub;
     expect(Object.keys(br._modes.mode2Up.heightCss)).toEqual(['height']);
@@ -137,7 +160,7 @@ describe('2up Container sizing', () => {
   describe('left side', () => {
     const br = new BookReader({ data: SAMPLE_DATA });
     br.init();
-    br.calculateSpreadSize();
+    br._modes.mode2Up.calculateSpreadSize();
 
     test('leftLeafCss', () => {
       expect(Object.keys(br._modes.mode2Up.leftLeafCss)).toEqual([
@@ -163,7 +186,7 @@ describe('2up Container sizing', () => {
   describe('right side', () => {
     const br = new BookReader({ data: SAMPLE_DATA });
     br.init();
-    br.calculateSpreadSize();
+    br._modes.mode2Up.calculateSpreadSize();
 
     test('rightLeafCss', () => {
       expect(Object.keys(br._modes.mode2Up.rightLeafCss)).toEqual([
@@ -190,20 +213,20 @@ describe('2up Container sizing', () => {
     test('mainContainerCss', () => {
       const br = new BookReader({ data: SAMPLE_DATA });
       br.init();
-      br.calculateSpreadSize();
+      br._modes.mode2Up.calculateSpreadSize();
 
       expect(Object.keys(br._modes.mode2Up.mainContainerCss)).toEqual(['height', 'width', 'position']);
     });
     test('spreadCoverCss', () => {
       const br = new BookReader({ data: SAMPLE_DATA });
       br.init();
-      br.calculateSpreadSize();
+      br._modes.mode2Up.calculateSpreadSize();
       expect(Object.keys(br._modes.mode2Up.spreadCoverCss)).toEqual(['width', 'height', 'visibility']);
     });
     test('spineCss', () => {
       const br = new BookReader({ data: SAMPLE_DATA });
       br.init();
-      br.calculateSpreadSize();
+      br._modes.mode2Up.calculateSpreadSize();
       expect(Object.keys(br._modes.mode2Up.spineCss)).toEqual(['width', 'height', 'left', 'top']);
     });
   });
@@ -220,19 +243,17 @@ describe('prepareTwoPageView', () => {
       const calculateSpreadSize = sinon.spy(mode2Up, 'calculateSpreadSize');
       const prunePageContainers = sinon.spy(mode2Up, 'prunePageContainers');
       const prefetch = sinon.spy(mode2Up, 'prefetch');
-      const bindGestures = sinon.spy(br, 'bindGestures');
       const centerView = sinon.spy(mode2Up, 'centerView');
       const preparePopUp = sinon.spy(mode2Up, 'preparePopUp');
       const updateBrClasses = sinon.spy(br, 'updateBrClasses');
 
-      br.prepareTwoPageView(undefined, undefined, true);
+      mode2Up.prepare(undefined, undefined, true);
       expect(prefetch.callCount).toBe(1);
 
       expect(resizeSpread.callCount).toBe(0);
       expect(drawLeafs.callCount).toBe(1);
       expect(calculateSpreadSize.callCount).toBe(1);
       expect(prunePageContainers.callCount).toBe(1);
-      expect(bindGestures.callCount).toBe(1);
       expect(centerView.callCount).toBe(1);
       expect(preparePopUp.callCount).toBe(1);
       expect(updateBrClasses.callCount).toBe(1);

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);
   });