@internetarchive/bookreader 5.0.0-18

package/tests/karma/BookNavigator/search/search-results.test.js

@@ -0,0 +1,240 @@
+import {
+  html,
+  fixture,
+  expect,
+  oneEvent,
+} from '@open-wc/testing';
+import sinon from 'sinon';
+import { IABookSearchResults } from '../../../../src/BookNavigator/search/search-results.js';
+
+const container = (results = [], query = '') => (
+  html`<ia-book-search-results .results=${results} .query=${query}></ia-book-search-results>`
+);
+
+console.log("ia-book-search-results-test");
+
+const searchQuery = 'Bristol';
+
+const results = [{
+  text: `In the drawing of caricatures and cartoons\u2014or any other com' mercial art, for that matter\u2014the artist should know something about the processes of reproduction for that particular form of art work. For pen and ink work the engraving is made on a sine printing plate. It is not necessary, however, to know all about these processes of reproduction. The artist should know that all work intended for line rqproducttons should be made on white paper or {{{${searchQuery}}}} Board with black drawing ink. The drawing to be reproduced is photographed on a chemically treated sine plate, which is then treated with acid. This acid eats away the surface of the sine, except the photographed' lines, which are left in relief, somewhat like printing type. Colored inks do not photograph well; neither does black ink on colored paper.`,
+  cover: '//placehold.it/30x44',
+  title: 'Book title',
+  par: [{
+    boxes: [{
+      r: 2672, b: 792, t: 689, page: 24, l: 2424,
+    }],
+    b: 1371,
+    t: 689,
+    page_width: 3658,
+    r: 3192,
+    l: 428,
+    page_height: 5357,
+    page: 24,
+  }],
+}, {
+  text: `Drawings intended for sale should be made on a good grade of {{{${searchQuery}}}} Board, and a margin left all the way around the drawings. They should be mailed flat, and'require first class postage. Enclose postage for the return of the drawings. Only send good drawings of a reason- able quantity. Enclose a neat and terse letter to the one you are sending the drawings to, written with pen and ink or typewriter if possible, on`,
+  par: [{
+    boxes: [{
+      r: 698, b: 4460, t: 4324, page: 86, l: 450,
+    }],
+    b: 4938,
+    t: 4207,
+    page_width: 3658,
+    r: 3196,
+    l: 432,
+    page_height: 5357,
+    page: 86,
+  }],
+}];
+
+describe('<ia-book-search-results>', () => {
+  afterEach(() => {
+    sinon.restore();
+  });
+
+  it('sets default properties', async () => {
+    const query = 'bristol';
+    const el = await fixture(container(results, query));
+
+    expect(el.results).to.equal(results);
+    expect(el.query).to.equal(query);
+  });
+
+  it('sets results when passed in via event object', async () => {
+    const el = await fixture(container());
+
+    el.setResults({ detail: { results } });
+    expect(el.results).to.equal(results);
+  });
+
+  it('listens for a custom search callback event on the document', async () => {
+    IABookSearchResults.prototype.setResults = sinon.fake();
+    const el = await fixture(container());
+    const event = new Event('BookReader:SearchCallback');
+
+    event.detail = { results };
+    document.dispatchEvent(event);
+    expect(el.setResults.callCount).to.equal(1);
+    expect(el.setResults.firstArg).to.equal(event);
+  });
+
+  it('renders results that contain the book title', async () => {
+    sinon.replace(IABookSearchResults.prototype, 'createRenderRoot', function createRenderRoot() { return this; });
+    const el = await fixture(container(results));
+
+    expect(el.innerHTML).to.include(`${results[0].title}`);
+  });
+
+  it('renders results that contain a highlighted match', async () => {
+    sinon.replace(IABookSearchResults.prototype, 'createRenderRoot', function createRenderRoot() { return this; });
+    const el = await fixture(container(results));
+
+    expect(el.innerHTML).to.include(`<mark>${searchQuery}</mark>`);
+  });
+
+  it('renders results that contain an optional cover image', async () => {
+    sinon.replace(IABookSearchResults.prototype, 'createRenderRoot', function createRenderRoot() { return this; });
+    const el = await fixture(container(results));
+
+    expect(el.innerHTML).to.include(`<img src="${results[0].cover}">`);
+  });
+
+  it('sets a query prop when search input receives input', async () => {
+    const el = await fixture(container(results));
+    const searchInput = el.shadowRoot.querySelector('[name="query"]');
+
+    searchInput.value = searchQuery;
+    searchInput.dispatchEvent(new Event('keyup'));
+
+    expect(el.query).to.equal(searchQuery);
+  });
+
+  it('emits a custom event when search form submitted when input is populated', async () => {
+    const el = await fixture(container(results));
+
+    setTimeout(() => {
+      const form = el.shadowRoot.querySelector('form');
+      form.querySelector('input').value = 'foo';
+      form.dispatchEvent(new Event('submit'));
+    });
+    const response = await oneEvent(el, 'bookSearchInitiated');
+
+    expect(response).to.exist;
+  });
+
+  it('uses a singular noun when one result given', async () => {
+    const el = await fixture(container([results[0]]));
+    const resultsCount = await fixture(el.resultsCount);
+
+    expect(resultsCount.innerHTML).to.include('1 result');
+  });
+
+  it('can render header with active options count', async () => {
+    const el = await fixture(container(results));
+    el.renderHeader = true;
+
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('header p').innerText).to.include('2');
+  });
+
+  it('renders search all files checkbox when enabled', async () => {
+    const el = await fixture(container(results));
+    el.renderSearchAllFiles = true;
+
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('[name="all_files"]')).to.not.be.null;
+  });
+
+  it('emits a resultSelected event when a search result is clicked', async () => {
+    const el = await fixture(container(results));
+
+    setTimeout(() => (
+      el.shadowRoot.querySelector('book-search-result').querySelector('li').click()
+    ));
+    const response = await oneEvent(el, 'resultSelected');
+
+    expect(response).to.exist;
+  });
+
+  it('emits a closeMenu event when a search result is clicked', async () => {
+    const el = await fixture(container(results));
+
+    setTimeout(() => (
+      el.shadowRoot.querySelector('book-search-result').querySelector('li').click()
+    ));
+    const response = await oneEvent(el, 'closeMenu');
+
+    expect(response).to.exist;
+  });
+
+  describe('Search results placeholders', () => {
+    it('renders a loading state when queryInProgress is true', async () => {
+      const el = await fixture(container(results));
+
+      el.queryInProgress = true;
+      await el.updateComplete;
+
+      expect(el.shadowRoot.querySelector('.loading')).to.not.be.null;
+    });
+    it('renders an error message when provided', async () => {
+      const el = await fixture(container([]));
+      const message = 'Sample error message';
+      el.errorMessage = message;
+      await el.updateComplete;
+
+      expect(el.shadowRoot.querySelector('.error-message')).to.exist;
+      expect(el.shadowRoot.querySelector('.search-cta')).to.be.null;
+    });
+    it('displays call to search when no results or search errors are showing', async () => {
+      const el = await fixture(container([]));
+
+      expect(el.shadowRoot.querySelector('.search-cta')).to.exist;
+      expect(el.shadowRoot.querySelector('.error-message')).to.be.null;
+      expect(el.shadowRoot.querySelector('.results')).to.be.null;
+    });
+  });
+
+  it('displays results images when told to', async () => {
+    const el = await fixture(container(results));
+    el.displayResultImages = true;
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('.results.show-image')).to.exist;
+  });
+
+  describe('search input focus', () => {
+    it('will always try to re-focus once the component updates', async () => {
+      const el = await fixture(container(results));
+      el.focusOnInputIfNecessary = sinon.fake();
+      // update any property to fire lifecycle
+      el.results = [];
+      await el.updateComplete;
+
+      expect(el.focusOnInputIfNecessary.callCount).to.equal(1);
+    });
+    it('refocuses on input when results are empty', async () => {
+      const el = await fixture(container(results));
+      el.results = [];
+      await el.updateComplete;
+
+      const searchInputField = el.shadowRoot.querySelector('input[type=\'search\']');
+      expect(searchInputField).to.equal(el.shadowRoot.activeElement);
+    });
+  });
+
+  // it("emits a bookSearchCanceled event when loading state's cancel action clicked", async () => {
+  //   const el = await fixture(container(results));
+
+  //   el.queryInProgress = true;
+  //   await el.updateComplete;
+
+  //   setTimeout(() => (
+  //     el.shadowRoot.querySelector('button').click()
+  //   ));
+  //   const response = await oneEvent(el, 'bookSearchCanceled');
+
+  //   expect(response).to.exist;
+  // });
+});

