@internetarchive/bookreader 5.0.0-18

package/tests/BookReader.test.js

@@ -0,0 +1,301 @@
+
+import BookReader from '../src/BookReader.js';
+import '../src/plugins/plugin.resume.js';
+import '../src/plugins/plugin.url.js';
+
+let br;
+beforeAll(() => {
+  document.body.innerHTML = '<div id="BookReader">';
+  br = new BookReader();
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+test('has registered PostInit events', () => {
+  expect(BookReader.eventNames.PostInit).toBeTruthy();
+});
+
+test('has registered zoom events', () => {
+  expect(BookReader.eventNames.zoomIn).toBeTruthy();
+  expect(BookReader.eventNames.zoomOut).toBeTruthy();
+});
+
+test('has registered view type selected events', () => {
+  expect(BookReader.eventNames['1PageViewSelected']).toBeTruthy();
+  expect(BookReader.eventNames['2PageViewSelected']).toBeTruthy();
+  expect(BookReader.eventNames['3PageViewSelected']).toBeTruthy();
+});
+
+test('has registered fullscreen toggle event', () => {
+  expect(BookReader.eventNames.fullscreenToggled).toBeTruthy();
+});
+
+test('checks cookie when initParams called', () => {
+  br.getResumeValue = jest.fn(() => 15);
+  br.urlReadFragment = jest.fn(() => '');
+
+  const params = br.initParams();
+  expect(br.getResumeValue).toHaveBeenCalledTimes(1);
+  expect(params.init).toBe(true);
+  expect(params.index).toBe(15);
+  expect(params.fragmentChange).toBe(true);
+});
+
+test('does not check cookie when initParams called', () => {
+  br.getResumeValue = jest.fn(() => null);
+  br.urlReadFragment = jest.fn(() => '');
+  br.options.enablePageResume = false;
+
+  const params = br.initParams();
+  expect(br.getResumeValue).toHaveBeenCalledTimes(0);
+  expect(params.init).toBe(true);
+  expect(params.index).toBe(0);
+  expect(params.fragmentChange).toBe(false);
+});
+
+test('gets index from fragment when both fragment and cookie when InitParams called', () => {
+  br.getResumeValue = jest.fn(() => 15);
+  br.urlReadFragment = jest.fn(() => 'page/n4');
+  br.options.enablePageResume = true;
+
+  const params = br.initParams();
+  expect(br.getResumeValue).toHaveBeenCalledTimes(1);
+  expect(params.init).toBe(true);
+  expect(params.index).toBe(4);
+  expect(params.fragmentChange).toBe(true);
+});
+
+test('sets prevReadMode when init called', () => {
+  br.init();
+  expect(br.prevReadMode).toBeTruthy();
+});
+
+// Default behavior same in
+//   BookReader.prototype.drawLeafsThumbnail
+//   BookReader.prototype.getPrevReadMode
+test('sets prevPageMode if initial mode is thumb', () => {
+  br.urlReadFragment = jest.fn(() => 'page/n4/mode/thumb');
+
+  br.init();
+  expect(br.prevReadMode).toBe(BookReader.constMode1up);
+});
+
+test('calls switchMode with init option when init called', () => {
+  br.switchMode = jest.fn();
+
+  br.init();
+  expect(br.switchMode.mock.calls[0][1])
+    .toHaveProperty('init', true);
+});
+
+test('has suppressFragmentChange true when init with no input', () => {
+  br.getResumeValue = jest.fn(() => null);
+  br.urlReadFragment = jest.fn(() => '');
+  br.urlReadHashFragment = jest.fn(() => '');
+  br.switchMode = jest.fn();
+
+  br.init();
+  expect(br.switchMode.mock.calls[0][1])
+    .toHaveProperty('suppressFragmentChange', true);
+});
+
+test('has suppressFragmentChange false when init with cookie', () => {
+  br.getResumeValue = jest.fn(() => 5);
+  br.urlReadFragment = jest.fn(() => '');
+  br.switchMode = jest.fn();
+
+  br.init();
+  expect(br.switchMode.mock.calls[0][1])
+    .toHaveProperty('suppressFragmentChange', false);
+});
+
+test('has suppressFragmentChange false when init with fragment', () => {
+  br.getResumeValue = jest.fn(() => null);
+  br.urlReadFragment = jest.fn(() => 'mode/1up');
+  br.switchMode = jest.fn();
+
+  br.init();
+  expect(br.switchMode.mock.calls[0][1])
+    .toHaveProperty('suppressFragmentChange', false);
+});
+
+test('has suppressFragmentChange false when init with hash fragment', () => {
+  br.getResumeValue = jest.fn(() => null);
+  br.urlReadFragment = jest.fn(() => '');
+  br.urlReadHashFragment = jest.fn(() => 'mode/1up');
+  br.switchMode = jest.fn();
+  br.options.urlMode = 'history',
+
+  br.init();
+  expect(br.switchMode.mock.calls[0][1])
+    .toHaveProperty('suppressFragmentChange', false);
+});
+
+test('adds q= term to urlMode=history query string', () => {
+  expect(br.queryStringFromParams(
+    { search: 'test value' },
+    'name=value',
+    'history'
+  )).toBe('?name=value&q=test+value');
+});
+
+test('replaces q= term in urlMode=history query string', () => {
+  expect(br.queryStringFromParams(
+    { search: 'test+value' },
+    'q=foo&a=1&b=2&c=3',
+    'history'
+  )).toBe('?q=test%2Bvalue&a=1&b=2&c=3');
+});
+
+test('does not add q= term to urlMode=hash query string', () => {
+  expect(br.queryStringFromParams(
+    { search: 'test value' },
+    'name=value',
+    'hash'
+  )).toBe('?name=value');
+});
+
+test('_getPageURISrcset with 0 page book', () => {
+  br._models.book.getNumLeafs = jest.fn(() => 0);
+  br._models.book.getPageURI = jest.fn((index, scale, rotate) => "correctURL.png&scale=" + scale);
+  br.init();
+  expect(br._getPageURISrcset(5, undefined, undefined)).toBe("");
+});
+
+test('_getPageURISrcset with negative index', () => {
+  br._models.book.getNumLeafs = jest.fn(() => 0);
+  br._models.book.getPageURI = jest.fn((index, scale, rotate) => "correctURL.png&scale=" + scale);
+  br.init();
+  expect(br._getPageURISrcset(-7, undefined, undefined)).toBe("");
+});
+
+test('_getPageURISrcset with 0 elements in srcset', () => {
+  br._models.book.getNumLeafs = jest.fn(() => 30);
+  br._models.book.getPageURI = jest.fn((index, scale, rotate) => "correctURL.png&scale=" + scale);
+  br.init();
+  expect(br._getPageURISrcset(5, 1, undefined)).toBe("");
+});
+
+test('_getPageURISrcset with 2 elements in srcset', () => {
+  br._models.book.getNumLeafs = jest.fn(() => 30);
+  br._models.book.getPageURI = jest.fn((index, scale, rotate) => "correctURL.png&scale=" + scale);
+  br.init();
+  expect(br._getPageURISrcset(5, 5, undefined)).toBe("correctURL.png&scale=2 2x, correctURL.png&scale=1 4x");
+});
+
+test('_getPageURISrcset with the most elements in srcset', () => {
+  br._models.book.getNumLeafs = jest.fn(() => 30);
+  br._models.book.getPageURI = jest.fn((index, scale, rotate) => "correctURL.png&scale=" + scale);
+  br.init();
+  expect(br._getPageURISrcset(5, 35, undefined)).toBe("correctURL.png&scale=16 2x, correctURL.png&scale=8 4x, correctURL.png&scale=4 8x, correctURL.png&scale=2 16x, correctURL.png&scale=1 32x");
+});
+
+describe('quantizeReduce', () => {
+  const quantizeReduce = BookReader.prototype.quantizeReduce;
+  const SAMPLE_FACTORS = [
+    { reduce: 0.5 },
+    { reduce: 1 },
+    { reduce: 2 },
+    { reduce: 3 },
+    { reduce: 4 },
+    { reduce: 6 },
+  ];
+  test('Number larger than max', () => {
+    expect(quantizeReduce(10, SAMPLE_FACTORS)).toBe(6);
+  });
+
+  test('Number lower than max', () => {
+    expect(quantizeReduce(0.25, SAMPLE_FACTORS)).toBe(0.5);
+  });
+
+  test('Number directly between two reduction factors chooses first factor', () => {
+    expect(quantizeReduce(5, SAMPLE_FACTORS)).toBe(4);
+  });
+
+  test('Exact match', () => {
+    expect(quantizeReduce(2, SAMPLE_FACTORS)).toBe(2);
+  });
+
+  test('Closer to a lower boundary', () => {
+    expect(quantizeReduce(1.115, SAMPLE_FACTORS)).toBe(1);
+  });
+
+  test('Closer to an upper bound', () => {
+    expect(quantizeReduce(1.95, SAMPLE_FACTORS)).toBe(2);
+  });
+
+  test('Only one reduction factor', () => {
+    expect(quantizeReduce(17, [{reduce: 10}])).toBe(10);
+  });
+});
+
+
+describe('nextReduce', () => {
+  describe('Test matrix', () => {
+    const nextReduce = BookReader.prototype.nextReduce;
+    const SAMPLE_FACTORS = [
+      { reduce: 0.5 },
+      { reduce: 1 },
+      { reduce: 2 },
+      { reduce: 3 },
+      { reduce: 3.3, autofit: "width" },
+      { reduce: 4 },
+      { reduce: 6 },
+      { reduce: 6.1, autofit: "height" },
+      // auto doesn't get read by nextReduce (bug)
+      // It looks like width/height are set for 1up, and auto is set for 2up,
+      // and neither is set for thumb
+      { reduce: 6.2, autofit: "auto" }
+    ];
+
+    const currentReduces = [
+      { name: 'Exact match', value: 2 },
+      { name: 'In-between', value: 4.5 },
+      { name: '< Min', value: 0.25 },
+      { name: '> Max', value: 10 },
+
+      { name: '= Min', value: 0.5 },
+      { name: '= Max', value: 6.2 },
+    ];
+
+    const directions = [ 'in', 'out', 'width', 'height', 'auto' ];
+
+    const expectations = [
+      // currentReduces <->
+      // v^ directions
+      /*                2, 4.5, 0.25,  10,  0.5,  6.2   */
+      /* in     */  [   1,   4,  0.5, 6.2,  0.5,  6.1  ],
+      /* out    */  [   3,   6,  0.5, 6.2,    1,  6.2  ],
+      /* width  */  [ 3.3, 3.3,  3.3, 3.3,  3.3,  3.3  ],
+      /* height */  [ 6.1, 6.1,  6.1, 6.1,  6.1,  6.1  ],
+      /* auto   */  [ 6.2, 6.2,  6.2, 6.2,  6.2,  6.2  ],
+    ];
+
+    for (const [y, row] of expectations.entries()) {
+      for (const [x, expectedValue] of row.entries()) {
+        test(`${currentReduces[x].name} ${directions[y]}`, () => {
+          expect(nextReduce(currentReduces[x].value, directions[y], SAMPLE_FACTORS).reduce)
+            .toBe(expectedValue);
+        });
+      }
+    }
+  });
+
+  describe('No matching reduction', () => {
+    const nextReduce = BookReader.prototype.nextReduce;
+    const SAMPLE_FACTORS = [
+      { reduce: 0.5 },
+      { reduce: 1 },
+      { reduce: 2 },
+      { reduce: 3 },
+    ];
+
+    test('Returns first reduction when no match found', () => {
+      expect(nextReduce(2, 'width', SAMPLE_FACTORS).reduce).toBe(0.5);
+      expect(nextReduce(2, 'height', SAMPLE_FACTORS).reduce).toBe(0.5);
+      expect(nextReduce(2, 'auto', SAMPLE_FACTORS).reduce).toBe(0.5);
+    });
+  });
+});

package/tests/e2e/README.md

@@ -0,0 +1,75 @@
+# TestCafe End to End (e2e) Testing
+
+## Running
+
+To run all tests in all browsers currently specified, run
+
+`npm run test:e2e`
+
+The list of browsers TestCafe will attempt to use are stored in
+`.testcaferc.json`.
+
+The test runner will pick up any file within the tests/e2e directory or
+subdirectories that ends in `test.js`. If you would like to abstract some code
+and place it alongside the test fixtures, as long as the file name does not
+end in this suffix, the test runner won't pick it up and attempt to set up a
+test fixture.
+
+### Testing a specific browser
+
+To run all tests in one or more specified browsers, supply the names of the
+application executables after the command above. For example, if you only want
+to run tests in Chrome, run `npm run test:e2e chrome`. To run
+in both Chrome and Safari, run `npm run test:e2e chrome,safari`.
+
+### Testing in Chrome using device emulation
+
+You can specify device presets or specify custom parameters for Chrome's
+device emulation when starting tests. For example:
+
+`npm run test:e2e "chrome:emulation:width=414;height=736;mobile=true;orientation=vertical;touch=true"`
+
+### Testing on remote devices
+
+If you need to run tests on other devices like a phone, tablet, or other
+computer, you can specify the number of browsers on the remote devices you'd
+like to connect to the test runner. For example, to test Chrome on both a
+phone and tablet, you'd specify '2' remote browsers. If you're only testing
+on a phone, but are testing in Chrome and Safari, you'd also specify '2'.
+
+`npm test:e2e remote:2`
+
+This will provide you with a URL that you then visit in each browser. The URL
+will look something like `http://127.0.0.1:52902/browser/connect`.
+
+### Running a specific fixture
+
+To run a particular fixture, add the path to the file at the end of your arguments list.
+
+`npm run test:e2e chrome tests/e2e/example.test.js`
+
+## Pending (skip) tests
+
+You can skip any tests by calling the method `.skip` on the test object rather
+than call the test function directly. If you have a test definition like:
+
+```
+test('Subnav opened when primary nav category clicked', async (t) => {
+  const textsTophat = Selector('.row.texts');
+  await t.expect(await textsTophat.visible).notOk();
+  await t.click('[data-top-kind=texts]');
+  await t.expect(await textsTophat.visible).ok();
+});
+```
+
+You would skip it by changing the `test` call to `test.skip`.
+
+## Running only one test
+
+Similarly, you can use the `.only` method to skip all other tests and only run
+the one specified.
+
+```
+test.only('Subnav opened when primary nav category clicked', async (t) => {
+```
+

package/tests/e2e/autoplay.test.js

@@ -0,0 +1,13 @@
+import { ClientFunction } from 'testcafe';
+
+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`;
+
+test('page auto-advances after allotted flip speed and delay', async t => {
+  await t.wait(2 * FLIP_SPEED + FIRST_PAGE_DELAY);
+  await t.expect(getLocationHref()).match(/page\/n3/);
+});

package/tests/e2e/base.test.js

@@ -0,0 +1,35 @@
+import { runBaseTests } from './helpers/base';
+import BookReader from './models/BookReader';
+import { runDesktopSearchTests } from './helpers/desktopSearch';
+// import { runMobileSearchTests } from './helpers/mobileSearch';
+
+
+const { BASE_URL } = process.env;
+const OCAIDS = [
+  'theworksofplato01platiala',
+  // Removed because failing test 'Canonical URL with cookie shows paramters'
+  // in tests/e2e/helpers/base.js
+  // Cookie path should be:
+  //   /BookReaderDemo/demo-ia-olivertwist.html
+  // Cookie path is:
+  // /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}`;
+
+  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());
+
+
+});

