@internetarchive/bookreader 5.0.0-18

package/tests/BookReader/PageContainer.test.js

@@ -0,0 +1,187 @@
+import {PageContainer, boxToSVGRect, createSVGPageLayer, renderBoxesInPageContainerLayer} from '../../src/BookReader/PageContainer.js';
+
+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 pc = new PageContainer(null, {});
+    pc.update({ dimensions: { left: 20 } });
+    expect(pc.$container[0].style.left).toBe('20px');
+  });
+
+  test('does not create image if empty page', () => {
+    const pc = new PageContainer(null, {});
+    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 pc = new PageContainer({index: 17}, {});
+    pc.update({ reduce: null });
+    expect(pc.$img).toBeNull();
+  });
+
+  test('does not set background image if already loaded', () => {
+    const fakeImageCache = {
+      imageLoaded: () => true,
+      image: () => $('<img/>'),
+    };
+    const pc = new PageContainer({index: 12}, {imageCache: fakeImageCache});
+    pc.update({ reduce: 7 });
+    expect(pc.$img[0].style.background).toBe('');
+  });
+
+  test('removes image between updates', () => {
+    const fakeImageCache = {
+      imageLoaded: () => true,
+      image: () => $('<img/>'),
+    };
+    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($im1.parent().length).toBe(0);
+  });
+
+  test('adds/removes loading indicators while loading', () => {
+    const fakeImageCache = {
+      imageLoaded: () => false,
+      image: () => $('<img/>'),
+      getBestLoadedReduce: () => undefined,
+    };
+    const pc = new PageContainer({index: 12}, {imageCache: fakeImageCache, loadingImage: 'loading.gif'});
+    pc.update({ reduce: 7 });
+    expect(pc.$container.hasClass('BRpageloading')).toBe(true);
+    // See https://github.com/jsdom/jsdom/issues/3169
+    // expect(pc.$img.css('background')).toBeTruthy();
+    // expect(pc.$img.css('background').includes('loading.gif')).toBe(true);
+    // expect(pc.$img.css('background').includes(',')).toBe(false);
+
+    pc.$img.trigger('loadend');
+    expect(pc.$container.hasClass('BRpageloading')).toBe(false);
+    expect(pc.$img.css('background')).toBeFalsy();
+  });
+
+  test('shows lower res image while loading if one available', () => {
+    const fakeImageCache = {
+      imageLoaded: () => false,
+      image: () => $('<img/>'),
+      getBestLoadedReduce: () => 3,
+    };
+    const fakePage = {
+      index: 12,
+      getURI: () => 'page12.jpg',
+    };
+    const pc = new PageContainer(fakePage, {imageCache: fakeImageCache, loadingImage: 'loading.gif'});
+    pc.update({ reduce: 7 });
+    // See https://github.com/jsdom/jsdom/issues/3169
+    // expect(pc.$img.css('background').includes('page12.jpg')).toBe(true);
+    pc.$img.trigger('loadend');
+    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/ReduceSet.test.js

@@ -0,0 +1,38 @@
+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/BookReader/Toolbar/Toolbar.test.js

@@ -0,0 +1,26 @@
+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/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/utils/classes.test.js

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

package/tests/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);
+  });
+});

package/tests/BookReader.options.test.js

@@ -0,0 +1,39 @@
+
+import BookReader from '../src/BookReader.js';
+
+beforeAll(() => {
+  document.body.innerHTML = '<div id="BookReader">';
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('BookReader options', () => {
+  describe('`autoResize`', () => {
+    it('is on by default', () => {
+      const br = new BookReader();
+      br.init();
+      expect(br.options.autoResize).toBe(true);
+    });
+  });
+
+  describe('`startFullscreen`', () => {
+    it('initializes BookReader to fullscreen', () => {
+      const br = new BookReader({
+        startFullscreen: true
+      });
+      br.init();
+
+      expect(document.getElementById('BookReader').classList.contains('br-ui-full')).toBe(true);
+    });
+  });
+
+  describe('`useSrcSet`', () => {
+    it('is on by default', () => {
+      const br = new BookReader();
+      br.init();
+      expect(br.options.autoResize).toBe(true);
+    });
+  });
+});