@internetarchive/bookreader 5.0.0-6-multiple-files → 5.0.0-60

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',
+  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/jest/BookNavigator/volumes/volumes-provider.test.js

@@ -0,0 +1,184 @@
+import { fixture, fixtureCleanup, fixtureSync } from '@open-wc/testing-helpers';
+import sinon from 'sinon';
+import volumesProvider from '@/src/BookNavigator/volumes/volumes-provider';
+
+const brOptions = {
+  "options": {
+    "enableMultipleBooks": true,
+    "multipleBooksList": {
+      "by_subprefix": {
+        "/details/SubBookTest": {
+          "url_path": "/details/SubBookTest",
+          "file_subprefix": "book1/GPORFP",
+          "orig_sort": 1,
+          "title": "book1/GPORFP.pdf",
+          "file_source": "/book1/GPORFP_jp2.zip"
+        },
+        "/details/SubBookTest/subdir/book2/brewster_kahle_internet_archive": {
+          "url_path": "/details/SubBookTest/subdir/book2/brewster_kahle_internet_archive",
+          "file_subprefix": "subdir/book2/brewster_kahle_internet_archive",
+          "orig_sort": 2,
+          "title": "subdir/book2/brewster_kahle_internet_archive.pdf",
+          "file_source": "/subdir/book2/brewster_kahle_internet_archive_jp2.zip"
+        },
+        "/details/SubBookTest/subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume": {
+          "url_path": "/details/SubBookTest/subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume",
+          "file_subprefix": "subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume",
+          "orig_sort": 3,
+          "title": "subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume.pdf",
+          "file_source": "/subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume_jp2.zip"
+        }
+      }
+    }
+  }
+};
+
+afterEach(() => {
+  sinon.restore();
+  fixtureCleanup();
+});
+
+describe('Volumes Provider', () => {
+  test('constructor', () => {
+    const onProviderChange = sinon.fake();
+    const baseHost = "https://archive.org";
+    const provider = new volumesProvider({
+      baseHost,
+      bookreader: brOptions,
+      onProviderChange
+    });
+
+    const files = brOptions.options.multipleBooksList.by_subprefix;
+    const volumeCount = Object.keys(files).length;
+
+    expect(provider.onProviderChange).toEqual(onProviderChange);
+    expect(provider.id).toEqual('volumes');
+    expect(provider.icon).toBeDefined();
+    expect(fixtureSync(provider.icon).tagName).toEqual('svg');
+    expect(provider.label).toEqual(`Viewable files (${volumeCount})`);
+    expect(provider.viewableFiles).toBeDefined();
+    expect(provider.viewableFiles.length).toEqual(3);
+
+    expect(provider.component.hostUrl).toBeDefined();
+    expect(provider.component.hostUrl).toEqual(baseHost);
+    expect(provider.component).toBeDefined();
+  });
+
+  test('sorting cycles - render sort actionButton', async () => {
+    const onProviderChange = sinon.fake();
+    const baseHost = "https://archive.org";
+    const provider = new volumesProvider({
+      baseHost,
+      bookreader: brOptions,
+      onProviderChange
+    });
+
+    expect(provider.sortOrderBy).toEqual("default");
+
+    provider.sortVolumes("title_asc");
+    expect(provider.sortOrderBy).toEqual("title_asc");
+    expect(fixtureSync(provider.sortButton).outerHTML).toContain("sort-by asc-icon");
+
+    provider.sortVolumes("title_desc");
+    expect(provider.sortOrderBy).toEqual("title_desc");
+    expect(fixtureSync(provider.sortButton).outerHTML).toContain("sort-by desc-icon");
+
+    provider.sortVolumes("default");
+    expect(provider.sortOrderBy).toEqual("default");
+    expect(fixtureSync(provider.sortButton).outerHTML).toContain("sort-by neutral-icon");
+  });
+
+  test('sort volumes in initial order', async () => {
+    const onProviderChange = sinon.fake();
+    const baseHost = "https://archive.org";
+    const provider = new volumesProvider({
+      baseHost,
+      bookreader: brOptions,
+      onProviderChange
+    });
+
+    const parsedFiles = brOptions.options.multipleBooksList.by_subprefix;
+    const files = Object.keys(parsedFiles).map(item => parsedFiles[item]).sort((a, b) => a.orig_sort - b.orig_sort);
+    const origSortTitles = files.map(item => item.title);
+
+    provider.sortVolumes("default");
+
+    expect(provider.sortOrderBy).toEqual("default");
+    expect(provider.actionButton).toBeDefined();
+
+    const providerFileTitles = provider.viewableFiles.map(item => item.title);
+    // use `.eql` for "lose equality" in order to deeply compare values.
+    expect(providerFileTitles).toEqual([...origSortTitles]);
+  });
+
+  test('sort volumes in ascending title order', async () => {
+    const onProviderChange = sinon.fake();
+    const baseHost = "https://archive.org";
+    const provider = new volumesProvider({
+      baseHost,
+      bookreader: brOptions,
+      onProviderChange
+    });
+
+    const parsedFiles = brOptions.options.multipleBooksList.by_subprefix;
+    const files = Object.keys(parsedFiles).map(item => parsedFiles[item]);
+    const ascendingTitles = files.map(item => item.title).sort((a, b) => a.localeCompare(b));
+
+    provider.sortVolumes("title_asc");
+
+    expect(provider.sortOrderBy).toEqual("title_asc");
+    expect(provider.actionButton).toBeDefined();
+
+    const providerFileTitles = provider.viewableFiles.map(item => item.title);
+    // use `.eql` for "lose equality" in order to deeply compare values.
+    expect(providerFileTitles).toEqual([...ascendingTitles]);
+  });
+
+  test('sort volumes in descending title order', async () => {
+    const onProviderChange = sinon.fake();
+    const baseHost = "https://archive.org";
+    const provider = new volumesProvider({
+      baseHost,
+      bookreader: brOptions,
+      onProviderChange
+    });
+    provider.isSortAscending = false;
+
+    const parsedFiles = brOptions.options.multipleBooksList.by_subprefix;
+    const files = Object.keys(parsedFiles).map(item => parsedFiles[item]);
+    const descendingTitles = files.map(item => item.title).sort((a, b) => b.localeCompare(a));
+
+    provider.sortVolumes("title_desc");
+
+    expect(provider.sortOrderBy).toEqual("title_desc");
+    expect(provider.actionButton).toBeDefined();
+
+    const providerFileTitles = provider.viewableFiles.map(item => item.title);
+    // use `.eql` for "lose equality" in order to deeply compare values.
+    expect(providerFileTitles).toEqual([...descendingTitles]);
+  });
+
+  describe('Sorting icons', () => {
+    test('has 3 icons', async () => {
+      const onProviderChange = sinon.fake();
+      const baseHost = "https://archive.org";
+      const provider = new volumesProvider({
+        baseHost,
+        bookreader: brOptions,
+        onProviderChange
+      });
+      provider.sortOrderBy = 'default';
+
+      const origSortButton = await fixture(provider.sortButton);
+      expect(origSortButton.classList.contains('neutral-icon')).toBeTruthy();
+
+      provider.sortOrderBy = 'title_asc';
+      const ascButton = await fixture(provider.sortButton);
+      expect(ascButton.classList.contains('asc-icon')).toBeTruthy();
+
+      provider.sortOrderBy = 'title_desc';
+      const descButton = await fixture(provider.sortButton);
+      expect(descButton.classList.contains('desc-icon')).toBeTruthy();
+    });
+  });
+});

