@internetarchive/bookreader 5.0.0-5 → 5.0.0-50-a1

package/src/plugins/url/UrlPlugin.js

@@ -0,0 +1,184 @@
+export class UrlPlugin {
+  constructor(options = {}) {
+    this.bookReaderOptions = options;
+
+    // the canonical order of elements is important in the path and query string
+    this.urlSchema = [
+      { name: 'page', position: 'path', default: 'n0' },
+      { name: 'mode', position: 'path', default: '2up' },
+      { name: 'search', position: 'path', deprecated_for: 'q' },
+      { name: 'q', position: 'query_param' },
+      { name: 'sort', position: 'query_param' },
+      { name: 'view', position: 'query_param' },
+      { name: 'admin', position: 'query_param' },
+    ];
+
+    this.urlState = {};
+    this.urlMode = this.bookReaderOptions.urlMode || 'hash';
+    this.urlHistoryBasePath = this.bookReaderOptions.urlHistoryBasePath ||  '/';
+    this.urlLocationPollId = null;
+    this.oldLocationHash = null;
+    this.oldUserHash = null;
+  }
+
+  /**
+   * Parse JSON object URL state to string format
+   * Arrange path names in an order that it is positioned on the urlSchema
+   * @param {Object} urlState
+   * @returns {string}
+   */
+  urlStateToUrlString(urlState) {
+    const searchParams = new URLSearchParams();
+    const pathParams = {};
+
+    Object.keys(urlState).forEach(key => {
+      let schema = this.urlSchema.find(schema => schema.name === key);
+      if (schema?.deprecated_for) {
+        schema = this.urlSchema.find(schemaKey => schemaKey.name === schema.deprecated_for);
+      }
+      if (schema?.position == 'path') {
+        pathParams[schema?.name] = urlState[key];
+      } else {
+        searchParams.append(schema?.name || key, urlState[key]);
+      }
+    });
+
+    const strPathParams = this.urlSchema
+      .filter(s => s.position == 'path')
+      .map(schema => pathParams[schema.name] ? `${schema.name}/${pathParams[schema.name]}` : '')
+      .join('/');
+
+    // replace consecutive slashes with a single slash + remove trailing slashes
+    const strStrippedTrailingSlash = `${strPathParams.replace(/\/+/g, '/').replace(/\/+$/, '')}`;
+    const concatenatedPath = `${strStrippedTrailingSlash}?${searchParams.toString()}`;
+    return searchParams.toString() ? concatenatedPath : `${strStrippedTrailingSlash}`;
+  }
+
+  /**
+   * Parse string URL and add it in the current urlState
+   * Example:
+   *  /page/n7/mode/2up => {page: 'n7', mode: '2up'}
+   *  /page/n7/mode/2up/search/hello => {page: 'n7', mode: '2up', q: 'hello'}
+   * @param {string} urlString
+   * @returns {object}
+   */
+  urlStringToUrlState(urlString) {
+    const urlState = {};
+
+    // Fetch searchParams from given {str}
+    // Note: whole URL path is needed for URL parsing
+    const urlPath = new URL(urlString, 'http://example.com');
+    const urlSearchParamsObj = Object.fromEntries(urlPath.searchParams.entries());
+    const splitUrlMatches = urlPath.pathname.match(/[^\\/]+\/[^\\/]+/g);
+    const urlStrSplitSlashObj = splitUrlMatches ? Object.fromEntries(splitUrlMatches.map(x => x.split('/'))) : {};
+
+    const doesKeyExists = (_object, _key) => {
+      return Object.keys(_object).some(value => value == _key);
+    };
+
+    // Add path objects to urlState
+    this.urlSchema
+      .filter(schema => schema.position == 'path')
+      .forEach(schema => {
+        const hasPropertyKey = doesKeyExists(urlStrSplitSlashObj, schema.name);
+        const hasDeprecatedKey = doesKeyExists(schema, 'deprecated_for') && hasPropertyKey;
+
+        if (hasDeprecatedKey) {
+          urlState[schema.deprecated_for] = urlStrSplitSlashObj[schema.name];
+          return;
+        }
+
+        if (hasPropertyKey) {
+          urlState[schema.name] = urlStrSplitSlashObj[schema.name];
+          return;
+        }
+      });
+
+    // Add searchParams to urlState
+    Object.entries(urlSearchParamsObj).forEach(([key, value]) => {
+      urlState[key] = value;
+    });
+
+    return urlState;
+  }
+
+  /**
+   * Add or update key-value to the urlState
+   * @param {string} key
+   * @param {string} val
+   */
+  setUrlParam(key, value) {
+    this.urlState[key] = value;
+
+    this.pushToAddressBar();
+  }
+
+  /**
+   * Delete key-value to the urlState
+   * @param {string} key
+   */
+  removeUrlParam(key) {
+    delete this.urlState[key];
+
+    this.pushToAddressBar();
+  }
+
+  /**
+   * Get key-value from the urlState
+   * @param {string} key
+   * @return {string}
+   */
+  getUrlParam(key) {
+    return this.urlState[key];
+  }
+
+  /**
+   * Push URL params to addressbar
+   */
+  pushToAddressBar() {
+    const urlStrPath = this.urlStateToUrlString(this.urlState);
+    const concatenatedPath = urlStrPath !== '/' ? urlStrPath : '';
+    if (this.urlMode == 'history') {
+      if (window.history && window.history.replaceState) {
+        const newUrlPath = `${this.urlHistoryBasePath}${concatenatedPath}`.trim().replace(/(\/+)/g, '/');
+        window.history.replaceState({}, null, newUrlPath);
+      }
+    } else {
+      window.location.replace('#' + concatenatedPath);
+    }
+    this.oldLocationHash = urlStrPath;
+  }
+
+  /**
+   * Get the url and check if it has changed
+   * If it was changeed, update the urlState
+   */
+  listenForHashChanges() {
+    this.oldLocationHash = window.location.hash.substr(1);
+    if (this.urlLocationPollId) {
+      clearInterval(this.urlLocationPollId);
+      this.urlLocationPollId = null;
+    }
+
+    // check if the URL changes
+    const updateHash = () => {
+      const newFragment = window.location.hash.substr(1);
+      const hasFragmentChange = newFragment != this.oldLocationHash;
+
+      if (!hasFragmentChange) { return; }
+
+      this.urlState = this.urlStringToUrlState(newFragment);
+    };
+    this.urlLocationPollId = setInterval(updateHash, 500);
+  }
+
+  /**
+   * Will read either the hash or URL and return the bookreader fragment
+   */
+  pullFromAddressBar (location = window.location) {
+    const path = this.urlMode === 'history'
+      ? (location.pathname.substr(this.urlHistoryBasePath.length) + location.search)
+      : location.hash.substr(1);
+    this.urlState = this.urlStringToUrlState(path);
+  }
+}

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);
 };
@@ -134,7 +137,7 @@ BookReader.prototype.urlUpdateFragment = function() {
     if (paramName in allParams) {
       validParams[paramName] = allParams[paramName];
     }
-    return validParams
+    return validParams;
   }, {});
 
   const newFragment = this.fragmentFromParams(params, urlMode);
@@ -173,7 +176,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 +199,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/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

@@ -38,6 +38,7 @@ const isModeInUrl = ClientFunction((mode) => {
  */
 export function runBaseTests (br) {
   test('On load, pages fit fully inside of the BookReader™', async t => {
+    await t.wait(1000); // for load
     await t.expect(br.shell.visible).ok();
     await t.expect(br.BRcontainer.visible).ok();
 
@@ -96,7 +97,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 +139,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 +169,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;
@@ -191,6 +192,11 @@ export function runBaseTests (br) {
   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);
   });

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/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,42 @@
 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');
+
+    // 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(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);
+  });
 });