@internetarchive/bookreader 5.0.0-11-multiple-files → 5.0.0-110

package/tests/e2e/viewmode.test.js

@@ -1,37 +0,0 @@
-import { Selector } from 'testcafe';
-import BookReader from './models/BookReader';
-
-const { BASE_URL } = process.env;
-
-fixture `Viewmode carousel`.page `${BASE_URL}viewmode-cycle.html`;
-
-test('Clicking `view mode` cycles through view modes', async t => {
-  const { nav } = (new BookReader());
-
-  // viewmode button only appear on mobile devices
-  await t.resizeWindow(400, 800);
-  // Flip forward one
-  await t.pressKey('right');
-
-  // 2up to thumb
-  await t.click(nav.desktop.viewmode);
-  const thumbnailContainer = Selector('.BRmodeThumb');
-  await t.expect(thumbnailContainer.visible).ok();
-  const thumbImages = thumbnailContainer.find('.BRpageview img');
-  await t.expect(thumbImages.count).gt(0);
-
-  // thumb to 1up
-  await t.click(nav.desktop.viewmode);
-  const onePageViewContainer = Selector('.BRpageview');
-  await t.expect(onePageViewContainer.visible).ok();
-  const onePageImages = onePageViewContainer.find('.BRmode1up .BRpagecontainer');
-  // we usually pre-fetch the page in question & 1 before/after it
-  await t.expect(onePageImages.count).gte(3);
-
-  // 1up to 2up
-  await t.click(nav.desktop.viewmode);
-  const twoPageContainer = Selector('.BRtwopageview');
-  await t.expect(twoPageContainer.visible).ok();
-  const twoPageImages = twoPageContainer.find('img.BRpageimage');
-  await t.expect(twoPageImages.count).gte(2);
-});

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

@@ -1,132 +0,0 @@
-import {
-  html,
-  elementUpdated,
-  fixtureCleanup,
-  fixtureSync,
-  expect,
-} from '@open-wc/testing';
-import sinon from 'sinon';
-
-import '../../../src/BookNavigator/BookNavigator.js';
-import BRFullscreenMgr from '../../../src/BookNavigator/br-fullscreen-mgr.js';
-
-const container = () => {
-  const item = {};
-  return html`
-    <book-navigator
-      .item=${item}
-      .baseHost
-    >
-      <div slot="bookreader">
-        <p class="visible-in-reader">now showing</p>
-      <div>
-      <p class="bunny">foo</p>
-      </
-  `;
-}
-
-beforeEach(() => {
-  const body = document.querySelector('body');
-  const brHook = document.createElement('div');
-  brHook.setAttribute('id', 'BookReader');
-  body.appendChild(brHook);
-});
-
-afterEach(() => {
-  window.br = null;
-  fixtureCleanup();
-});
-
-
-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);
-    });
-    it('emits a BrBookNav:PostInit event', 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(),
-      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('resizes bookreader when side menu toggles', async () => {
-    const el = fixtureSync(container());
-    const brStub = {
-      resize: sinon.fake(),
-      currentIndex: sinon.fake(),
-      jumpToIndex: sinon.fake()
-    }
-    el.bookreader = brStub;
-    await elementUpdated(el);
-
-    el.sideMenuOpen = true;
-    await elementUpdated(el);
-
-    expect(el.bookreader.resize.callCount).to.equal(1);
-    expect(el.bookreader.currentIndex.callCount).to.equal(1);
-    expect(el.bookreader.jumpToIndex.callCount).to.equal(1);
-
-    el.sideMenuOpen = false;
-    await elementUpdated(el);
-
-    expect(el.bookreader.resize.callCount).to.equal(2);
-    expect(el.bookreader.currentIndex.callCount).to.equal(2);
-    expect(el.bookreader.jumpToIndex.callCount).to.equal(2);
-  });
-  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()
-    }
-    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);
-  });
-});

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