package/tests/jest/BookNavigator/volumes/volumes.test.js

@@ -0,0 +1,97 @@
+import {
+  html,
+  fixture,
+  fixtureCleanup,
+} from '@open-wc/testing-helpers';
+import sinon from 'sinon';
+import '@/src/BookNavigator/volumes/volumes.js';
+
+
+const brOptions = {
+  "options": {
+    "enableMultipleBooks": true,
+    "multipleBooksList": {
+      "by_subprefix": {
+        "/details/SubBookTest": {
+          "url_path": "/details/SubBookTest",
+          "file_subprefix": "book1/GPORFP",
+          "orig_sort": 0,
+          "title": "book1/GPORFP.pdf",
+          "file_source": "/book1/GPORFP_jp2.zip"
+        },
+        "/details/SubBookTest/subdir/book2/brewster_kahle_internet_archive": {
+          "url_path": "/details/SubBookTest/subdir/book2/brewster_kahle_internet_archive",
+          "file_subprefix": "subdir/book2/brewster_kahle_internet_archive",
+          "orig_sort": 1,
+          "title": "subdir/book2/brewster_kahle_internet_archive.pdf",
+          "file_source": "/subdir/book2/brewster_kahle_internet_archive_jp2.zip"
+        },
+        "/details/SubBookTest/subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume": {
+          "url_path": "/details/SubBookTest/subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume",
+          "file_subprefix": "subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume",
+          "orig_sort": 2,
+          "title": "subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume.pdf",
+          "file_source": "/subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume_jp2.zip"
+        }
+      }
+    }
+  }
+};
+
+const container = (brOptions, prefix) => (
+  html`
+    <viewable-files .viewableFiles=${brOptions} .hostUrl="https://archive.org" .subPrefix=${prefix}></viewable-files>
+  `
+);
+
+beforeEach(() => {
+  const body = document.querySelector('body');
+  const brHook = document.createElement('div');
+  brHook.setAttribute('id', 'BookReader');
+  body.appendChild(brHook);
+});
+
+afterEach(() => {
+  sinon.restore();
+  fixtureCleanup();
+});
+
+describe('<viewable-files>', () => {
+  test('sets default properties', async () => {
+    const files = brOptions.options.multipleBooksList?.by_subprefix;
+    const viewableFiles = Object.keys(files).map(item => files[item]);
+    const el = await fixture(container(viewableFiles));
+    await el.updateComplete;
+
+    expect(el.viewableFiles).toEqual(viewableFiles);
+    expect(el.viewableFiles.length).toEqual(3);
+    expect(el.shadowRoot.querySelectorAll("ul li").length).toEqual(3);
+
+    expect(el.shadowRoot.querySelector(".item-title").textContent).toContain(`${viewableFiles[0].title}`);
+  });
+
+  test('render empty volumes', async () => {
+    const viewableFiles = [];
+    const el = await fixture(container(viewableFiles));
+    await el.updateComplete;
+
+    expect(el.viewableFiles).toEqual(viewableFiles);
+    expect(el.viewableFiles.length).toEqual(0);
+    expect(el.shadowRoot.childElementCount).not.toEqual(0);
+  });
+
+  test('render active volume item set as first viewable item ', async () => {
+    const files = brOptions.options.multipleBooksList?.by_subprefix;
+    const viewableFiles = Object.keys(files).map(item => files[item]);
+    const prefix = viewableFiles[0].file_subprefix;
+
+    const el = await fixture(container(viewableFiles, prefix));
+    await el.updateComplete;
+
+    expect(el.viewableFiles).toEqual(viewableFiles);
+    expect(el.viewableFiles.length).toEqual(3);
+
+    expect(el.shadowRoot.querySelectorAll("ul li div")[1].className).toEqual("content active");
+  });
+
+});

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: 1} });
+    expect(bm.getMedianPageSizeInches()).toEqual({ width: 123, height: 123 });
   });
 
   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: 1} });
+    expect(bm.getMedianPageSizeInches()).toEqual({ width: 200, height: 2200 });
   });
 
 
@@ -55,16 +56,16 @@ 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: 1} });
+    expect(bm.getMedianPageSizeInches()).toEqual({ width: 300, height: 2300 });
   });
 
   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 +191,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 +310,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");
+    });
+  });
 });