@internetarchive/bookreader 5.0.0-4 → 5.0.0-40-a1

package/tests/karma/BookNavigator/book-navigator.test.js

@@ -0,0 +1,501 @@
+import {
+  html,
+  elementUpdated,
+  fixtureCleanup,
+  fixtureSync,
+  expect,
+} from '@open-wc/testing';
+import sinon from 'sinon';
+import DownloadsProvider from '../../../src/BookNavigator/downloads/downloads-provider.js';
+import SearchProvider from '../../../src/BookNavigator/search/search-provider.js';
+import SharingProvider from '../../../src/BookNavigator/sharing.js';
+import VisualAdjustmentsProvider from '../../../src/BookNavigator/visual-adjustments/visual-adjustments-provider.js';
+import VolumesProvider from '../../../src/BookNavigator/volumes/volumes-provider.js';
+import { ModalManager } from '@internetarchive/modal-manager';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import '../../../src/BookNavigator/book-navigator.js';
+
+const promise0 = () => new Promise(res => setTimeout(res, 0));
+
+const container = (sharedObserver = null) => {
+  const itemStub = {
+    metadata: {
+      identifier: 'foo',
+      creator: 'bar',
+      title: 'baz',
+    }
+  };
+  const modalMgr = new ModalManager();
+  return html`
+    <book-navigator
+      .itemMD=${itemStub}
+      .baseHost=${`https://foo.archive.org`}
+      .sharedObserver=${sharedObserver || new SharedResizeObserver()}
+      .modal=${modalMgr}
+    >
+      <div slot="main">
+        <div id="BookReader"></div>
+        <p class="visible-in-reader">now showing</p>
+      <\div>
+    </book-navigator>
+  `;
+};
+
+afterEach(() => {
+  window.br = null;
+  fixtureCleanup();
+  const body = document.querySelector('body');
+  body.innerHTML = '';
+  sinon.restore();
+});
+
+
+describe('<book-navigator>', () => {
+  describe("How it loads", () => {
+    describe('Attaches BookReader listeners before `br.init` is called', () => {
+      it('binds global event listeners', async () => {
+        const el = fixtureSync(container());
+        const spy = sinon.spy(el, 'bindEventListeners');
+        await elementUpdated(el);
+        expect(spy.callCount).to.equal(1);
+      });
+      it('Listens for Global Event @BookReader:PostInit', async () => {
+        const brStub = {
+          resize: sinon.fake(),
+          currentIndex: sinon.fake(),
+          jumpToIndex: sinon.fake(),
+          options: { enableMultipleBooks: false }, // for multipleBooks
+          el: '#BookReader'
+        };
+
+        const sharedObserver = new SharedResizeObserver();
+        sinon.spy(sharedObserver, 'addObserver');
+        const el = fixtureSync(container(sharedObserver));
+
+        el.initializeBookSubmenus = sinon.fake();
+        el.emitLoadingStatusUpdate = sinon.fake();
+        el.handleResize = sinon.fake();
+        await elementUpdated(el);
+
+        expect(brStub.resize.callCount).to.equal(0);
+
+        window.dispatchEvent(new CustomEvent('BookReader:PostInit', {
+          detail: { props: brStub }
+        }));
+        await elementUpdated(el);
+
+        expect(el.emitLoadingStatusUpdate.callCount).to.equal(1);
+        expect(el.bookreader).to.equal(brStub); // sets bookreader
+        expect(el.bookReaderLoaded).to.be.true; // notes bookreader is loaded
+        expect(el.bookReaderCannotLoad).to.be.false;
+        expect(sharedObserver.addObserver.callCount).to.equal(1);
+
+        await promise0();
+
+        expect(brStub.resize.callCount > 0).to.be.true;
+      });
+    });
+    it('Emits a BrBookNav:PostInit event at completion', async () => {
+      let initEventFired = false;
+      window.addEventListener('BrBookNav:PostInit', (e) => {
+        initEventFired = true;
+      });
+      const el = fixtureSync(container());
+      const spy = sinon.spy(el, 'emitPostInit');
+
+      await elementUpdated(el);
+
+      expect(initEventFired).to.be.true;
+      expect(spy.callCount).to.equal(1);
+    });
+
+    it('creates an item image from metadata', async () => {
+      const el = fixtureSync(container());
+      const itemImage = fixtureSync(el.itemImage);
+      expect(itemImage).to.be.instanceOf(HTMLImageElement);
+      expect(itemImage.getAttribute('class')).to.equal('cover-img');
+      expect(itemImage.getAttribute('src')).to.equal('https://https://foo.archive.org/services/img/foo');
+    });
+  });
+  describe('Menu/Layer Provider', () => {
+    describe('Connecting with a provider:', () => {
+      // loads Providers with base shared resources
+      it('We load 3 Sub Menus by default', async() => {
+        const el = fixtureSync(container());
+        const $brContainer = document.createElement('div');
+        const brStub = {
+          resize: sinon.fake(),
+          currentIndex: sinon.fake(),
+          jumpToIndex: sinon.fake(),
+          options: {},
+          refs: {
+            $brContainer
+          }
+        };
+        el.bookreader = brStub;
+        await el.elementUpdated;
+
+        el.initializeBookSubmenus();
+        await el.elementUpdated;
+        const defaultMenus = Object.keys(el.menuProviders);
+        expect(defaultMenus).to.contain('downloads');
+        expect(el.menuProviders.downloads).to.be.instanceOf(DownloadsProvider);
+
+        expect(defaultMenus).to.contain('share');
+        expect(el.menuProviders.share).to.be.instanceOf(SharingProvider);
+
+        expect(defaultMenus).to.contain('visualAdjustments');
+        expect(el.menuProviders.visualAdjustments).to.be.instanceOf(VisualAdjustmentsProvider);
+      });
+      describe('Loading Sub Menus By Plugin Flags', async() => {
+        it('Search: uses `enableSearch` flag', async() => {
+          const el = fixtureSync(container());
+          const $brContainer = document.createElement('div');
+          const brStub = {
+            resize: sinon.fake(),
+            currentIndex: sinon.fake(),
+            jumpToIndex: sinon.fake(),
+            options: { enableSearch: true },
+            refs: {
+              $brContainer
+            }
+          };
+          el.bookreader = brStub;
+          await el.elementUpdated;
+
+          el.initializeBookSubmenus();
+          await el.elementUpdated;
+
+          expect(el.menuProviders.search).to.exist;
+          expect(el.menuProviders.search).to.be.instanceOf(SearchProvider);
+
+          // also adds a menu shortcut
+          expect(el.menuShortcuts.find(m => m.id === 'search')).to.exist;
+        });
+        it('Volumes/Multiple Books: uses `enableMultipleBooks` flag', async() => {
+          const el = fixtureSync(container());
+          const $brContainer = document.createElement('div');
+          const brStub = {
+            resize: sinon.fake(),
+            currentIndex: sinon.fake(),
+            jumpToIndex: sinon.fake(),
+            options: {
+              enableMultipleBooks: true,
+              multipleBooksList: {
+                by_subprefix: {
+                  fooSubprefix: 'beep'
+                }
+              }
+            },
+            refs: {
+              $brContainer
+            }
+          };
+          el.bookreader = brStub;
+          await el.elementUpdated;
+
+          el.initializeBookSubmenus();
+          await el.elementUpdated;
+
+          expect(el.menuProviders.volumes).to.exist;
+          expect(el.menuProviders.volumes).to.be.instanceOf(VolumesProvider);
+
+          // also adds a menu shortcut
+          expect(el.menuShortcuts.find(m => m.id === 'volumes')).to.be.exist;
+        });
+      });
+      it('keeps track of base shared resources for providers in: `baseProviderConfig`', () => {
+        const el = fixtureSync(container());
+        const baseConfigKeys = Object.keys(el.baseProviderConfig);
+        expect(baseConfigKeys).to.contain('baseHost');
+        expect(baseConfigKeys).to.contain('modal');
+        expect(baseConfigKeys).to.contain('sharedObserver');
+        expect(baseConfigKeys).to.contain('bookreader');
+        expect(baseConfigKeys).to.contain('item');
+        expect(baseConfigKeys).to.contain('signedIn');
+        expect(baseConfigKeys).to.contain('isAdmin');
+        expect(baseConfigKeys).to.contain('onProviderChange');
+      });
+    });
+
+    describe('Controlling Menu Side Panel & Shortcuts', () => {
+      describe('Side Menu Panels', () => {
+        it('`isWideEnoughToOpenMenu` checks if menu should be open', async () => {
+          const el = fixtureSync(container());
+          el.brWidth = 300;
+          await el.elementUpdated;
+
+          expect(el.isWideEnoughToOpenMenu).to.equal(false);
+
+          el.brWidth = 641;
+          await el.elementUpdated;
+
+          expect(el.isWideEnoughToOpenMenu).to.equal(true);
+        });
+        describe('Control which side menu to toggle open by using: `this.updateSideMenu`', () => {
+          it('Emits `@updateSideMenu` to signal which menu gets the update', async () => {
+            const el = fixtureSync(container());
+            const brStub = {
+              resize: sinon.fake(),
+              currentIndex: sinon.fake(),
+              jumpToIndex: sinon.fake(),
+              options: { enableMultipleBooks: true }
+            };
+            el.bookreader = brStub;
+            await elementUpdated(el);
+
+            let initEventFired = false;
+            let eventDetails = {};
+            el.addEventListener('updateSideMenu', (e) => {
+              eventDetails = e.detail;
+              initEventFired = true;
+            });
+
+            el.updateSideMenu('foo', 'open');
+            expect(initEventFired).to.equal(true);
+            expect(eventDetails.menuId).to.equal('foo');
+            expect(eventDetails.action).to.equal('open');
+          });
+          it('Will Not Emit `@updateSideMenu` if menu ID is missing', async() => {
+            const el = fixtureSync(container());
+            const brStub = {
+              resize: sinon.fake(),
+              currentIndex: sinon.fake(),
+              jumpToIndex: sinon.fake(),
+              options: { enableMultipleBooks: true }
+            };
+            el.bookreader = brStub;
+            await elementUpdated(el);
+
+            let initEventFired = false;
+            el.addEventListener('updateSideMenu', (e) => {
+              initEventFired = true;
+            });
+
+            el.updateSideMenu('', 'open');
+            expect(initEventFired).to.equal(false);
+          });
+        });
+      });
+
+      describe('Shortcuts', () => {
+        it('has specific order of menu shortcuts to show', () => {
+          const el = fixtureSync(container());
+          expect(el.shortcutOrder[0]).to.equal('fullscreen');
+          expect(el.shortcutOrder[1]).to.equal('volumes');
+          expect(el.shortcutOrder[2]).to.equal('search');
+          expect(el.shortcutOrder[3]).to.equal('bookmarks');
+        });
+      });
+
+      describe('Behaviors for specific menus', () => {
+        describe('Search menu - ref: plugin.search.js', () => {
+          it('Event: listens for `BookReader:ToggleSearchMenu to open search side panel', async () => {
+            const el = fixtureSync(container());
+            const brStub = {
+              resize: sinon.fake(),
+              currentIndex: sinon.fake(),
+              jumpToIndex: sinon.fake(),
+              options: { enableMultipleBooks: true }
+            };
+            el.bookreader = brStub;
+            await elementUpdated(el);
+
+            let sidePanelConfig = {};
+            el.addEventListener('updateSideMenu', (e) => {
+              console.log();
+              sidePanelConfig = e.detail;
+            });
+            const toggleSearchMenuEvent = new Event('BookReader:ToggleSearchMenu');
+            window.dispatchEvent(toggleSearchMenuEvent);
+
+            await elementUpdated(el);
+            expect(sidePanelConfig.menuId).to.equal('search');
+            expect(sidePanelConfig.action).to.equal('toggle');
+          });
+        });
+      });
+    });
+  });
+
+  describe('Resizing',() => {
+    it('keeps track of `brWidth` and `brHeight`', async () => {
+      const el = fixtureSync(container());
+      const brStub = {
+        resize: sinon.fake(),
+        options: {},
+        refs: {
+          $brContainer: document.createElement('div')
+        }
+      };
+      el.bookreader = brStub;
+      await elementUpdated(el);
+      expect(el.brWidth).to.equal(0);
+      expect(el.brHeight).to.equal(0);
+
+      const mockResizeEvent = {
+        contentRect: {
+          height: 500,
+          width: 900
+        },
+        target: el.mainBRContainer
+      };
+      el.handleResize(mockResizeEvent);
+
+      await elementUpdated(el);
+      await promise0();
+
+      expect(el.brHeight).to.equal(500);
+      expect(el.brWidth).to.equal(900);
+    });
+    it('resizes if height/width changes && is not animating', async () => {
+      const el = fixtureSync(container());
+      const brStub = {
+        animating: false,
+        resize: sinon.fake(),
+        options: {},
+        refs: {
+          $brContainer: document.createElement('div')
+        }
+      };
+
+      el.bookreader = brStub;
+      await elementUpdated(el);
+      expect(el.brWidth).to.equal(0);
+      expect(el.brHeight).to.equal(0);
+
+      const mockResizeEvent = {
+        contentRect: {
+          height: 500,
+          width: 900
+        },
+        target: el.mainBRContainer
+      };
+      el.handleResize(mockResizeEvent);
+
+      await elementUpdated(el);
+      await promise0();
+
+      expect(brStub.resize.callCount).to.equal(1);
+    });
+    it('does not resize bookreader if animating', async () => {
+      const el = fixtureSync(container());
+      const brStub = {
+        animating: true, // <-- testing for this
+        resize: sinon.fake(),
+        currentIndex: sinon.fake(),
+        jumpToIndex: sinon.fake(),
+        options: { enableMultipleBooks: true }
+      };
+
+      el.bookreader = brStub;
+      await elementUpdated(el);
+
+      expect(el.bookreader.resize.callCount).to.equal(0);
+      expect(el.bookreader.currentIndex.callCount).to.equal(0);
+      expect(el.bookreader.jumpToIndex.callCount).to.equal(0);
+    });
+  });
+
+  describe('Fullscreen Management', () => {
+    it('needs option: `enableFSLogoShortcut` to use FS logo', async () => {
+      const el = fixtureSync(container());
+      const brStub = {
+        isFullscreen: () => true,
+        options: {
+          enableFSLogoShortcut: false,
+        }
+      };
+
+      el.bookreader = brStub;
+      el.emitMenuShortcutsUpdated = sinon.fake();
+      await elementUpdated(el);
+
+      el.manageFullScreenBehavior();
+      await elementUpdated(el);
+      expect(el.menuShortcuts.length).to.equal(0);
+    });
+    it('sets fullscreen shortcut when entering Fullscreen', async () => {
+      const el = fixtureSync(container());
+      const brStub = {
+        isFullscreen: () => true,
+        options: {
+          enableFSLogoShortcut: true,
+        }
+      };
+
+      el.bookreader = brStub;
+      el.emitMenuShortcutsUpdated = sinon.fake();
+      await elementUpdated(el);
+
+      el.manageFullScreenBehavior();
+      await elementUpdated(el);
+      expect(el.menuShortcuts.length).to.equal(1);
+      expect(el.menuShortcuts[0].id).to.equal('fullscreen');
+      expect(el.menuShortcuts[0].icon).to.exist;
+      expect(el.emitMenuShortcutsUpdated.callCount).to.equal(1);
+    });
+    it('clicking Fullscreen shortcut closes fullscreen', async () => {
+      const el = fixtureSync(container());
+      const brStub = {
+        isFullscreen: () => true,
+        options: {
+          enableFSLogoShortcut: true,
+        }
+      };
+
+      el.bookreader = brStub;
+      el.emitMenuShortcutsUpdated = sinon.fake();
+      el.closeFullscreen = sinon.fake();
+      await elementUpdated(el);
+
+      el.manageFullScreenBehavior();
+      await elementUpdated(el);
+
+      fixtureSync(el.menuShortcuts[0].icon).click();
+      await elementUpdated(el);
+
+      expect(el.closeFullscreen.callCount).to.equal(1);
+    });
+    it('removes Fullscreen shortcut when leaving fullscreen', async() => {
+      const el = fixtureSync(container());
+      const brStub = {
+        isFullscreen: () => false,
+        options: {
+          enableFSLogoShortcut: true,
+        }
+      };
+
+      el.bookreader = brStub;
+      el.emitMenuShortcutsUpdated = sinon.fake();
+      await elementUpdated(el);
+
+      el.manageFullScreenBehavior();
+      await elementUpdated(el);
+      expect(el.menuShortcuts.length).to.equal(0);
+      expect(el.emitMenuShortcutsUpdated.callCount).to.equal(1);
+    });
+    it('Event: Listens for `BookReader:FullscreenToggled', async() => {
+      const el = fixtureSync(container());
+      const brStub = {
+        isFullscreen: () => true,
+        resize: sinon.fake(),
+        currentIndex: sinon.fake(),
+        jumpToIndex: sinon.fake(),
+        options: {
+          enableFSLogoShortcut: true,
+        }
+      };
+      el.bookreader = brStub;
+      el.manageFullScreenBehavior = sinon.fake();
+      await elementUpdated(el);
+
+      window.dispatchEvent(new CustomEvent('BookReader:fullscreenToggled', {
+        detail: { props: brStub }
+      }));
+      await elementUpdated(el);
+
+      expect(el.manageFullScreenBehavior.callCount).to.equal(1);
+    });
+  });
+});