package/tests/karma/BookNavigator/sharing/sharing-provider.test.js

@@ -0,0 +1,40 @@
+import { expect } from '@open-wc/testing';
+import sinon from 'sinon';
+import sharingProvider from '../../../../src/ItemNavigator/providers/sharing.js';
+
+afterEach(() => {
+  sinon.restore();
+});
+
+const mdStub = {
+  identifier: 'stubby-id'
+};
+
+const baseHostStub = 'foo.org';
+const itemType = 'texts';
+const subPrefix = 'beep-boop_12 4 5';
+
+describe('Sharing Provider', () => {
+  describe('constructor', () => {
+    const provider = new sharingProvider(mdStub, baseHostStub, itemType, subPrefix);
+
+    expect(provider.id).to.equal('share');
+    expect(provider.icon).to.exist;
+    expect(provider.label).to.equal('Share this item');
+    expect(provider.itemType).to.equal(itemType);
+    expect(provider.idPath).to.exist;
+    expect(provider.component).to.exist;
+  });
+
+  describe('handles subprefix', () => {
+    it('encodes the subprefix if it has one', () => {
+      const provider = new sharingProvider(mdStub, baseHostStub, itemType, subPrefix);
+      const encodedSubprefix = encodeURIComponent(subPrefix);
+      expect(provider.idPath).to.equal(`${mdStub.identifier}/${encodedSubprefix}`);
+    });
+    it('does not add subprefix to path if subprefix is item id', () => {
+      const provider = new sharingProvider(mdStub, baseHostStub, itemType, mdStub.identifier);
+      expect(provider.idPath).to.equal(mdStub.identifier);
+    });
+  });
+});

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

