@internetarchive/bookreader 5.0.0-6-14 → 5.0.0-60

package/src/util/docCookies.js

@@ -9,6 +9,22 @@
  *  http://www.gnu.org/licenses/gpl-3.0-standalone.html
  */
 
+/**
+ * Check to see if the browser has cookies enabled.
+ * Accessing document.cookies errors if eg iframe with sandbox enabled.
+ * @returns {boolean}
+ */
+export function areCookiesBlocked(doc = document) {
+  try {
+    doc.cookie;
+    return false;
+  } catch (e) {
+    return true;
+  }
+}
+
+const COOKIES_BLOCKED = areCookiesBlocked();
+
 /**
  * Get specific key's value stored in cookie
  *
@@ -17,7 +33,7 @@
  * @returns {string|null}
  */
 export function getItem(sKey) {
-  if (!sKey) return null;
+  if (COOKIES_BLOCKED || !sKey) return null;
 
   return decodeURIComponent(
     // eslint-disable-next-line no-useless-escape
@@ -34,9 +50,11 @@ export function getItem(sKey) {
  * @param {string} [sDomain] domain name
  * @param {boolean} [bSecure]
  *
- * @returns {true}
+ * @returns {boolean}
  */
 export function setItem(sKey, sValue, vEnd, sPath, sDomain, bSecure) {
+  if (COOKIES_BLOCKED) return false;
+
   document.cookie = encodeURIComponent(sKey) + '=' + encodeURIComponent(sValue)
   + (vEnd ? `; expires=${vEnd.toUTCString()}` : '')
   + (sDomain ? `; domain=${sDomain}` : '')
@@ -56,6 +74,7 @@ export function setItem(sKey, sValue, vEnd, sPath, sDomain, bSecure) {
  * @returns {boolean}
  */
 export function removeItem(sKey, sPath, sDomain) {
+  if (COOKIES_BLOCKED) return false;
   // eslint-disable-next-line
   if (!hasItem(sKey)) return false;
 

package/tests/e2e/README.md

@@ -48,6 +48,43 @@ To run a particular fixture, add the path to the file at the end of your argumen
 
 `npm run test:e2e chrome tests/e2e/example.test.js`
 
+### Testing netlify or archive.org
+
+```sh
+BASE_URL='https://lucid-poitras-9a1249.netlify.app' npx testcafe
+BASE_URL='https://archive.org' npx testcafe
+```
+
+### Testing any OCAID
+
+For OCAIDs you should pick the specific test file to run, since things like autoplay tests won't work. The main tests are in `base.test.js`.
+
+```sh
+OCAIDS='goody,goodytwoshoes00newyiala' npx testcafe tests/e2e/base.test.js
+OCAIDS='goody,goodytwoshoes00newyiala' BASE_URL='https://archive.org' npx testcafe tests/e2e/base.test.js
+
+# right to left book; note this also runs the base tests
+OCAIDS='gendaitankashu00meijuoft' BASE_URL='https://archive.org' npx testcafe tests/e2e/rightToLeft.test.js
+```
+
+### Running tests with browserstack
+
+Note these can only test a public url, so you either need to create a draft PR and use the netlify link, or use ngrok to publish your dev server's port.
+
+Note: Windows users, there is a bug that prevents spaces in the browser field when using `npx`, so you'll need to have `testcafe` globally installed, and run it without `npx`. (See https://github.com/DevExpress/testcafe/issues/6600 ). Or, you can add browserstack browsers the `.testcaferc.js` file.
+
+```sh
+# Set auth; find yours at https://www.browserstack.com/accounts/settings
+export BROWSERSTACK_USERNAME="YOUR_USERNAME"
+export BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY"
+
+BASE_URL='https://archive.org' OCAIDS='goody,goodytwoshoes00newyiala' npx testcafe 'browserstack:iPad Pro 12.9 2018@15' tests/e2e/base.test.js
+```
+
+See a list of available browsers with `npx testcafe -b browserstack`. Note there are some browsers which appear to not work for some reason (eg `browserstack:iPad Mini 4@9.3`).
+
+Read more about other options/etc at the browserstack docs: https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs/testcafe .
+
 ## Pending (skip) tests
 
 You can skip any tests by calling the method `.skip` on the test object rather

package/tests/e2e/autoplay.test.js

@@ -1,11 +1,11 @@
 import { ClientFunction } from 'testcafe';
+import params from './helpers/params';
 
-const { BASE_URL } = process.env;
 const getLocationHref = ClientFunction(() => window.location.href.toString());
 const FLIP_SPEED = 1000;
 const FIRST_PAGE_DELAY = 2000;
 
-fixture `Autoplay plugin`.page `${BASE_URL}demo-autoplay.html`;
+fixture `Autoplay plugin`.page `${params.baseUrl}/BookReaderDemo/demo-autoplay.html`;
 
 test('page auto-advances after allotted flip speed and delay', async t => {
   await t.wait(2 * FLIP_SPEED + FIRST_PAGE_DELAY);

package/tests/e2e/base.test.js

@@ -2,10 +2,9 @@ import { runBaseTests } from './helpers/base';
 import BookReader from './models/BookReader';
 import { runDesktopSearchTests } from './helpers/desktopSearch';
 // import { runMobileSearchTests } from './helpers/mobileSearch';
+import params from './helpers/params';
 
-
-const { BASE_URL } = process.env;
-const OCAIDS = [
+const ocaids = params.ocaids || [
   'theworksofplato01platiala',
   // Removed because failing test 'Canonical URL with cookie shows paramters'
   // in tests/e2e/helpers/base.js
@@ -15,18 +14,19 @@ const OCAIDS = [
   // /BookReaderDemo/demo-ia-olivertwist.html/page/n13/mode/2up
   // 'demo-ia-olivertwist.html',
 ];
-const DEMO_PATH  = 'demo-internetarchive.html?ocaid='
 
-OCAIDS.forEach(ocaid => {
-  const url = `${BASE_URL}${DEMO_PATH }${ocaid}`;
+ocaids.forEach(ocaid => {
+  const url = params.getArchiveUrl(ocaid);
 
   fixture `Base Tests for: ${ocaid}`.page `${url}`;
   runBaseTests(new BookReader());
 
+
   fixture `Desktop Search Tests for: ${ocaid}`
-    .page `${url}`
+    .page `${url}`;
   runDesktopSearchTests(new BookReader());
 
+  // Todo: deprecated, will remove once mmenu is removed.
   // fixture `Mobile Search Tests for: ${ocaid}`
   //   .page `${url}`
   // runMobileSearchTests(new BookReader());

package/tests/e2e/helpers/base.js

@@ -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/');
@@ -138,7 +138,7 @@ 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
@@ -168,7 +168,7 @@ 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;
@@ -182,15 +182,21 @@ export function runBaseTests (br) {
     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.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);
+
+    // Flip away from cover
+    await t.click(nav.desktop.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);
   });
@@ -202,41 +208,40 @@ export function runBaseTests (br) {
   });
 
   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(page.visible).ok();
     await t.expect(nav.desktop.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);
 
-    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(br.BRcontainer.visible).ok();
+    await t.expect(page.visible).ok();
     await t.expect(nav.desktop.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);
 
-    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);

package/tests/e2e/helpers/debug.js

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

package/tests/e2e/helpers/desktopSearch.js

@@ -19,14 +19,15 @@ export function runDesktopSearchTests(br) {
       const nav = br.nav;
 
       //assuring that the search bar is enabled
-      await t.expect(nav.desktop.searchBox.visible).ok();
+      await t.expect(nav.desktop.searchIcon.visible).ok();
+      await t.click(nav.desktop.searchIcon);
 
       //testing search for a word found in the book
-      await t
-        .selectText(nav.desktop.searchBox.child('.BRsearchInput'))
-        .pressKey('delete');
-      await t.typeText(nav.desktop.searchBox.child('.BRsearchInput'), TEST_TEXT_FOUND);
-      await t.click((nav.desktop.searchBox).child('.BRsearchSubmit'));
+      await t.selectText(nav.desktop.searchBox).pressKey('delete');
+      // FIXME: Why is it only typing every other letter?!?!
+      await t.typeText(nav.desktop.searchBox, TEST_TEXT_FOUND.split('').join('_'));
+      await t.pressKey('enter');
+
       await t.expect(nav.desktop.searchPin.exists).ok();
       await t.expect(nav.desktop.searchPin.child('.BRquery').child('div').exists).ok();
       await t.expect(nav.desktop.searchPin.child('.BRquery').child('div').innerText).contains(TEST_TEXT_FOUND);
@@ -43,7 +44,7 @@ export function runDesktopSearchTests(br) {
       await t.expect(getPageUrl()).contains(PAGE_FIRST_RESULT);
 
       //checks highlight on result page is visible
-      const highlight = br.shell.find(".BookReaderSearchHilite");
+      const highlight = br.shell.find(".searchHiliteLayer rect");
       await t.expect(highlight.visible).ok();
 
     });
@@ -54,14 +55,14 @@ export function runDesktopSearchTests(br) {
       const nav = br.nav;
 
       //assuring that the search bar is enabled
-      await t.expect(nav.desktop.searchBox.visible).ok();
+      await t.expect(nav.desktop.searchIcon.visible).ok();
+      await t.click(nav.desktop.searchIcon);
 
       //testing search for a word not found in the book
-      await t
-        .selectText(nav.desktop.searchBox.child('.BRsearchInput'))
-        .pressKey('delete');
-      await t.typeText(nav.desktop.searchBox.child('.BRsearchInput'), TEST_TEXT_NOT_FOUND);
-      await t.click((nav.desktop.searchBox).child('.BRsearchSubmit'));
+      await t.selectText(nav.desktop.searchBox).pressKey('delete');
+      // FIXME: Why is it only typing every other letter?!?!
+      await t.typeText(nav.desktop.searchBox, TEST_TEXT_NOT_FOUND.split('').join('_'));
+      await t.pressKey('enter');
       await t.expect(nav.desktop.searchPin.child('.BRquery').child('div').withText(TEST_TEXT_NOT_FOUND).exists).notOk();
 
       const getPageUrl = ClientFunction(() => window.location.href.toString());

package/tests/e2e/helpers/mobileSearch.js

@@ -15,7 +15,7 @@ export function runMobileSearchTests(br) {
 
   test
     .requestHooks(mockFound)('Mobile search - successful search', async t => {
-      await t.resizeWindowToFitDevice('Sony Xperia Z', {portraitOrientation: true})
+      await t.resizeWindowToFitDevice('Sony Xperia Z', {portraitOrientation: true});
       const nav = br.nav.mobile;
 
       //opening side menu and search
@@ -47,7 +47,7 @@ export function runMobileSearchTests(br) {
       await t.expect(getPageUrl()).contains(PAGE_FIRST_RESULT);
 
       //checks highlight on result page is visible
-      const highlight = br.shell.find(".BookReaderSearchHilite");
+      const highlight = br.shell.find(".searchHiliteLayer rect");
       await t.expect(highlight.visible).ok();
 
       await t.maximizeWindow();
@@ -55,7 +55,7 @@ export function runMobileSearchTests(br) {
 
   test
     .requestHooks(mockNotFound)('Mobile search - unsuccessful search', async t => {
-      await t.resizeWindowToFitDevice('Sony Xperia Z', {portraitOrientation: true})
+      await t.resizeWindowToFitDevice('Sony Xperia Z', {portraitOrientation: true});
       const nav = br.nav.mobile;
 
       //opening side menu and search

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

@@ -6,15 +6,9 @@ export function runRightToLeftTests (br) {
     const { nav, BRcontainer} = br;
     await t.click(nav.desktop.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');
@@ -24,6 +18,6 @@ export function runRightToLeftTests (br) {
     const { nav } = br;
     await t.click(nav.desktop.mode2Up);
     await t.click(nav.desktop.goLeft);
-    await t.expect(getPageUrl()).match(/page\/n2/);
+    await t.expect(getPageUrl()).match(/page\/n1/);
   });
 }

package/tests/e2e/models/Navigation.js

@@ -6,7 +6,8 @@ export default class Navigation {
     this.topNavShell = new Selector('.BRtoolbar');
     this.bottomNavShell = new Selector('.BRfooter');
     this.mobileMenu = new Selector('.BRmobileMenu');
-    this.desktop = new DesktopNav(this.bottomNavShell, this.topNavShell);
+    this.itemNav = Selector('ia-bookreader').shadowRoot().find('ia-item-navigator').shadowRoot();
+    this.desktop = new DesktopNav(this.bottomNavShell, this.itemNav);
     this.mobile = new MobileNav(this.mobileMenu, this.topNavShell);
   }
 }
@@ -16,8 +17,12 @@ export default class Navigation {
  * @class
  * @classdesc defines DesktopNav base elements
  */
-class DesktopNav {
-  constructor(bottomToolbar, topToolbar) {
+export class DesktopNav {
+  /**
+   * @param {Selector} bottomToolbar
+   * @param {Selector} itemNav
+   */
+  constructor(bottomToolbar, itemNav) {
     // flipping
     this.goLeft = bottomToolbar.find('.BRicon.book_left');
     this.goRight = bottomToolbar.find('.BRicon.book_right');
@@ -35,7 +40,11 @@ class DesktopNav {
     this.zoomOut = bottomToolbar.find('.BRicon.zoom_out');
 
     // search
-    this.searchBox = topToolbar.find('.BRbooksearch.desktop');
+    this.searchIcon = itemNav.find('button.shortcut.search');
+    this.searchBox = itemNav
+      .find('ia-menu-slider').shadowRoot()
+      .find('ia-book-search-results').shadowRoot()
+      .find('input[name=query]');
     this.searchPin = bottomToolbar.find('.BRsearch');
     this.searchNavigation = bottomToolbar.find('.BRsearch-navigation');
 

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.desktop.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.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('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);
+  });
 });