@internetarchive/bookreader 5.0.0-8 → 5.0.0-80

package/src/plugins/{plugin.url.js → url/plugin.url.js}

@@ -1,4 +1,7 @@
 /* global BookReader */
+
+import { UrlPlugin } from "./UrlPlugin";
+
 /**
  * Plugin for URL management in BookReader
  * Note read more about the url "fragment" here:
@@ -22,7 +25,7 @@ jQuery.extend(BookReader.defaultOptions, {
   urlHistoryBasePath: '/',
 
   /** Only these params will be reflected onto the URL */
-  urlTrackedParams: ['page', 'search', 'mode', 'region', 'highlight'],
+  urlTrackedParams: ['page', 'search', 'mode', 'region', 'highlight', 'view'],
 
   /** If true, don't update the URL when `page == n0 (eg "/page/n0")` */
   urlTrackIndex0: false,
@@ -50,7 +53,7 @@ BookReader.prototype.init = (function(super_) {
       this.bind(BookReader.eventNames.PostInit, () => {
         const { updateWindowTitle, urlMode } = this.options;
         if (updateWindowTitle) {
-          document.title = this.shortTitle(50);
+          document.title = this.shortTitle(this.bookTitle, 50);
         }
         if (urlMode === 'hash') {
           this.urlStartLocationPolling();
@@ -86,7 +89,7 @@ BookReader.prototype.urlStartLocationPolling = function() {
   this.oldLocationHash = this.urlReadFragment();
 
   if (this.locationPollId) {
-    clearInterval(this.locationPollID);
+    clearInterval(this.locationPollId);
     this.locationPollId = null;
   }
 
@@ -110,7 +113,7 @@ BookReader.prototype.urlStartLocationPolling = function() {
       updateParams();
     }
     this.oldUserHash = newFragment;
-  }
+  };
 
   this.locationPollId = setInterval(updateHash, 500);
 };
@@ -121,7 +124,7 @@ BookReader.prototype.urlStartLocationPolling = function() {
  */
 BookReader.prototype.urlUpdateFragment = function() {
   const allParams = this.paramsFromCurrent();
-  const { urlMode, urlTrackIndex0, urlTrackedParams } = this.options;
+  const { urlTrackIndex0, urlTrackedParams } = this.options;
 
   if (!urlTrackIndex0
       && (typeof(allParams.index) !== 'undefined')
@@ -134,32 +137,39 @@ BookReader.prototype.urlUpdateFragment = function() {
     if (paramName in allParams) {
       validParams[paramName] = allParams[paramName];
     }
-    return validParams
+    return validParams;
   }, {});
 
-  const newFragment = this.fragmentFromParams(params, urlMode);
+  const newFragment = this.fragmentFromParams(params, this.options.urlMode);
   const currFragment = this.urlReadFragment();
   const currQueryString = this.getLocationSearch();
-  const newQueryString = this.queryStringFromParams(params, currQueryString, urlMode);
+  const newQueryString = this.queryStringFromParams(params, currQueryString, this.options.urlMode);
   if (currFragment === newFragment && currQueryString === newQueryString) {
     return;
   }
 
-  if (urlMode === 'history') {
-    if (window.history && window.history.replaceState) {
+  if (this.options.urlMode === 'history') {
+    if (!window.history || !window.history.replaceState) {
+      this.options.urlMode = 'hash';
+    } else {
       const baseWithoutSlash = this.options.urlHistoryBasePath.replace(/\/+$/, '');
       const newFragmentWithSlash = newFragment === '' ? '' : `/${newFragment}`;
 
       const newUrlPath = `${baseWithoutSlash}${newFragmentWithSlash}${newQueryString}`;
-      window.history.replaceState({}, null, newUrlPath);
-      this.oldLocationHash = newFragment + newQueryString;
-
+      try {
+        window.history.replaceState({}, null, newUrlPath);
+        this.oldLocationHash = newFragment + newQueryString;
+      } catch (e) {
+        // DOMException on Chrome when in sandboxed iframe
+        this.options.urlMode = 'hash';
+      }
     }
-  } else {
+  }
+
+  if (this.options.urlMode === 'hash')  {
     const newQueryStringSearch = this.urlParamsFiltersOnlySearch(this.readQueryString());
     window.location.replace('#' + newFragment + newQueryStringSearch);
     this.oldLocationHash = newFragment + newQueryStringSearch;
-
   }
 };
 
@@ -173,7 +183,7 @@ BookReader.prototype.urlUpdateFragment = function() {
 BookReader.prototype.urlParamsFiltersOnlySearch = function(url) {
   const params = new URLSearchParams(url);
   return params.has('q') ? `?${new URLSearchParams({ q: params.get('q') })}` : '';
-}
+};
 
 
 /**
@@ -196,3 +206,22 @@ BookReader.prototype.urlReadFragment = function() {
 BookReader.prototype.urlReadHashFragment = function() {
   return window.location.hash.substr(1);
 };
+export class BookreaderUrlPlugin extends BookReader {
+  init() {
+    if (this.options.enableUrlPlugin) {
+      this.urlPlugin = new UrlPlugin(this.options);
+      this.bind(BookReader.eventNames.PostInit, () => {
+        const { urlMode } = this.options;
+
+        if (urlMode === 'hash') {
+          this.urlPlugin.listenForHashChanges();
+        }
+      });
+    }
+
+    super.init();
+  }
+}
+
+window.BookReader = BookreaderUrlPlugin;
+export default BookreaderUrlPlugin;

package/src/util/browserSniffing.js

@@ -28,3 +28,25 @@ export function isFirefox(userAgent = navigator.userAgent) {
 export function isSafari(userAgent = navigator.userAgent) {
   return /safari/i.test(userAgent) && !/chrome|chromium/i.test(userAgent);
 }
+
+/**
+ * Checks whether the current browser is iOS (and hence iOS webkit)
+ * @return {boolean}
+ */
+export function isIOS() {
+  // We can't just check the userAgent because as of iOS 13,
+  // the userAgent is the same as desktop Safari because
+  // they wanted iPad's to be served the same version of websites
+  // as desktops.
+  return 'ongesturestart' in window && navigator.maxTouchPoints > 0;
+}
+
+/**
+ * Checks whether the current browser is Samsung Internet
+ * https://stackoverflow.com/a/40684162/2317712
+ * @param {string} [userAgent]
+ * @return {boolean}
+ */
+export function isSamsungInternet(userAgent = navigator.userAgent) {
+  return /SamsungBrowser/i.test(userAgent);
+}

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

@@ -1,11 +1,9 @@
 import { runBaseTests } from './helpers/base';
 import BookReader from './models/BookReader';
-import { runDesktopSearchTests } from './helpers/desktopSearch';
-// import { runMobileSearchTests } from './helpers/mobileSearch';
+import { runSearchTests } from './helpers/search';
+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,21 +13,15 @@ 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}`
-  runDesktopSearchTests(new BookReader());
-
-  // fixture `Mobile Search Tests for: ${ocaid}`
-  //   .page `${url}`
-  // runMobileSearchTests(new BookReader());
-
 
+  fixture `Search Tests for: ${ocaid}`
+    .page `${url}`;
+  runSearchTests(new BookReader());
 });

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);
+    });
+
+
+}