@internetarchive/bookreader 5.0.0-9-multiple-files → 5.0.0-90

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

@@ -1,19 +1,32 @@
 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)');
+
+  test('handle n-prefixed page numbers-min format', () => {
+    expect(f(3, 40, 'n3', '', 40)).toBe('(4 of 40)');
+  });
+
+  test('handle regular page numbers-min format', () => {
+    expect(f(3, 40, '14', '', 40)).toBe('14 of 40');
+  });
+
+  test('handle no max page-min format', () => {
+    expect(f(3, 40, '14', '', null)).toBe('14');
+  });
+
+  test('handle n-prefixed page numbers-max format', () => {
+    expect(f(3, 40, 'n3', '', 40, true)).toBe('Page — (4/40)');
   });
 
-  test('handle regular page numbers', () => {
-    expect(f(3, 40, '14', '', 40)).toBe('Page 14 of 40');
+  test('handle regular page numbers-max format', () => {
+    expect(f(3, 40, '14', '', 40, true)).toBe('Page 14 (4/40)');
   });
 
-  test('handle no max page', () => {
-    expect(f(3, 40, '14', '', null)).toBe('Page 14');
+  test('handle no max page-max format', () => {
+    expect(f(3, 40, '14', '', null, true)).toBe('Page 14 (4/40)');
   });
 });
 
@@ -40,7 +53,7 @@ beforeEach(() => {
           uri: '//archive.org/download/BookReader/img/page004.jpg' },
         { width: 800, height: 1200,
           uri: '//archive.org/download/BookReader/img/page005.jpg' },
-      ]
+      ],
     ],
   });
   br.init();
@@ -63,14 +76,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);
   });
 });
 
@@ -89,17 +102,17 @@ describe('Navbar controls overrides', () => {
           visible: true,
           className: 'viewmode',
           excludedModes: [1],
-        }
-      }
+        },
+      },
     };
     createBRWithOverrides(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);
   });
 
@@ -107,9 +120,9 @@ describe('Navbar controls overrides', () => {
     const overrides = {
       controls: {
         onePage: {
-          visible: false
-        }
-      }
+          visible: false,
+        },
+      },
     };
     createBRWithOverrides(overrides);
 
@@ -122,9 +135,9 @@ describe('Navbar controls overrides', () => {
     const overrides = {
       controls: {
         onePage: {
-          className: 'foo'
-        }
-      }
+          className: 'foo',
+        },
+      },
     };
     createBRWithOverrides(overrides);
 
@@ -139,9 +152,9 @@ describe('Navbar controls overrides', () => {
         onePage: {
           template: () => (
             '<button id="foo"></button>'
-          )
-        }
-      }
+          ),
+        },
+      },
     };
     createBRWithOverrides(overrides);
 
@@ -154,12 +167,12 @@ describe('Navbar controls overrides', () => {
     const overrides = {
       controls: {
         viewmode: {
-          visible: true
+          visible: true,
         },
         onePage: {
-          visible: false
-        }
-      }
+          visible: false,
+        },
+      },
     };
     createBRWithOverrides(overrides);
 

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

