@internetarchive/bookreader 5.0.0-70-a3 → 5.0.0-70

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

@@ -1,10 +1,9 @@
-import { fixtureCleanup, fixtureSync } from '@open-wc/testing-helpers';
+import { fixture, fixtureCleanup, fixtureSync } from '@open-wc/testing-helpers';
 import sinon from 'sinon';
-import ViewableFilesProvider from '@/src/BookNavigator/viewable-files';
+import volumesProvider from '@/src/BookNavigator/volumes/volumes-provider';
 
 const brOptions = {
   "options": {
-    "subPrefix": 'special-subprefix',
     "enableMultipleBooks": true,
     "multipleBooksList": {
       "by_subprefix": {
@@ -40,11 +39,10 @@ afterEach(() => {
 });
 
 describe('Volumes Provider', () => {
-  test('initiating & sorting', () => {
+  test('constructor', () => {
     const onProviderChange = sinon.fake();
-
     const baseHost = "https://archive.org";
-    const provider = new ViewableFilesProvider({
+    const provider = new volumesProvider({
       baseHost,
       bookreader: brOptions,
       onProviderChange
@@ -57,24 +55,130 @@ describe('Volumes Provider', () => {
     expect(provider.id).toEqual('volumes');
     expect(provider.icon).toBeDefined();
     expect(fixtureSync(provider.icon).tagName).toEqual('svg');
-    expect(provider.sortOrderBy).toEqual('default');
-
     expect(provider.label).toEqual(`Viewable files (${volumeCount})`);
     expect(provider.viewableFiles).toBeDefined();
     expect(provider.viewableFiles.length).toEqual(3);
-    expect(provider.volumeCount).toEqual(3);
 
-    expect(provider.component.baseHost).toEqual(baseHost);
-    expect(provider.component.fileList).toEqual(provider.viewableFiles);
-    expect(provider.component.subPrefix).toEqual(brOptions.options.subPrefix);
+    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();
-    expect(provider.actionButton).toEqual(provider.sortFilesComponent);
-    expect(provider.actionButton.fileListRaw).toEqual(provider.viewableFiles);
 
-    const callbackSpy = sinon.spy(provider, 'handleFileListSorted');
-    provider.actionButton.sortVolumes('title_asc');
+    const providerFileTitles = provider.viewableFiles.map(item => item.title);
+    // use `.eql` for "lose equality" in order to deeply compare values.
+    expect(providerFileTitles).toEqual([...origSortTitles]);
+  });
 
-    expect(callbackSpy.callCount).toEqual(1);
+  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/jest/plugins/tts/AbstractTTSEngine.test.js

@@ -111,6 +111,26 @@ for (const dummyVoice of [dummyVoiceHyphens, dummyVoiceUnderscores]) {
 
       expect(getBestBookVoice(voices, 'en', ['en-CA', 'en'])).toBe(voices[0]);
     });
+
+    test('choose stored language from localStorage', () => {
+      const voices = [
+        dummyVoice({lang: "en-US", voiceURI: "English US", default: true}),
+        dummyVoice({lang: "en-GB", voiceURI: "English GB"}),
+        dummyVoice({lang: "en-CA", voiceURI: "English CA"}),
+      ];
+      class DummyEngine extends AbstractTTSEngine {
+        getVoices() { return voices; }
+      }
+      const ttsEngine = new DummyEngine({...DUMMY_TTS_ENGINE_OPTS, bookLanguage: 'en'});
+      // simulates setting default voice on tts startup
+      ttsEngine.updateBestVoice();
+      // simulates user choosing a voice that matches the bookLanguage
+      // voice will be stored in localStorage
+      ttsEngine.setVoice(voices[2].voiceURI);
+
+      // expecting the voice to be selected by getMatchingStoredVoice and returned as best voice
+      expect(getBestBookVoice(voices, 'en', [])).toBe(voices[2]);
+    });
   });
 }
 

package/tests/jest/plugins/url/UrlPlugin.test.js

@@ -19,6 +19,10 @@ describe('UrlPlugin tests', () => {
       expect(urlPlugin.urlStateToUrlString(urlStateWithQueries)).toBe(expectedUrlFromStateWithQueries);
     });
 
+    test('encodes page number', () => {
+      expect(urlPlugin.urlStateToUrlString({ page: '12/46' })).toBe(`page/12%2F46`);
+    });
+
     test('urlStateToUrlString with unknown states in schema', () => {
       const urlState = { page: 'n7', mode: '1up' };
       const urlStateWithQueries = { page: 'n7', mode: '1up', q: 'hello', viewer: 'theater', sortBy: 'title_asc' };
@@ -47,6 +51,10 @@ describe('UrlPlugin tests', () => {
       expect(urlPlugin.urlStringToUrlState(url1)).toEqual({page: 'n7', mode: '1up'});
     });
 
+    test('decodes page number', () => {
+      expect(urlPlugin.urlStringToUrlState('/page/12%2F46')).toStrictEqual({ page: '12/46' });
+    });
+
     test('urlStringToUrlState with deprecated_for', () => {
       const url = '/page/n7/mode/2up/search/hello';
 

package/src/BookNavigator/viewable-files.js

@@ -1,95 +0,0 @@
-import { html } from 'lit';
-
-import { viewableFilesIcon  } from '@internetarchive/ia-item-navigator/dist/src/menus/viewable-files';
-import '@internetarchive/ia-item-navigator/dist/src/menus/viewable-files';
-
-/**
- * * @typedef { 'title_asc' | 'title_desc' | 'default'} SortTypesT
- */
-const sortTypes = {
-  title_asc: 'title_asc',
-  title_desc: 'title_desc',
-  default: 'default'
-};
-export default class ViewableFilesProvider {
-  /**
-   * @param {import('../BookReader').default} bookreader
-   */
-  constructor({ baseHost, bookreader, onProviderChange }) {
-    /** @type {import('../BookReader').default} */
-    this.bookreader = bookreader;
-    this.onProviderChange = onProviderChange;
-    this.baseHost = baseHost;
-
-    const files = bookreader.options.multipleBooksList.by_subprefix;
-    this.viewableFiles = Object.keys(files).map(item => files[item]);
-    this.volumeCount = Object.keys(files).length;
-
-    this.id = "volumes";
-    this.label = `Viewable files (${this.volumeCount})`;
-    this.icon = html`${viewableFilesIcon}`;
-    this.sortOrderBy = sortTypes.default;
-
-    this.component = document.createElement("iaux-in-viewable-files-panel");
-    this.component.addSortToUrl = true;
-    this.component.subPrefix = bookreader.options.subPrefix || "";
-    this.component.baseHost = baseHost;
-    this.component.fileList = [...this.viewableFiles];
-
-    this.sortFilesComponent = document.createElement("iaux-in-sort-files-button");
-    this.sortFilesComponent.fileListRaw = this.viewableFiles;
-    this.sortFilesComponent.addEventListener('fileListSorted', (e) => this.handleFileListSorted(e));
-    this.actionButton = this.sortFilesComponent;
-
-    // get sort state from query param
-    if (this.bookreader.urlPlugin) {
-      this.bookreader.urlPlugin.pullFromAddressBar();
-
-      const urlSortValue = this.bookreader.urlPlugin.getUrlParam('sort');
-      if (urlSortValue === sortTypes.title_asc || urlSortValue === sortTypes.title_desc) {
-        this.sortOrderBy = urlSortValue;
-      }
-    }
-
-    this.sortFilesComponent.sortVolumes(this.sortOrderBy);
-
-    this.onProviderChange(this.bookreader);
-  }
-
-  /** @param { SortTypesT } sortType */
-  async handleFileListSorted(event) {
-    const { sortType, sortedFiles } = event.detail;
-
-    this.viewableFiles = sortedFiles;
-    this.sortOrderBy = sortType;
-
-    // update the component
-    this.component.fileList = [...this.viewableFiles];
-    await this.component.updateComplete;
-
-    if (this.bookreader.urlPlugin) {
-      this.bookreader.urlPlugin.pullFromAddressBar();
-      if (this.sortOrderBy !== sortTypes.default) {
-        this.bookreader.urlPlugin.setUrlParam('sort', this.sortOrderBy);
-      } else {
-        this.bookreader.urlPlugin.removeUrlParam('sort');
-      }
-    }
-
-    this.onProviderChange(this.bookreader);
-
-    this.multipleFilesClicked(this.sortOrderBy);
-  }
-
-  /**
-   * @param { SortTypesT } orderBy
-   */
-  multipleFilesClicked(orderBy) {
-    window.archive_analytics?.send_event(
-      'BookReader',
-      `VolumesSort|${orderBy}`,
-      window.location.path,
-    );
-  }
-
-}