@internetarchive/bookreader 5.0.0-43 → 5.0.0-44-a1

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/{karma → jest}/BookNavigator/volumes/volumes-provider.test.js

@@ -1,6 +1,6 @@
-import { expect, fixture, fixtureCleanup, fixtureSync } from '@open-wc/testing';
+import { fixture, fixtureCleanup, fixtureSync } from '@open-wc/testing-helpers';
 import sinon from 'sinon';
-import volumesProvider from '../../../../src/BookNavigator/volumes/volumes-provider';
+import volumesProvider from '@/src/BookNavigator/volumes/volumes-provider';
 
 const brOptions = {
   "options": {
@@ -39,7 +39,7 @@ afterEach(() => {
 });
 
 describe('Volumes Provider', () => {
-  it('constructor', () => {
+  test('constructor', () => {
     const onProviderChange = sinon.fake();
     const baseHost = "https://archive.org";
     const provider = new volumesProvider({
@@ -51,20 +51,20 @@ describe('Volumes Provider', () => {
     const files = brOptions.options.multipleBooksList.by_subprefix;
     const volumeCount = Object.keys(files).length;
 
-    expect(provider.onProviderChange).to.equal(onProviderChange);
-    expect(provider.id).to.equal('volumes');
-    expect(provider.icon).to.exist;
-    expect(fixtureSync(provider.icon).tagName).to.equal('svg');
-    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;
+    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();
   });
 
-  it('sorting cycles - render sort actionButton', async () => {
+  test('sorting cycles - render sort actionButton', async () => {
     const onProviderChange = sinon.fake();
     const baseHost = "https://archive.org";
     const provider = new volumesProvider({
@@ -73,22 +73,22 @@ describe('Volumes Provider', () => {
       onProviderChange
     });
 
-    expect(provider.sortOrderBy).to.equal("default");
+    expect(provider.sortOrderBy).toEqual("default");
 
     provider.sortVolumes("title_asc");
-    expect(provider.sortOrderBy).to.equal("title_asc");
-    expect(fixtureSync(provider.sortButton).outerHTML).includes("sort-by asc-icon");
+    expect(provider.sortOrderBy).toEqual("title_asc");
+    expect(fixtureSync(provider.sortButton).outerHTML).toContain("sort-by asc-icon");
 
     provider.sortVolumes("title_desc");
-    expect(provider.sortOrderBy).to.equal("title_desc");
-    expect(fixtureSync(provider.sortButton).outerHTML).includes("sort-by desc-icon");
+    expect(provider.sortOrderBy).toEqual("title_desc");
+    expect(fixtureSync(provider.sortButton).outerHTML).toContain("sort-by desc-icon");
 
     provider.sortVolumes("default");
-    expect(provider.sortOrderBy).to.equal("default");
-    expect(fixtureSync(provider.sortButton).outerHTML).includes("sort-by neutral-icon");
+    expect(provider.sortOrderBy).toEqual("default");
+    expect(fixtureSync(provider.sortButton).outerHTML).toContain("sort-by neutral-icon");
   });
 
-  it('sort volumes in initial order', async () => {
+  test('sort volumes in initial order', async () => {
     const onProviderChange = sinon.fake();
     const baseHost = "https://archive.org";
     const provider = new volumesProvider({
@@ -103,15 +103,15 @@ describe('Volumes Provider', () => {
 
     provider.sortVolumes("default");
 
-    expect(provider.sortOrderBy).to.equal("default");
-    expect(provider.actionButton).to.exist;
+    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).to.eql([...origSortTitles]);
+    expect(providerFileTitles).toEqual([...origSortTitles]);
   });
 
-  it('sort volumes in ascending title order', async () => {
+  test('sort volumes in ascending title order', async () => {
     const onProviderChange = sinon.fake();
     const baseHost = "https://archive.org";
     const provider = new volumesProvider({
@@ -126,15 +126,15 @@ describe('Volumes Provider', () => {
 
     provider.sortVolumes("title_asc");
 
-    expect(provider.sortOrderBy).to.equal("title_asc");
-    expect(provider.actionButton).to.exist;
+    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).to.eql([...ascendingTitles]);
+    expect(providerFileTitles).toEqual([...ascendingTitles]);
   });
 
-  it('sort volumes in descending title order', async () => {
+  test('sort volumes in descending title order', async () => {
     const onProviderChange = sinon.fake();
     const baseHost = "https://archive.org";
     const provider = new volumesProvider({
@@ -150,16 +150,16 @@ describe('Volumes Provider', () => {
 
     provider.sortVolumes("title_desc");
 
-    expect(provider.sortOrderBy).to.equals("title_desc");
-    expect(provider.actionButton).to.exist;
+    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).to.eql([...descendingTitles]);
+    expect(providerFileTitles).toEqual([...descendingTitles]);
   });
 
   describe('Sorting icons', () => {
-    it('has 3 icons', async () => {
+    test('has 3 icons', async () => {
       const onProviderChange = sinon.fake();
       const baseHost = "https://archive.org";
       const provider = new volumesProvider({
@@ -170,15 +170,15 @@ describe('Volumes Provider', () => {
       provider.sortOrderBy = 'default';
 
       const origSortButton = await fixture(provider.sortButton);
-      expect(origSortButton.classList.contains('neutral-icon')).to.be.true;
+      expect(origSortButton.classList.contains('neutral-icon')).toBeTruthy();
 
       provider.sortOrderBy = 'title_asc';
       const ascButton = await fixture(provider.sortButton);
-      expect(ascButton.classList.contains('asc-icon')).to.be.true;
+      expect(ascButton.classList.contains('asc-icon')).toBeTruthy();
 
       provider.sortOrderBy = 'title_desc';
       const descButton = await fixture(provider.sortButton);
-      expect(descButton.classList.contains('desc-icon')).to.be.true;
+      expect(descButton.classList.contains('desc-icon')).toBeTruthy();
     });
   });
 });

package/tests/{karma → jest}/BookNavigator/volumes/volumes.test.js

@@ -1,11 +1,10 @@
 import {
   html,
   fixture,
-  expect,
   fixtureCleanup,
-} from '@open-wc/testing';
+} from '@open-wc/testing-helpers';
 import sinon from 'sinon';
-import '../../../../src/BookNavigator/volumes/volumes.js';
+import '@/src/BookNavigator/volumes/volumes.js';
 
 
 const brOptions = {
@@ -58,30 +57,30 @@ afterEach(() => {
 });
 
 describe('<viewable-files>', () => {
-  it('sets default properties', async () => {
+  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).to.equal(viewableFiles);
-    expect(el.viewableFiles.length).to.equal(3);
-    expect(el.shadowRoot.querySelectorAll("ul li").length).to.equal(3);
+    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").innerText).to.include(`${viewableFiles[0].title}`);
+    expect(el.shadowRoot.querySelector(".item-title").textContent).toContain(`${viewableFiles[0].title}`);
   });
 
-  it('render empty volumes', async () => {
+  test('render empty volumes', async () => {
     const viewableFiles = [];
     const el = await fixture(container(viewableFiles));
     await el.updateComplete;
 
-    expect(el.viewableFiles).to.equal(viewableFiles);
-    expect(el.viewableFiles.length).to.equal(0);
-    expect(el.shadowRoot.childElementCount).to.equal(0);
+    expect(el.viewableFiles).toEqual(viewableFiles);
+    expect(el.viewableFiles.length).toEqual(0);
+    expect(el.shadowRoot.childElementCount).not.toEqual(0);
   });
 
-  it('render active volume item set as first viewable item ', async () => {
+  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;
@@ -89,10 +88,10 @@ describe('<viewable-files>', () => {
     const el = await fixture(container(viewableFiles, prefix));
     await el.updateComplete;
 
-    expect(el.viewableFiles).to.equal(viewableFiles);
-    expect(el.viewableFiles.length).to.equal(3);
+    expect(el.viewableFiles).toEqual(viewableFiles);
+    expect(el.viewableFiles.length).toEqual(3);
 
-    expect(el.shadowRoot.querySelectorAll("ul li div")[1].className).to.equal("content active");
+    expect(el.shadowRoot.querySelectorAll("ul li div")[1].className).toEqual("content active");
   });
 
 });

package/tests/jest/plugins/tts/AbstractTTSEngine.test.js

@@ -20,7 +20,7 @@ describe.skip('AbstractTTSEngine', () => {
   });
 });
 
-for (const dummyVoice of [dummyVoice, dummyVoiceUnderscores]) {
+for (const dummyVoice of [dummyVoiceHyphens, dummyVoiceUnderscores]) {
   describe(`getBestBookVoice with BCP47 ${dummyVoice == dummyVoiceUnderscores ? '+' : '-'} underscores`, () => {
     const { getBestBookVoice } = AbstractTTSEngine;
 
@@ -130,7 +130,7 @@ export const DUMMY_TTS_ENGINE_OPTS = {
  * @param {SpeechSynthesisVoice}
  * @return {SpeechSynthesisVoice}
  **/
-function dummyVoice(overrides) {
+function dummyVoiceHyphens(overrides) {
   return Object.assign({
     default: false,
     lang: "en-US",
@@ -147,7 +147,7 @@ function dummyVoice(overrides) {
  * @return {SpeechSynthesisVoice}
  **/
 function dummyVoiceUnderscores(overrides) {
-  const voice = dummyVoice(overrides);
+  const voice = dummyVoiceHyphens(overrides);
   voice.lang = voice.lang.replace('-', '_');
   return voice;
 }

package/karma.conf.js

@@ -1,23 +0,0 @@
-const { createDefaultConfig } = require('@open-wc/testing-karma');
-const merge = require('deepmerge');
-
-module.exports = (config) => {
-  config.set(
-    merge(createDefaultConfig(config), {
-      files: [
-        // runs all files ending with .test in the test folder,
-        // can be overwritten by passing a --grep flag. examples:
-        //
-        // npm run test -- --grep test/foo/bar.test.js
-        // npm run test -- --grep test/bar/*
-        { pattern: config.grep ? config.grep : 'tests/karma/**/*.test.js', type: 'module' },
-      ],
-
-      esm: {
-        nodeResolve: true,
-      },
-      // you can overwrite/extend the config further
-    }),
-  );
-  return config;
-};

package/tests/karma/BookNavigator/bookmarks/ia-bookmarks.test.js

@@ -1,57 +0,0 @@
-import {
-  html,
-  fixtureSync,
-  expect,
-  fixtureCleanup,
-} from '@open-wc/testing';
-import '../../../../src/BookNavigator/bookmarks/ia-bookmarks.js';
-import sinon from 'sinon';
-
-afterEach(() => {
-  sinon.restore();
-  fixtureCleanup();
-});
-
-describe('<ia-bookmarks>', () => {
-  it('uses `setup` to start component', async () => {
-    const el = fixtureSync(html`<ia-bookmarks></ia-bookmarks>`);
-    await el.updateComplete;
-
-    let fetchHappened = false;
-    el.bookreader.bookId = 'foo';
-    el.displayMode = 'bookmarks';
-
-    el.fetchBookmarks = async () => {
-      fetchHappened = true;
-      return await Promise.resolve();
-    };
-
-    const fetchSpy = sinon.spy(el, 'fetchUserBookmarks');
-
-    el.setup();
-    await el.updateComplete;
-
-    expect(fetchSpy.callCount).to.equal(1);
-    expect(fetchHappened).to.equal(true);
-  });
-  it('does not fetch user bookmarks if displayMode = login', async () => {
-    const el = fixtureSync(html`<ia-bookmarks></ia-bookmarks>`);
-    await el.updateComplete;
-
-    let fetchHappened = false;
-    el.displayMode = 'login';
-
-    el.fetchBookmarks = async () => {
-      fetchHappened = true;
-      return await Promise.resolve();
-    };
-
-    const fetchSpy = sinon.spy(el, 'fetchUserBookmarks');
-
-    el.setup();
-    await el.updateComplete;
-
-    expect(fetchSpy.callCount).to.equal(0);
-    expect(fetchHappened).to.equal(false);
-  });
-});