@@ -0,0 +1,238 @@
+import {PageContainer, boxToSVGRect, createSVGPageLayer, renderBoxesInPageContainerLayer} from '@/src/BookReader/PageContainer.js';
+import {ImageCache} from '@/src/BookReader/ImageCache.js';
+import {BookModel} from '@/src/BookReader/BookModel.js';
+import { afterEventLoop } from '../utils.js';
+import sinon from 'sinon';
+/** @typedef {import('@/src/BookReader/options.js').BookReaderOptions} BookReaderOptions */
+
+const SAMPLE_BOOK = new BookModel(
+  {
+    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' },
+      ],
+    ],
+  },
+);
+
+const realGetPageURI = SAMPLE_BOOK.getPageURI;
+SAMPLE_BOOK.getPageURI = function (index, reduce, rotate) {
+  // Need to add a reduce url parameter, since the src is used
+  // for caching
+  return realGetPageURI.call(SAMPLE_BOOK, index, reduce, rotate) + `?reduce=${reduce}`;
+};
+
+describe('constructor', () => {
+  test('protected books', () => {
+    const pc = new PageContainer(null, {isProtected: true});
+    expect(pc.$container.hasClass('protected')).toBe(true);
+    expect(pc.$container.find('.BRscreen').length).toBe(1);
+  });
+
+  test('non-protected books', () => {
+    const pc = new PageContainer(null, {isProtected: false});
+    expect(pc.$container.hasClass('protected')).toBe(false);
+    expect(pc.$container.find('.BRscreen').length).toBe(0);
+  });
+
+  test('empty page', () => {
+    const pc = new PageContainer(null, {isProtected: false});
+    expect(pc.$container.hasClass('BRemptypage')).toBe(true);
+  });
+
+  test('non-empty page', () => {
+    const pc = new PageContainer({index: 7}, {isProtected: false});
+    expect(pc.$container.hasClass('BRemptypage')).toBe(false);
+    expect(pc.$container.hasClass('pagediv7')).toBe(true);
+  });
+
+  test('adds side attribute', () => {
+    const pc = new PageContainer({index: 7, pageSide: 'R'}, {isProtected: false});
+    expect(pc.$container.hasClass('BRemptypage')).toBe(false);
+    expect(pc.$container.attr('data-side')).toBe('R');
+  });
+});
+
+describe('update', () => {
+  test('dimensions sets CSS', () => {
+    const imageCache = new ImageCache(SAMPLE_BOOK);
+    const pc = new PageContainer(null, {imageCache});
+    pc.update({ dimensions: { left: 20 } });
+    expect(pc.$container[0].style.left).toBe('20px');
+  });
+
+  test('does not create image if empty page', () => {
+    const imageCache = new ImageCache(SAMPLE_BOOK);
+    const pc = new PageContainer(null, {imageCache});
+    pc.update({ reduce: null });
+    expect(pc.$img).toBeNull();
+    pc.update({ reduce: 7 });
+    expect(pc.$img).toBeNull();
+  });
+
+  test('does not create image if no reduce', () => {
+    const imageCache = new ImageCache(SAMPLE_BOOK);
+    const pc = new PageContainer(SAMPLE_BOOK.getPage(3), {imageCache});
+    pc.update({ reduce: null });
+    expect(pc.$img).toBeNull();
+  });
+
+  test('loads image on initial load', () => {
+    const imageCache = new ImageCache(SAMPLE_BOOK);
+    const pc = new PageContainer(SAMPLE_BOOK.getPage(3), {imageCache});
+    pc.update({ reduce: 7 }); // This will load reduce=8 into memory
+    expect(pc.$container.hasClass('BRpageloading')).toBe(true);
+    expect(pc.$container.children('.BRpageimage').length).toBe(1);
+    pc.$img.trigger('load');
+    expect(pc.$container.hasClass('BRpageloading')).toBe(false);
+    expect(pc.$container.children('.BRpageimage').length).toBe(1);
+  });
+
+  test('does not set loading class if already loaded', () => {
+    const imageCache = new ImageCache(SAMPLE_BOOK);
+    const pc = new PageContainer(SAMPLE_BOOK.getPage(3), {imageCache});
+    pc.update({ reduce: 7 }); // This will load reduce=8 into memory
+    pc.$img.trigger('load');
+    pc.update({ reduce: 6 }); // This will still load reduce=8
+    expect(pc.$container.hasClass('BRpageloading')).toBe(false);
+    expect(pc.$container.children('.BRpageimage').length).toBe(1);
+  });
+
+  test('removes image between updates only if changed', async () => {
+    const clock = sinon.useFakeTimers();
+    const imageCache = new ImageCache(SAMPLE_BOOK);
+    const pc = new PageContainer(SAMPLE_BOOK.getPage(3), {imageCache});
+
+    // load reduce=8
+    pc.update({ reduce: 7 });
+    pc.$img.trigger('load');
+    const img1 = pc.$img[0];
+
+    // Should not create a new image; same final reduce
+    pc.update({ reduce: 6 });
+    expect(pc.$img[0]).toBe(img1);
+    expect(pc.$container.children('.BRpageimage').length).toBe(1);
+
+    // Should create a new image; different reduce
+    pc.update({ reduce: 3 });
+    expect(pc.$img[0]).not.toBe(img1);
+    expect(pc.$container.children('.BRpageimage').length).toBe(2);
+
+    pc.$img.trigger('load');
+    // After loading we remove the old image; but not immediately!
+    expect(pc.$container.children('.BRpageimage').length).toBe(2);
+    expect(pc.$container.hasClass('BRpageloading')).toBe(false);
+    // increment time clock 100ms
+    clock.tick(100);
+    // wait for promises to resolve
+    clock.restore();
+    await afterEventLoop();
+    // NOW we remove the old image
+    expect(pc.$container.children('.BRpageimage').length).toBe(1);
+  });
+
+  test('shows lower res image while loading if one available', () => {
+    const imageCache = new ImageCache(SAMPLE_BOOK);
+    const pc = new PageContainer(SAMPLE_BOOK.getPage(3), {imageCache});
+    pc.update({ reduce: 7 });
+    pc.$img.trigger('load');
+
+    pc.update({reduce: 2});
+    expect(pc.$container.hasClass('BRpageloading')).toBe(true);
+    expect(pc.$container.children('.BRpageimage').length).toBe(2);
+    expect(pc.$container.children('.BRpageimage')[0].src).toContain('reduce=4');
+    expect(pc.$img[0].src).toContain('reduce=2');
+  });
+});
+
+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', () => {
@@ -20,7 +20,7 @@ describe('createPopup', () => {
     expect(openStub.args[0]).toEqual([
       'openlibrary.org',
       'Open Library',
-      'status=1,width=100,height=100,top=334,left=462'
+      'status=1,width=100,height=100,top=334,left=462',
     ]);
   });
 });

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/jest/BookReader/utils/SelectionObserver.test.js

