@internetarchive/bookreader 5.0.0-9 → 5.0.0-90

package/tests/jest/BookNavigator/visual-adjustments.test.js

@@ -0,0 +1,200 @@
+import {
+  html,
+  fixture,
+  oneEvent,
+} from '@open-wc/testing-helpers';
+import sinon from 'sinon';
+import { IABookVisualAdjustments } from '@/src/BookNavigator/visual-adjustments/visual-adjustments.js';
+
+const options = [{
+  id: 'contrast',
+  name: 'Adjust contrast',
+  active: true,
+  min: 0,
+  max: 150,
+  step: 1,
+  value: 100,
+}, {
+  id: 'invert',
+  name: 'Invert colors (dark mode)',
+  active: false,
+}, {
+  id: 'brightness',
+  name: 'Adjust brightness',
+  active: false,
+  value: 100,
+}];
+
+const container = (renderHeader = false) => (
+  html`<ia-book-visual-adjustments .options=${options} ?renderHeader=${renderHeader}></ia-book-visual-adjustments>`
+);
+
+describe('<ia-book-visual-adjustments>', () => {
+  afterEach(() => {
+    sinon.restore();
+  });
+
+  test('sets default properties', async () => {
+    const el = await fixture(container());
+
+    expect(el.options).toBeDefined();
+    expect(el.options.length).toEqual(options.length);
+    expect(el.renderHeader).toBeDefined();
+    expect(el.renderHeader).toBeFalsy();
+    expect(el.activeCount).toBeDefined();
+    expect(el.showZoomControls).toBeTruthy();
+  });
+
+  test('renders all properties of a visual adjustment option', async () => {
+    const el = await fixture(container());
+
+    await el.updateComplete;
+
+    const label = el.shadowRoot.querySelector('label');
+    const name = label.querySelector('.name');
+    const checkbox = label.querySelector('input');
+    expect(name.textContent).toEqual(options[0].name);
+    expect(checkbox.checked).toEqual(true);
+  });
+
+  test('can render header with active options count', async () => {
+    const renderHeader = true;
+    const el = await fixture(container(renderHeader));
+    expect(el.shadowRoot.querySelector('header p').textContent).toContain('1');
+  });
+
+  test('does not render active options count element when none are selected', async () => {
+    const el = await fixture(container());
+
+    el.options = [options[1]];
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('header p')).toBe(null);
+  });
+
+  test('changes option\'s active state when input changed', async () => {
+    const el = await fixture(container());
+
+    el.shadowRoot.querySelector('li input').dispatchEvent(new Event('change'));
+    await el.updateComplete;
+
+    expect(el.options[0].active).toEqual(false);
+  });
+
+  test('renders zoom in and out controls when enabled', async () => {
+    const el = await fixture(container());
+
+    expect(el.shadowRoot.querySelector('.zoom_out')).toBeDefined();
+    expect(el.shadowRoot.querySelector('.zoom_in')).toBeDefined();
+  });
+
+  test('does not render zoom controls when disabled', async () => {
+    const el = await fixture(container());
+
+    el.showZoomControls = false;
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('.zoom_out')).toBe(null);
+    expect(el.shadowRoot.querySelector('.zoom_in')).toBe(null);
+  });
+
+  describe('Custom events', () => {
+    test('prepareEventDetails returns proper params', async () => {
+      const el = await fixture(container());
+      await el.updateComplete;
+      const params = el.prepareEventDetails();
+
+      expect(params.activeCount).toBeDefined();
+      expect(typeof (params.activeCount)).toEqual('number');
+      expect(params.changedOptionId).toBeDefined();
+      expect(typeof (params.changedOptionId)).toEqual('string');
+      expect(params.options).toBeDefined();
+      expect(params.options.length).toBeDefined();
+      expect(params.options.length).toBeGreaterThan(0);
+    });
+    test('emitOptionChangedEvent calls for the params', async () => {
+      IABookVisualAdjustments.prototype.prepareEventDetails = sinon.fake();
+      const el = await fixture(container());
+      await el.updateComplete;
+
+      expect(el.prepareEventDetails.callCount).toEqual(1);
+    });
+    test('triggers an emitOptionChangedEvent event at firstUpdate', async () => {
+      IABookVisualAdjustments.prototype.emitOptionChangedEvent = sinon.fake();
+      const el = await fixture(container());
+
+      expect(el.emitOptionChangedEvent.callCount).toEqual(1);
+    });
+
+    test('triggers an emitOptionChangedEvent event when a checkbox\'s change event fires', async () => {
+      IABookVisualAdjustments.prototype.emitOptionChangedEvent = sinon.fake();
+      const el = await fixture(container());
+
+      expect(el.emitOptionChangedEvent.callCount).toEqual(1); // firstUpdate fire
+
+      el.shadowRoot.querySelector('li input').dispatchEvent(new Event('change'));
+      expect(el.emitOptionChangedEvent.callCount).toEqual(2);
+    });
+
+    test('triggers an emitOptionChangedEvent event when a range\'s change event fires', async () => {
+      IABookVisualAdjustments.prototype.emitOptionChangedEvent = sinon.fake();
+
+      const el = await fixture(container());
+      expect(el.emitOptionChangedEvent.callCount).toEqual(1); // firstUpdate fire
+
+      el.shadowRoot.querySelector('[name="brightness_range"]').dispatchEvent(new Event('change'));
+      expect(el.emitOptionChangedEvent.callCount).toEqual(2);
+    });
+
+    test('emits a zoom out event when zoom out button clicked', async () => {
+      const el = await fixture(container());
+
+      setTimeout(() => (
+        el.shadowRoot.querySelector('.zoom_out').click()
+      ));
+      const response = await oneEvent(el, 'visualAdjustmentZoomOut');
+
+      expect(response).toBeDefined();
+    });
+
+    test('emits a zoom in event when zoom in button clicked', async () => {
+      const el = await fixture(container());
+
+      setTimeout(() => (
+        el.shadowRoot.querySelector('.zoom_in').click()
+      ));
+      const response = await oneEvent(el, 'visualAdjustmentZoomIn');
+
+      expect(response).toBeDefined();
+    });
+  });
+
+  test('sets range defaults when none supplied', async () => {
+    const el = await fixture(container());
+    const brightnessRange = el.shadowRoot.querySelector('[name="brightness_range"]');
+
+    expect(brightnessRange.getAttribute('min')).toEqual('0');
+    expect(brightnessRange.getAttribute('max')).toEqual('100');
+    expect(brightnessRange.getAttribute('step')).toEqual('1');
+  });
+
+  test('sets the updated range value on the options prop', async () => {
+    const el = await fixture(container());
+    const { id } = options[0];
+    const newValue = 120;
+
+    el.setRangeValue(id, newValue);
+    await el.updateComplete;
+
+    expect(el.options[0].value).toEqual(newValue);
+  });
+
+  test('triggers a setRangeValue event when a range\'s input event fires', async () => {
+    IABookVisualAdjustments.prototype.setRangeValue = sinon.fake();
+
+    const el = await fixture(container());
+
+    el.shadowRoot.querySelector('[name="brightness_range"]').dispatchEvent(new Event('input'));
+    expect(el.setRangeValue.callCount).toEqual(1);
+  });
+});

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

