@internetarchive/bookreader 5.0.0-94 → 5.0.0-96

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

@@ -1,249 +0,0 @@
-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 page = {
-      index: 7,
-      getPageNum: () => '8',
-    };
-    const pc = new PageContainer(page, {isProtected: false});
-    expect(pc.$container.hasClass('BRemptypage')).toBe(false);
-    expect(pc.$container.hasClass('pagediv7')).toBe(true);
-  });
-
-  test('adds attributes', () => {
-    const page = {
-      index: 7,
-      pageSide: 'R',
-      getPageNum: () => '8',
-    };
-    const pc = new PageContainer(page, {isProtected: false});
-    expect(pc.$container.hasClass('BRemptypage')).toBe(false);
-    expect(pc.$container.attr('data-side')).toBe('R');
-    expect(pc.$container.attr('data-index')).toBe('7');
-    expect(pc.$container.attr('data-page-num')).toBe('8');
-  });
-});
-
-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/jest/BookReader/ReduceSet.test.js

@@ -1,38 +0,0 @@
-import {IntegerReduceSet, Pow2ReduceSet} from '@/src/BookReader/ReduceSet.js';
-
-describe('IntegerReduceSet', () => {
-  test('floor', () => {
-    const f = IntegerReduceSet.floor;
-    expect(f(1)).toBe(1);
-    expect(f(3)).toBe(3);
-    expect(f(3.1)).toBe(3);
-    expect(f(3.5)).toBe(3);
-    expect(f(3.9)).toBe(3);
-  });
-
-  test('decr', () => {
-    const f = IntegerReduceSet.decr;
-    expect(f(1)).toBe(0);
-    expect(f(3)).toBe(2);
-    expect(f(0)).toBe(-1);
-  });
-});
-
-describe('Pow2ReduceSet', () => {
-  test('floor', () => {
-    const f = Pow2ReduceSet.floor;
-    expect(f(1)).toBe(1);
-    expect(f(3)).toBe(2);
-    expect(f(3.5)).toBe(2);
-    expect(f(4.1)).toBe(4);
-    expect(f(8)).toBe(8);
-  });
-
-  test('decr', () => {
-    const f = Pow2ReduceSet.decr;
-    expect(f(1)).toBe(0.5);
-    expect(f(2)).toBe(1);
-    expect(f(4)).toBe(2);
-    expect(f(8)).toBe(4);
-  });
-});

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

@@ -1,26 +0,0 @@
-import sinon from 'sinon';
-
-import { createPopup } from '@/src/BookReader/Toolbar/Toolbar.js';
-
-afterEach(() => {
-  sinon.restore();
-});
-
-describe('createPopup', () => {
-  test('calls window.open', () => {
-    const openStub = sinon.stub(window, 'open');
-    createPopup('openlibrary.org', 100, 100, 'Open Library');
-    expect(openStub.callCount).toBe(1);
-  });
-
-  test('opens in center', () => {
-    const openStub = sinon.stub(window, 'open');
-    createPopup('openlibrary.org', 100, 100, 'Open Library');
-    // jest default window size is 1024x768
-    expect(openStub.args[0]).toEqual([
-      'openlibrary.org',
-      'Open Library',
-      'status=1,width=100,height=100,top=334,left=462',
-    ]);
-  });
-});

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

@@ -1,59 +0,0 @@
-// @ts-check
-import  sinon from 'sinon';
-import { HTMLDimensionsCacher } from '@/src/BookReader/utils/HTMLDimensionsCacher.js';
-
-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

@@ -1,49 +0,0 @@
-// @ts-check
-import  sinon from 'sinon';
-import { ScrollClassAdder } from '@/src/BookReader/utils/ScrollClassAdder.js';
-
-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

@@ -1,57 +0,0 @@
-// @ts-check
-import sinon from "sinon";
-import { SelectionObserver } from "@/src/BookReader/utils/SelectionObserver.js";
-
-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/jest/BookReader/utils/classes.test.js

@@ -1,88 +0,0 @@
-import { exposeOverrideable } from '@/src/BookReader/utils/classes.js';
-
-describe('exposeOverrideable', () => {
-  test('adds method to To class', () => {
-    class From { foo() { return 3; } }
-    class To { }
-    exposeOverrideable(From, 'foo', x => x, To, 'foo', x => x);
-    expect(To.prototype).toHaveProperty('foo');
-    expect(new To().foo()).toBe(3);
-  });
-
-  test('modifying To method modifies original class', () => {
-    class From { foo() { return 3; } }
-    class To { }
-    const originalFoo = From.prototype.foo;
-    exposeOverrideable(From, 'foo', x => x, To, 'foo', x => x);
-    To.prototype.foo = () => 7;
-    expect(originalFoo).not.toBe(From.prototype.foo);
-    expect(new To().foo()).toBe(7);
-    expect(new From().foo()).toBe(7);
-  });
-
-  test('can transform this', () => {
-    class From { foo() { return this; } }
-    class To { }
-    exposeOverrideable(From, 'foo', x => 'fake-this1', To, 'foo', x => 'fake-this2');
-    const f = new From();
-    expect(f.foo()).toBe(f);
-    expect(new To().foo()).toBe('fake-this2');
-  });
-
-  test('can transform this both ways if overriden', () => {
-    class From { foo() { return [this]; } }
-    class To { }
-    exposeOverrideable(From, 'foo', x => 'fake-this1', To, 'foo', x => 'fake-this2');
-    // Override pattern common in bookreader
-    To.prototype.foo = function(_super) {
-      return function() {
-        return [this, ..._super.call(this)];
-      };
-    }(To.prototype.foo);
-
-    const calledFromTo = new To().foo();
-    expect(calledFromTo).toHaveLength(2);
-    expect(calledFromTo[0]).toBeInstanceOf(To);
-    expect(calledFromTo[1]).toBe('fake-this2');
-
-    const calledFromFrom = new From().foo();
-    expect(calledFromFrom).toHaveLength(2);
-    expect(calledFromFrom[0]).toBe('fake-this1');
-    expect(calledFromFrom[1]).toBe('fake-this2');
-  });
-
-  test('BookReader override pattern', () => {
-    class Component {
-      constructor(br) { this.br = br; }
-      createButton() { return 'root button'; }
-      // need to test that when called through a
-      // Component method, that it work correctly
-      initToolbar() { return [this.createButton()]; }
-    }
-    class BookReader {
-      constructor() {
-        this.component = new Component(this);
-      }
-    }
-
-    exposeOverrideable(Component, 'createButton', c => c.br, BookReader, 'createButton', br => br.component);
-
-    expect(new BookReader().createButton()).toBe('root button');
-    expect(new BookReader().component.initToolbar()).toEqual(['root button']);
-
-    // And then a bunch of plugins come along!
-    for (const plugin of ['plugin 1', 'plugin 2']) {
-      BookReader.prototype.createButton = function(_super) {
-        return function() {
-          return plugin + ' ' + _super.call(this);
-        };
-      }(BookReader.prototype.createButton);
-    }
-
-    const br = new BookReader();
-    expect(br.createButton()).toBe('plugin 2 plugin 1 root button');
-    expect(br.component.createButton()).toBe('plugin 2 plugin 1 root button');
-    // Calls the overridden method on BookReader!
-    expect(br.component.initToolbar()).toEqual(['plugin 2 plugin 1 root button']);
-  });
-});