@@ -0,0 +1,201 @@
+import {
+  html,
+  fixture,
+  expect,
+  oneEvent,
+} from '@open-wc/testing';
+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();
+  });
+
+  it('sets default properties', async () => {
+    const el = await fixture(container());
+
+    expect(el.options).to.exist;
+    expect(el.options.length).to.equal(options.length);
+    expect(el.renderHeader).to.exist;
+    expect(el.renderHeader).to.be.false;
+    expect(el.activeCount).to.exist;
+    expect(el.showZoomControls).to.be.true;
+  });
+
+  it('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.innerText).to.equal(options[0].name);
+    expect(checkbox.checked).to.equal(true);
+  });
+
+  it('can render header with active options count', async () => {
+    const renderHeader = true;
+    const el = await fixture(container(renderHeader));
+    expect(el.shadowRoot.querySelector('header p').innerText).to.include('1');
+  });
+
+  it('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')).not.to.exist;
+  });
+
+  it('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).to.equal(false);
+  });
+
+  it('renders zoom in and out controls when enabled', async () => {
+    const el = await fixture(container());
+
+    expect(el.shadowRoot.querySelector('.zoom_out')).to.exist;
+    expect(el.shadowRoot.querySelector('.zoom_in')).to.exist;
+  });
+
+  it('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')).not.to.exist;
+    expect(el.shadowRoot.querySelector('.zoom_in')).not.to.exist;
+  });
+
+  describe('Custom events', () => {
+    it('prepareEventDetails returns proper params', async () => {
+      const el = await fixture(container());
+      await el.updateComplete;
+      const params = el.prepareEventDetails();
+
+      expect(params.activeCount).to.exist;
+      expect(typeof (params.activeCount)).to.be.equal('number');
+      expect(params.changedOptionId).to.exist;
+      expect(typeof (params.changedOptionId)).to.be.equal('string');
+      expect(params.options).to.exist;
+      expect(params.options.length).to.exist;
+      expect(params.options.length).to.be.greaterThan(0);
+    });
+    it('emitOptionChangedEvent calls for the params', async () => {
+      IABookVisualAdjustments.prototype.prepareEventDetails = sinon.fake();
+      const el = await fixture(container());
+      await el.updateComplete;
+
+      expect(el.prepareEventDetails.callCount).to.equal(1);
+    });
+    it('triggers an emitOptionChangedEvent event at firstUpdate', async () => {
+      IABookVisualAdjustments.prototype.emitOptionChangedEvent = sinon.fake();
+      const el = await fixture(container());
+
+      expect(el.emitOptionChangedEvent.callCount).to.equal(1);
+    });
+
+    it('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).to.equal(1); // firstUpdate fire
+
+      el.shadowRoot.querySelector('li input').dispatchEvent(new Event('change'));
+      expect(el.emitOptionChangedEvent.callCount).to.equal(2);
+    });
+
+    it('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).to.equal(1); // firstUpdate fire
+
+      el.shadowRoot.querySelector('[name="brightness_range"]').dispatchEvent(new Event('change'));
+      expect(el.emitOptionChangedEvent.callCount).to.equal(2);
+    });
+
+    it('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).to.exist;
+    });
+
+    it('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).to.exist;
+    });
+  });
+
+  it('sets range defaults when none supplied', async () => {
+    const el = await fixture(container());
+    const brightnessRange = el.shadowRoot.querySelector('[name="brightness_range"]');
+
+    expect(brightnessRange.getAttribute('min')).to.equal('0');
+    expect(brightnessRange.getAttribute('max')).to.equal('100');
+    expect(brightnessRange.getAttribute('step')).to.equal('1');
+  });
+
+  it('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).to.equal(newValue);
+  });
+
+  it('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).to.equal(1);
+  });
+});