@@ -1,7 +1,8 @@
 import sinon from 'sinon';
 import { deepCopy } from '../utils.js';
-import { BookModel } from '../../src/BookReader/BookModel.js';
-/** @typedef {import('../../src/BookReader/options.js').BookReaderOptions} BookReaderOptions */
+import { BookModel } from '@/src/BookReader/BookModel.js';
+import { NAMED_REDUCE_SETS } from '@/src/BookReader/ReduceSet.js';
+/** @typedef {import('@/src/BookReader/options.js').BookReaderOptions} BookReaderOptions */
 
 afterEach(() => {
   sinon.restore();
@@ -21,10 +22,10 @@ const SAMPLE_DATA = [
   ],
 ];
 
-describe('getMedianPageSize', () => {
+describe('getMedianPageSizeInches', () => {
   test('handles single page data', () => {
-    const bm = new BookModel({ data: SAMPLE_DATA.slice(0, 1) });
-    expect(bm.getMedianPageSize()).toEqual({ width: 123, height: 123 });
+    const bm = new BookModel({ data: SAMPLE_DATA.slice(0, 1), options: {ppi: 10} });
+    expect(bm.getMedianPageSizeInches()).toEqual({ width: 12.3, height: 12.3 });
   });
 
   test('handles odd pages data', () => {
@@ -38,8 +39,8 @@ describe('getMedianPageSize', () => {
     Object.assign(data[0][0], sizes[0]);
     Object.assign(data[1][0], sizes[1]);
     Object.assign(data[1][1], sizes[2]);
-    const bm = new BookModel({ data });
-    expect(bm.getMedianPageSize()).toEqual({ width: 200, height: 2200 });
+    const bm = new BookModel({ data, options: {ppi: 10} });
+    expect(bm.getMedianPageSizeInches()).toEqual({ width: 20, height: 220 });
   });
 
 
@@ -55,16 +56,31 @@ describe('getMedianPageSize', () => {
     Object.assign(data[1][0], sizes[1]);
     Object.assign(data[1][1], sizes[2]);
     Object.assign(data[2][0], sizes[3]);
-    const bm = new BookModel({ data });
-    expect(bm.getMedianPageSize()).toEqual({ width: 300, height: 2300 });
+    const bm = new BookModel({ data, options: {ppi: 10} });
+    expect(bm.getMedianPageSizeInches()).toEqual({ width: 30, height: 230 });
+  });
+
+  test('does not lexicographic sort for median', () => {
+    const sizes = [
+      {width: 100, height: 100},
+      {width: 20, height: 20},
+      {width: 30, height: 30},
+    ];
+    const data = deepCopy(SAMPLE_DATA);
+    delete data[2];
+    Object.assign(data[0][0], sizes[0]);
+    Object.assign(data[1][0], sizes[1]);
+    Object.assign(data[1][1], sizes[2]);
+    const bm = new BookModel({ data, options: {ppi: 10} });
+    expect(bm.getMedianPageSizeInches()).toEqual({ width: 3, height: 3 });
   });
 
   test('caches result', () => {
     const bm = new BookModel({ data: SAMPLE_DATA });
-    const firstResult = bm.getMedianPageSize();
-    expect(bm.getMedianPageSize()).toBe(firstResult);
-    expect(bm.getMedianPageSize()).toBe(firstResult);
-    expect(bm.getMedianPageSize()).toBe(firstResult);
+    const firstResult = bm.getMedianPageSizeInches();
+    expect(bm.getMedianPageSizeInches()).toBe(firstResult);
+    expect(bm.getMedianPageSizeInches()).toBe(firstResult);
+    expect(bm.getMedianPageSizeInches()).toBe(firstResult);
   });
 });
 
@@ -190,7 +206,7 @@ describe('pagesIterator', () => {
 describe('_getDataFlattened', () => {
   test('Assigns correct page sides', () => {
     const bm = new BookModel({ data: SAMPLE_DATA });
-    expect(bm._getDataFlattened().map(page => page.pageSide)).toEqual(['R', 'L', 'R', 'L'])
+    expect(bm._getDataFlattened().map(page => page.pageSide)).toEqual(['R', 'L', 'R', 'L']);
   });
 
   test('Memoized based on data length', () => {
@@ -309,4 +325,48 @@ describe('PageModel', () => {
       expect(bm.getPage(0).findPrev({ combineConsecutiveUnviewables: true })).toBeUndefined();
     });
   });
+
+  describe('findLeft/findRight', () => {
+    const data = deepCopy(SAMPLE_DATA);
+
+    test('Calls findNext/findPrev based on progression', () => {
+      const bm = new BookModel({ data });
+      const page = bm.getPage(0);
+      const findNextStub = sinon.stub(page, 'findNext');
+      const findPrevStub = sinon.stub(page, 'findPrev');
+      bm.pageProgression = 'lr';
+      page.findLeft();
+      expect(findPrevStub.callCount).toBe(1);
+      expect(findNextStub.callCount).toBe(0);
+      page.findRight();
+      expect(findPrevStub.callCount).toBe(1);
+      expect(findNextStub.callCount).toBe(1);
+      bm.pageProgression = 'rl';
+      page.findLeft();
+      expect(findPrevStub.callCount).toBe(1);
+      expect(findNextStub.callCount).toBe(2);
+      page.findRight();
+      expect(findPrevStub.callCount).toBe(2);
+      expect(findNextStub.callCount).toBe(2);
+    });
+  });
+
+  describe('getURISrcSet', () => {
+    const data = deepCopy(SAMPLE_DATA);
+    const bm = new BookModel({ data, reduceSet: NAMED_REDUCE_SETS.pow2 });
+    bm.getPageURI = (index, scale, rotate) => `correctURL.png?scale=${scale}`;
+    const page = bm.getPage(0);
+
+    test('with 0 elements in srcset', () => {
+      expect(page.getURISrcSet(1)).toBe("");
+    });
+
+    test('with 2 elements in srcset', () => {
+      expect(page.getURISrcSet(5)).toBe("correctURL.png?scale=2 2x, correctURL.png?scale=1 4x");
+    });
+
+    test('with the most elements in srcset', () => {
+      expect(page.getURISrcSet(35)).toBe("correctURL.png?scale=16 2x, correctURL.png?scale=8 4x, correctURL.png?scale=4 8x, correctURL.png?scale=2 16x, correctURL.png?scale=1 32x");
+    });
+  });
 });

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

@@ -0,0 +1,193 @@
+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.jumpToIndex = 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.$br = {
+      css: sinon.fake(),
+      animate: sinon.fake(),
+      addClass: 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.$br = {
+      addClass: sinon.fake(),
+      removeClass: 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.$br = {
+      addClass: sinon.fake(),
+      removeClass: 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`', () => {
+  let br;
+  let flipAnimationStub;
+  beforeEach(() => {
+    br = new BookReader();
+    global.br = br;
+    br.trigger = sinon.fake();
+    br.jumpToIndex = sinon.fake();
+    flipAnimationStub = sinon.stub(br._modes.mode2Up.mode2UpLit, 'flipAnimation');
+  });
+
+  afterEach(() => {
+    sinon.restore();
+  });
+
+  test('does not take action if user is on front page', () => {
+    br.firstIndex = 0;
+    br.prev();
+    expect(br.trigger.callCount).toBe(0);
+    expect(flipAnimationStub.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(flipAnimationStub.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(flipAnimationStub.callCount).toBe(0); // <-- gets called by `jumpToIndex` internally
+    });
+  });
+});
+

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