@@ -1,133 +0,0 @@
-import {
-  html,
-  fixture,
-  expect,
-  oneEvent,
-} from '@open-wc/testing';
-import '../../../../src/BookNavigator/bookmarks/bookmark-edit.js';
-
-const bookmarkColors = [{
-  id: 0,
-  className: '',
-}, {
-  id: 1,
-  className: 'blue',
-}, {
-  id: 2,
-  className: 'red',
-}, {
-  id: 3,
-  className: 'green',
-}, {
-  id: 4,
-  className: 'yellow',
-}];
-
-const container = (bookmark = {}) => (
-  html`<ia-bookmark-edit .bookmark=${bookmark} .bookmarkColors=${bookmarkColors}></ia-bookmark-edit>`
-);
-
-const bookmark = {
-  id: 2,
-  thumbnail: '//placehold.it/37x46/06c/fff',
-  page: 9,
-  note: 'This is a long comment I left about this bookmark in order to test out the display in the panel on the side of the bookreader.',
-  color: 0,
-};
-
-describe('<ia-bookmark-edit>', () => {
-  it('sets default properties', async () => {
-    const el = await fixture(container(bookmark));
-
-    expect(el.bookmark).to.equal(bookmark);
-    expect(el.renderHeader).to.be.false;
-  });
-
-  it('renders bookmark thumb and page number', async () => {
-    const el = await fixture(container(bookmark));
-
-    expect(el.shadowRoot.querySelector('img').getAttribute('src')).to.equal(bookmark.thumbnail);
-    expect(el.shadowRoot.querySelector('h4').innerText).to.equal(`Page ${bookmark.page}`);
-  });
-
-  it('renders an optional header section', async () => {
-    const el = await fixture(container(bookmark));
-    el.renderHeader = true;
-
-    await el.updateComplete;
-
-    expect(el.shadowRoot.querySelector('header')).to.exist;
-  });
-
-  it('toggles rendering of the bookmark thumbnail and page number', async () => {
-    const el = await fixture(container(bookmark));
-    expect(el.shadowRoot.querySelector('img')).to.exist;
-    expect(el.shadowRoot.querySelector('h4')).to.exist;
-
-    el.showBookmark = false;
-    await el.updateComplete;
-
-    expect(el.shadowRoot.querySelector('img')).to.not.exist;
-    expect(el.shadowRoot.querySelector('h4')).to.not.exist;
-  });
-
-  it('emits a custom event when the bookmark color is changed', async () => {
-    const el = await fixture(container(bookmark));
-
-    setTimeout(() => (
-      el.shadowRoot.querySelector('li input').dispatchEvent(new Event('change'))
-    ));
-    const response = await oneEvent(el, 'bookmarkColorChanged');
-
-    expect(response).to.exist;
-  });
-
-  it('emits a custom event when the edit form is submitted', async () => {
-    const el = await fixture(container(bookmark));
-
-    setTimeout(() => (
-      el.shadowRoot.querySelector('form').dispatchEvent(new Event('submit'))
-    ));
-    const response = await oneEvent(el, 'saveBookmark');
-
-    expect(response).to.exist;
-  });
-
-  it('emits a custom event when the delete button is clicked', async () => {
-    const el = await fixture(container(bookmark));
-
-    setTimeout(() => (
-      el.shadowRoot.querySelector('button').click()
-    ));
-    const response = await oneEvent(el, 'deleteBookmark');
-
-    expect(response).to.exist;
-  });
-
-  it('updates bookmark color when a color input changed', async () => {
-    const el = await fixture(container(bookmark));
-
-    setTimeout(() => (
-      el.shadowRoot.querySelector('input#color_2').dispatchEvent(new Event('change'))
-    ));
-    await oneEvent(el, 'bookmarkColorChanged');
-
-    expect(el.bookmark.color).to.equal(2);
-  });
-
-  it('updates bookmark note when the note textarea changed', async () => {
-    const el = await fixture(container(bookmark));
-    const textarea = el.shadowRoot.querySelector('textarea');
-    const updatedNote = 'New note';
-
-    textarea.value = updatedNote;
-
-    setTimeout(() => (
-      textarea.dispatchEvent(new Event('change'))
-    ));
-
-    await oneEvent(textarea, 'change');
-
-    expect(el.bookmark.note).to.contain(updatedNote);
-  });
-});

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