@@ -0,0 +1,57 @@
+// @ts-check
+import sinon from "sinon";
+import { SelectionObserver } from "@/src/BookReader/utils/SelectionObserver";
+
+afterEach(() => {
+  sinon.restore();
+});
+
+describe("SelectionObserver", () => {
+  test("_onSelectionChange", () => {
+    const handler = sinon.spy();
+    const observer = new SelectionObserver(".text-layer", handler);
+    const target = document.createElement("div");
+    target.classList.add("text-layer");
+
+    // stub window.getSelection
+    const getSelectionStub = sinon.stub(window, "getSelection");
+    getSelectionStub.returns({ toString: () => "test", anchorNode: target });
+    observer._onSelectionChange();
+    expect(handler.callCount).toBe(1);
+    expect(handler.calledWith("started", target)).toBe(true);
+    expect(observer.selecting).toBe(true);
+
+    // Calling it again does not call the handler again
+    observer._onSelectionChange();
+    expect(handler.callCount).toBe(1);
+
+    // Until the selection is cleared
+    getSelectionStub.returns({ toString: () => "", anchorNode: null });
+    expect(observer.selecting).toBe(true);
+    expect(handler.callCount).toBe(1);
+
+    observer._onSelectionChange();
+    expect(handler.callCount).toBe(2);
+    expect(handler.calledWith("cleared", target)).toBe(true);
+
+    // Calling it again does not call the handler again
+    sinon.restore();
+    sinon.stub(window, "getSelection").returns({ toString: () => "" });
+    observer._onSelectionChange();
+    expect(handler.callCount).toBe(2);
+  });
+
+  test('Only fires when selection started in selector', () => {
+    const handler = sinon.spy();
+    const observer = new SelectionObserver(".text-layer", handler);
+    const target = document.createElement("div");
+    target.classList.add("text-layer");
+
+    // stub window.getSelection
+    const getSelectionStub = sinon.stub(window, "getSelection");
+    getSelectionStub.returns({ toString: () => "test", anchorNode: document.body });
+    observer._onSelectionChange();
+    expect(handler.callCount).toBe(0);
+    expect(observer.selecting).toBe(false);
+  });
+});

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', () => {