@internetarchive/bookreader 5.0.0-8-multiple-files → 5.0.0-80

package/tests/e2e/helpers/base.js

@@ -53,14 +53,14 @@ export function runBaseTests (br) {
   test('nav menu displays properly', async t => {
     const { nav } = br;
 
-    await t.expect(nav.desktop.goLeft.visible).ok();
-    await t.expect(nav.desktop.goRight.visible).ok();
-    await t.expect(nav.desktop.mode1Up.visible).ok();
-    await t.expect(nav.desktop.mode2Up.visible).ok();
-    await t.expect(nav.desktop.modeThumb.visible).ok();
-    await t.expect(nav.desktop.zoomIn.visible).ok();
-    await t.expect(nav.desktop.zoomOut.visible).ok();
-    await t.expect(nav.desktop.fullScreen.visible).ok();
+    await t.expect(nav.goLeft.visible).ok();
+    await t.expect(nav.goRight.visible).ok();
+    await t.expect(nav.mode1Up.visible).ok();
+    await t.expect(nav.mode2Up.visible).ok();
+    await t.expect(nav.modeThumb.visible).ok();
+    await t.expect(nav.zoomIn.visible).ok();
+    await t.expect(nav.zoomOut.visible).ok();
+    await t.expect(nav.fullScreen.visible).ok();
   });
 
   test("Canonical URL has no initial parameters", async t => {
@@ -87,7 +87,7 @@ export function runBaseTests (br) {
     const initialUrl = await getUrl();
 
     // Set Cookie by page navigation, wait for cookie
-    await t.click(nav.desktop.goNext);
+    await t.click(nav.goNext);
     await t.wait(PAGE_FLIP_WAIT_TIME);
 
     // reload canonical URL, wait for URL change
@@ -96,7 +96,7 @@ export function runBaseTests (br) {
 
     if (await usesResume()) {
       await t.expect(isPageInUrl()).eql(true, initialUrl);
-      await t.expect(isModeInUrl('2up')).eql(true, initialUrl)
+      await t.expect(isModeInUrl('2up')).eql(true, initialUrl);
     } else {
       // No plugin, no br-resume cookie
       await t.expect(getUrl()).notContains('#page/');
@@ -109,9 +109,9 @@ export function runBaseTests (br) {
     const { nav, BRcontainer} = br;
 
     // Go to next page, so we can go previous if at front cover
-    await t.click(nav.desktop.goNext);
+    await t.click(nav.goNext);
     await t.wait(PAGE_FLIP_WAIT_TIME);
-    await t.click(nav.desktop.goNext);
+    await t.click(nav.goNext);
     await t.wait(PAGE_FLIP_WAIT_TIME);
 
     const onLoadBrState = BRcontainer.child(0);
@@ -119,7 +119,7 @@ export function runBaseTests (br) {
     const origImg1Src = await initialImages.nth(0).getAttribute('src');
     const origImg2Src = await initialImages.nth(-1).getAttribute('src');
 
-    await t.click(nav.desktop.goPrev);
+    await t.click(nav.goPrev);
     await t.wait(PAGE_FLIP_WAIT_TIME);
 
     const nextBrState = Selector('.BRcontainer').child(0);
@@ -138,13 +138,13 @@ export function runBaseTests (br) {
 
     // we aren't showing the same image in the new pages
     await t.expect(prevImg1Src).notEql(prevImg2Src);
-  })
+  });
 
   test('2up mode - Clicking `Next page` changes the page', async t => {
     // Note: this will fail on a R to L book if at front cover
     const { nav, BRcontainer} = br;
     // Flip away from cover
-    await t.click(nav.desktop.goNext);
+    await t.click(nav.goNext);
     await t.wait(PAGE_FLIP_WAIT_TIME);
 
     const onLoadBrState = BRcontainer.child(0);
@@ -152,7 +152,7 @@ export function runBaseTests (br) {
     const origImg1Src = await initialImages.nth(0).getAttribute('src');
     const origImg2Src = await initialImages.nth(-1).getAttribute('src');
 
-    await t.click(nav.desktop.goNext);
+    await t.click(nav.goNext);
     await t.wait(PAGE_FLIP_WAIT_TIME);
 
     const nextBrState = Selector('.BRcontainer').child(0);
@@ -168,75 +168,80 @@ export function runBaseTests (br) {
 
     // we aren't showing the same image in the new pages
     await t.expect(nextImg1Src).notEql(nextImg2Src);
-  })
+  });
 
   test('Clicking `page flip buttons` updates location', async t => {
     const { nav } = br;
     // Page navigation creates params
-    await t.click(nav.desktop.goNext);
+    await t.click(nav.goNext);
     await t.expect(isPageInUrl()).eql(true);
     await t.expect(isModeInUrl('2up')).eql(true);
 
-    await t.click(nav.desktop.goPrev);
+    await t.click(nav.goPrev);
     await t.expect(isPageInUrl()).eql(true);
     await t.expect(isModeInUrl('2up')).eql(true);
   });
 
-  test('Clicking `2 page view` brings up 2 pages at a time', async t => {
+  test('Clicking `2 page view` brings up cur page + caching', async t => {
     const { nav } = br;
-    await t.click(nav.desktop.mode2Up);
-    await t.expect(Selector('.BRpagecontainer').count).eql(2);
+    await t.click(nav.mode2Up);
+    await t.expect(Selector('.BRpagecontainer.BRpage-visible').count).eql(1);
+    await t.expect(Selector('.BRpagecontainer').count).eql(3);
   });
 
   test('Clicking `1 page view` brings up 1 at a time', async t => {
     const { nav } = br;
-    await t.click(nav.desktop.mode1Up);
+    await t.click(nav.mode1Up);
+
+    // Flip away from cover
+    await t.click(nav.goNext);
+    await t.wait(PAGE_FLIP_WAIT_TIME);
+
     // we usually pre-fetch the page in question & the 2 after it
     await t.expect(Selector('.BRpagecontainer').count).gte(3);
   });
 
   test('Clicking `thumbnail view` brings up all of the page thumbnails', async t => {
     const { nav } = br;
-    await t.click(nav.desktop.modeThumb);
+    await t.click(nav.modeThumb);
     await t.expect(Selector('.BRpagecontainer').count).gte(3);
   });
 
   test('Clicking `zoom out` makes book smaller', async t => {
-    const { nav, BRcontainer } = br;
-    const book = BRcontainer.child(0);
+    const { nav } = br;
+    const page = Selector('.BRpagecontainer.BRpage-visible');
 
     await t.expect(br.BRcontainer.visible).ok();
-    await t.expect(book.visible).ok();
-    await t.expect(nav.desktop.zoomOut.visible).ok();
+    await t.expect(page.visible).ok();
+    await t.expect(nav.zoomOut.visible).ok();
 
-    const initialBookHeight = await book.getBoundingClientRectProperty('height');
-    const initialBookWidth = await book.getBoundingClientRectProperty('width');
+    const initialBookHeight = await page.getBoundingClientRectProperty('height');
+    const initialBookWidth = await page.getBoundingClientRectProperty('width');
 
-    await t.click(nav.desktop.zoomOut);
+    await t.click(nav.zoomOut);
 
-    const zoomOutBookHeight = await book.getBoundingClientRectProperty('height');
-    const zoomOutBookWidth = await book.getBoundingClientRectProperty('width');
+    const zoomOutBookHeight = await page.getBoundingClientRectProperty('height');
+    const zoomOutBookWidth = await page.getBoundingClientRectProperty('width');
 
-    await t.expect(zoomOutBookHeight).lte(initialBookHeight);
-    await t.expect(zoomOutBookWidth).lte(initialBookWidth);
+    await t.expect(zoomOutBookHeight).lt(initialBookHeight);
+    await t.expect(zoomOutBookWidth).lt(initialBookWidth);
   });
 
   test('Clicking `zoom in` makes book larger', async t => {
-    const { nav, BRcontainer } = br;
-
-    const book = await BRcontainer.child(0);
+    const { nav } = br;
+    const page = Selector('.BRpagecontainer.BRpage-visible');
 
-    await t.expect(BRcontainer.visible).ok();
-    await t.expect(book.visible).ok();
-    await t.expect(nav.desktop.zoomIn.visible).ok();
+    await t.expect(br.BRcontainer.visible).ok();
+    await t.expect(page.visible).ok();
+    await t.expect(nav.zoomIn.visible).ok();
 
-    const initialBookHeight = await book.getBoundingClientRectProperty('height');
-    const initialBookWidth = await book.getBoundingClientRectProperty('width');
+    const initialBookHeight = await page.getBoundingClientRectProperty('height');
+    const initialBookWidth = await page.getBoundingClientRectProperty('width');
 
-    await t.click(nav.desktop.zoomIn);
+    await t.click(nav.zoomIn);
 
-    const zoomInBookHeight = await book.getBoundingClientRectProperty('height');
-    const zoomIntBookWidth = await book.getBoundingClientRectProperty('width');
+    const zoomInBookHeight = await page.getBoundingClientRectProperty('height');
+    const zoomIntBookWidth = await page.getBoundingClientRectProperty('width');
 
     await t.expect(zoomInBookHeight).gt(initialBookHeight);
     await t.expect(zoomIntBookWidth).gt(initialBookWidth);
@@ -248,10 +253,10 @@ export function runBaseTests (br) {
 
     // initial in-page
     await t.expect(BRcontainer.getBoundingClientRectProperty('width')).lte(windowWidth);
-    await t.click(nav.desktop.fullScreen);
+    await t.click(nav.fullScreen);
     // full screen
     await t.expect(BRcontainer.getBoundingClientRectProperty('width')).eql(windowWidth);
-    await t.click(nav.desktop.fullScreen);
+    await t.click(nav.fullScreen);
     // in-page
     await t.expect(BRcontainer.getBoundingClientRectProperty('width')).lte(windowWidth);
   });

package/tests/e2e/helpers/debug.js

@@ -10,4 +10,4 @@
  */
 export default async (t) => {
   await t.debug().setNativeDialogHandler(() => true);
-}
+};

package/tests/e2e/helpers/params.js

@@ -0,0 +1,17 @@
+// @ts-check
+class TestParams {
+  baseUrl = process.env.BASE_URL?.replace(/\/+$/, '') ?? 'http://127.0.0.1:8000'
+  ocaids = process.env.OCAIDS?.split(',') ?? null;
+  /** Whether the url we're testing is a prod (or near prod) IA url, or a demos url */
+  isIA = new URL(this.baseUrl).hostname.endsWith('archive.org');
+
+  /** @param {string} ocaid */
+  getArchiveUrl(ocaid) {
+    return this.isIA ? `${this.baseUrl}/details/${ocaid}`
+      // Otherwise it's a demo page
+      : `${this.baseUrl}/BookReaderDemo/demo-internetarchive.html?ocaid=${ocaid}`;
+  }
+}
+
+const params = new TestParams();
+export default params;

package/tests/e2e/helpers/rightToLeft.js

@@ -4,26 +4,20 @@ const getPageUrl = ClientFunction(() => window.location.href);
 export function runRightToLeftTests (br) {
   test('Right to Left - correct initialization in two-page view', async t => {
     const { nav, BRcontainer} = br;
-    await t.click(nav.desktop.mode2Up);
+    await t.click(nav.mode2Up);
 
-    //checking right leaf edge has 0 width
-    await t.expect(BRcontainer.find('.BRleafEdgeR').getStyleProperty('width')).eql('0px');
-
-    //checking empty page before the cover is more to the left than the first page
-    const rightEmptyPage = BRcontainer.find('.BRpagecontainer.BRemptypage');
-    const leftPage = BRcontainer.find('.BRpagecontainer.pagediv0');
-    const leftPageLDistance = leftPage.getBoundingClientRectProperty('left');
-    const rightPageLDistance = rightEmptyPage.getBoundingClientRectProperty('left');
-    await t.expect(rightPageLDistance).gt(await leftPageLDistance);
+    //checking right leaf edge is not in tree
+    await t.expect(BRcontainer.find('.br-mode-2up__leafs--left').count).eql(1);
+    await t.expect(BRcontainer.find('.br-mode-2up__leafs--right').count).eql(0);
 
     //checks slider is in correct position
-    await t.expect(nav.desktop.sliderRange.getStyleProperty('width')).eql('0px');
+    await t.expect(nav.sliderRange.getStyleProperty('width')).eql('0px');
   });
 
   test('Right to Left - assuring flipping left goes to next page', async t => {
     const { nav } = br;
-    await t.click(nav.desktop.mode2Up);
-    await t.click(nav.desktop.goLeft);
-    await t.expect(getPageUrl()).match(/page\/n2/);
+    await t.click(nav.mode2Up);
+    await t.click(nav.goLeft);
+    await t.expect(getPageUrl()).match(/page\/n1/);
   });
 }

package/tests/e2e/helpers/search.js

@@ -0,0 +1,73 @@
+import { ClientFunction, RequestMock } from 'testcafe';
+import { SEARCH_INSIDE_URL_RE , mockResponseFound, mockResponseNotFound,
+  TEST_TEXT_FOUND, TEST_TEXT_NOT_FOUND, PAGE_FIRST_RESULT, SEARCH_MATCHES_LENGTH } from './mockSearch';
+
+
+export function runSearchTests(br) {
+  //building mock response  for successful and unsuccessful search
+  const mockFound = RequestMock()
+    .onRequestTo(SEARCH_INSIDE_URL_RE )
+    .respond(mockResponseFound, 202);
+
+  const mockNotFound = RequestMock()
+    .onRequestTo(SEARCH_INSIDE_URL_RE )
+    .respond(mockResponseNotFound, 202);
+
+
+  test
+    .requestHooks(mockFound)('Search - successful search', async t => {
+      const nav = br.nav;
+
+      //assuring that the search bar is enabled
+      await t.expect(nav.searchIcon.visible).ok();
+      await t.click(nav.searchIcon);
+
+      //testing search for a word found in the book
+      await t.selectText(nav.searchBox).pressKey('delete');
+      // FIXME: Why is it only typing every other letter?!?!
+      await t.typeText(nav.searchBox, TEST_TEXT_FOUND.split('').join('_'));
+      await t.pressKey('enter');
+
+      await t.expect(nav.searchPin.exists).ok();
+      await t.expect(nav.searchPin.child('.BRquery').child('main').exists).ok();
+      await t.expect(nav.searchPin.child('.BRquery').child('main').innerText).contains(TEST_TEXT_FOUND);
+      await t.expect(nav.searchNavigation.exists).ok();
+      await t.expect(nav.searchNavigation.find('[data-id="resultsCount"]').exists).ok();
+      await t.expect(nav.searchNavigation.find('[data-id="resultsCount"]').innerText).contains(SEARCH_MATCHES_LENGTH);
+
+      //checking url
+      const getPageUrl = ClientFunction(() => window.location.href.toString());
+      await t.expect(getPageUrl()).contains(TEST_TEXT_FOUND);
+
+      //checks clicking on first search pin opens correct page
+      await t.click(nav.searchPin);
+      await t.expect(getPageUrl()).contains(PAGE_FIRST_RESULT);
+
+      //checks highlight on result page is visible
+      const highlight = br.shell.find(".searchHiliteLayer rect");
+      await t.expect(highlight.visible).ok();
+
+    });
+
+
+  test
+    .requestHooks(mockNotFound)('Search - unsuccessful search', async t => {
+      const nav = br.nav;
+
+      //assuring that the search bar is enabled
+      await t.expect(nav.searchIcon.visible).ok();
+      await t.click(nav.searchIcon);
+
+      //testing search for a word not found in the book
+      await t.selectText(nav.searchBox).pressKey('delete');
+      // FIXME: Why is it only typing every other letter?!?!
+      await t.typeText(nav.searchBox, TEST_TEXT_NOT_FOUND.split('').join('_'));
+      await t.pressKey('enter');
+      await t.expect(nav.searchPin.child('.BRquery').child('main').withText(TEST_TEXT_NOT_FOUND).exists).notOk();
+
+      const getPageUrl = ClientFunction(() => window.location.href.toString());
+      await t.expect(getPageUrl()).contains(TEST_TEXT_NOT_FOUND);
+    });
+
+
+}

package/tests/e2e/models/Navigation.js

@@ -5,52 +5,35 @@ export default class Navigation {
   constructor() {
     this.topNavShell = new Selector('.BRtoolbar');
     this.bottomNavShell = new Selector('.BRfooter');
-    this.mobileMenu = new Selector('.BRmobileMenu');
-    this.desktop = new DesktopNav(this.bottomNavShell, this.topNavShell);
-    this.mobile = new MobileNav(this.mobileMenu, this.topNavShell);
-  }
-}
+    this.itemNav = Selector('ia-bookreader').shadowRoot().find('iaux-item-navigator').shadowRoot();
 
-/**
- * DesktopNav Model
- * @class
- * @classdesc defines DesktopNav base elements
- */
-class DesktopNav {
-  constructor(bottomToolbar, topToolbar) {
     // flipping
-    this.goLeft = bottomToolbar.find('.BRicon.book_left');
-    this.goRight = bottomToolbar.find('.BRicon.book_right');
-    this.goNext = bottomToolbar.find('.BRicon.book_flip_next');
-    this.goPrev = bottomToolbar.find('.BRicon.book_flip_prev');
+    this.goLeft = this.bottomNavShell.find('.BRicon.book_left');
+    this.goRight = this.bottomNavShell.find('.BRicon.book_right');
+    this.goNext = this.bottomNavShell.find('.BRicon.book_flip_next');
+    this.goPrev = this.bottomNavShell.find('.BRicon.book_flip_prev');
 
     // mode switching
-    this.mode1Up = bottomToolbar.find('.BRicon.onepg');
-    this.mode2Up = bottomToolbar.find('.BRicon.twopg');
-    this.modeThumb = bottomToolbar.find('.BRicon.thumb');
-    this.viewmode = bottomToolbar.find('.BRicon.viewmode');
+    this.mode1Up = this.bottomNavShell.find('.BRicon.onepg');
+    this.mode2Up = this.bottomNavShell.find('.BRicon.twopg');
+    this.modeThumb = this.bottomNavShell.find('.BRicon.thumb');
+    this.viewmode = this.bottomNavShell.find('.BRicon.viewmode');
 
     // zoom
-    this.zoomIn = bottomToolbar.find('.BRicon.zoom_in');
-    this.zoomOut = bottomToolbar.find('.BRicon.zoom_out');
+    this.zoomIn = this.bottomNavShell.find('.BRicon.zoom_in');
+    this.zoomOut = this.bottomNavShell.find('.BRicon.zoom_out');
 
     // search
-    this.searchBox = topToolbar.find('.BRbooksearch.desktop');
-    this.searchPin = bottomToolbar.find('.BRsearch');
-    this.searchNavigation = bottomToolbar.find('.BRsearch-navigation');
+    this.searchIcon = this.itemNav.find('button.shortcut.search');
+    this.searchBox = this.itemNav
+      .find('ia-menu-slider').shadowRoot()
+      .find('ia-book-search-results').shadowRoot()
+      .find('input[name=query]');
+    this.searchPin = this.bottomNavShell.find('.BRsearch');
+    this.searchNavigation = this.bottomNavShell.find('.BRsearch-navigation');
 
     // other
-    this.fullScreen = bottomToolbar.find('.BRicon.full');
-    this.sliderRange = bottomToolbar.find('.ui-slider-range');
-  }
-}
-
-class MobileNav {
-  constructor(mobileMenu, topToolbar) {
-    this.hamburgerButton = topToolbar.find('.BRmobileHamburger');
-    this.menuSearchButton = mobileMenu.find('.BRmobileMenu__search');
-    this.searchBox = mobileMenu.find('#BRsearch_tray');
-    this.searchResults = mobileMenu.find('[data-id="results"]');
-    this.searchResultText = this.searchResults.child(0).find('p');
+    this.fullScreen = this.bottomNavShell.find('.BRicon.full');
+    this.sliderRange = this.bottomNavShell.find('.ui-slider-range');
   }
 }

package/tests/e2e/rightToLeft.test.js

@@ -1,16 +1,15 @@
 import { runBaseTests } from './helpers/base';
 import { runRightToLeftTests } from './helpers/rightToLeft';
+import params from './helpers/params';
 
 import BookReader from './models/BookReader';
 
-const { BASE_URL } = process.env;
-const DEMO_PATH = 'demo-internetarchive.html?ocaid=';
-const OCAIDS = [
+const ocaids = params.ocaids || [
   'gendaitankashu00meijuoft', // Right to Left book
 ];
 
-OCAIDS.forEach(ocaid => {
-  const url = `${BASE_URL}${DEMO_PATH}${ocaid}`;
+ocaids.forEach(ocaid => {
+  const url = `${params.getArchiveUrl(ocaid)}`;
 
   fixture `Base Tests for right to left book: ${ocaid}`.page `${url}`;
   runBaseTests(new BookReader({ pageProgression: 'rl' }));

package/tests/e2e/viewmode.test.js

@@ -1,37 +1,44 @@
 import { Selector } from 'testcafe';
 import BookReader from './models/BookReader';
+import params from './helpers/params';
 
-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);
+const ocaids = params.ocaids || ['goody'];
+
+ocaids.forEach(ocaid => {
+  const url = params.getArchiveUrl(ocaid);
+
+  fixture `Viewmode carousel`.page `${url}`;
+
+  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');
+    await t.pressKey('right');
+    await t.pressKey('right');
+
+    // 1up to 2up
+    await t.click(nav.viewmode);
+    const twoPageContainer = Selector('.BRmode2up');
+    await t.expect(twoPageContainer.visible).ok();
+    const twoPageImages = twoPageContainer.find('img.BRpageimage');
+    await t.expect(twoPageImages.count).gte(2);
+
+    // 2up to thumb
+    await t.click(nav.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.viewmode);
+    const onePageViewContainer = Selector('br-mode-1up');
+    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(2);
+  });
 });