package/tests/karma/BookNavigator/volumes/volumes-provider.test.js

@@ -0,0 +1,160 @@
+import { expect, fixture } from '@open-wc/testing';
+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();
+});
+
+describe('Volumes Provider', () => {
+  it('constructor', () => {
+    const onSortClick = sinon.fake();
+    const baseHost = "https://archive.org";
+    const provider = new volumesProvider(baseHost, brOptions, onSortClick);
+
+    const files = brOptions.options.multipleBooksList.by_subprefix;
+    const volumeCount = Object.keys(files).length;
+
+    expect(provider.optionChange).to.equal(onSortClick);
+    expect(provider.id).to.equal('volumes');
+    expect(provider.icon).to.exist;
+
+    expect(provider.label).to.equal(`Viewable files (${volumeCount})`);
+    expect(provider.viewableFiles).to.exist;
+    expect(provider.viewableFiles.length).to.equal(3);
+
+    expect(provider.component.hostUrl).to.exist;
+    expect(provider.component.hostUrl).to.equal(baseHost);
+    expect(provider.component).to.exist;
+  });
+
+  it('sorting cycles - render sort actionButton', async () => {
+    const onSortClick = sinon.fake();
+    const baseHost = "https://archive.org";
+    const provider = new volumesProvider(baseHost, brOptions, onSortClick);
+
+    expect(provider.sortOrderBy).to.equal("orig_sort");
+
+    provider.sortVolumes("title_asc");
+    expect(provider.sortOrderBy).to.equal("title_asc");
+    expect(provider.sortButton.getHTML()).includes("sort-by asc-icon");
+
+    provider.sortVolumes("title_desc");
+    expect(provider.sortOrderBy).to.equal("title_desc");
+    expect(provider.sortButton.getHTML()).includes("sort-by desc-icon");
+
+    provider.sortVolumes("orig_sort");
+    expect(provider.sortOrderBy).to.equal("orig_sort");
+    expect(provider.sortButton.getHTML()).includes("sort-by neutral-icon");
+  });
+
+  it('sort volumes in initial order', async () => {
+    const onSortClick = sinon.fake();
+    const baseHost = "https://archive.org";
+    const provider = new volumesProvider(baseHost, brOptions, onSortClick);
+
+    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("orig_sort");
+
+    expect(provider.sortOrderBy).to.equal("orig_sort");
+    expect(provider.actionButton).to.exist;
+
+    const providerFileTitles = provider.viewableFiles.map(item => item.title);
+    // use `.eql` for "lose equality" in order to deeply compare values.
+    expect(providerFileTitles).to.eql([...origSortTitles]);
+  });
+
+  it('sort volumes in ascending title order', async () => {
+    const onSortClick = sinon.fake();
+    const baseHost = "https://archive.org";
+    const provider = new volumesProvider(baseHost, brOptions, onSortClick);
+
+    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).to.equal("title_asc");
+    expect(provider.actionButton).to.exist;
+
+    const providerFileTitles = provider.viewableFiles.map(item => item.title);
+    // use `.eql` for "lose equality" in order to deeply compare values.
+    expect(providerFileTitles).to.eql([...ascendingTitles]);
+  });
+
+  it('sort volumes in descending title order', async () => {
+    const onSortClick = sinon.fake();
+    const baseHost = "https://archive.org";
+    const provider = new volumesProvider(baseHost, brOptions, onSortClick);
+
+    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).to.equals("title_desc");
+    expect(provider.actionButton).to.exist;
+
+    const providerFileTitles = provider.viewableFiles.map(item => item.title);
+    // use `.eql` for "lose equality" in order to deeply compare values.
+    expect(providerFileTitles).to.eql([...descendingTitles]);
+  });
+
+  describe('Sorting icons', () => {
+    it('has 3 icons', async () => {
+      const onSortClick = sinon.fake();
+      const baseHost = "https://archive.org";
+      const provider = new volumesProvider(baseHost, brOptions, onSortClick);
+
+      provider.sortOrderBy = 'orig_sort';
+      const origSortButton = await fixture(provider.sortButton);
+      expect(origSortButton.classList.contains('neutral-icon')).to.be.true;
+
+      provider.sortOrderBy = 'title_asc';
+      const ascButton = await fixture(provider.sortButton);
+      expect(ascButton.classList.contains('asc-icon')).to.be.true;
+
+      provider.sortOrderBy = 'title_desc';
+      const descButton = await fixture(provider.sortButton);
+      expect(descButton.classList.contains('desc-icon')).to.be.true;
+    });
+  });
+});