@internetarchive/bookreader 5.0.0-42 → 5.0.0-43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-42",
+  "version": "5.0.0-43",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -41,19 +41,19 @@
     "lit": "^2.2.2"
   },
   "devDependencies": {
-    "@babel/core": "7.17.5",
+    "@babel/core": "7.17.9",
     "@babel/eslint-parser": "7.17.0",
     "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/plugin-proposal-decorators": "7.17.2",
+    "@babel/plugin-proposal-decorators": "7.17.9",
     "@babel/preset-env": "7.16.11",
-    "@open-wc/testing": "^3.1.3",
+    "@open-wc/testing": "^3.1.4",
     "@open-wc/testing-karma": "^4.0.9",
     "@types/jest": "^27.4.1",
     "@webcomponents/webcomponentsjs": "^2.6.0",
-    "babel-loader": "8.2.3",
+    "babel-loader": "8.2.5",
     "codecov": "^3.8.3",
-    "concurrently": "7.0.0",
-    "core-js": "3.16.2",
+    "concurrently": "7.1.0",
+    "core-js": "3.22.3",
     "cpx2": "4.2.0",
     "eslint": "^7.32.0",
     "eslint-plugin-no-jquery": "^2.7.0",
@@ -61,30 +61,31 @@
     "hammerjs": "^2.0.8",
     "http-server": "14.1.0",
     "iso-language-codes": "1.1.0",
-    "jest": "^27.5.1",
-    "jquery": "1.11.3",
+    "jest": "^28.0.3",
+    "jest-environment-jsdom": "^28.0.2",
+    "jquery": "1.12.4",
     "jquery-colorbox": "1.6.4",
     "jquery-ui": "1.12.1",
     "jquery-ui-touch-punch": "0.2.3",
     "jquery.browser": "0.1.0",
     "jquery.mmenu": "5.6.5",
     "karma-coverage": "^2.1.0",
-    "live-server": "1.2.1",
-    "node-fetch": "2.6.7",
+    "live-server": "1.2.2",
+    "node-fetch": "3.2.4",
     "regenerator-runtime": "0.13.9",
-    "sass": "1.38.2",
-    "sinon": "^12.0.1",
+    "sass": "1.51.0",
+    "sinon": "^13.0.2",
     "soundmanager2": "2.97.20170602",
-    "svgo": "2.4.0",
+    "svgo": "2.8.0",
     "testcafe": "^1.18.6",
     "testcafe-browser-provider-browserstack": "^1.13.2-alpha.1",
     "webpack": "5.51.1",
-    "webpack-cli": "4.8.0"
+    "webpack-cli": "4.9.2"
   },
   "jest": {
     "testEnvironment": "jsdom",
     "transformIgnorePatterns": [
-      "node_modules/(?!(lit-html|lit-element|lit|@lit|@internetarchive)/)"
+      "node_modules/(?!(lit-html|lit-element|lit|@lit|@internetarchive|@open-wc)/)"
     ],
     "moduleNameMapper": {
       "^@/(.*)$": "<rootDir>/$1"

package/renovate.json

@@ -14,6 +14,7 @@
         "eslint-plugin-no-jquery",
         "eslint-plugin-testcafe",
         "jest",
+        "jest-environment-jsdom",
         "karma-coverage",
         "sinon",
         "testcafe"
@@ -38,6 +39,11 @@
     {
       "matchPackagePatterns": ["*"],
       "rangeStrategy": "bump"
+    },
+    {
+      "matchPackagePatterns": ["^actions/"],
+      "groupName": "GitHub Actions",
+      "automerge": true
     }
   ]
 }

package/scripts/preversion.js

@@ -1,8 +1,11 @@
 const { version: OLD_VERSION } = require('../package.json');
