@internetarchive/bookreader 5.0.0-8-multiple-files → 5.0.0-80

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 } });
@@ -62,17 +62,18 @@ describe('update', async () => {
     expect(pc.$img[0].style.background).toBe('');
   });
 
-  test('removes image between updates', () => {
+  test('removes image between updates only if changed', () => {
     const fakeImageCache = {
       imageLoaded: () => true,
-      image: () => $('<img/>'),
+      image: (index, reduce) => $(`<img src="page${index}-${reduce}.jpg" />`),
     };
     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(pc.$img).toBe($im1);
+    pc.update({ reduce: 16 });
+    expect(pc.$img).not.toBe($im1);
     expect($im1.parent().length).toBe(0);
   });
 
@@ -113,3 +114,84 @@ 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('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', () => {

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

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

@@ -0,0 +1,229 @@
+import sinon from 'sinon';
+import { afterEventLoop, eventTargetMixin } from '../utils.js';
+import {
+  clamp,
+  cssPercentage,
+  debounce,
+  decodeURIComponentPlus,
+  encodeURIComponentPlus,
+  escapeHTML,
+  escapeRegExp,
+  getActiveElement,
+  isInputActive,
+  poll,
+  polyfillCustomEvent,
+  PolyfilledCustomEvent,
+  promisifyEvent,
+  sleep,
+} 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);
+  });
+});
+
+describe('poll', () => {
+  beforeEach(() => jest.useFakeTimers());
+  afterEach(() => jest.useRealTimers());
+  test('polls until condition is true', async () => {
+    const fakeSleep = sinon.spy((ms) => jest.advanceTimersByTime(ms));
+
+    const returns = [null, null, 'foo'];
+    const check = sinon.spy(() => returns.shift());
+    const result = await poll(check, {_sleep: fakeSleep});
+    expect(fakeSleep.callCount).toBe(2);
+    expect(result).toBe('foo');
+    expect(check.callCount).toBe(3);
+  });
+
+  test('times out eventually', async () => {
+    const fakeSleep = sinon.spy((ms) => jest.advanceTimersByTime(ms));
+
+    const check = sinon.stub().returns(null);
+    const result = await poll(check, {_sleep: fakeSleep});
+    expect(result).toBeUndefined();
+    expect(check.callCount).toBe(10);
+  });
+});
+
+describe('sleep', () => {
+  test('Sleep 0 doest not called immediately', async () => {
+    const spy = sinon.spy();
+    sleep(0).then(spy);
+    expect(spy.callCount).toBe(0);
+    await afterEventLoop();
+    expect(spy.callCount).toBe(1);
+  });
+
+  test('Waits the appropriate ms', async () => {
+    const clock = sinon.useFakeTimers();
+    const spy = sinon.spy();
+    sleep(10).then(spy);
+    expect(spy.callCount).toBe(0);
+    clock.tick(10);
+    expect(spy.callCount).toBe(0);
+    clock.restore();
+
+    await afterEventLoop();
+    expect(spy.callCount).toBe(1);
+  });
+});
+
+describe('promisifyEvent', () => {
+  test('Resolves once event fires', async () => {
+    const fakeTarget = eventTargetMixin();
+    const resolveSpy = sinon.spy();
+    promisifyEvent(fakeTarget, 'pause').then(resolveSpy);
+
+    await afterEventLoop();
+    expect(resolveSpy.callCount).toBe(0);
+    fakeTarget.dispatchEvent('pause', {});
+    await afterEventLoop();
+    expect(resolveSpy.callCount).toBe(1);
+  });
+
+  test('Only resolves once', async () => {
+    const fakeTarget = eventTargetMixin();
+    const resolveSpy = sinon.spy();
+    promisifyEvent(fakeTarget, 'pause').then(resolveSpy);
+
+    await afterEventLoop();
+    expect(resolveSpy.callCount).toBe(0);
+    fakeTarget.dispatchEvent('pause', {});
+    fakeTarget.dispatchEvent('pause', {});
+    fakeTarget.dispatchEvent('pause', {});
+    fakeTarget.dispatchEvent('pause', {});
+
+    await afterEventLoop();
+    expect(resolveSpy.callCount).toBe(1);
+  });
+});
+
+describe('escapeRegex', () => {
+  test('Escapes regex', () => {
+    expect(escapeRegExp('.*')).toBe('\\.\\*');
+    expect(escapeRegExp('foo')).toBe('foo');
+    expect(escapeRegExp('foo.bar')).toBe('foo\\.bar');
+    expect(escapeRegExp('{{{')).toBe('\\{\\{\\{');
+    expect(escapeRegExp('')).toBe('');
+    expect(escapeRegExp('https://example.com')).toBe('https://example\\.com');
+  });
+});