@internetarchive/ia-item-navigator 0.0.0-a12 → 0.0.0-a13

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

@@ -3,8 +3,9 @@ import { html, fixture, expect } from '@open-wc/testing';
 import Sinon from 'sinon';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
-import { IntNavController } from '../src/interfaces/nav-controller-interface';
-import { ItemNavigator } from '../src/item-navigator';
+import { ModalManager } from '@internetarchive/modal-manager';
+import { BookNavigator } from '../src/interfaces/nav-controller-interface';
+import { ItemNavigator, ItemType } from '../src/item-navigator';
 import '../src/item-navigator';
 
 import '../test/book-nav-stub';
@@ -27,8 +28,10 @@ describe('ItemNavigator', () => {
     it('shows <book-navigator> if `this.itemType = "bookreader"`', async () => {
       const el = await fixture<ItemNavigator>(
         html`<ia-item-navigator
-          .itemType=${`bookreader`}
+          .itemType=${ItemType.BOOK}
           .item=${new ItemStub()}
+          .modal=${new ModalManager()}
+          .sharedObserver=${new SharedResizeObserver()}
         ></ia-item-navigator>`
       );
 
@@ -39,7 +42,7 @@ describe('ItemNavigator', () => {
 
       const bookNavigator = el.shadowRoot?.querySelector(
         'book-navigator'
-      ) as IntNavController;
+      ) as BookNavigator;
       await bookNavigator.updateComplete;
 
       console.log('132234234324324324');
@@ -91,10 +94,10 @@ describe('ItemNavigator', () => {
       await el.updateComplete;
       const spy = Sinon.spy();
       el.loadingStateUpdated = spy;
-      el.loaded = false;
+      el.loaded = null;
       await el.updateComplete;
       // check base properties
-      expect(el.loaded).to.equal(false);
+      expect(el.loaded).to.equal(null);
       expect(el.item).to.be.undefined;
 
       // hydrate item
@@ -108,50 +111,58 @@ describe('ItemNavigator', () => {
   });
 
   describe('`el.sharedObserver`', () => {
-    it('can create one', async () => {
+    it('uses one', async () => {
+      const sharedObserver = new SharedResizeObserver();
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator></ia-item-navigator>`
+        html`<ia-item-navigator
+          .sharedObserver=${sharedObserver}
+        ></ia-item-navigator>`
       );
-      await el.updateComplete;
-      expect(el.sharedObserver).to.not.be.null;
-      expect(el.sharedObserver).to.be.instanceOf(SharedResizeObserver);
-    });
 
-    it('can recieve one', async () => {
+      expect(el.sharedObserver).to.equal(sharedObserver);
+    });
+    it('freshly registers handler', async () => {
       const sharedObserver = new SharedResizeObserver();
+      const addObserverSpy = Sinon.spy(sharedObserver, 'addObserver');
+      const removeObserverSpy = Sinon.spy(sharedObserver, 'removeObserver');
 
-      const el = await fixture<ItemNavigator>(
+      await fixture<ItemNavigator>(
         html`<ia-item-navigator
           .sharedObserver=${sharedObserver}
         ></ia-item-navigator>`
       );
-      await el.updateComplete;
-      expect(el.sharedObserver).to.be.instanceOf(SharedResizeObserver);
-    });
-  });
 
-  describe('`el.modal`', () => {
-    it('can create one', async () => {
-      const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator></ia-item-navigator>`
-      );
-      await el.updateComplete;
-      expect(el.sharedObserver).to.not.be.null;
-      expect(el.sharedObserver).to.be.instanceOf(SharedResizeObserver);
+      // always calls to remove first, for posterity
+      expect(removeObserverSpy.callCount).to.equal(1);
+      expect(addObserverSpy.callCount).to.equal(1);
     });
-
-    it('can recieve one', async () => {
+    it('removes handler when component disconnects', async () => {
       const sharedObserver = new SharedResizeObserver();
-      const observerSpy = Sinon.stub(sharedObserver, 'addObserver');
+      const removeObserverSpy = Sinon.spy(sharedObserver, 'removeObserver');
 
       const el = await fixture<ItemNavigator>(
         html`<ia-item-navigator
           .sharedObserver=${sharedObserver}
         ></ia-item-navigator>`
       );
+
+      // called during setup `setResizeObserver`
+      expect(removeObserverSpy.callCount).to.equal(1);
+
+      el.disconnectedCallback();
       await el.updateComplete;
-      expect(el.sharedObserver).to.be.instanceOf(SharedResizeObserver);
-      expect(observerSpy.called).to.equal(true);
+
+      expect(removeObserverSpy.callCount).to.equal(2);
+    });
+  });
+
+  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);
     });
   });