-const fetch = require('node-fetch');
 const OLD_RELEASE_URL = `https://api.github.com/repos/internetarchive/bookreader/releases/tags/v${OLD_VERSION}`;
 
 async function main() {
+    // Need this because fetch is ESM-only, and we're on Node 16. Someday we should
+    // be able to move this up to the top without renaming this file to a .mjs or whatever
+    const {default: fetch} = await import('node-fetch');
+
     const {created_at} = await fetch(OLD_RELEASE_URL).then(r => r.json());
     const today = new Date().toISOString().slice(0, -5);
     const searchUrl = 'https://github.com/internetarchive/bookreader/pulls?' + new URLSearchParams({

package/src/BookNavigator/search/a-search-result.js

@@ -1,5 +1,6 @@
 import { html, LitElement, nothing } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+/** @typedef {import('@/src/plugins/search/plugin.search.js').SearchInsideMatch} SearchInsideMatch */
 
 export class BookSearchResult extends LitElement {
   static get properties() {
@@ -35,17 +36,14 @@ export class BookSearchResult extends LitElement {
   }
 
   render() {
-    const { match } = this;
-    const { par = [] } = match;
-    const [resultDetails = {}] = par;
-    const pageNumber = Number.isInteger(resultDetails.page)
-      ? html`<p class="page-num">Page -${resultDetails.page}-</p>` : nothing;
+    /** @type {SearchInsideMatch} */
+    const match = this.match;
     const coverImage = html`<img src="${match.cover}" />`;
     return html`
       <li @click=${this.resultSelected}>
         ${match.cover ? coverImage : nothing}
         <h4>${match.title || nothing}</h4>
-        ${pageNumber}
+        <p class="page-num">Page ${match.displayPageNumber}</p>
         ${this.highlightedHit(match.text)}
       </li>
     `;

package/src/plugins/search/plugin.search.js

@@ -29,6 +29,8 @@ import { renderBoxesInPageContainerLayer } from '../../BookReader/PageContainer.
 import SearchView from './view.js';
 /** @typedef {import('../../BookReader/PageContainer').PageContainer} PageContainer */
 /** @typedef {import('../../BookReader/BookModel').PageIndex} PageIndex */
+/** @typedef {import('../../BookReader/BookModel').LeafNum} LeafNum */
+/** @typedef {import('../../BookReader/BookModel').PageNumString} PageNumString */
 
 jQuery.extend(BookReader.defaultOptions, {
   server: 'ia600609.us.archive.org',
@@ -257,6 +259,7 @@ BookReader.prototype.cancelSearchRequest = function () {
 /**
  * @typedef {object} SearchInsideMatch
  * @property {number} matchIndex This is a fake field! Not part of the API response. It is added by the JS.
+ * @property {string} displayPageNumber (fake field) The page number as it should be displayed in the UI.
  * @property {string} text
  * @property {Array<{ page: number, boxes: SearchInsideMatchBox[] }>} par
  */
@@ -269,22 +272,32 @@ BookReader.prototype.cancelSearchRequest = function () {
  */
 
 /**
- * Search Results return handler
+ * Attach some fields to search inside results
  * @param {SearchInsideResults} results
- * @param {object} options
- * @param {boolean} options.goToFirstResult
+ * @param {(pageNum: LeafNum) => PageNumString} displayPageNumberFn
  */
-BookReader.prototype.BRSearchCallback = function(results, options) {
+export function marshallSearchResults(results, displayPageNumberFn) {
   // Attach matchIndex to a few things to make it easier to identify
   // an active/selected match
   for (const [index, match] of results.matches.entries()) {
     match.matchIndex = index;
+    match.displayPageNumber = displayPageNumberFn(match.par[0].page);
     for (const par of match.par) {
       for (const box of par.boxes) {
         box.matchIndex = index;
       }
     }
   }
+}
+
+/**
+ * Search Results return handler
+ * @param {SearchInsideResults} results
+ * @param {object} options
+ * @param {boolean} options.goToFirstResult
+ */
+BookReader.prototype.BRSearchCallback = function(results, options) {
+  marshallSearchResults(results, pageNum => this.getPageNum(this.leafNumToIndex(pageNum)));
   this.searchResults = results || [];
 
   this.updateSearchHilites();

package/src/plugins/search/view.js

@@ -230,9 +230,7 @@ class SearchView {
     matches.forEach((match) => {
       const queryString = match.text;
       const pageIndex = this.br.leafNumToIndex(match.par[0].page);
-      const pageNumber = this.br.getPageNum(pageIndex);
       const uiStringSearch = "Search result"; // i18n
-      const uiStringPage = "Page"; // i18n
 
       const percentThrough = this.br.constructor.util.cssPercentage(pageIndex, this.br.getNumLeafs() - 1);
 
@@ -257,7 +255,7 @@ class SearchView {
         .append(`
           <div class="BRquery">
             <div>${queryStringWithBTruncated || queryStringWithB}</div>
-            <div>${uiStringPage} ${pageNumber}</div>
+            <div>Page ${match.displayPageNumber}</div>
           </div>
         `)
         .appendTo(this.br.$('.BRnavline'))

package/tests/{karma → jest}/BookNavigator/search/search-provider.test.js

@@ -1,6 +1,6 @@
-import { expect, fixtureCleanup, fixtureSync } from '@open-wc/testing';
+import { fixtureCleanup, fixtureSync } from '@open-wc/testing-helpers';
 import sinon from 'sinon';
-import searchProvider from '../../../../src/BookNavigator/search/search-provider';
+import searchProvider from '@/src/BookNavigator/search/search-provider';
 
 afterEach(() => {
   sinon.restore();
@@ -14,26 +14,26 @@ describe('Search Provider', () => {
       bookreader: {}
     });
 
-    expect(provider.bookreader).to.exist;
-    expect(provider.onProviderChange).to.exist;
-    expect(provider.id).to.equal('search');
-    expect(provider.icon).to.exist;
-    expect(fixtureSync(provider.icon).tagName).to.equal('IA-ICON-SEARCH');
-    expect(provider.label).to.equal('Search inside');
-    expect(provider.menuDetails).to.exist;
-    expect(provider.component).to.exist;
+    expect(provider.bookreader).toBeDefined();
+    expect(provider.onProviderChange).toBeDefined();
+    expect(provider.id).toEqual('search');
+    expect(provider.icon).toBeDefined();
+    expect(fixtureSync(provider.icon).tagName).toEqual('IA-ICON-SEARCH');
+    expect(provider.label).toEqual('Search inside');
+    expect(provider.menuDetails).toBeDefined();
+    expect(provider.component).toBeDefined();
   });
   describe('Search request life cycles', () => {
-    it('Event: catches `BookReader:SearchStarted`', async() => {
+    test('Event: catches `BookReader:SearchStarted`', async() => {
       const provider = new searchProvider({
         onProviderChange: sinon.fake(),
         bookreader: {}
       });
       sinon.spy(provider, 'updateMenu');
       window.dispatchEvent(new CustomEvent('BookReader:SearchStarted', { detail: { props: { term: 'foo' }}}));
-      expect(provider.updateMenu.callCount).to.equal(1);
+      expect(provider.updateMenu.callCount).toEqual(1);
     });
-    it('Event: catches `BookReader:SearchCallback`', async() => {
+    test('Event: catches `BookReader:SearchCallback`', async() => {
       const provider = new searchProvider({
         onProviderChange: sinon.fake(),
         bookreader: {}
@@ -41,10 +41,10 @@ describe('Search Provider', () => {
       sinon.spy(provider, 'updateMenu');
       const brStub = {};
       window.dispatchEvent(new CustomEvent('BookReader:SearchCallback', { detail: { props: { instance: brStub, results: { matches: []} }}}));
-      expect(provider.updateMenu.callCount).to.equal(1);
-      expect(provider.bookreader).to.equal(brStub);
+      expect(provider.updateMenu.callCount).toEqual(1);
+      expect(provider.bookreader).toEqual(brStub);
     });
-    it('Event: catches `BookReader:SearchCallbackEmpty`', async() => {
+    test('Event: catches `BookReader:SearchCallbackEmpty`', async() => {
       const provider = new searchProvider({
         onProviderChange: sinon.fake(),
         bookreader: {}
@@ -53,11 +53,11 @@ describe('Search Provider', () => {
       sinon.spy(provider, 'updateMenu');
       const brStub = {};
       window.dispatchEvent(new CustomEvent('BookReader:SearchCallbackEmpty', { detail: { props: { instance: brStub }}}));
-      expect(provider.onSearchRequestError.getCall(0).args[1]).to.equal('noResults');
-      expect(provider.updateMenu.callCount).to.equal(1);
-      expect(provider.bookreader).to.equal(brStub);
+      expect(provider.onSearchRequestError.getCall(0).args[1]).toEqual('noResults');
+      expect(provider.updateMenu.callCount).toEqual(1);
+      expect(provider.bookreader).toEqual(brStub);
     });
-    it('Event: catches `BookReader:SearchCallbackNotIndexed`', async() => {
+    test('Event: catches `BookReader:SearchCallbackNotIndexed`', async() => {
       const provider = new searchProvider({
         onProviderChange: sinon.fake(),
         bookreader: {}
@@ -66,11 +66,11 @@ describe('Search Provider', () => {
       sinon.spy(provider, 'onSearchRequestError');
       sinon.spy(provider, 'updateMenu');
       window.dispatchEvent(new CustomEvent('BookReader:SearchCallbackNotIndexed', { detail: { props: { instance: brStub }}}));
-      expect(provider.onSearchRequestError.getCall(0).args[1]).to.equal('notIndexed');
-      expect(provider.updateMenu.callCount).to.equal(1);
-      expect(provider.bookreader).to.equal(brStub);
+      expect(provider.onSearchRequestError.getCall(0).args[1]).toEqual('notIndexed');
+      expect(provider.updateMenu.callCount).toEqual(1);
+      expect(provider.bookreader).toEqual(brStub);
     });
-    it('Event: catches `BookReader:SearchCallbackError`', async() => {
+    test('Event: catches `BookReader:SearchCallbackError`', async() => {
       const provider = new searchProvider({
         onProviderChange: sinon.fake(),
         bookreader: {}
@@ -79,11 +79,11 @@ describe('Search Provider', () => {
       sinon.spy(provider, 'updateMenu');
       const brStub = {};
       window.dispatchEvent(new CustomEvent('BookReader:SearchCallbackError', { detail: { props: { instance: brStub }}}));
-      expect(provider.onSearchRequestError.getCall(0).args[1]).to.equal(undefined);
-      expect(provider.updateMenu.callCount).to.equal(1);
-      expect(provider.bookreader).to.equal(brStub);
+      expect(provider.onSearchRequestError.getCall(0).args[1]).toEqual(undefined);
+      expect(provider.updateMenu.callCount).toEqual(1);
+      expect(provider.bookreader).toEqual(brStub);
     });
-    it('Event: catches `component@resultSelected` - user clicks result in side panel - & turns page', async() => {
+    test('Event: catches `component@resultSelected` - user clicks result in side panel - & turns page', async() => {
       const provider = new searchProvider({
         onProviderChange: sinon.fake(),
         bookreader: {
@@ -100,7 +100,7 @@ describe('Search Provider', () => {
           { detail: searchResultStub })
       );
 
-      expect(provider.bookreader._searchPluginGoToResult.callCount).to.equal(1);
+      expect(provider.bookreader._searchPluginGoToResult.callCount).toEqual(1);
     });
   });
 });

package/tests/{karma → jest}/BookNavigator/search/search-results.test.js

@@ -1,11 +1,10 @@
 import {
   html,
   fixture,
-  expect,
   oneEvent,
-} from '@open-wc/testing';
+} from '@open-wc/testing-helpers';
 import sinon from 'sinon';
-import { IABookSearchResults } from '../../../../src/BookNavigator/search/search-results.js';
+import { IABookSearchResults } from '@/src/BookNavigator/search/search-results.js';
 
 const container = (results = [], query = '') => (
   html`<ia-book-search-results .results=${results} .query=${query}></ia-book-search-results>`
@@ -17,6 +16,7 @@ const results = [{
   text: `In the drawing of caricatures and cartoons\u2014or any other com' mercial art, for that matter\u2014the artist should know something about the processes of reproduction for that particular form of art work. For pen and ink work the engraving is made on a sine printing plate. It is not necessary, however, to know all about these processes of reproduction. The artist should know that all work intended for line rqproducttons should be made on white paper or {{{${searchQuery}}}} Board with black drawing ink. The drawing to be reproduced is photographed on a chemically treated sine plate, which is then treated with acid. This acid eats away the surface of the sine, except the photographed' lines, which are left in relief, somewhat like printing type. Colored inks do not photograph well; neither does black ink on colored paper.`,
   cover: '//placehold.it/30x44',
   title: 'Book title',
+  displayPageNumber: 'Page 24',
   par: [{
     boxes: [{
       r: 2672, b: 792, t: 689, page: 24, l: 2424,
@@ -31,6 +31,7 @@ const results = [{
   }],
 }, {
   text: `Drawings intended for sale should be made on a good grade of {{{${searchQuery}}}} Board, and a margin left all the way around the drawings. They should be mailed flat, and'require first class postage. Enclose postage for the return of the drawings. Only send good drawings of a reason- able quantity. Enclose a neat and terse letter to the one you are sending the drawings to, written with pen and ink or typewriter if possible, on`,
+  displayPageNumber: 'Page 86',
   par: [{
     boxes: [{
       r: 698, b: 4460, t: 4324, page: 86, l: 450,
@@ -50,64 +51,64 @@ describe('<ia-book-search-results>', () => {
     sinon.restore();
   });
 
-  it('sets default properties', async () => {
+  test('sets default properties', async () => {
     const query = 'bristol';
     const el = await fixture(container(results, query));
 
-    expect(el.results).to.equal(results);
-    expect(el.query).to.equal(query);
+    expect(el.results).toEqual(results);
+    expect(el.query).toEqual(query);
   });
 
-  it('sets results when passed in via event object', async () => {
+  test('sets results when passed in via event object', async () => {
     const el = await fixture(container());
 
     el.setResults({ detail: { results } });
-    expect(el.results).to.equal(results);
+    expect(el.results).toEqual(results);
   });
 
-  it('listens for a custom search callback event on the document', async () => {
+  test('listens for a custom search callback event on the document', async () => {
     IABookSearchResults.prototype.setResults = sinon.fake();
     const el = await fixture(container());
     const event = new Event('BookReader:SearchCallback');
 
     event.detail = { results };
     document.dispatchEvent(event);
-    expect(el.setResults.callCount).to.equal(1);
-    expect(el.setResults.firstArg).to.equal(event);
+    expect(el.setResults.callCount).toEqual(1);
+    expect(el.setResults.firstArg).toEqual(event);
   });
 
-  it('renders results that contain the book title', async () => {
+  test('renders results that contain the book title', async () => {
     sinon.replace(IABookSearchResults.prototype, 'createRenderRoot', function createRenderRoot() { return this; });
     const el = await fixture(container(results));
 
-    expect(el.innerHTML).to.include(`${results[0].title}`);
+    expect(el.innerHTML).toContain(`${results[0].title}`);
   });
 
-  it('renders results that contain a highlighted match', async () => {
+  test('renders results that contain a highlighted match', async () => {
     sinon.replace(IABookSearchResults.prototype, 'createRenderRoot', function createRenderRoot() { return this; });
     const el = await fixture(container(results));
 
-    expect(el.innerHTML).to.include(`<mark>${searchQuery}</mark>`);
+    expect(el.innerHTML).toContain(`<mark>${searchQuery}</mark>`);
   });
 
-  it('renders results that contain an optional cover image', async () => {
+  test('renders results that contain an optional cover image', async () => {
     sinon.replace(IABookSearchResults.prototype, 'createRenderRoot', function createRenderRoot() { return this; });
     const el = await fixture(container(results));
 
-    expect(el.innerHTML).to.include(`<img src="${results[0].cover}">`);
+    expect(el.innerHTML).toContain(`<img src="${results[0].cover}">`);
   });
 
-  it('sets a query prop when search input receives input', async () => {
+  test('sets a query prop when search input receives input', async () => {
     const el = await fixture(container(results));
     const searchInput = el.shadowRoot.querySelector('[name="query"]');
 
     searchInput.value = searchQuery;
     searchInput.dispatchEvent(new Event('keyup'));
 
-    expect(el.query).to.equal(searchQuery);
+    expect(el.query).toEqual(searchQuery);
   });
 
-  it('emits a custom event when search form submitted when input is populated', async () => {
+  test('emits a custom event when search form submitted when input is populated', async () => {
     const el = await fixture(container(results));
 
     setTimeout(() => {
@@ -117,35 +118,35 @@ describe('<ia-book-search-results>', () => {
     });
     const response = await oneEvent(el, 'bookSearchInitiated');
 
-    expect(response).to.exist;
+    expect(response).toBeDefined();
   });
 
-  it('uses a singular noun when one result given', async () => {
+  test('uses a singular noun when one result given', async () => {
     const el = await fixture(container([results[0]]));
     const resultsCount = await fixture(el.resultsCount);
 
-    expect(resultsCount.innerHTML).to.include('1 result');
+    expect(resultsCount.innerHTML).toContain('1 result');
   });
 
-  it('can render header with active options count', async () => {
+  test('can render header with active options count', async () => {
     const el = await fixture(container(results));
     el.renderHeader = true;
 
     await el.updateComplete;
 
-    expect(el.shadowRoot.querySelector('header p').innerText).to.include('2');
+    expect(el.shadowRoot.querySelector('header p').textContent).toContain('2');
   });
 
-  it('renders search all files checkbox when enabled', async () => {
+  test('renders search all files checkbox when enabled', async () => {
     const el = await fixture(container(results));
     el.renderSearchAllFiles = true;
 
     await el.updateComplete;
 
-    expect(el.shadowRoot.querySelector('[name="all_files"]')).to.not.be.null;
+    expect(el.shadowRoot.querySelector('[name="all_files"]')).not.toBeNull();
   });
 
-  it('emits a resultSelected event when a search result is clicked', async () => {
+  test('emits a resultSelected event when a search result is clicked', async () => {
     const el = await fixture(container(results));
 
     setTimeout(() => (
@@ -153,10 +154,10 @@ describe('<ia-book-search-results>', () => {
     ));
     const response = await oneEvent(el, 'resultSelected');
 
-    expect(response).to.exist;
+    expect(response).toBeDefined();
   });
 
-  it('emits a closeMenu event when a search result is clicked', async () => {
+  test('emits a closeMenu event when a search result is clicked', async () => {
     const el = await fixture(container(results));
 
     setTimeout(() => (
@@ -164,75 +165,75 @@ describe('<ia-book-search-results>', () => {
     ));
     const response = await oneEvent(el, 'closeMenu');
 
-    expect(response).to.exist;
+    expect(response).toBeDefined();
   });
 
   describe('Search results placeholders', () => {
-    it('renders a loading state when queryInProgress is true', async () => {
+    test('renders a loading state when queryInProgress is true', async () => {
       const el = await fixture(container(results));
 
       el.queryInProgress = true;
       await el.updateComplete;
 
-      expect(el.shadowRoot.querySelector('.loading')).to.not.be.null;
+      expect(el.shadowRoot.querySelector('.loading')).not.toBeNull();
     });
-    it('renders an error message when provided', async () => {
+    test('renders an error message when provided', async () => {
       const el = await fixture(container([]));
       const message = 'Sample error message';
       el.errorMessage = message;
       await el.updateComplete;
 
-      expect(el.shadowRoot.querySelector('.error-message')).to.exist;
-      expect(el.shadowRoot.querySelector('.search-cta')).to.be.null;
+      expect(el.shadowRoot.querySelector('.error-message')).toBeDefined();
+      expect(el.shadowRoot.querySelector('.search-cta')).toBeNull();
     });
-    it('displays call to search when no results or search errors are showing', async () => {
+    test('displays call to search when no results or search errors are showing', async () => {
       const el = await fixture(container([]));
 
-      expect(el.shadowRoot.querySelector('.search-cta')).to.exist;
-      expect(el.shadowRoot.querySelector('.error-message')).to.be.null;
-      expect(el.shadowRoot.querySelector('.results')).to.be.null;
+      expect(el.shadowRoot.querySelector('.search-cta')).toBeDefined();
+      expect(el.shadowRoot.querySelector('.error-message')).toBeNull();
+      expect(el.shadowRoot.querySelector('.results')).toBeNull();
     });
   });
 
-  it('displays results images when told to', async () => {
+  test('displays results images when told to', async () => {
     const el = await fixture(container(results));
     el.displayResultImages = true;
     await el.updateComplete;
 
-    expect(el.shadowRoot.querySelector('.results.show-image')).to.exist;
+    expect(el.shadowRoot.querySelector('.results.show-image')).toBeDefined();
   });
 
   describe('search input focus', () => {
-    it('will always try to re-focus once the component updates', async () => {
+    test('will always try to re-focus once the component updates', async () => {
       const el = await fixture(container(results));
       el.focusOnInputIfNecessary = sinon.fake();
       // update any property to fire lifecycle
       el.results = [];
       await el.updateComplete;
 
-      expect(el.focusOnInputIfNecessary.callCount).to.equal(1);
+      expect(el.focusOnInputIfNecessary.callCount).toEqual(1);
     });
-    it('refocuses on input when results are empty', async () => {
+    test('refocuses on input when results are empty', async () => {
       const el = await fixture(container(results));
       el.results = [];
       await el.updateComplete;
 
       const searchInputField = el.shadowRoot.querySelector('input[type=\'search\']');
-      expect(searchInputField).to.equal(el.shadowRoot.activeElement);
+      expect(searchInputField).toEqual(el.shadowRoot.activeElement);
     });
   });
 
-  // it("emits a bookSearchCanceled event when loading state's cancel action clicked", async () => {
-  //   const el = await fixture(container(results));
+  test("emits a bookSearchCanceled event when loading state's cancel action clicked", async () => {
+    const el = await fixture(container(results));
 
-  //   el.queryInProgress = true;
-  //   await el.updateComplete;
+    el.queryInProgress = true;
+    await el.updateComplete;
 
-  //   setTimeout(() => (
-  //     el.shadowRoot.querySelector('button').click()
-  //   ));
-  //   const response = await oneEvent(el, 'bookSearchCanceled');
+    setTimeout(() => (
+      el.shadowRoot.querySelector('button').click()
+    ));
+    const response = await oneEvent(el, 'bookSearchCanceled');
 
-  //   expect(response).to.exist;
-  // });
+    expect(response).toBeDefined();
+  });
 });