@internetarchive/bookreader 5.0.0-26 → 5.0.0-29

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

@@ -6,175 +6,480 @@ import {
   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';
 
-import '../../../src/BookNavigator/BookNavigator.js';
-import BRFullscreenMgr from '../../../src/BookNavigator/br-fullscreen-mgr.js';
+const promise0 = () => new Promise(res => setTimeout(res, 0));
 
-const container = () => {
-  const item = {};
+const container = (sharedObserver = null) => {
+  const itemStub = {
+    metadata: {
+      identifier: 'foo',
+      creator: 'bar',
+      title: 'baz',
+    }
+  };
+  const modalMgr = new ModalManager();
   return html`
     <book-navigator
-      .item=${item}
-      .baseHost
+      .itemMD=${itemStub}
+      .baseHost=${`https://foo.archive.org`}
+      .sharedObserver=${sharedObserver || new SharedResizeObserver()}
+      .modal=${modalMgr}
     >
-      <div slot="bookreader">
+      <div slot="theater-main">
+        <div id="BookReader"></div>
         <p class="visible-in-reader">now showing</p>
-      <div>
-      <p class="bunny">foo</p>
-      </
+      <\div>
+    </book-navigator>
   `;
 };
 
-beforeEach(() => {
-  const body = document.querySelector('body');
-  const brHook = document.createElement('div');
-  brHook.setAttribute('id', 'BookReader');
-  body.appendChild(brHook);
-});
-
 afterEach(() => {
   window.br = null;
   fixtureCleanup();
+  const body = document.querySelector('body');
+  body.innerHTML = '';
+  sinon.restore();
 });
 
 
 describe('<book-navigator>', () => {
-  describe('first update', () => {
-    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);
-    });
+  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();
 
-    it('emits a BrBookNav:PostInit event', async () => {
+        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('handles global event: BookReader:PostInit', async () => {
-    const setTimeoutSpy = sinon.spy(window, 'setTimeout');
-    const brStub = {
-      resize: sinon.fake(),
-      currentIndex: sinon.fake(),
-      jumpToIndex: sinon.fake(),
-      options: { enableMultipleBooks: false }, // for multipleBooks
-      el: '#BookReader'
-    };
-
-    const el = fixtureSync(container());
-    const initializeBookSubmenus = sinon.spy(el, 'initializeBookSubmenus');
-
-    await elementUpdated(el);
-    window.dispatchEvent(new CustomEvent('BookReader:PostInit', {
-      detail: { props: brStub }
-    }));
-    await elementUpdated(el);
-
-    expect(initializeBookSubmenus.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(el.fullscreenMgr).to.an.instanceof(BRFullscreenMgr);
-    expect(el.brResizeObserver).to.an.instanceof(window.ResizeObserver);
-    expect(setTimeoutSpy.callCount).to.equal(1); // resizes at end
+    it('creates an item image from metadata', async () => {
+      const el = fixtureSync(container());
+      el.item = {
+        metadata: { identifier: 'foo' },
+      };
+      await elementUpdated(el);
+
+      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);
 
-  it('resizes bookreader when side menu toggles', async () => {
-    const el = fixtureSync(container());
-    const brStub = {
-      resize: sinon.fake(),
-      currentIndex: sinon.fake(),
-      jumpToIndex: sinon.fake(),
-      options: { enableMultipleBooks: true },
-    };
+        expect(defaultMenus).to.contain('share');
+        expect(el.menuProviders.share).to.be.instanceOf(SharingProvider);
 
-    el.bookreader = brStub;
-    await elementUpdated(el);
+        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.sideMenuOpen = true;
-    await elementUpdated(el);
+          el.initializeBookSubmenus();
+          await el.elementUpdated;
 
-    expect(el.bookreader.resize.callCount).to.equal(1);
+          expect(el.menuProviders.search).to.exist;
+          expect(el.menuProviders.search).to.be.instanceOf(SearchProvider);
 
-    el.sideMenuOpen = false;
-    await elementUpdated(el);
+          // 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;
 
-    expect(el.bookreader.resize.callCount).to.equal(2);
-  });
+          el.initializeBookSubmenus();
+          await el.elementUpdated;
 
-  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);
-
-    el.sideMenuOpen = true;
-    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);
+          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', () => {
+        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(`this.updateSideMenu`, () => {
-    it('emits custom event', async () => {
+  describe('Resizing',() => {
+    it('keeps track of `brWidth` and `brHeight`', async () => {
       const el = fixtureSync(container());
       const brStub = {
         resize: sinon.fake(),
+      };
+      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(),
+      };
+      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);
 
-      let initEventFired = false;
-      let eventDetails = {};
-      el.addEventListener('updateSideMenu', (e) => {
-        eventDetails = e.detail;
-        initEventFired = true;
-      });
+      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);
 
-      el.updateSideMenu('foo', 'open');
-      expect(initEventFired).to.equal(true);
-      expect(eventDetails.menuId).to.equal('foo');
-      expect(eventDetails.action).to.equal('open');
+      expect(el.closeFullscreen.callCount).to.equal(1);
     });
-    it('does not emit event if missing an arg', async() => {
+    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: { enableMultipleBooks: true }
+        options: {
+          enableFSLogoShortcut: true,
+        }
       };
       el.bookreader = brStub;
+      el.manageFullScreenBehavior = sinon.fake();
       await elementUpdated(el);
 
-      let initEventFired = false;
-      el.addEventListener('updateSideMenu', (e) => {
-        initEventFired = true;
-      });
+      window.dispatchEvent(new CustomEvent('BookReader:fullscreenToggled', {
+        detail: { props: brStub }
+      }));
+      await elementUpdated(el);
 
-      el.updateSideMenu('', 'open');
-      expect(initEventFired).to.equal(false);
+      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/downloads/downloads-provider.test.js

@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { expect, fixtureCleanup, fixtureSync } from '@open-wc/testing';
 import sinon from 'sinon';
 import DownloadsProvider from '../../../../src/BookNavigator/downloads/downloads-provider';
 
@@ -25,6 +25,7 @@ const downloads = [
 
 afterEach(() => {
   sinon.restore();
+  fixtureCleanup();
 });
 
 describe('Downloads Provider', () => {
@@ -34,6 +35,7 @@ describe('Downloads Provider', () => {
 
     expect(provider.id).to.equal('downloads');
     expect(provider.icon).to.exist;
+    expect(fixtureSync(provider.icon).tagName).to.equal('IA-ICON-DL');
     expect(provider.label).to.equal('Downloadable files');
     expect(provider.menuDetails).to.exist;
     expect(provider.component).to.exist;
@@ -49,8 +51,9 @@ describe('Downloads Provider', () => {
   });
 
   it('render view if book is protected', () => {
-    const isBookProtected = true;
-    const provider = new DownloadsProvider(isBookProtected);
+    const provider = new DownloadsProvider({
+      bookreader: { options: { isProtected: true } }
+    });
 
     expect(provider.isBookProtected).to.equal(true);