package/tests/karma/BookNavigator/bookmarks/bookmark-button.test.js

@@ -0,0 +1,44 @@
+import {
+  html,
+  fixtureSync,
+  expect,
+  fixtureCleanup,
+} from '@open-wc/testing';
+import '../../../../src/BookNavigator/bookmarks/bookmark-button.js';
+import sinon from 'sinon';
+
+afterEach(() => {
+  sinon.restore();
+  fixtureCleanup();
+});
+
+describe('<bookmark-button>', () => {
+  it('sets default properties', async () => {
+    const el = fixtureSync(html`<bookmark-button></bookmark-button>`);
+
+    expect(el.side).to.be.undefined;
+    expect(el.state).to.equal('hollow');
+  });
+  it('Event: fires `@bookmarkButtonClicked on click', async () => {
+    const el = fixtureSync(html`<bookmark-button></bookmark-button>`);
+    let buttonClicked = false;
+    el.addEventListener('bookmarkButtonClicked', () => { buttonClicked = true; });
+    const eventStub = { preventDefault: sinon.fake()};
+    el.handleClick(eventStub);
+    await el.updateComplete;
+
+    expect(buttonClicked).to.be.true;
+    expect(eventStub.preventDefault.callCount).to.equal(1);
+  });
+  it('Title: Toggles title between `Add/Remove bookmark`', async () => {
+    const el = fixtureSync(html`<bookmark-button></bookmark-button>`);
+    expect(el.title).to.equal('Add bookmark');
+    expect(el.state).to.equal('hollow');
+
+    el.state = 'filled';
+    await el.updateComplete;
+
+    expect(el.title).to.equal('Remove bookmark');
+    expect(el.state).to.not.equal('hollow');
+  });
+});

