@internetarchive/bookreader 5.0.0-93 → 5.0.0-95

package/src/css/_TextSelection.scss

@@ -8,6 +8,7 @@
     // Make it so right-clicking on "blank" part of text layer sends events to the image (for saving)
     pointer-events: none;
     cursor: text;
+    mix-blend-mode: multiply;
 }
 
 .BRparagraphElement {
@@ -58,7 +59,8 @@
 
 // Hide text layer for performance during zooming & scrolling
 .BRsmooth-zooming, .BRscrolling-active {
-    .BRpagecontainer:not(.BRpagecontainer--hasSelection) .BRtextLayer {
+    // If the text layer has an annotation, don't hide it
+    .BRpagecontainer:not(.BRpagecontainer--hasSelection):not(:has(hypothesis-highlight)) .BRtextLayer {
         display: none;
     }
 }

package/src/plugins/plugin.autoplay.js

@@ -1,7 +1,7 @@
 // @ts-check
-import { EVENTS } from "../BookReader/events";
-import { parseAnimationSpeed } from "../BookReader/utils";
-import { BookReaderPlugin } from "../BookReaderPlugin";
+import { EVENTS } from "../BookReader/events.js";
+import { parseAnimationSpeed } from "../BookReader/utils.js";
+import { BookReaderPlugin } from "../BookReaderPlugin.js";
 
 /**
  * Plugin which adds an autoplay feature. Useful for kiosk situations.

package/src/plugins/plugin.chapters.js

@@ -3,8 +3,8 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import '@internetarchive/icon-toc/icon-toc';
-import { BookReaderPlugin } from "../BookReaderPlugin";
+import '@internetarchive/icon-toc/icon-toc.js';
+import { BookReaderPlugin } from "../BookReaderPlugin.js";
 import { applyVariables } from "../util/strings.js";
 /** @typedef {import('@/src/BookReader/BookModel.js').PageIndex} PageIndex */
 /** @typedef {import('@/src/BookReader/BookModel.js').PageString} PageString */

package/src/plugins/plugin.experiments.js

@@ -0,0 +1,294 @@
+// @ts-check
+import { css, html, LitElement } from 'lit';
+import { BookReaderPlugin } from '../BookReaderPlugin.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { sleep } from '../BookReader/utils.js';
+
+// @ts-ignore
+const BookReader = /** @type {typeof import('@/src/BookReader.js').default} */(window.BookReader);
+
+class ExperimentModel {
+  /** @type {string} test */
+  name;
+  /** @type {string} */
+  title;
+  /** @type {string} */
+  description;
+  /** @type {string} */
+  icon;
+  /** @type {boolean} */
+  enabled;
+  /** @type {string} */
+  learnMore;
+
+  assetRoot = '/BookReader/';
+
+  enabledLoading = false;
+
+  /**
+   * @param {string} path
+   */
+  buildAssetPath(path) {
+    return `${this.assetRoot}${path}`;
+  }
+
+  /**
+   * @param {object} param0
+   * @param {boolean} param0.manual Whether the experiment was enabled manually
+   */
+  async enable({ manual }) { }
+  async disable() { }
+}
+
+export class ExperimentsPlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
+
+    /** Where the state of this plugin is saved in localStorage */
+    localStorageKey: 'BrExperiments',
+  }
+
+  /** @type {ExperimentModel[]} */
+  experiments = [
+    new class extends ExperimentModel {
+      name = 'hypothesis';
+      title = 'Hypothes.is';
+      description = 'Create public, collaborative, or fully private annotations on books and the web.';
+      learnMore = 'https://web.hypothes.is/about/';
+      icon = 'images/hypothesis.ico';
+      enabled = false;
+
+      async enable({ manual = false }) {
+        // Hypothesis configs ; see https://h.readthedocs.io/projects/client/en/latest/publishers/config.html
+        const configScript = document.createElement('script');
+        configScript.type = 'application/json';
+        configScript.className = 'js-hypothesis-config';
+        configScript.textContent = JSON.stringify({
+          // Open the sidebar if this is the first time enabling
+          openSidebar: manual,
+          assetRoot: this.buildAssetPath('hypothesis/'),
+        });
+
+        document.head.appendChild(configScript);
+        return importAsScript(this.buildAssetPath('hypothesis/build/boot.js'));
+        // For testing
+        // return importAsScript('http://localhost:3001/hypothesis');
+      }
+
+      async disable() {
+        // need to reload to remove the Hypothesis script
+        // Sleep so that the event loop can finish processing before the reload
+        sleep(0).then(() => {
+          window.location.reload();
+        });
+      }
+    }(),
+  ]
+
+  /** @type {BrExperimentsPanel} */
+  _panel;
+
+  async init() {
+    if (!this.options.enabled) {
+      return;
+    }
+
+    for (const experiment of this.experiments) {
+      // TODO: imagesBaseURL should be replaced with assetRoot everywhere
+      experiment.assetRoot = this.br.options.imagesBaseURL.replace(/images\/$/, '');
+      experiment.icon = experiment.buildAssetPath(experiment.icon);
+    }
+
+    this._loadExperimentStates();
+    await Promise.resolve();
+    this._render();
+  }
+
+  _loadExperimentStates() {
+    const savedStates = JSON.parse(localStorage.getItem(this.options.localStorageKey) || '{}');
+    this.experiments.forEach(experiment => {
+      if (savedStates[experiment.name] !== undefined) {
+        experiment.enabled = savedStates[experiment.name];
+        if (experiment.enabled) {
+          experiment.enable({ manual: false });
+        }
+      }
+    });
+  }
+
+  _saveExperimentStates() {
+    const states = Object.fromEntries(
+      this.experiments.map(experiment => [experiment.name, experiment.enabled]),
+    );
+    localStorage.setItem(this.options.localStorageKey, JSON.stringify(states));
+  }
+
+  /**
+   * @param {ExperimentModel} experiment
+   * @param {boolean} enabled
+   */
+  async _toggleExperiment(experiment, enabled) {
+    experiment.enabledLoading = true;
+    this.br.plugins.archiveAnalytics?.sendEvent(`BRExperiment-${experiment.name}`, enabled ? 'Enable' : 'Disable');
+    this._panel.requestUpdate();
+
+    if (enabled) {
+      await experiment.enable({ manual: true });
+    } else {
+      await experiment.disable();
+    }
+    experiment.enabledLoading = false;
+    experiment.enabled = enabled;
+    this._panel.requestUpdate();
+  }
+
+  _render() {
+    this.br.shell.menuProviders['experiments'] = {
+      id: 'experiments',
+      // https://icon-sets.iconify.design/hugeicons/?icon-filter=eco-lab-02&query=lab
+      icon: html`
+        <svg xmlns="http://www.w3.org/2000/svg" width="34" viewBox="0 0 24 24"><path fill="currentColor" d="M10 5.75h1.25v2.5H9.5c-.41 0-.75.34-.75.75s.34.75.75.75h.25v1.96A5.72 5.72 0 0 0 6.25 17c0 3.17 2.58 5.75 5.75 5.75s5.75-2.58 5.75-5.75c0-2.33-1.39-4.4-3.5-5.29V9.75h.25c.41 0 .75-.34.75-.75s-.34-.75-.75-.75h-1.75v-1.5H14c1.52 0 2.75-1.23 2.75-2.75V3c0-.41-.34-.75-.75-.75h-2c-.579 0-1.115.178-1.558.483A2.75 2.75 0 0 0 10 1.25H8c-.41 0-.75.34-.75.75v1c0 1.52 1.23 2.75 2.75 2.75m2.75-.5V5c0-.69.56-1.25 1.25-1.25h1.25V4c0 .69-.56 1.25-1.25 1.25zm-1.5 6.98V9.75h1.5v2.48c0 .33.22.62.53.72c1.77.56 2.97 2.19 2.97 4.06A4.26 4.26 0 0 1 12 21.26a4.26 4.26 0 0 1-4.25-4.25c0-1.87 1.19-3.5 2.97-4.06c.32-.1.53-.39.53-.72m-2.5-9.48H10c.69 0 1.25.56 1.25 1.25v.25H10c-.69 0-1.25-.56-1.25-1.25z" color="currentColor"/></svg>
+      `,
+      label: 'Experiments',
+      component: html`<br-experiments-panel
+        .experiments="${this.experiments}"
+        @connected="${e => this._panel = e.target}"
+        @toggle="${async e => {
+        await this._toggleExperiment(e.detail.experiment, e.detail.enabled);
+        this._saveExperimentStates();
+      }}"
+      />`,
+    };
+    this.br.shell.updateMenuContents();
+  }
+}
+BookReader?.registerPlugin('experiments', ExperimentsPlugin);
+
+@customElement('br-experiments-panel')
+export class BrExperimentsPanel extends LitElement {
+
+  /** @type {ExperimentModel[]} */
+  @property({ type: Array }) experiments = [];
+
+  render() {
+    return html`
+      <div style="padding: 10px">
+        ${this.experiments.map(
+      experiment => html`
+        <br-experiment-toggle
+          .icon="${experiment.icon}"
+          .title="${experiment.title}"
+          .description="${experiment.description}"
+          .enabled="${experiment.enabled}"
+          .loading="${experiment.enabledLoading}"
+          .learnMore="${experiment.learnMore}"
+          @toggle="${e => this._dispatchToggle(experiment, e.detail.enabled)}"
+        ></br-experiment-toggle>
+      `,
+    )}
+      </div>
+    `;
+  }
+
+  /**
+   * @param {ExperimentModel} experiment
+   * @param {boolean} enabled
+   */
+  async _dispatchToggle(experiment, enabled) {
+    this.dispatchEvent(new CustomEvent('toggle', {
+      detail: { experiment, enabled },
+    }));
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.dispatchEvent(new CustomEvent('connected'));
+  }
+}
+
+@customElement('br-experiment-toggle')
+export class BrExperimentToggle extends LitElement {
+  @property({ type: String }) icon = '';
+  @property({ type: String }) title = '';
+  @property({ type: String }) description = '';
+  @property({ type: Boolean }) enabled = false;
+  @property({ type: Boolean }) loading = false;
+  @property({ type: String }) learnMore = '';
+
+  /**
+   * We want to disable the button immediately if loading, but only display
+   * the loading indicator after 200ms.
+   */
+  @state() _longLoading = false;
+
+  /** @override */
+  update(changedProperties) {
+    super.update(changedProperties);
+    if (changedProperties.has('loading')) {
+      if (this.loading) {
+        sleep(500).then(() => {
+          if (this.loading) {
+            this._longLoading = true;
+            this.requestUpdate();
+          }
+        });
+      } else {
+        this._longLoading = false;
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <div class="experiment-card">
+        <div style="display: flex; align-items: center; gap: 10px;">
+          <img src="${this.icon}" style="width: 20px; height: 20px;" alt="" />
+          <div style="flex-grow: 1; font-weight: bold;">${this.title}</div>
+        </div>
+        <p style="opacity: 0.9">
+          ${this.description}
+          <a href="${this.learnMore}" target="_blank">Learn more</a>.
+        </p>
+        <div style="display: flex">
+          <div style="flex-grow: 1;"></div>
+          <button @click="${this._dispatchToggle}" .disabled="${this.loading}">
+            ${this._longLoading ? 'Loading…' : this.enabled ? 'Disable' : 'Enable'}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      .experiment-card {
+        border-radius: 8px;
+        background-color: #fff2;
+        padding: 10px;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .experiment-card p {
+        margin: 6px 0;
+      }
+    `;
+  }
+
+  _dispatchToggle() {
+    this.dispatchEvent(new CustomEvent('toggle', { detail: { enabled: !this.enabled } }));
+  }
+}
+
+/**
+ * @param {string} url
+ */
+async function importAsScript(url) {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = url;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
+    document.head.appendChild(script);
+  });
+}

package/src/plugins/plugin.iiif.js

@@ -1,5 +1,5 @@
 // @ts-check
-import { BookReaderPlugin } from '../BookReaderPlugin';
+import { BookReaderPlugin } from '../BookReaderPlugin.js';
 
 const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);
 

package/src/plugins/plugin.text_selection.js

@@ -38,6 +38,8 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     singlePageDjvuXmlUrl: null,
     /** Whether to fetch the XML as a jsonp */
     jsonp: false,
+    /** Mox words tha can be selected when the text layer is protected */
+    maxProtectedWords: 200,
   }
 
   /**@type {PromiseLike<JQuery<HTMLElement>|undefined>} */
@@ -75,7 +77,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     new SelectionObserver('.BRtextLayer', (selectEvent) => {
       // Track how often selection is used
       if (selectEvent == 'started') {
-        this.br._plugins.archiveAnalytics?.sendEvent('BookReader', 'SelectStart');
+        this.br.plugins.archiveAnalytics?.sendEvent('BookReader', 'SelectStart');
 
         // Set a class on the page to avoid hiding it when zooming/etc
         this.br.refs.$br.find('.BRpagecontainer--hasSelection').removeClass('BRpagecontainer--hasSelection');
@@ -84,6 +86,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     }).attach();
 
     if (this.br.protected) {
+      document.addEventListener('selectionchange', this._limitSelection);
       // Prevent right clicking when selected text
       $(document.body).on('contextmenu dragstart copy', (e) => {
         const selection = document.getSelection();
@@ -100,6 +103,41 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     }
   }
 
+  _limitSelection = () => {
+    const selection = window.getSelection();
+    if (!selection.rangeCount) return;
+
+    const range = selection.getRangeAt(0);
+
+    // Check if range.startContainer is inside the sub-tree of .BRContainer
+    const startInBr = !!range.startContainer.parentElement.closest('.BRcontainer');
+    const endInBr = !!range.endContainer.parentElement.closest('.BRcontainer');
+    if (!startInBr && !endInBr) return;
+    if (!startInBr || !endInBr) {
+      // weird case, just clear the selection
+      selection.removeAllRanges();
+      return;
+    }
+
+    // Find the last allowed word in the selection
+    const lastAllowedWord = genAt(
+      genFilter(
+        walkBetweenNodes(range.startContainer, range.endContainer),
+        (node) => node.classList?.contains('BRwordElement'),
+      ),
+      this.options.maxProtectedWords - 1,
+    );
+
+    if (!lastAllowedWord || range.endContainer.parentNode == lastAllowedWord) return;
+
+    const newRange = document.createRange();
+    newRange.setStart(range.startContainer, range.startOffset);
+    newRange.setEnd(lastAllowedWord.firstChild, lastAllowedWord.textContent.length);
+
+    selection.removeAllRanges();
+    selection.addRange(newRange);
+  };
+
   /**
    * @override
    * @param {PageContainer} pageContainer
@@ -511,6 +549,33 @@ function augmentLine(line) {
   };
 }
 
+/**
+ * @template T
+ * Get the i-th element of an iterable
+ * @param {Iterable<T>} iterable
+ * @param {number} index
+ */
+export function genAt(iterable, index) {
+  let i = 0;
+  for (const x of iterable) {
+    if (i == index) return x;
+    i++;
+  }
+  return undefined;
+}
+
+/**
+ * @template T
+ * Generator version of filter
+ * @param {Iterable<T>} iterable
+ * @param {function(T): boolean} fn
+ */
+export function* genFilter(iterable, fn) {
+  for (const x of iterable) {
+    if (fn(x)) yield x;
+  }
+}
+
 /**
  * @template TFrom, TTo
  * Generator version of map
@@ -647,3 +712,49 @@ class Rect {
   get top() { return this.y; }
   get left() { return this.x; }
 }
+
+/**
+ * Depth traverse the DOM tree starting at `start`, and ending at `end`.
+ * @param {Node} start
+ * @param {Node} end
+ * @returns {Generator<Node>}
+ */
+export function* walkBetweenNodes(start, end) {
+  let done = false;
+
+  /**
+   * @param {Node} node
+   */
+  function* walk(node, {children = true, parents = true, siblings = true} = {}) {
+    if (node === end) {
+      done = true;
+      yield node;
+      return;
+    }
+
+    // yield self
+    yield node;
+
+    // First iterate children (depth-first traversal)
+    if (children && node.firstChild) {
+      yield* walk(node.firstChild, {children: true, parents: false, siblings: true});
+      if (done) return;
+    }
+
+    // Then iterate siblings
+    if (siblings) {
+      for (let sib = node.nextSibling; sib; sib = sib.nextSibling) {
+        yield* walk(sib, {children: true, parents: false, siblings: false});
+        if (done) return;
+      }
+    }
+
+    // Finally, move up the tree
+    if (parents && node.parentNode) {
+      yield* walk(node.parentNode, {children: false, parents: true, siblings: true});
+      if (done) return;
+    }
+  }
+
+  yield* walk(start);
+}

package/src/plugins/search/view.js

@@ -44,7 +44,7 @@ class SearchView {
   }
 
   clearSearchFieldAndResults(dispatchEventWhenComplete = true) {
-    this.br._plugins.search.removeSearchResults();
+    this.br.plugins.search.removeSearchResults();
     this.removeResultPins();
     this.emptyMatches();
     this.setQuery('');
@@ -218,7 +218,7 @@ class SearchView {
       <form class="BRbooksearch desktop">
         <input type="search" name="query" class="BRsearchInput" value="" placeholder="Search inside"/>
         <button type="submit" class="BRsearchSubmit">
-          <img src="${this.br.imagesBaseURL}icon_search_button.svg" />
+          <img src="${this.br.options.imagesBaseURL}icon_search_button.svg" />
         </button>
       </form>
     `;
@@ -273,7 +273,7 @@ class SearchView {
           $(event.target).addClass('front');
         })
         .on("mouseleave", (event) => $(event.target).removeClass('front'))
-        .on("click", () => { this.br._plugins.search.jumpToMatch(match.matchIndex); });
+        .on("click", () => { this.br.plugins.search.jumpToMatch(match.matchIndex); });
     });
   }
 
@@ -379,11 +379,11 @@ class SearchView {
 
   handleSearchStarted() {
     this.emptyMatches();
-    this.br._plugins.search.removeSearchHilites();
+    this.br.plugins.search.removeSearchHilites();
     this.removeResultPins();
     this.toggleSearchPending(true);
     this.teardownSearchNavigation();
-    this.setQuery(this.br._plugins.search.searchTerm);
+    this.setQuery(this.br.plugins.search.searchTerm);
   }
 
   /**

package/src/plugins/tts/plugin.tts.js

@@ -199,7 +199,7 @@ export class TtsPlugin extends BookReaderPlugin {
   }
 
   toggle() {
-    this.br._plugins.autoplay?.stop();
+    this.br.plugins.autoplay?.stop();
     if (this.ttsEngine.playing) {
       this.stop();
     } else {
@@ -338,11 +338,11 @@ export class TtsPlugin extends BookReaderPlugin {
    * @param {number} [value]
    */
   sendAnalyticsEvent(action, value) {
-    if (this.br._plugins.archiveAnalytics) {
+    if (this.br.plugins.archiveAnalytics) {
       const extraValues = {};
       const mediaLanguage = this.ttsEngine.opts.bookLanguage;
       if (mediaLanguage) extraValues.mediaLanguage = mediaLanguage;
-      this.br._plugins.archiveAnalytics.sendEvent('BRReadAloud', action, value, extraValues);
+      this.br.plugins.archiveAnalytics.sendEvent('BRReadAloud', action, value, extraValues);
     }
   }
 }

package/src/plugins/url/plugin.url.js

@@ -1,6 +1,6 @@
 /* global BookReader */
 
-import { UrlPlugin } from "./UrlPlugin";
+import { UrlPlugin } from "./UrlPlugin.js";
 
 /**
  * Plugin for URL management in BookReader
@@ -106,7 +106,7 @@ BookReader.prototype.urlStartLocationPolling = function() {
     this.trigger(BookReader.eventNames.stop);
     if (this.animating) {
       // Queue change if animating
-      this._plugins.autoplay?.stop();
+      this.plugins.autoplay?.stop();
       this.animationFinishedCallback = updateParams;
     } else {
       // update immediately

package/tests/e2e/autoplay.test.js

@@ -1,5 +1,5 @@
 import { ClientFunction } from 'testcafe';
-import params from './helpers/params';
+import params from './helpers/params.js';
 
 const getLocationHref = ClientFunction(() => window.location.href.toString());
 const FLIP_SPEED = 200;

package/tests/e2e/base.test.js

@@ -1,7 +1,7 @@
-import { runBaseTests } from './helpers/base';
-import BookReader from './models/BookReader';
-import { runSearchTests } from './helpers/search';
-import params from './helpers/params';
+import { runBaseTests } from './helpers/base.js';
+import BookReader from './models/BookReader.js';
+import { runSearchTests } from './helpers/search.js';
+import params from './helpers/params.js';
 
 const ocaids = params.ocaids || [
   'theworksofplato01platiala',

package/tests/e2e/helpers/base.js

@@ -78,8 +78,8 @@ export function runBaseTests (br) {
 
     // Check if uses plugin.resume.js
     const usesResume = ClientFunction(() => {
-      const hasResumePlugin = typeof(br._plugins.resume) !== "undefined";
-      const hasResumeValue = hasResumePlugin ? br._plugins.resume.getResumeValue() : false;
+      const hasResumePlugin = typeof(br.plugins.resume) !== "undefined";
+      const hasResumeValue = hasResumePlugin ? br.plugins.resume.getResumeValue() : false;
       return hasResumeValue;
     });
 

package/tests/e2e/models/BookReader.js

@@ -1,5 +1,5 @@
 import { Selector } from 'testcafe';
-import Nav from './Navigation';
+import Nav from './Navigation.js';
 
 /** Model defining BookReader base elements */
 export default class BookReader {

package/tests/e2e/rightToLeft.test.js

@@ -1,8 +1,8 @@
-import { runBaseTests } from './helpers/base';
-import { runRightToLeftTests } from './helpers/rightToLeft';
-import params from './helpers/params';
+import { runBaseTests } from './helpers/base.js';
+import { runRightToLeftTests } from './helpers/rightToLeft.js';
+import params from './helpers/params.js';
 
-import BookReader from './models/BookReader';
+import BookReader from './models/BookReader.js';
 
 const ocaids = params.ocaids || [
   'gendaitankashu00meijuoft', // Right to Left book

package/tests/e2e/viewmode.test.js

@@ -1,6 +1,6 @@
 import { Selector } from 'testcafe';
-import BookReader from './models/BookReader';
-import params from './helpers/params';
+import BookReader from './models/BookReader.js';
+import params from './helpers/params.js';
 
 const ocaids = params.ocaids || ['goody'];
 

package/tests/jest/BookNavigator/book-navigator.test.js

@@ -323,19 +323,6 @@ describe('<book-navigator>', () => {
         });
       });
 
-      describe('Shortcuts', () => {
-        test('has specific order of menu shortcuts to show', () => {
-          const el = fixtureSync(container());
-          expect(el.shortcutOrder).toEqual([
-            'fullscreen',
-            'volumes',
-            'chapters',
-            'search',
-            'bookmarks',
-          ]);
-        });
-      });
-
       describe('Behaviors for specific menus', () => {
         describe('Search menu - ref: plugin.search.js', () => {
           test('Event: listens for `BookReader:ToggleSearchMenu to open search side panel', async () => {

package/tests/jest/BookNavigator/downloads/downloads-provider.test.js

@@ -1,6 +1,6 @@
 import { fixtureCleanup, fixtureSync } from '@open-wc/testing-helpers';
 import sinon from 'sinon';
-import DownloadsProvider from '@/src/BookNavigator/downloads/downloads-provider';
+import DownloadsProvider from '@/src/BookNavigator/downloads/downloads-provider.js';
 
 const downloadableTypes = [
   ["PDF", "//archive.org/download/theworksofplato01platiala/theworksofplato01platiala.pdf"],

package/tests/jest/BookNavigator/downloads/downloads.test.js

@@ -4,7 +4,7 @@ import {
   fixtureCleanup,
 } from '@open-wc/testing-helpers';
 import sinon from 'sinon';
-import '@/src/BookNavigator/downloads/downloads';
+import '@/src/BookNavigator/downloads/downloads.js';
 
 
 const downloads = [