@internetarchive/ia-item-navigator 0.0.0-a9 → 0.0.2-a2

package/test/ia-item-navigator.test.ts

@@ -1,229 +1,438 @@
 /* eslint-disable camelcase */
-/* eslint-disable import/no-duplicates */
 import { html, fixture, expect } from '@open-wc/testing';
 import Sinon from 'sinon';
-// import { MetadataResponse, Metadata, File, Review, SpeechMusicASREntry } from '@internetarchive/search-service';
-import {
-  SharedResizeObserver,
-  // SharedResizeObserverInterface
-} from '@internetarchive/shared-resize-observer';
 
-// import { IntLoadingStateUpdatedEvent } from '../src/interfaces/event-interfaces';
-import { ItemNavigator } from '../src/item-navigator';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import { ModalManager } from '@internetarchive/modal-manager';
+import { CustomTheaterInterface } from '../src/interfaces/custom-theater-interface';
+import { ItemNavigator, ItemType } from '../src/item-navigator';
 import '../src/item-navigator';
-// import { IaItemInspector } from '../src/item-inspector/item-inspector';
 
-// class ItemStub implements MetadataResponse {
-//   constructor() {
-//     this.rawResponse = '';
-//     this.created = 1;
-//     this.d1 = 'hello';
-//     this.d2 = 'boop';
-//     this.dir = 'whee';
-//     this.files = [];
-//     this.files_count = 0;
-//     this.item_last_updated = 2020;
-//     this.item_size = 111;
-//     this.metadata = { identifier: 'foo' } as Metadata;
-//     this.server = 'foo-server';
-//     this.uniq = 2;
-//     this.workable_servers = ['abc'];
-//   }
+import '../test/book-nav-stub';
+import { ItemStub, menuProvider, shortcut } from '../test/ia-stub';
+import {
+  ManageFullscreenEvent,
+  ToggleSideMenuOpenEvent,
+  SetSideMenuContentsEvent,
+  SetSideMenuShortcutsEvent,
+  ToggleSidePanelOpenEvent,
+} from '../src/interfaces/event-interfaces';
 
-//   rawResponse: any;
+afterEach(() => {
+  Sinon.restore();
+});
 
-//   created: number;
+describe('ItemNavigator', () => {
+  describe('Theaters', () => {
+    it('shows <ia-no-theater-available> by default', async () => {
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
+      );
+      expect(el.shadowRoot?.querySelector('ia-no-theater-available')).to.exist;
+    });
 
-//   d1: string;
+    it('shows <book-navigator> if `this.itemType = "bookreader"`', async () => {
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator
+          .itemType=${ItemType.BOOK}
+          .item=${new ItemStub()}
+          .modal=${new ModalManager()}
+          .sharedObserver=${new SharedResizeObserver()}
+        ></ia-item-navigator>`
+      );
 
-//   d2: string;
+      await el.updateComplete;
 
-//   dir: string;
+      el.toggleMenu();
+      await el.updateComplete;
 
-//   files: File[];
+      const bookNavigator = el.shadowRoot?.querySelector(
+        'book-navigator'
+      ) as CustomTheaterInterface;
+      await bookNavigator.updateComplete;
+
+      console.log('132234234324324324');
+      // TODO: add BookNavigator type & import via @internetarchive/bookreader
+      // For now, let's check that the BookNavigator element and its properties exist w/ stub
+      expect(bookNavigator).to.exist;
+      expect(bookNavigator?.modal).to.exist;
+      expect(bookNavigator?.baseHost).to.exist;
+      expect(bookNavigator?.signedIn).to.be.null;
+      expect(bookNavigator?.sharedObserver).to.exist;
+      expect(bookNavigator?.sideMenuOpen).to.exist;
+    });
+  });
+  describe('`el.loaded`', () => {
+    it('toggles the spinning loader', async () => {
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator></ia-item-navigator>`
+      );
+      expect(el.loaded).to.be.null; // initial load
+      expect(el.shadowRoot?.querySelector('ia-itemnav-loader')).to.exist;
+    });
+    it('hides reader section if `!loaded`', async () => {
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator></ia-item-navigator>`
+      );
 
-//   files_count: number;
+      expect(
+        el.shadowRoot?.querySelector('#reader')?.getAttribute('class')
+      ).to.contain('hide');
+    });
+    it('shows reader when `loaded` ', async () => {
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
+      );
 
-//   item_last_updated: number;
+      const mainTheaterSection = el.shadowRoot?.querySelector('#reader');
+      expect(mainTheaterSection?.classList.contains('hide')).to.be.false;
+      expect(el.loaded).to.be.true;
+      // `loaded` property is reflected as DOM attribute
+      expect(el.hasAttribute('loaded')).to.equal(true);
+      expect(el.shadowRoot?.querySelector('ia-no-theater-available')).to.exist;
+    });
+    it('listens to `@loadingStateUpdated` to update `loaded`', async () => {
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator></ia-item-navigator>`
+      );
 
-//   item_size: number;
+      await el.updateComplete;
+      const spy = Sinon.spy();
+      el.loadingStateUpdated = spy;
+      el.loaded = null;
+      await el.updateComplete;
+      // check base properties
+      expect(el.loaded).to.equal(null);
+      expect(el.item).to.be.undefined;
 
-//   metadata: Metadata;
+      // hydrate item
+      el.item = new ItemStub();
+      await el.updateComplete;
 
-//   server: string;
+      // spy fires
+      expect(spy.called).to.equal(true);
+      expect(spy.callCount).to.equal(1);
+    });
+  });
 