package/tests/karma/BookNavigator/bookmarks/bookmark-edit.test.js

@@ -4,7 +4,7 @@ import {
   expect,
   oneEvent,
 } from '@open-wc/testing';
-import { IABookmarkEdit } from  '../../../../src/BookNavigator/bookmarks/bookmark-edit.js';
+import '../../../../src/BookNavigator/bookmarks/bookmark-edit.js';
 
 const bookmarkColors = [{
   id: 0,
@@ -23,8 +23,6 @@ const bookmarkColors = [{
   className: 'yellow',
 }];
 
-customElements.define('ia-bookmark-edit', IABookmarkEdit);
-
 const container = (bookmark = {}) => (
   html`<ia-bookmark-edit .bookmark=${bookmark} .bookmarkColors=${bookmarkColors}></ia-bookmark-edit>`
 );

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

@@ -4,8 +4,7 @@ import {
   expect,
   oneEvent,
 } from '@open-wc/testing';
-import { IABookmarksList } from '../../../../src/BookNavigator/bookmarks/bookmarks-list.js';
-customElements.define('ia-bookmarks-list', IABookmarksList);
+import '../../../../src/BookNavigator/bookmarks/bookmarks-list.js';
 
 const bookmarks = [{
   id: 1,
@@ -50,7 +49,7 @@ describe('<ia-bookmarks-list>', () => {
   it('renders bookmarks that contain page numbers', async () => {
     const el = await fixture(container(bookmarks));
 
-    expect(el.shadowRoot.innerHTML).to.include(`Page ${bookmarks[0].page}`);
+    expect(el.shadowRoot.textContent).to.include(`Page ${bookmarks[0].page}`);
   });
 
   it('renders bookmarks that contain an optional note', async () => {
@@ -162,7 +161,7 @@ describe('<ia-bookmarks-list>', () => {
     const el = await fixture(container([bookmarks[0]]));
     const bookmarksCount = await fixture(el.bookmarksCount);
 
-    expect(bookmarksCount.innerHTML).to.include('(1)');
+    expect(bookmarksCount.textContent).to.include('(1)');
   });
 
   it('does not render the bookmarks count when no bookmarks present', async () => {

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

@@ -0,0 +1,57 @@
+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);
+  });
+});