@internetarchive/bookreader 5.0.0-65 → 5.0.0-67

package/src/plugins/plugin.chapters.js

@@ -1,4 +1,11 @@
 /* global BookReader */
+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';
+/** @typedef {import('@/src/BookNavigator/book-navigator.js').BookNavigator} BookNavigator */
+
 /**
  * Plugin for chapter markers in BookReader. Fetches from openlibrary.org
  * Could be forked, or extended to alter behavior
@@ -10,153 +17,111 @@ jQuery.extend(BookReader.defaultOptions, {
   bookId: '',
 });
 
-/** @override Extend the constructor to add search properties */
-BookReader.prototype.setup = (function (super_) {
-  return function (options) {
-    super_.call(this, options);
-
-    this.olHost = options.olHost;
-    this.enableChaptersPlugin = options.enableChaptersPlugin;
-    this.bookId = options.bookId;
-  };
-})(BookReader.prototype.setup);
-
 /** @override Extend to call Open Library for TOC */
 BookReader.prototype.init = (function(super_) {
   return function() {
     super_.call(this);
-    if (this.enableChaptersPlugin && this.ui !== 'embed') {
-      this.getOpenLibraryRecord();
-    }
-    if (this.enableMobileNav) {
-      this.bind(BookReader.eventNames.mobileNavOpen,
-        () => {
-          this.updateTOCState(this.firstIndex, this._tocEntries);
-          if ($('table-contents-list').parent().hasClass('mm-opened')) {
-            this.updateTOCState(this.firstIndex, this._tocEntries);
-          }
-        }
-      );
-      $(".BRmobileMenu__tableContents").on("click", () => {
-        this.updateTOCState(this.firstIndex, this._tocEntries);
-      });
+    if (this.options.enableChaptersPlugin && this.ui !== 'embed') {
+      this._chapterInit();
     }
   };
 })(BookReader.prototype.init);
 
-/**
- * Adds chapter marker to navigation scrubber
- *
- * @param {string} chapterTitle
- * @param {string} pageNumber
- * @param {number} pageIndex
- */
-BookReader.prototype.addChapter = function(chapterTitle, pageNumber, pageIndex) {
-  const uiStringPage = 'Page'; // i18n
-  const percentThrough = BookReader.util.cssPercentage(pageIndex, this.book.getNumLeafs() - 1);
-  const jumpToChapter = (event) => {
-    this.jumpToIndex($(event.delegateTarget).data('pageIndex'));
-    $('.current-chapter').removeClass('current-chapter');
-    $(event.delegateTarget).addClass('current-chapter');
-  };
-  const title = `${chapterTitle} | `;
-  const pageStr = `${uiStringPage} ${pageNumber}`;
-
-  //adding items to mobile table of contents
-  const mobileChapter = $(`<li></li>`).append($(`<span class='BRTOCElementTitle'></span>`).text(title))
-    .append($(`<span class='BRTOCElementPage'></span>`).text(pageStr));
-  mobileChapter.addClass('BRtable-contents-el')
-    .appendTo(this.$('.table-contents-list'))
-    .data({ pageIndex });
-
-  //adds .BRchapters to the slider only if pageIndex exists
-  if (pageIndex != undefined) {
-    $(`<div></div>`)
-      .append($('<div />').text(title + pageStr))
-      .addClass('BRchapter')
-      .css({ left: percentThrough })
-      .appendTo(this.$('.BRnavline'))
-      .data({ pageIndex })
-      .on("mouseenter", event => {
-        // remove hover effect from other markers then turn on just for this
-        const marker = event.currentTarget;
-        const tooltip = marker.querySelector('div');
-        const tooltipOffset = tooltip.getBoundingClientRect();
-        const targetOffset = marker.getBoundingClientRect();
-        const boxSizeAdjust = parseInt(getComputedStyle(tooltip).paddingLeft) * 2;
-        if (tooltipOffset.x - boxSizeAdjust < 0) {
-          tooltip.style.setProperty('transform', `translateX(-${targetOffset.left - boxSizeAdjust}px)`);
-        }
-        this.$('.BRsearch,.BRchapter').removeClass('front');
-        $(event.target).addClass('front');
-      })
-      .on("mouseleave", event => $(event.target).removeClass('front'))
-      .on('click', jumpToChapter);
-
-    //adding clickable properties to mobile chapters
-    mobileChapter.bind('click', jumpToChapter)
-      .addClass('chapter-clickable')
-      .attr("data-event-click-tracking","BRTOCPanel|GoToChapter");
+BookReader.prototype._chapterInit = async function() {
+  const olEdition = await this.getOpenLibraryRecord(this.options.olHost, this.options.bookId);
+  if (olEdition?.table_of_contents?.length) {
+    this._tocEntries = olEdition.table_of_contents.map(rawTOCEntry => (
+      Object.assign({}, rawTOCEntry, {pageIndex: this.book.getPageIndex(rawTOCEntry.pagenum)})
+    ));
+    this._chaptersRender(this._tocEntries);
+    this.bind(BookReader.eventNames.pageChanged, () => this._chaptersUpdateCurrent());
   }
-
-};
-
-/*
- * Remove all chapters.
- */
-BookReader.prototype.removeChapters = function() {
-  this.$('.BRnavpos .BRchapter').remove();
 };
 
 /**
  * Update the table of contents based on array of TOC entries.
- * @param {TocEntry[]} tocEntries
  */
-BookReader.prototype.updateTOC = function(tocEntries) {
-  this.removeChapters();
-  if (this.enableMobileNav && tocEntries.length > 0) {
-    this.$(".BRmobileMenu__tableContents").show();
-  }
-  for (let i = 0; i < tocEntries.length; i++) {
-    this.addChapterFromEntry(tocEntries[i]);
+BookReader.prototype._chaptersRender = function() {
+  const shell = /** @type {BookNavigator} */(this.shell);
+  shell.menuProviders['chapters'] = {
+    id: 'chapters',
+    icon: html`<ia-icon-toc style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-toc>`,
+    label: 'Table of Contents',
+    component: html`<br-chapters-panel
+      .contents="${this._tocEntries}"
+      .jumpToPage="${(pageIndex) => {
+      this._chaptersUpdateCurrent(pageIndex);
+      this.jumpToIndex(pageIndex);
+    }}"
+      @connected="${(e) => {
+      this._chaptersPanel = e.target;
+      this._chaptersUpdateCurrent();
+    }}"
+    />`,
+  };
+  shell.updateMenuContents();
+  for (const tocEntry of this._tocEntries) {
+    this._chaptersRenderMarker(tocEntry);
   }
-  this._tocEntries = tocEntries;
-  $('.table-contents-list').children().each((i, el) => {
-    tocEntries[i].mobileHTML = el;
-  });
 };
 
 /**
  * @typedef {Object} TocEntry
- * Table of contents entry as defined -- format is defined by Open Library
+ * Table of contents entry as defined by Open Library, with some extra values for internal use
  * @property {string} pagenum
  * @property {number} level
  * @property {string} label
- * @property {{type: '/type/toc_item'}} type
  * @property {string} title
- * @property {HTMLElement} mobileHTML
- * @property {number} pageIndex
-
+ * @property {number} pageIndex - Added
  *
  * @example {
  *   "pagenum": "17",
  *   "level": 1,
  *   "label": "CHAPTER I",
- *   "type": {"key": "/type/toc_item"},
  *   "title": "THE COUNTRY AND THE MISSION"
  * }
  */
 
 /**
- * @param {TocEntry} tocEntryObject
+ * @param {TocEntry} tocEntry
  */
-BookReader.prototype.addChapterFromEntry = function(tocEntryObject) {
-  tocEntryObject.pageIndex = this.book.getPageIndex(tocEntryObject['pagenum']);
-  //creates a string with non-void tocEntryObject.label and tocEntryObject.title
-  const chapterStr = [tocEntryObject.label, tocEntryObject.title]
+BookReader.prototype._chaptersRenderMarker = function(tocEntry) {
+  if (tocEntry.pageIndex == undefined) return;
+
+  //creates a string with non-void tocEntry.label and tocEntry.title
+  const chapterStr = [tocEntry.label, tocEntry.title]
     .filter(x => x)
     .join(' ');
-  this.addChapter(chapterStr, tocEntryObject['pagenum'], tocEntryObject.pageIndex);
+
+  const percentThrough = BookReader.util.cssPercentage(tocEntry.pageIndex, this.book.getNumLeafs() - 1);
+  $(`<div></div>`)
+    .append(
+      $('<div />')
+        .text(chapterStr)
+        .append($('<div class="BRchapterPage" />').text(`Page ${tocEntry.pagenum}`))
+    )
+    .addClass('BRchapter')
+    .css({ left: percentThrough })
+    .appendTo(this.$('.BRnavline'))
+    .on("mouseenter", event => {
+      // remove hover effect from other markers then turn on just for this
+      const marker = event.currentTarget;
+      const tooltip = marker.querySelector('div');
+      const tooltipOffset = tooltip.getBoundingClientRect();
+      const targetOffset = marker.getBoundingClientRect();
+      const boxSizeAdjust = parseInt(getComputedStyle(tooltip).paddingLeft) * 2;
+      if (tooltipOffset.x - boxSizeAdjust < 0) {
+        tooltip.style.setProperty('transform', `translateX(-${targetOffset.left - boxSizeAdjust}px)`);
+      }
+      this.$('.BRsearch,.BRchapter').removeClass('front');
+      $(event.target).addClass('front');
+    })
+    .on("mouseleave", event => $(event.target).removeClass('front'))
+    .on('click', () => {
+      this._chaptersUpdateCurrent(tocEntry.pageIndex);
+      this.jumpToIndex(tocEntry.pageIndex);
+    });
+
   this.$('.BRchapter, .BRsearch').each((i, el) => {
     const $el = $(el);
     $el
@@ -166,79 +131,146 @@ BookReader.prototype.addChapterFromEntry = function(tocEntryObject) {
 };
 
 /**
- * getOpenLibraryRecord
- *
- * The bookreader is designed to call openlibrary API and constructs the
- * "Return book" button using the response.
- *
  * This makes a call to OL API and calls the given callback function with the
  * response from the API.
+ *
+ * @param {string} olHost
+ * @param {string} ocaid
  */
-BookReader.prototype.getOpenLibraryRecord = async function () {
+BookReader.prototype.getOpenLibraryRecord = async function (olHost, ocaid) {
   // Try looking up by ocaid first, then by source_record
-  const baseURL = `${this.olHost}/query.json?type=/type/edition&*=`;
-  const fetchUrlByBookId = `${baseURL}&ocaid=${this.bookId}`;
-
-  /*
-  * Update Chapter markers based on received record from Open Library.
-  * Notes that Open Library record is used for extra metadata, and also for lending
-  */
-  const setUpChapterMarkers = (olObject) => {
-    if (olObject && olObject.table_of_contents) {
-      // XXX check here that TOC is valid
-      this.updateTOC(olObject.table_of_contents);
-    }
-  };
+  const baseURL = `${olHost}/query.json?type=/type/edition&*=`;
+  const fetchUrlByBookId = `${baseURL}&ocaid=${ocaid}`;
 
   let data = await $.ajax({ url: fetchUrlByBookId, dataType: 'jsonp' });
 
   if (!data || !data.length) {
     // try sourceid
-    data = await $.ajax({ url: `${baseURL}&source_records=ia:${this.bookId}`, dataType: 'jsonp' });
+    data = await $.ajax({ url: `${baseURL}&source_records=ia:${ocaid}`, dataType: 'jsonp' });
   }
 
-  if (data && data.length > 0) {
-    setUpChapterMarkers(data[0]);
-  }
+  return data?.[0];
 };
 
-// Extend buildMobileDrawerElement with table of contents list
-BookReader.prototype.buildMobileDrawerElement = (function (super_) {
-  return function () {
-    const $el = super_.call(this);
-    if (this.enableMobileNav && this.options.enableChaptersPlugin) {
-      $el.find('.BRmobileMenu__moreInfoRow').after($(`
-        <li class="BRmobileMenu__tableContents" data-event-click-tracking="BRSidebar|TOCPanel">
-            <span>
-                <span class="DrawerIconWrapper">
-                  <img class="DrawerIcon" src="${this.imagesBaseURL}icon_toc.svg" alt="toc-icon"/>
-                </span>
-                Table of Contents
-            </span>
-            <div>
-                <ol class="table-contents-list">
-                </ol>
-            </div>
-        </li>`).hide());
-    }
-    return $el;
-  };
-})(BookReader.prototype.buildMobileDrawerElement);
-
 /**
- * highlights the current chapter based on current page
  * @private
- * @param {TocEntry[]} tocEntries
- * @param {number} tocEntries
+ * Highlights the current chapter based on current page
+ * @param {PageIndex} curIndex
  */
-BookReader.prototype.updateTOCState = function(currIndex, tocEntries) {
-  //this function won't have any effects if called before OpenLibrary request is finished
-  if (!tocEntries) {return;}
-  $('.current-chapter').removeClass('current-chapter');
-  const tocEntriesIndexed = tocEntries.filter((el) => el.pageIndex != undefined).reverse();
-  const currChapter = tocEntriesIndexed[tocEntriesIndexed.findIndex(
-    (el) => el.pageIndex <= currIndex)];
-  if (currChapter != undefined) {
-    $(currChapter.mobileHTML).addClass('current-chapter');
+BookReader.prototype._chaptersUpdateCurrent = function(
+  curIndex = (this.mode == 2 ? Math.max(...this.displayedIndices) : this.firstIndex)
+) {
+  const tocEntriesIndexed = this._tocEntries.filter((el) => el.pageIndex != undefined).reverse();
+  const currChapter = tocEntriesIndexed[
+    // subtract one so that 2up shows the right label
+    tocEntriesIndexed.findIndex((chapter) => chapter.pageIndex <= curIndex)
+  ];
+  if (this._chaptersPanel) {
+    this._chaptersPanel.currentChapter = currChapter;
   }
 };
+
+@customElement('br-chapters-panel')
+export class BRChaptersPanel extends LitElement {
+  /** @type {TocEntry[]} */
+  @property({ type: Array })
+  contents = [];
+
+  /** @type {TocEntry?} */
+  @property({ type: Object })
+  currentChapter = {};
+
+  /** @type {(pageIndex: PageIndex) => void} */
+  jumpToPage = () => {};
+
+  /**
+   * @param {TocEntry[]} contents
+   */
+  constructor(contents) {
+    super();
+    this.contents = contents;
+  }
+
+  render() {
+    return html`
+    <ol>
+      ${this.contents.map(tocEntry => this.renderTOCEntry(tocEntry))}
+    </ol>
+    `;
+  }
+
+  /**
+   * @param {TocEntry} tocEntry
+   */
+  renderTOCEntry(tocEntry) {
+    const chapterTitle = [tocEntry.label, tocEntry.title]
+      .filter(x => x)
+      .join(' ');
+    const clickable = tocEntry.pageIndex != undefined;
+    // note the click-tracking won't work...
+    return html`
+    <li
+      class="
+        BRtable-contents-el
+        ${clickable ? 'clickable' : ''}
+        ${tocEntry == this.currentChapter ? 'current' : ''}
+      "
+      style="${styleMap({marginLeft: (tocEntry.level - 1) * 10 + 'px'})}"
+      data-event-click-tracking="${ifDefined(clickable ? "BRTOCPanel|GoToChapter" : undefined)}"
+      @click="${() => this.jumpToPage(tocEntry.pageIndex)}"
+    >
+      ${chapterTitle}
+      ${tocEntry.pagenum ? html`
+        <br />
+        <span class="BRTOCElementPage">Page ${tocEntry.pagenum}</span>
+      ` : nothing}
+    </li>`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.dispatchEvent(new CustomEvent('connected'));
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('currentChapter')) {
+      this.shadowRoot.querySelector('li.current')?.scrollIntoView({
+        block: 'nearest',
+        behavior: 'smooth',
+      });
+    }
+  }
+
+  static get styles() {
+    return css`
+      ol {
+        padding: 0;
+        margin: 0;
+        margin-right: 5px;
+      }
+      li {
+        padding: 10px;
+        overflow: hidden;
+        border-radius: 4px;
+      }
+      li.clickable {
+        font-weight: normal;
+        cursor: pointer;
+        transition: background-color 0.2s;
+      }
+
+      li.clickable:not(.current):hover {
+        background-color: rgba(255,255,255, 0.05);
+      }
+
+      li.current {
+        background-color: rgba(255,255,255,0.9);
+        color: #333;
+      }
+
+      .BRTOCElementPage {
+        font-size: 0.85em;
+        opacity: .8;
+      }`;
+  }
+}

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

@@ -195,7 +195,7 @@ BookReader.prototype.initNavbar = (function (super_) {
       $(`<li>
           <button class="BRicon read js-tooltip" title="${tooltips.readAloud}">
             <div class="icon icon-read-aloud"></div>
-            <span class="tooltip">${tooltips.readAloud}</span>
+            <span class="BRtooltip">${tooltips.readAloud}</span>
           </button>
         </li>`).insertBefore($el.find('.BRcontrols .BRicon.zoom_out').closest('li'));
     }

package/src/util/browserSniffing.js

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

package/tests/jest/BookReader/ModeSmoothZoom.test.js

@@ -1,6 +1,7 @@
 import sinon from 'sinon';
-import { EventTargetSpy } from '../utils.js';
-import { ModeSmoothZoom } from '@/src/BookReader/ModeSmoothZoom.js';
+import interact from 'interactjs';
+import { EventTargetSpy, afterEventLoop } from '../utils.js';
+import { ModeSmoothZoom, TouchesMonitor } from '@/src/BookReader/ModeSmoothZoom.js';
 /** @typedef {import('@/src/BookReader/ModeSmoothZoom.js').SmoothZoomable} SmoothZoomable */
 
 /**
@@ -22,33 +23,32 @@ function dummy_mode(overrides = {}) {
   };
 }
 
-afterEach(() => sinon.restore());
+afterEach(() => {
+  sinon.restore();
+  try {
+    interact.removeDocument(document);
+  } catch (e) {}
+});
 
 describe('ModeSmoothZoom', () => {
-  test('preventsDefault on iOS-only gesture events', () => {
+  test('handle iOS-only gesture events', () => {
     const mode = dummy_mode();
     const msz = new ModeSmoothZoom(mode);
+    sinon.stub(msz, '_pinchStart');
+    sinon.stub(msz, '_pinchMove');
+    sinon.stub(msz, '_pinchEnd');
+
     msz.attach();
-    for (const event_name of ['gesturestart', 'gesturechange', 'gestureend']) {
-      const ev = new Event(event_name, {});
-      const prevDefaultSpy = sinon.spy(ev, 'preventDefault');
-      mode.$container.dispatchEvent(ev);
-      expect(prevDefaultSpy.callCount).toBe(1);
-    }
-  });
 
-  test('pinchCancel alias for pinchEnd', () => {
-    const mode = dummy_mode();
-    const msz = new ModeSmoothZoom(mode);
-    const pinchEndSpy = sinon.spy(msz, '_pinchEnd');
-    msz._pinchStart();
-    msz._pinchCancel();
-    expect(pinchEndSpy.callCount).toBe(1);
+    const gesturestart = new Event('gesturestart', {});
+    mode.$container.dispatchEvent(gesturestart);
+    expect(msz._pinchStart.callCount).toBe(1);
   });
 
   test('sets will-change', async () => {
     const mode = dummy_mode();
     const msz = new ModeSmoothZoom(mode);
+    msz.attach();
     expect(mode.$visibleWorld.style.willChange).toBeFalsy();
     msz._pinchStart();
     expect(mode.$visibleWorld.style.willChange).toBe('transform');
@@ -59,6 +59,7 @@ describe('ModeSmoothZoom', () => {
   test('pinch move updates scale', () => {
     const mode = dummy_mode();
     const msz = new ModeSmoothZoom(mode);
+    msz.attach();
     // disable buffering
     msz.bufferFn = (callback) => callback();
     msz._pinchStart();
@@ -79,48 +80,47 @@ describe('ModeSmoothZoom', () => {
       }
     });
     const msz = new ModeSmoothZoom(mode);
-    expect(mode.scaleCenter).toEqual({ x: 0.5, y: 0.5 });
+    expect(msz.scaleCenter).toEqual({ x: 0.5, y: 0.5 });
     msz.updateScaleCenter({ clientX: 85, clientY: 110 });
-    expect(mode.scaleCenter).toEqual({ x: 0.4, y: 0.6 });
+    expect(msz.scaleCenter).toEqual({ x: 0.4, y: 0.6 });
   });
 
-  test('detaches all listeners', () => {
+  test('detaches all listeners', async () => {
     const mode = dummy_mode();
     const msz = new ModeSmoothZoom(mode);
+
+    const documentEventSpy = EventTargetSpy.wrap(document);
     const containerEventSpy = EventTargetSpy.wrap(mode.$container);
     const visibleWorldSpy = EventTargetSpy.wrap(mode.$visibleWorld);
-    const hammerEventSpy = new EventTargetSpy();
-    msz.hammer.on = hammerEventSpy.addEventListener.bind(hammerEventSpy);
-    msz.hammer.off = hammerEventSpy.removeEventListener.bind(hammerEventSpy);
 
     msz.attach();
+    await afterEventLoop();
+    expect(documentEventSpy._totalListenerCount).toBeGreaterThan(0);
     expect(containerEventSpy._totalListenerCount).toBeGreaterThan(0);
-    expect(hammerEventSpy._totalListenerCount).toBeGreaterThan(0);
 
     msz.detach();
+    expect(documentEventSpy._totalListenerCount).toBe(0);
     expect(containerEventSpy._totalListenerCount).toBe(0);
     expect(visibleWorldSpy._totalListenerCount).toBe(0);
-    expect(hammerEventSpy._totalListenerCount).toBe(0);
   });
 
   test('attach can be called twice without double attachments', () => {
     const mode = dummy_mode();
     const msz = new ModeSmoothZoom(mode);
+
+    const documentEventSpy = EventTargetSpy.wrap(document);
     const containerEventSpy = EventTargetSpy.wrap(mode.$container);
     const visibleWorldSpy = EventTargetSpy.wrap(mode.$visibleWorld);
-    const hammerEventSpy = new EventTargetSpy();
-    msz.hammer.on = hammerEventSpy.addEventListener.bind(hammerEventSpy);
-    msz.hammer.off = hammerEventSpy.removeEventListener.bind(hammerEventSpy);
-    msz.attach();
 
+    msz.attach();
+    const documentListenersCount = documentEventSpy._totalListenerCount;
     const containerListenersCount = containerEventSpy._totalListenerCount;
     const visibleWorldListenersCount = visibleWorldSpy._totalListenerCount;
-    const hammerListenersCount = hammerEventSpy._totalListenerCount;
 
     msz.attach();
+    expect(documentEventSpy._totalListenerCount).toBe(documentListenersCount);
     expect(containerEventSpy._totalListenerCount).toBe(containerListenersCount);
     expect(visibleWorldSpy._totalListenerCount).toBe(visibleWorldListenersCount);
-    expect(hammerEventSpy._totalListenerCount).toBe(hammerListenersCount);
   });
 
   describe('_handleCtrlWheel', () => {
@@ -173,3 +173,46 @@ describe('ModeSmoothZoom', () => {
     });
   });
 });
+
+
+describe("TouchesMonitor", () => {
+  /** @type {HTMLElement} */
+  let container;
+  /** @type {TouchesMonitor} */
+  let monitor;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    monitor = new TouchesMonitor(container);
+  });
+
+  afterEach(() => {
+    monitor.detach();
+  });
+
+  test("should start with 0 touches", () => {
+    expect(monitor.touches).toBe(0);
+  });
+
+  test("should update touch count on touch events", () => {
+    monitor.attach();
+    container.dispatchEvent(new TouchEvent("touchstart", { touches: [{}] }));
+    expect(monitor.touches).toBe(1);
+
+    container.dispatchEvent(new TouchEvent("touchstart", { touches: [{}, {}] }));
+    expect(monitor.touches).toBe(2);
+
+    container.dispatchEvent(new TouchEvent("touchend", { touches: [{}] }));
+    expect(monitor.touches).toBe(1);
+
+    container.dispatchEvent(new TouchEvent("touchend", { touches: [] }));
+  });
+
+  test("should detach all listeners", () => {
+    const spy = EventTargetSpy.wrap(container);
+    monitor.attach();
+    expect(spy._totalListenerCount).toBeGreaterThan(0);
+    monitor.detach();
+    expect(spy._totalListenerCount).toBe(0);
+  });
+});