-//   uniq: number;
+  describe('`el.sharedObserver`', () => {
+    it('uses one', async () => {
+      const sharedObserver = new SharedResizeObserver();
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator
+          .sharedObserver=${sharedObserver}
+        ></ia-item-navigator>`
+      );
 
-//   workable_servers: string[];
+      expect(el.sharedObserver).to.equal(sharedObserver);
+      expect(typeof el.handleResize).to.equal('function');
+    });
+    it('freshly registers handler', async () => {
+      const sharedObserver = new SharedResizeObserver();
+      const addObserverSpy = Sinon.spy(sharedObserver, 'addObserver');
 
-//   speech_vs_music_asr?: SpeechMusicASREntry[] | undefined;
+      await fixture<ItemNavigator>(
+        html`<ia-item-navigator
+          .sharedObserver=${sharedObserver}
+        ></ia-item-navigator>`
+      );
 
-//   reviews?: Review[] | undefined;
-// };
+      expect(addObserverSpy.callCount).to.equal(1);
+    });
+    it('removes handler when component disconnects', async () => {
+      const sharedObserver = new SharedResizeObserver();
+      const removeObserverSpy = Sinon.spy(sharedObserver, 'removeObserver');
 
-afterEach(() => {
-  Sinon.restore();
-});
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator
+          .sharedObserver=${sharedObserver}
+        ></ia-item-navigator>`
+      );
 
-describe('ItemNavigator', () => {
-  describe('Loading Behavior', () => {
-    it('shows the spinning loader', async () => {
+      el.disconnectedCallback();
+      await el.updateComplete;
+
+      expect(removeObserverSpy.callCount).to.equal(1);
+    });
+    it('sets menu to overlay if container width is <= 600px', async () => {
       const el = await fixture<ItemNavigator>(
         html`<ia-item-navigator></ia-item-navigator>`
       );
-      expect(el.shadowRoot?.querySelector('ia-itemnav-loader')).to.be.exist;
+
+      expect(el.openMenuState).to.equal('shift'); // as starting point
+
+      const overlaySize = {
+        contentRect: { width: 600 },
+      } as ResizeObserverEntry;
+      el.handleResize(overlaySize);
+      await el.updateComplete;
+
+      expect(el.openMenuState).to.equal('overlay'); // changes open menu display to an overlay
+
+      const shiftSize = {
+        contentRect: { width: 601 },
+      } as ResizeObserverEntry;
+      el.handleResize(shiftSize);
+      await el.updateComplete;
+
+      expect(el.openMenuState).to.equal('shift');
+    });
+  });
+
+  describe('`el.modal`', () => {
+    it('uses one', async () => {
+      const modal = new ModalManager();
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator .modal=${modal}></ia-item-navigator>`
+      );
+      expect(el.modal).to.equal(modal);
     });
-    it('hides reader section if not `loaded`', async () => {
+  });
+
+  describe('full browser window immersion "fullscreen"', () => {
+    it('creates reflected attribute `viewportinfullscreen`', async () => {
+      /** to help with external styling adjustmnents */
       const el = await fixture<ItemNavigator>(
         html`<ia-item-navigator></ia-item-navigator>`
       );
-      const mainTheaterSection = el.shadowRoot?.querySelector('#reader');
-      expect(mainTheaterSection).to.be.exist;
-      expect(mainTheaterSection?.classList.contains('hide')).to.be.true;
-      expect(el.loaded).to.be.false;
-      expect(el.hasAttribute('loaded')).to.equal(false);
+      expect(el.getAttribute('viewportinfullscreen')).to.be.null;
+
+      el.viewportInFullscreen = true;
+      await el.updateComplete;
+
+      expect(el.getAttribute('viewportinfullscreen')).to.exist;
     });
-    it('shows reader once `loaded`', async () => {
+    it('@ViewportInFullScreen', async () => {
       const el = await fixture<ItemNavigator>(
         html`<ia-item-navigator></ia-item-navigator>`
       );
-      el.loaded = true;
+      expect(el.viewportInFullscreen).to.be.null;
+
+      const yesFullscreenEvent = {
+        detail: {
+          isFullScreen: true,
+        },
+      } as ManageFullscreenEvent;
+      el.manageViewportFullscreen(yesFullscreenEvent);
       await el.updateComplete;
+      expect(el.viewportInFullscreen).to.be.true;
+
+      const noFullscreenEvent = {
+        detail: {
+          isFullScreen: false,
+        },
+      } as ManageFullscreenEvent;
+      el.manageViewportFullscreen(noFullscreenEvent);
+      await el.updateComplete;
+      expect(el.viewportInFullscreen).to.be.null;
+    });
+  });
 
-      const mainTheaterSection = el.shadowRoot?.querySelector('#reader');
-      expect(mainTheaterSection?.classList.contains('hide')).to.be.false;
-      expect(el.loaded).to.be.true;
-      // `loaded` property is reflected as DOM attribute
-      expect(el.hasAttribute('loaded')).to.equal(true);
+  /* Side menu & shortcuts tests */
+  describe('el.menuOpened', () => {
+    it('toggles side menu open', async () => {
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
+      );
+
+      el.menuContents = [menuProvider];
+      await el.updateComplete;
+
+      const nav = el.shadowRoot?.querySelector('nav');
+
+      expect(nav?.querySelector('#menu')).to.exist;
+      // side menu starts closed
+      expect(el.menuOpened).to.be.false;
+      expect(nav?.querySelector('#menu')?.getAttribute('class')).to.contain(
+        'hidden'
+      );
+
+      // let's open menu
+      el.toggleMenu();
+      await el.updateComplete;
+
+      expect(el.menuOpened).to.be.true;
+      expect(nav?.querySelector('#menu')?.getAttribute('class')).to.not.contain(
+        'hidden'
+      );
     });
 
-    // it('listens to event `loadingStateUpdated` to signal load', async () => {
-    //   const item = new ItemStub() as MetadataResponse;
-    //   const el = await fixture<ItemNavigator>(
-    //     html`<ia-item-navigator .item=${item}></ia-item-navigator>`
-    //   );
-    //   // const loadSpy = Sinon.spy();
-    //   // el.loadingStateUpdated = loadSpy;
-    //   await el.updateComplete;
+    it('opens menu shortcut with `@manageSideMenuEvents`', async () => {
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
+      );
+      const detail = {
+        menuId: 'fullscreen',
+        action: 'open',
+      };
 
-    //   expect(el?.item).to.not.be.undefined;
+      el.menuContents = [menuProvider];
+      await el.updateComplete;
+      const frame = el.shadowRoot?.querySelector('#frame');
+      // default menu open behavior is to side menu open, not overlay
+      expect(frame?.getAttribute('class')).to.contain('shift');
+
+      expect(el.menuOpened).to.be.false;
+      expect(el.openMenu).to.be.undefined;
+      expect(frame?.getAttribute('class')).to.not.contain('open');
+
+      const event = new CustomEvent('updateSideMenu', {
+        detail,
+      }) as ToggleSideMenuOpenEvent;
+      el.manageSideMenuEvents(event);
+      await el.updateComplete;
+
+      expect(el.shouldRenderMenu).to.be.true;
+      expect(el.menuOpened).to.be.true;
+      expect(el.openMenu).to.equal(detail.menuId);
 
-    //   const mainTheaterSection = el.shadowRoot?.querySelector('#reader');
+      expect(frame?.getAttribute('class')).to.contain('open');
 
-    //   const contentController = mainTheaterSection?.querySelector('ia-item-inspector');
+      // no menu provided
+      const openShortcutSpy = Sinon.spy(el, 'openShortcut');
+      const toggleMenuSpy = Sinon.spy(el, 'toggleMenu');
 
-    //   expect(contentController).to.equal(32324);
+      const noMenuProvidedEvent = new CustomEvent('updateSideMenu', {
+        detail: {},
+      }) as any;
+      el.manageSideMenuEvents(noMenuProvidedEvent);
+      await el.updateComplete;
 
-    //   // const loadingEvent = new CustomEvent('loadingStateUpdated', { detail: { loaded: true }}) as IntLoadingStateUpdatedEvent;
-    //   // contentController?.emitLoadingStatusUpdate(true);
+      expect(openShortcutSpy.called).to.be.false;
+      expect(toggleMenuSpy.called).to.be.false;
+
+      // toggle menu
+      const toggleMenuEvent = new CustomEvent('updateSideMenu', {
+        detail: { action: 'toggle', menuId: 'fullscreen' },
+      }) as any;
+      el.manageSideMenuEvents(toggleMenuEvent);
+      await el.updateComplete;
 
-    //   // await contentController?.updateComplete;
-    //   // await el.updateComplete;
+      expect(toggleMenuSpy.callCount).to.equal(1);
 
-    // });
+      // open menu
+      const openMenuEvent = new CustomEvent('updateSideMenu', {
+        detail: { action: 'open', menuId: 'fullscreen' },
+      }) as any;
+      el.manageSideMenuEvents(openMenuEvent);
+      await el.updateComplete;
+
+      expect(openShortcutSpy.callCount).to.equal(1);
+    });
   });
 
-  describe('It uses a shared ResizeObserver', () => {
-    it('can create one', async () => {
+  describe('el.menuContents', () => {
+    it('draws side menu when populated', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator></ia-item-navigator>`
+        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
       );
+
+      el.menuContents = [menuProvider];
       await el.updateComplete;
-      expect(el.sharedObserver).to.not.be.null;
-      expect(el.sharedObserver).to.be.instanceOf(SharedResizeObserver);
-    });
+      expect(el.menuContents.length).to.exist;
+      expect(el.shouldRenderMenu).to.be.true;
 
-    it('can recieve one', async () => {
-      const sharedObserver = new SharedResizeObserver();
+      const nav = el.shadowRoot?.querySelector('nav');
+      expect(nav).to.exist;
+
+      const menuSlider = nav?.querySelector('ia-menu-slider');
+      expect(menuSlider).to.exist;
+      expect(menuSlider?.getAttribute('manuallyhandleclose')).to.exist;
+      expect(menuSlider?.getAttribute('open')).to.exist;
+    });
+  });
 
+  describe('`el.menuShortcuts`', () => {
+    it('displays shortcut & toggle side menu button', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator
-          .sharedObserver=${sharedObserver}
-        ></ia-item-navigator>`
+        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
       );
+
+      const anotherShortcut = {
+        id: 'foo',
+        icon: html`<i class="foo-shortcut"></i>`,
+      };
+      el.menuContents = [menuProvider];
+      el.menuShortcuts = [shortcut, anotherShortcut];
       await el.updateComplete;
-      expect(el.sharedObserver).to.be.instanceOf(SharedResizeObserver);
+
+      const nav = el.shadowRoot?.querySelector('nav');
+
+      const shortcutsContainer = nav?.querySelector('.shortcuts');
+      expect(el.menuShortcuts.length).to.exist;
+      expect(nav).to.exist;
+      expect(shortcutsContainer).to.exist;
+      expect(shortcutsContainer?.querySelector('i.fullscreen-test')).to.exist;
+      expect(shortcutsContainer?.querySelector('button.shortcut.foo')).to.exist;
+      expect(nav?.querySelector('.toggle-menu')).to.exist;
     });
   });
 
-  describe('It uses a shared modal component', () => {
-    it('can create one', async () => {
+  describe('Menu events', () => {
+    it('`el.setMenuShortcuts`', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator></ia-item-navigator>`
+        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
       );
+      expect(el.menuShortcuts.length).to.equal(0);
+
+      const menuShortcuts = [shortcut];
+
+      el.setMenuShortcuts({
+        detail: menuShortcuts,
+      } as SetSideMenuShortcutsEvent);
       await el.updateComplete;
-      expect(el.sharedObserver).to.not.be.null;
-      expect(el.sharedObserver).to.be.instanceOf(SharedResizeObserver);
+
+      expect(el.menuShortcuts.length).to.equal(1);
     });
+    it('`el.setMenuContents`', async () => {
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
+      );
+      expect(el.menuContents.length).to.equal(0);
 
-    it('can recieve one', async () => {
-      const sharedObserver = new SharedResizeObserver();
-      const observerSpy = Sinon.stub(sharedObserver, 'addObserver');
+      el.setMenuShortcuts({
+        detail: [menuProvider],
+      } as SetSideMenuContentsEvent);
+      await el.updateComplete;
 
+      expect(el.menuShortcuts.length).to.equal(1);
+    });
+    it('`el.setOpenMenu`', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator
-          .sharedObserver=${sharedObserver}
-        ></ia-item-navigator>`
+        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
       );
+
+      el.setOpenMenu({
+        detail: { id: 'foo' },
+      } as ToggleSidePanelOpenEvent);
       await el.updateComplete;
-      expect(el.sharedObserver).to.be.instanceOf(SharedResizeObserver);
-      expect(observerSpy.called).to.equal(true);
-    });
-  });
 
-  // describe('full browser window immersion "fullscreen"', () => {
-  //   it('creates reflected attribute `viewportinfullscreen`', () =>{
-  //     /** to help with external styling adjustmnents */
-  //   });
-  // });
+      expect(el.openMenu).to.equal('foo');
+      expect(el.selectedMenuId).to.equal('foo');
 
-  // describe('Loads side menu contents', () =>{
-  // });
+      // toggles it off
+      el.setOpenMenu({
+        detail: { id: 'foo' },
+      } as ToggleSidePanelOpenEvent);
+      await el.updateComplete;
 
-  // describe('Menu Shortcuts', () => {
-  // });
+      expect(el.openMenu).to.be.undefined;
+      expect(el.selectedMenuId).to.equal('');
+    });
+    it('`el.closeMenu`', async () => {
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
+      );
 
-  //   it('passes the a11y audit', async () => {
-  //     const el = await fixture<YourWebComponent>(
-  //       html`<your-webcomponent></your-webcomponent>`
-  //     );
+      el.menuOpened = true;
+      await el.updateComplete;
 
-  //     await expect(el).shadowDom.to.be.accessible();
-  //   });
-});
+      expect(el.menuOpened).to.be.true;
 
-// describe('YourWebComponent', () => {
-//   it('has a default title "Hey there" and counter 5', async () => {
-//     const el = await fixture<YourWebComponent>(
-//       html`<your-webcomponent></your-webcomponent>`
-//     );
-
-//     expect(el.title).to.equal('Hey there');
-//     expect(el.counter).to.equal(5);
-//   });
-
-//   it('increases the counter on button click', async () => {
-//     const el = await fixture<YourWebComponent>(
-//       html`<your-webcomponent></your-webcomponent>`
-//     );
-//     el.shadowRoot!.querySelector('button')!.click();
-
-//     expect(el.counter).to.equal(6);
-//   });
-
-//   it('can override the title via attribute', async () => {
-//     const el = await fixture<YourWebComponent>(
-//       html`<your-webcomponent title="attribute title"></your-webcomponent>`
-//     );
-
-//     expect(el.title).to.equal('attribute title');
-//   });
-
-//   it('passes the a11y audit', async () => {
-//     const el = await fixture<YourWebComponent>(
-//       html`<your-webcomponent></your-webcomponent>`
-//     );
-
-//     await expect(el).shadowDom.to.be.accessible();
-//   });
-// });
+      el.closeMenu();
+      await el.updateComplete;
+
+      expect(el.menuOpened).to.be.false;
+    });
+  });
+});

package/test/ia-stub.ts

@@ -1,3 +1,79 @@
-// const parsed = JSON.parse(raw);
+/* eslint-disable camelcase */
+import {
+  MetadataResponse,
+  Metadata,
+  File,
+  Review,
+  SpeechMusicASREntry,
+} from '@internetarchive/search-service';
+import { html } from 'lit-html';
+import {
+  MenuShortcutInterface,
+  MenuProviderInterface,
+} from '../src/interfaces/menu-interfaces';
 
-// export default parsed;
+export class ItemStub implements MetadataResponse {
+  constructor() {
+    this.rawResponse = '';
+    this.created = 1;
+    this.d1 = 'hello';
+    this.d2 = 'boop';
+    this.dir = 'whee';
+    this.files = [];
+    this.files_count = 0;
+    this.item_last_updated = 2020;
+    this.item_size = 111;
+    this.metadata = { identifier: 'foo' } as Metadata;
+    this.server = 'foo-server';
+    this.uniq = 2;
+    this.workable_servers = ['abc'];
+  }
+
+  rawResponse: any;
+
+  created: number;
+
+  d1: string;
+
+  d2: string;
+
+  dir: string;
+
+  files: File[];
+
+  files_count: number;
+
+  item_last_updated: number;
+
+  item_size: number;
+
+  metadata: Metadata;
+
+  server: string;
+
+  uniq: number;
+
+  workable_servers: string[];
+
+  speech_vs_music_asr?: SpeechMusicASREntry[] | undefined;
+
+  reviews?: Review[] | undefined;
+}
+
+export const shortcut = {
+  id: 'fullscreen',
+  icon: html`<i class="fas fullscreen-test"></i>`,
+} as MenuShortcutInterface;
+
+export const menuProvider = {
+  ...shortcut,
+  label: 'foo',
+  menuDetails: html`<div>foo</div>`,
+  selected: true,
+  followable: false,
+  href: 'https://archive.foo',
+  item: new ItemStub(),
+  baseHost: 'https://archive.foo',
+  subPrefix: 'bar',
+  updated: () => {},
+} as MenuProviderInterface;