@@ -1,222 +0,0 @@
-import {
-  html,
-  fixture,
-  expect,
-  oneEvent,
-} from '@open-wc/testing';
-import '../../../../src/BookNavigator/bookmarks/bookmarks-list.js';
-
-const bookmarks = [{
-  id: 1,
-  thumbnail: '//placehold.it/37x46',
-  page: 'xii',
-}, {
-  id: 2,
-  thumbnail: '//placehold.it/37x46/06c/fff',
-  page: 9,
-  note: 'This is a long comment I left about this bookmark in order to test out the display in the panel on the side of the bookreader.',
-}, {
-  id: 3,
-  thumbnail: '//placehold.it/37x46/e5e5e5/06c',
-  page: 9,
-  note: 'Interesting quote here regarding the division of labor',
-}];
-
-const bookmarkColors = [{
-  id: 0,
-  className: 'blue',
-}, {
-  id: 1,
-  className: 'red',
-}, {
-  id: 2,
-  className: 'green',
-}];
-
-const container = (bookmarksSet = []) => (
-  html`<ia-bookmarks-list .bookmarks=${bookmarksSet} .bookmarkColors=${bookmarkColors}></ia-bookmarks-list>`
-);
-
-describe('<ia-bookmarks-list>', () => {
-  it('sets default properties', async () => {
-    const el = await fixture(container(bookmarks));
-
-    expect(el.bookmarks).to.equal(bookmarks);
-    expect(el.activeBookmarkID).to.be.undefined;
-    expect(el.renderHeader).to.be.false;
-  });
-
-  it('renders bookmarks that contain page numbers', async () => {
-    const el = await fixture(container(bookmarks));
-
-    expect(el.shadowRoot.innerHTML).to.include(`Page ${bookmarks[0].page}`);
-  });
-
-  it('renders bookmarks that contain an optional note', async () => {
-    const el = await fixture(container(bookmarks));
-
-    expect(el.shadowRoot.innerHTML).to.include(bookmarks[1].note);
-  });
-
-  it('emits a custom event when a bookmark is clicked', async () => {
-    const el = await fixture(container(bookmarks));
-
-    setTimeout(() => (
-      el.shadowRoot.querySelector('li').click()
-    ));
-    const response = await oneEvent(el, 'bookmarkSelected');
-
-    expect(response).to.exist;
-  });
-
-  it('emits a custom event when an edit button is clicked', async () => {
-    const el = await fixture(container(bookmarks));
-
-    setTimeout(() => (
-      el.shadowRoot.querySelector('li button').click()
-    ));
-    const response = await oneEvent(el, 'bookmarkEdited');
-
-    expect(response).to.exist;
-  });
-
-  it('emits a saveBookmark event', async () => {
-    const el = await fixture(container(bookmarks));
-
-    setTimeout(() => (
-      el.emitSaveBookmark(bookmarks[0])
-    ));
-    const response = await oneEvent(el, 'saveBookmark');
-
-    expect(response).to.exist;
-  });
-
-  it('emits a deleteBookmark event', async () => {
-    const el = await fixture(container(bookmarks));
-
-    setTimeout(() => (
-      el.emitDeleteBookmark(bookmarks[0].id)
-    ));
-    const response = await oneEvent(el, 'deleteBookmark');
-
-    expect(response).to.exist;
-  });
-
-  it('emits a bookmarkColorChanged event', async () => {
-    const el = await fixture(container(bookmarks));
-
-    setTimeout(() => (
-      el.emitBookmarkColorChanged({ detail: { bookmarkId: 0, colorId: 0 } })
-    ));
-    const response = await oneEvent(el, 'bookmarkColorChanged');
-
-    expect(response).to.exist;
-  });
-
-  it('sets editedBookmark when an edit button is clicked', async () => {
-    const el = await fixture(container(bookmarks));
-    let prevState = el.editedBookmark;
-
-    el.shadowRoot.querySelector('li button').click();
-    await el.updateComplete;
-
-    expect(el.editedBookmark).not.to.equal(prevState);
-    expect(el.editedBookmark.page).to.equal(bookmarks[0].page);
-
-    // When clicking the same edit button while in edit mode, should toggle
-    // edit mode off and remove editedBookmark pointer
-    prevState = el.editedBookmark;
-    el.shadowRoot.querySelector('li button').click();
-    await el.updateComplete;
-
-    expect(el.editedBookmark).not.to.equal(prevState);
-    expect(el.editedBookmark.page).not.to.equal(bookmarks[0].page);
-  });
-
-  it('resets editedBookmark when saveBookmark callback called', async () => {
-    const el = await fixture(container(bookmarks));
-
-    [el.editedBookmark] = bookmarks;
-    await el.updateComplete;
-    el.saveBookmark({ detail: { bookmark: bookmarks[0] } });
-    await el.updateComplete;
-
-    expect(el.editedBookmark).not.to.equal(bookmarks[0]);
-    expect(el.editedBookmark).not.to.have.keys(['page', 'thumbnail', 'id']);
-  });
-
-  it('resets editedBookmark when deleteBookmark callback called', async () => {
-    const el = await fixture(container(bookmarks));
-
-    [el.editedBookmark] = bookmarks;
-    await el.updateComplete;
-    el.deleteBookmark({ detail: { id: bookmarks[0].id } });
-    await el.updateComplete;
-
-    expect(el.editedBookmark).not.to.equal(bookmarks[0]);
-    expect(el.editedBookmark).not.to.have.keys(['page', 'thumbnail', 'id']);
-  });
-
-  it('renders the bookmarks count', async () => {
-    const el = await fixture(container([bookmarks[0]]));
-    const bookmarksCount = await fixture(el.bookmarksCount);
-
-    expect(bookmarksCount.innerHTML).to.include('(1)');
-  });
-
-  it('does not render the bookmarks count when no bookmarks present', async () => {
-    const el = await fixture(container());
-    el.renderHeader = true;
-
-    await el.updateComplete;
-
-    expect(el.shadowRoot.querySelector('header small')).not.to.exist;
-  });
-
-  it('renders an optional header section', async () => {
-    const el = await fixture(container(bookmarks));
-    el.renderHeader = true;
-
-    await el.updateComplete;
-
-    expect(el.shadowRoot.querySelector('header')).to.exist;
-  });
-
-  // skipped:
-  // Uncaught TypeError: Cannot read property 'click' of null
-  xit('emits a custom event when the add bookmark button is clicked', async () => {
-    const el = await fixture(container(bookmarks));
-
-    setTimeout(() => (
-      el.shadowRoot.querySelector('.add-bookmark').click()
-    ));
-    const response = await oneEvent(el, 'addBookmark');
-
-    expect(response).to.exist;
-  });
-
-  // skipped:
-  // AssertionError: expected null to exist
-  xit('renders an optional add bookmark button', async () => {
-    const el = await fixture(container(bookmarks));
-
-    expect(el.shadowRoot.querySelector('.add-bookmark')).to.exist;
-
-    el.renderAddBookmarkButton = false;
-    await el.updateComplete;
-
-    expect(el.shadowRoot.querySelector('.add-bookmark')).not.to.exist;
-  });
-
-  // skipped:
-  // TypeError: Cannot read property 'getAttribute' of null
-  xit('can toggle disable behavior of add bookmark button', async () => {
-    const el = await fixture(container(bookmarks));
-    expect(el.shadowRoot.querySelector('.add-bookmark').getAttribute('disabled')).to.be.null;
-
-    el.disableAddBookmarkButton = true;
-    await el.updateComplete;
-
-    expect(el.shadowRoot.querySelector('.add-bookmark').getAttribute('disabled')).to.equal('disabled');
-  });
-});