package/tests/e2e/helpers/base.js

@@ -0,0 +1,263 @@
+import { ClientFunction, Selector } from 'testcafe';
+
+const PAGE_FLIP_WAIT_TIME = 1000;
+
+const getHash = ClientFunction(() => document.location.hash);
+const getUrl = ClientFunction(() => window.location.href);
+
+/**
+ * Check URL page parameter in # and path
+ */
+const isPageInUrl = ClientFunction(() => {
+  const hash = document.location.hash;
+  if (hash) {
+    return hash.indexOf('#page/') > -1;
+  } else {
+    return window.location.href.indexOf('/page/') > -1;
+  }
+});
+
+/**
+ * Check URL mode parameter in # and path
+ *
+ * @param mode '1up', '2up', 'thumb'
+ */
+const isModeInUrl = ClientFunction((mode) => {
+  const hash = document.location.hash;
+  if (hash) {
+    return hash.indexOf('/mode/' + mode) > -1;
+  } else {
+    return window.location.href.indexOf('/mode/' + mode) > -1;
+  }
+});
+
+/**
+ * Runs all expected base tests for BookReader
+ *
+ * @param { import('../models/BookReader').default } br - Model
+ */
+export function runBaseTests (br) {
+  test('On load, pages fit fully inside of the BookReader™', async t => {
+    await t.expect(br.shell.visible).ok();
+    await t.expect(br.BRcontainer.visible).ok();
+
+    const shellHeight = await br.shell.getBoundingClientRectProperty('height');
+    const bookHeight = await br.BRcontainer.getBoundingClientRectProperty('height');
+    await t.expect(bookHeight).lte(shellHeight, 'images do not get cropped vertically');
+
+    const shellWidth = await br.shell.getBoundingClientRectProperty('width');
+    const bookWidth = await br.BRcontainer.getBoundingClientRectProperty('width');
+    await t.expect(bookWidth).lte(shellWidth, 'images do not get cropped horizontally');
+  });
+
+  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();
+  });
+
+  test("Canonical URL has no initial parameters", async t => {
+    // Initial URL has no params
+    await t.expect(getHash()).eql('');
+    // Initial URL has no page/ mode/
+    await t.expect(getUrl()).notContains('#page/');
+    await t.expect(getUrl()).notContains('/page/');
+    await t.expect(getUrl()).notContains('/mode/');
+  });
+
+  // Need to disable page caching to have cookies persist in test
+  test.disablePageCaching('Canonical URL shows parameters if cookie set', async t => {
+    const { nav } = br;
+
+    // Check if uses plugin.resume.js
+    const usesResume = ClientFunction(() => {
+      const hasResumePlugin = typeof(br.getResumeValue) !== "undefined";
+      const hasResumeValue = hasResumePlugin ? br.getResumeValue() : false;
+      return hasResumeValue;
+    });
+
+    // Store initial URL
+    const initialUrl = await getUrl();
+
+    // Set Cookie by page navigation, wait for cookie
+    await t.click(nav.desktop.goNext);
+    await t.wait(PAGE_FLIP_WAIT_TIME);
+
+    // reload canonical URL, wait for URL change
+    await t.navigateTo(initialUrl);
+    await t.wait(PAGE_FLIP_WAIT_TIME);
+
+    if (await usesResume()) {
+      await t.expect(isPageInUrl()).eql(true, initialUrl);
+      await t.expect(isModeInUrl('2up')).eql(true, initialUrl);
+    } else {
+      // No plugin, no br-resume cookie
+      await t.expect(getUrl()).notContains('#page/');
+      await t.expect(getUrl()).notContains('/page/');
+      await t.expect(getUrl()).notContains('/mode/');
+    }
+  });
+
+  test('2up mode - Clicking `Previous page` changes the page', async t => {
+    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.wait(PAGE_FLIP_WAIT_TIME);
+    await t.click(nav.desktop.goNext);
+    await t.wait(PAGE_FLIP_WAIT_TIME);
+
+    const onLoadBrState = BRcontainer.child(0);
+    const initialImages = onLoadBrState.find('img');
+    const origImg1Src = await initialImages.nth(0).getAttribute('src');
+    const origImg2Src = await initialImages.nth(-1).getAttribute('src');
+
+    await t.click(nav.desktop.goPrev);
+    await t.wait(PAGE_FLIP_WAIT_TIME);
+
+    const nextBrState = Selector('.BRcontainer').child(0);
+    const prevImages = nextBrState.find('img');
+    const prevImg1Src = await prevImages.nth(0).getAttribute('src');
+    const prevImg2Src = await prevImages.nth(-1).getAttribute('src');
+
+    // we aren't showing the same image in both leaves
+    await t.expect(origImg1Src).notEql(origImg2Src);
+
+    // we are showing new pages
+    await t.expect(prevImg1Src).notEql(origImg1Src);
+    await t.expect(prevImg1Src).notEql(origImg2Src);
+    await t.expect(prevImg2Src).notEql(origImg1Src);
+    await t.expect(prevImg2Src).notEql(origImg2Src);
+
+    // 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.wait(PAGE_FLIP_WAIT_TIME);
+
+    const onLoadBrState = BRcontainer.child(0);
+    const initialImages = onLoadBrState.find('img');
+    const origImg1Src = await initialImages.nth(0).getAttribute('src');
+    const origImg2Src = await initialImages.nth(-1).getAttribute('src');
+
+    await t.click(nav.desktop.goNext);
+    await t.wait(PAGE_FLIP_WAIT_TIME);
+
+    const nextBrState = Selector('.BRcontainer').child(0);
+    const nextImages = nextBrState.find('img');
+    const nextImg1Src = await nextImages.nth(0).getAttribute('src');
+    const nextImg2Src = await nextImages.nth(-1).getAttribute('src');
+
+    // we are showing new pages
+    await t.expect(nextImg1Src).notEql(origImg1Src);
+    await t.expect(nextImg1Src).notEql(origImg2Src);
+    await t.expect(nextImg2Src).notEql(origImg1Src);
+    await t.expect(nextImg2Src).notEql(origImg2Src);
+
+    // 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.expect(isPageInUrl()).eql(true);
+    await t.expect(isModeInUrl('2up')).eql(true);
+
+    await t.click(nav.desktop.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 => {
+    const { nav } = br;
+    await t.click(nav.desktop.mode2Up);
+    await t.expect(Selector('.BRpagecontainer').count).eql(2);
+  });
+
+  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);
+  });
+
+  test('Clicking `thumbnail view` brings up all of the page thumbnails', async t => {
+    const { nav } = br;
+    await t.click(nav.desktop.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);
+
+    await t.expect(br.BRcontainer.visible).ok();
+    await t.expect(book.visible).ok();
+    await t.expect(nav.desktop.zoomOut.visible).ok();
+
+    const initialBookHeight = await book.getBoundingClientRectProperty('height');
+    const initialBookWidth = await book.getBoundingClientRectProperty('width');
+
+    await t.click(nav.desktop.zoomOut);
+
+    const zoomOutBookHeight = await book.getBoundingClientRectProperty('height');
+    const zoomOutBookWidth = await book.getBoundingClientRectProperty('width');
+
+    await t.expect(zoomOutBookHeight).lte(initialBookHeight);
+    await t.expect(zoomOutBookWidth).lte(initialBookWidth);
+  });
+
+  test('Clicking `zoom in` makes book larger', async t => {
+    const { nav, BRcontainer } = br;
+
+    const book = await BRcontainer.child(0);
+
+    await t.expect(BRcontainer.visible).ok();
+    await t.expect(book.visible).ok();
+    await t.expect(nav.desktop.zoomIn.visible).ok();
+
+    const initialBookHeight = await book.getBoundingClientRectProperty('height');
+    const initialBookWidth = await book.getBoundingClientRectProperty('width');
+
+    await t.click(nav.desktop.zoomIn);
+
+    const zoomInBookHeight = await book.getBoundingClientRectProperty('height');
+    const zoomIntBookWidth = await book.getBoundingClientRectProperty('width');
+
+    await t.expect(zoomInBookHeight).gt(initialBookHeight);
+    await t.expect(zoomIntBookWidth).gt(initialBookWidth);
+  });
+
+  test('Clicking `full screen button` and BookReader fills browser window', async (t) => {
+    const { nav, BRcontainer } = br;
+    const windowWidth = await ClientFunction(() => window.innerWidth)();
+
+    // initial in-page
+    await t.expect(BRcontainer.getBoundingClientRectProperty('width')).lte(windowWidth);
+    await t.click(nav.desktop.fullScreen);
+    // full screen
+    await t.expect(BRcontainer.getBoundingClientRectProperty('width')).eql(windowWidth);
+    await t.click(nav.desktop.fullScreen);
+    // in-page
+    await t.expect(BRcontainer.getBoundingClientRectProperty('width')).lte(windowWidth);
+  });
+}