@internetarchive/ia-book-actions 1.4.1 → 1.4.3-canary.0

package/.github/workflows/ci.yml

@@ -11,16 +11,17 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4.1.1
+    - uses: actions/setup-node@v4.0.2
       with:
-        node-version: 16.x
+        node-version: 20.x
 
     - name: Install dependencies
       run: yarn install
 
-    # - name: Run tests
-    #   run: yarn run test
+    - name: Run tests
+      run: yarn run test
 
-    # - name: Upload reports
-    #   run: npx codecov
+    - uses: codecov/codecov-action@v5
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}

package/.github/workflows/pr-preview.yml

@@ -14,24 +14,47 @@ on:
 
 concurrency: preview-${{ github.ref }}
 
+env:
+  PREVIEW_BRANCH: gh-pages
 jobs:
   deploy-preview:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 20.x
+      - uses: actions/setup-node@v4
 
       - name: Install and Build
         run: |
           yarn install
           yarn prepare:ghpages
+
       # Reference: https://github.com/rossjrw/pr-preview-action
       - name: Deploy preview
         uses: rossjrw/pr-preview-action@v1
+        id: preview-step
         with:
           source-dir: ./ghpages/
           umbrella-dir: pr
+          preview-branch: ${{ env.PREVIEW_BRANCH }}
+          comment: false
+
+      - uses: marocchino/sticky-pull-request-comment@v2
+        if: steps.preview-step.outputs.deployment-action == 'deploy'
+        with:
+          header: pr-preview
+          message: |
+            [PR Preview Action](https://github.com/rossjrw/pr-preview-action) ${{ steps.preview-step.outputs.action-version }}
+            :---:
+            | <p></p> :rocket: View preview at <br> ${{ steps.preview-step.outputs.preview-url }} <br><br>
+            | <h6>Built to branch [`${{ env.PREVIEW_BRANCH }}`](${{ github.server_url }}/${{ github.repository }}/tree/${{ env.PREVIEW_BRANCH }}) at ${{ steps.preview-step.outputs.action-start-time }}. <br> Preview will be ready when the [GitHub Pages deployment](${{ github.server_url }}/${{ github.repository }}/deployments) is complete. <br><br> </h6>
+
+      - uses: marocchino/sticky-pull-request-comment@v2
+        if: steps.preview-step.outputs.deployment-action == 'remove'
+        with:
+          header: pr-preview
+          message: |
+            [PR Preview Action](https://github.com/rossjrw/pr-preview-action) ${{ steps.preview-step.outputs.action-version }}
+            :---:
+            Preview removed because the pull request was closed.
+            ${{ steps.preview-step.outputs.action-start-time }}

package/README.md

@@ -1,12 +1,21 @@
-# Component for lendable and embed items
 
-The book action button component build on LitElement with support for custom content and light DOM elements.
+![Build Status](https://github.com/internetarchive/iaux-book-actions/actions/workflows/ci.yml/badge.svg) [![codecov](https://codecov.io/gh/internetarchive/iaux-book-actions/branch/main/graph/badge.svg?token=ZOYRJ2BV9W)](https://codecov.io/gh/internetarchive/iaux-book-actions)
+
+# Internet Archive Book Lending Actions
+
+This WebComponent, built using the [IA Typescript WebComponent Template](https://github.com/internetarchive/iaux-typescript-wc-template), provides support for Bookreader actions for borrowable books on Internet Archive. It extends the [Open WebComponents generator](https://open-wc.org/docs/development/generator/) with Internet Archive-specific features and developer tools.
 
 ## Installation
 ```bash
 yarn install --save @internetarchive/ia-book-actions
 ```
 
+## Local Demo with `web-dev-server`
+```bash
+yarn start
+```
+To run a local development server that serves the basic demo located in `index.html`
+
 ## Usage of Book Actions
 ```html
 <!-- index.html -->

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "1.4.1",
   "description": "Bookreader actions for borrowable book",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/internetarchive/iaux-book-actions.git"
+  },
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
+  "version": "1.4.3-canary.0",
   "main": "index.js",
   "module": "index.js",
   "publishConfig": {
@@ -15,28 +19,27 @@
     "prepare": "rimraf dist && husky install",
     "lint": "eslint --ext \"./src/*.js\",.html . --ignore-path .gitignore && prettier \"./src/*.js\" --check --ignore-path .gitignore",
     "format": "eslint --ext \"./src/*.js\",.html . --fix --ignore-path .gitignore && prettier \"./src/*.js\" --write --ignore-path .gitignore",
-    "test": "yarn run lint && yarn test:fast",
-    "test:fast": "web-test-runner --coverage --playwright --browsers chromium firefox webkit",
+    "test": "yarn run format && yarn run lint && yarn test:fast --coverage",
+    "test:fast": "web-test-runner",
     "test:watch": "web-test-runner --watch --playwright --browsers chromium firefox webkit",
     "deploy": "yarn run deploy:run -e $(git branch --show-current)",
     "deploy:run": "yarn run prepare:ghpages && touch ghpages/.nojekyll && yarn run deploy:gh",
     "deploy:gh": "gh-pages -t -d ghpages -m \"Build for $(git log --pretty=format:\"%h %an %ai %s\" -n1) [skip ci]\""
   },
   "dependencies": {
-    "@internetarchive/icon-info": "1.3.5",
+    "@internetarchive/icon-info": "^1.4.1",
     "@internetarchive/local-cache": "^0.2.1",
-    "@internetarchive/modal-manager": "2.0.0",
+    "@internetarchive/modal-manager": "^2.0.0",
     "@internetarchive/shared-resize-observer": "^0.2.0",
-    "install-deps": "^1.1.0",
-    "lit": "^2.8.0"
+    "lit": "^2.8.0 || ^3.3.2"
   },
   "devDependencies": {
     "@open-wc/eslint-config": "^4.2.0",
-    "@open-wc/testing": "^2.0.0",
-    "@web/dev-server": "^0.1.1",
-    "@web/dev-server-esbuild": "^0.2.16",
-    "@web/test-runner": "^0.11.7",
-    "@web/test-runner-playwright": "^0.8.8",
+    "@open-wc/testing": "^4.0.0",
+    "@web/dev-server": "^0.4.6",
+    "@web/dev-server-esbuild": "^1.0.5",
+    "@web/test-runner": "^0.20.2",
+    "@web/test-runner-playwright": "^0.11.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.22.1",

package/src/core/services/loan-analytics.js

@@ -150,7 +150,7 @@ export default class LoanAnanlytics {
   }
 
   /**
-   * reponsible to sent events to GA
+   * responsible to sent events to GA
    *
    * @param {*} eventCategory
    * @param {*} eventAction

package/src/core/services/loan-renew-helper.js

@@ -27,7 +27,7 @@ export class LoanRenewHelper {
     };
   }
 
-  handleLoanRenew() {
+  async handleLoanRenew() {
     try {
       if (this.hasPageChanged) {
         return this.pageChanged(); // user clicked on page

package/src/ia-book-actions.js

@@ -98,6 +98,10 @@ export default class IABookActions extends LitElement {
      */
     this.returnNow = false;
 
+    this.loanRenewInProgress = false;
+
+    this.warningModalOpen = false;
+
     /**
      * contains one hour auto-loan-renew time configuration
      * defaults to 1 hour config
@@ -120,7 +124,12 @@ export default class IABookActions extends LitElement {
      * @property {boolean} renewNow - key to determine if need to renew now
      * @property {number} secondsLeft - seconds left in active loan
      */
-    this.loanRenewResult = { texts: '', renewNow: false, secondsLeft: 0, renewType: '' };
+    this.loanRenewResult = {
+      texts: '',
+      renewNow: false,
+      secondsLeft: 0,
+      renewType: '',
+    };
   }
 
   disconnectedCallback() {
@@ -136,7 +145,6 @@ export default class IABookActions extends LitElement {
    * @param {string} msg
    */
   sentryCaptureMsg(msg) {
-    log(window?.Sentry);
     window?.Sentry?.captureMessage(msg);
   }
 
@@ -228,7 +236,7 @@ export default class IABookActions extends LitElement {
       'browsingExpired' in this.lendingStatus &&
       this.lendingStatus?.browsingExpired;
     if (hasExpired) {
-      log('setupLendingToolbarActions > hasExpired --- ');
+      log('[IABookActions] browsing expired — showing expired state');
 
       if (!this.tokenPoller) {
         this.sentryCaptureMsg(sentryLogs.bookWasExpired);
@@ -285,7 +293,11 @@ export default class IABookActions extends LitElement {
      * dispatched this event from bookreader page changed
      */
     window.addEventListener('BookReader:userAction', () => {
-      log('IABookActions:BookReader:userAction');
+      // If the loan expired while the tab stayed visible, auto-renew on page turn
+      if (this.lendingStatus.browsingExpired) {
+        this.autoRenewExpiredLoan();
+      }
+
       if (this.borrowType === 'browsed') {
         this.autoLoanRenewChecker(true);
       }
@@ -298,17 +310,17 @@ export default class IABookActions extends LitElement {
      */
     document.addEventListener('visibilitychange', async () => {
       if (!document.hidden) {
-        log(
-          'visibilitychange event execute:------------------ ',
-          new Date().getMinutes(),
-          new Date().getSeconds(),
-          this.borrowType
-        );
-
-        if (
-          this.borrowType === 'browsed' &&
-          this.lendingStatus.browsingExpired === false
-        ) {
+        log('[IABookActions] visibilitychange:', this.borrowType);
+
+        // Loan already expired while tab was hidden — try to silently renew
+        if (this.lendingStatus.browsingExpired === true) {
+          this.autoRenewExpiredLoan();
+          return;
+        }
+
+        if (this.borrowType !== 'browsed') return;
+
+        if (this.lendingStatus.browsingExpired === false) {
           const loanTime = await this.localCache.get(
             `${this.identifier}-loanTime`
           );
@@ -319,7 +331,8 @@ export default class IABookActions extends LitElement {
           if (secondsLeft >= this.timerExecutionSeconds) {
             this.loanStatusCheckInterval(Number(secondsLeft));
           } else {
-            this.browseHasExpired();
+            // Loan expired while user was away — try to silently renew
+            this.autoRenewExpiredLoan();
             this.disconnectedCallback();
           }
         }
@@ -345,6 +358,36 @@ export default class IABookActions extends LitElement {
     this.loanRenewResult = this.loanRenewHelper.result;
   }
 
+  /**
+   * Attempt to automatically renew a browse loan that has expired.
+   * Called on visibilitychange (user returns to tab) or on page turn when
+   * the loan has expired but the book may still be available.
+   *
+   * Reuses the same renew_loan path as the "Keep reading" warning modal button.
+   * On success: handleLoanAutoRenewed() resets the timer seamlessly.
+   * On error: handleLendingActionError() shows showLoanUnavailableModal().
+   */
+  autoRenewExpiredLoan() {
+    if (this.loanRenewInProgress) return;
+    this.loanRenewInProgress = true;
+
+    this.modal?.closeModal();
+
+    // Optimistically flip browsingExpired back to false so the action bar
+    // stays red (patronIsReadingAction) while the renew_loan request is in
+    // flight, instead of showing the blue "Borrow" state.
+    this.lendingStatus = {
+      ...this.lendingStatus,
+      browsingExpired: false,
+      secondsLeftOnLoan: this.loanRenewTimeConfig.loanTotalTime,
+    };
+
+    // Defer renewNow until after lendingStatus timer setup completes.
+    setTimeout(() => {
+      this.loanRenewResult = { texts: '', renewNow: true, renewType: 'auto' };
+    }, 0);
+  }
+
   /**
    * Required as sibling on page
    * @returns HTMLElement
@@ -360,29 +403,34 @@ export default class IABookActions extends LitElement {
    * Show the waring modal to ask user if they are still reading
    */
   async showWarningModal() {
-    log('****** showWarningModal ******');
-    // clear modal
-    this.modal.customModalContent = nothing;
-    this.modal?.closeModal();
-    this.loanRenewResult = { texts: '', renewNow: false };
+    if (this.warningModalOpen) return;
+    this.warningModalOpen = true;
 
-    // if secondsLeft < 60, consider it 1 minute
-    let { secondsLeft } = this.loanRenewResult;
-    if (secondsLeft === undefined) {
+    log('[IABookActions] showWarningModal');
+
+    // Capture texts and secondsLeft before resetting loanRenewResult
+    const {
+      texts: warningTexts,
+      secondsLeft: rawSecondsLeft,
+    } = this.loanRenewResult;
+    let secondsLeft = rawSecondsLeft;
+    if (secondsLeft === undefined || secondsLeft <= 0) {
       secondsLeft = this.lendingStatus.secondsLeftOnLoan;
     } else {
       secondsLeft = secondsLeft > 60 ? secondsLeft : 60;
     }
 
+    // clear modal and reset renew state
+    this.modal.customModalContent = nothing;
+    this.modal?.closeModal();
+    this.loanRenewResult = { texts: '', renewNow: false };
+
     const config = new ModalConfig({
       headline: 'Are you still reading?',
       headerColor: '#194880',
       showCloseButton: false,
       closeOnBackdropClick: false,
-      message: this.loanRenewHelper?.getMessageTexts(
-        this.loanRenewResult.texts,
-        secondsLeft
-      ),
+      message: this.loanRenewHelper?.getMessageTexts(warningTexts, secondsLeft),
     });
 
     const customModalContent = html`<br />
@@ -479,6 +527,7 @@ export default class IABookActions extends LitElement {
 
   /**
    * Show modal when book is auto returned
+   * @deprecated
    */
   async showExpiredModal() {
     const config = new ModalConfig({
@@ -508,7 +557,7 @@ export default class IABookActions extends LitElement {
    * Execute when loan is expired
    */
   async browseHasExpired() {
-    log('BrowseHasExpired ---');
+    log('[IABookActions] browseHasExpired');
     window?.IALendingIntervals?.clearAll();
 
     const currStatus = {
@@ -527,11 +576,38 @@ export default class IABookActions extends LitElement {
     this.loanRenewResult.texts =
       'This book has been returned due to inactivity.';
 
-    await this.showExpiredModal();
+    this.modal?.closeModal();
 
     this.sentryCaptureMsg(sentryLogs.browseHasExpired);
   }
 
+  /**
+   * Show modal when the book can no longer be automatically renewed
+   * because another patron has checked it out.
+   */
+  async showLoanUnavailableModal() {
+    const config = new ModalConfig({
+      headline: '',
+      showCloseButton: false,
+      closeOnBackdropClick: false,
+      headerColor: '#194880',
+      message:
+        'Another patron is borrowing this book. Please check back later.',
+    });
+
+    const customModalContent = html`<br />
+      <div style="text-align: center">
+        <button
+          style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
+          @click=${() => URLHelper.goToUrl(this.returnUrl, true)}
+        >
+          Okay
+        </button>
+      </div>`;
+
+    await this.modal?.showModal({ config, customModalContent });
+  }
+
   async startBrowseTimer() {
     window?.IALendingIntervals?.clearBrowseExpireTimeout();
 
@@ -542,19 +618,10 @@ export default class IABookActions extends LitElement {
     } = this.lendingStatus;
 
     if (!user_has_browsed || browsingExpired) {
-      log('startBrowseTimer --- !user_has_browsed || browsingExpired', {
-        user_has_browsed,
-        browsingExpired,
-        secondsLeftOnLoan,
-      });
       return;
     }
 
     window.IALendingIntervals.browseExpireTimeout = setTimeout(() => {
-      log(
-        'startBrowseTimer > browseExpireTimeout --- will expire loan',
-        secondsLeftOnLoan
-      );
       this.browseHasExpired();
     }, secondsLeftOnLoan * 1000);
   }
@@ -636,12 +703,9 @@ export default class IABookActions extends LitElement {
 
       // number of seconds left in current loan
       const secondsLeft = Math.round((loanTime - new Date()) / 1000);
-      log(loanTime, secondsLeft);
-
-      log('IABookActions: handleLoanAutoRenewed --- ', {
+      log('[IABookActions] handleLoanAutoRenewed', {
+        secondsLeft,
         ajaxResponse: detail?.data,
-        loanRenewResult: this.loanRenewResult,
-        secondsLeftOnLoan: secondsLeft,
       });
 
       const currStatus = {
@@ -658,6 +722,9 @@ export default class IABookActions extends LitElement {
       this.modal.customModalContent = nothing;
       this.sentryCaptureMsg(sentryLogs.bookHasRenewed);
     }
+
+    this.warningModalOpen = false;
+    this.loanRenewInProgress = false;
   }
 
   /**
@@ -693,29 +760,19 @@ export default class IABookActions extends LitElement {
     // re-sync timer if gone off because of background window
     // side effect: updates this.lendingStatus & kicks off lifecycle,
     // if really updated, escape from here
-    const resyncd = await this.reSyncTimerIfGoneOff(secondsLeft);
+    const resyncd = this.reSyncTimerIfGoneOff(secondsLeft);
 
     if (resyncd.hasSynced) {
       secondsLeft = resyncd.whatShouldLeft;
-      log('startTimerCountdown --- stale, timer has resyncd', {
+      log('[IABookActions] startTimerCountdown: timer re-synced', {
         secondsLeft,
       });
     }
 
-    log(
-      'startTimerCountdown --- countdown still valid. continue...',
-      {
-        resyncd,
-        secondsLeft,
-        loanRenewAtLast: this.loanRenewTimeConfig.loanRenewAtLast,
-      },
-      'time: ',
-      new Date().getMinutes(),
-      ':',
-      new Date().getSeconds(),
-      ', timerDelay: ',
-      this.timerExecutionSeconds
-    );
+    log('[IABookActions] startTimerCountdown', {
+      secondsLeft,
+      loanRenewAtLast: this.loanRenewTimeConfig.loanRenewAtLast,
+    });
 
     /**
      * execute from last 10th minutes to 0th minute
@@ -740,7 +797,7 @@ export default class IABookActions extends LitElement {
    * @param {number} timerSecondsLeft - actual seconds left get from setInterval
    * @returns {Object} { hasSynced: [boolean], whatShouldLeft: [number] }
    */
-  async reSyncTimerIfGoneOff(timerSecondsLeft) {
+  reSyncTimerIfGoneOff(timerSecondsLeft) {
     const currentTime = new Date();
 
     // current time - loan time
@@ -750,27 +807,11 @@ export default class IABookActions extends LitElement {
     const secondsShouldLeft =
       this.lendingStatus.secondsLeftOnLoan - diffInSeconds;
 
-    log('currentTime: ', currentTime);
-    log('timeWhenTimerStart: ', this.timeWhenTimerStart);
-    log('diffInSeconds: ', diffInSeconds);
-    log('secondsShouldLeft: ', secondsShouldLeft);
-    log(
-      'this.lendingStatus.secondsLeftOnLoan: ',
-      this.lendingStatus.secondsLeftOnLoan
-    );
-
     // convert in minutes
     const whatIsleft = Math.round(timerSecondsLeft);
     const whatShouldLeft = Math.round(secondsShouldLeft);
     const timerElSeconds = this.timerCountdownEl.secondsLeftOnLoan || 0;
 
-    log(`reSyncTimerIfGoneOff?`, {
-      whatIsleft,
-      whatShouldLeft,
-      timerElSeconds,
-      timeLeftInMin: Math.ceil(timerSecondsLeft / 60),
-    });
-
     if (timerElSeconds !== whatShouldLeft || whatIsleft !== whatShouldLeft) {
       // set lending status with new time to update decrementor
       const currStatus = {
@@ -781,7 +822,9 @@ export default class IABookActions extends LitElement {
     }
 
     if (whatIsleft !== whatShouldLeft) {
-      log(`reSyncTimerIfGoneOff --- let's re-sync.`);
+      log(
+        `[IABookActions] reSyncTimerIfGoneOff ${whatIsleft} - ${whatShouldLeft}: re-syncing timer`
+      );
       return { hasSynced: true, whatShouldLeft };
     }
 
@@ -797,10 +840,6 @@ export default class IABookActions extends LitElement {
    * @memberof IABookActions
    */
   async loanRenewAttempt(secondsLeft) {
-    log('loanRenewAttempt ---', {
-      secondsLeft,
-      loanRenewResult: this.loanRenewResult,
-    });
     let loanSecondsLeft = secondsLeft;
     /**
      * auto-renew is not possible in last seconds (let say 50 second) because,
@@ -810,7 +849,7 @@ export default class IABookActions extends LitElement {
      * so if seconds left is < 50, just expire the loan
      */
     if (loanSecondsLeft < 50) {
-      log('loanRenewAttempt --- loanSecondsLeft < 50, will expire');
+      log('[IABookActions] loanRenewAttempt: < 50s left, expiring loan');
       await this.browseHasExpired();
       return;
     }
@@ -892,9 +931,17 @@ export default class IABookActions extends LitElement {
     const action = event?.detail?.action;
     const errorMsg = event?.detail?.data?.error;
 
-    // template not show create_token errors
-    if (errorMsg && action !== 'create_token')
+    // For renew_loan failures after auto-renew, show the patron-facing message
+    if (
+      errorMsg &&
+      action === 'renew_loan' &&
+      errorMsg.match(/not available/)
+    ) {
+      this.loanRenewInProgress = false;
+      this.showLoanUnavailableModal();
+    } else if (errorMsg && action !== 'create_token') {
       this.showErrorModal(errorMsg, action);
+    }
 
     // if error related to loan token
     // - set user_has_browsed to `false`

package/test/ia-book-actions.test.js

@@ -82,7 +82,7 @@ describe('<ia-book-actions>', () => {
     expect(el.disableActionGroup).to.be.true;
   });
 
-  it('handles `BookReader:userAction` event', async () => {
+  it('handles `BookReader:userAction` event when loan is active', async () => {
     const el = await fixture(
       container({
         userid: '@user1',
@@ -91,8 +91,10 @@ describe('<ia-book-actions>', () => {
     );
 
     const spy = Sinon.spy(el, 'autoLoanRenewChecker');
-    el.borrowType = 'browsed';
+    el.lendingStatus = { ...el.lendingStatus, browsingExpired: false };
     await el.updateComplete;
+    // Set borrowType after the update so setupLendingToolbarActions() doesn't overwrite it
+    el.borrowType = 'browsed';
 
     window.dispatchEvent(new Event('BookReader:userAction'));
     await el.updateComplete;
@@ -100,6 +102,25 @@ describe('<ia-book-actions>', () => {
     expect(spy.calledOnce).to.be.true;
     expect(spy.calledWith(true)).to.be.true;
   });
+
+  it('handles `BookReader:userAction` event when loan has expired', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'foobar',
+        lendingStatus: { user_has_browsed: true, browsingExpired: true },
+      })
+    );
+
+    const spy = Sinon.spy(el, 'autoRenewExpiredLoan');
+    el.borrowType = 'browsed';
+    await el.updateComplete;
+
+    window.dispatchEvent(new Event('BookReader:userAction'));
+    await el.updateComplete;
+
+    expect(spy.calledOnce).to.be.true;
+  });
 });
 
 describe('Primary Actions data', () => {
@@ -467,7 +488,7 @@ describe('Visibility change API for document', async () => {
     });
   });
 
-  it('when book is not expired', async () => {
+  it('when book is not expired and loan time is valid', async () => {
     const el = await fixture(
       container({
         userid: '@user1',
@@ -480,31 +501,220 @@ describe('Visibility change API for document', async () => {
     );
     await el.updateComplete;
 
+    // Set a valid loan time well into the future
+    await el.localCache.set({
+      key: 'foobar-loanTime',
+      value: new Date(new Date().getTime() + 3600 * 1000),
+      ttl: 3600,
+    });
+
     const spy = Sinon.spy(el, 'loanStatusCheckInterval');
     document.dispatchEvent(new Event('visibilitychange'));
+    await aTimeout(100);
+
+    expect(spy.calledOnce).to.be.true;
+  });
+
+  it('when loan expired while tab was hidden (browsingExpired false, loanTime past)', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'foobar',
+        lendingStatus: {
+          user_has_browsed: true,
+          browsingExpired: false,
+        },
+      })
+    );
+    await el.updateComplete;
+
+    // Set a loan time already in the past
+    await el.localCache.set({
+      key: 'foobar-loanTime',
+      value: new Date(new Date().getTime() - 10 * 1000),
+      ttl: 3600,
+    });
+
+    const spy = Sinon.spy(el, 'autoRenewExpiredLoan');
+    document.dispatchEvent(new Event('visibilitychange'));
+    await aTimeout(100);
 
     expect(spy.calledOnce).to.be.true;
   });
 
-  it('when book is already expired', async () => {
+  it('when loan already marked expired (browsingExpired true)', async () => {
     const el = await fixture(
       container({
         userid: '@user1',
         identifier: 'foobar',
         lendingStatus: {
           user_has_browsed: true,
+          browsingExpired: true,
         },
       })
     );
     await el.updateComplete;
 
-    const spy = Sinon.spy(el, 'browseHasExpired');
+    el.borrowType = 'browsed';
+
+    const spy = Sinon.spy(el, 'autoRenewExpiredLoan');
     document.dispatchEvent(new Event('visibilitychange'));
+    await aTimeout(100);
 
     expect(spy.calledOnce).to.be.true;
   });
 });
 
+describe('autoRenewExpiredLoan', () => {
+  it('optimistically resets browsingExpired so the button stays red', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'foobar',
+        lendingStatus: {
+          user_has_browsed: true,
+          available_to_browse: true,
+          browsingExpired: true,
+        },
+      })
+    );
+    await el.updateComplete;
+
+    // Before: browsingExpired true → borrow1HrAction → primary color is 'primary' (blue)
+    expect(el.primaryColor).to.equal('primary');
+
+    el.autoRenewExpiredLoan();
+    await el.updateComplete;
+
+    // After: browsingExpired flipped to false → patronIsReadingAction → 'danger' (red)
+    expect(el.lendingStatus.browsingExpired).to.be.false;
+    expect(el.primaryColor).to.equal('danger');
+  });
+
+  it('sets loanRenewInProgress and triggers renewNow after timeout', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'foobar',
+        lendingStatus: {
+          user_has_browsed: true,
+          browsingExpired: true,
+        },
+      })
+    );
+    await el.updateComplete;
+
+    el.autoRenewExpiredLoan();
+
+    expect(el.loanRenewInProgress).to.be.true;
+
+    // renewNow is set in a setTimeout — flush the macrotask queue
+    await aTimeout(50);
+    expect(el.loanRenewResult.renewNow).to.be.true;
+    expect(el.loanRenewResult.renewType).to.equal('auto');
+  });
+
+  it('ignores subsequent calls while a renewal is already in progress', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'foobar',
+        lendingStatus: {
+          user_has_browsed: true,
+          browsingExpired: true,
+        },
+      })
+    );
+    await el.updateComplete;
+
+    // Spy *after* fixture so the handler is the same instance
+    const spy = Sinon.spy(el, 'autoRenewExpiredLoan');
+
+    el.autoRenewExpiredLoan(); // first call — proceeds
+    el.autoRenewExpiredLoan(); // second call — should be a no-op
+
+    // The spy counts both invocations but the internal guard stops the second
+    expect(spy.callCount).to.equal(2);
+    // loanRenewInProgress is still true (not double-set or cleared)
+    expect(el.loanRenewInProgress).to.be.true;
+
+    // Only one setTimeout fires (the second call returned early)
+    await aTimeout(50);
+    expect(el.loanRenewResult.renewNow).to.be.true;
+  });
+
+  it('clears loanRenewInProgress after a successful loanAutoRenewed event', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'foobar',
+        lendingStatus: {
+          user_has_browsed: true,
+          browsingExpired: false,
+          secondsLeftOnLoan: 100,
+        },
+      })
+    );
+    await el.updateComplete;
+
+    await el.localCache.set({
+      key: 'foobar-loanTime',
+      value: new Date(new Date().getTime() + 3600 * 1000),
+      ttl: 3600,
+    });
+
+    el.autoRenewExpiredLoan();
+    expect(el.loanRenewInProgress).to.be.true;
+
+    // Wait for the deferred renewNow to be set
+    await aTimeout(50);
+
+    // Simulate the renew_loan success response
+    const collapsibleActionGroupEl = el.shadowRoot.querySelector(
+      'collapsible-action-group'
+    );
+    collapsibleActionGroupEl.dispatchEvent(
+      new CustomEvent('loanAutoRenewed', {
+        detail: { data: { loan: { identifier: 'foobar' } } },
+      })
+    );
+
+    await aTimeout(100);
+    await el.updateComplete;
+
+    expect(el.loanRenewInProgress).to.be.false;
+  });
+
+  it('clears loanRenewInProgress and shows unavailable modal on renew_loan failure', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'foobar',
+        lendingStatus: {
+          user_has_browsed: true,
+          browsingExpired: true,
+        },
+      })
+    );
+    await el.updateComplete;
+
+    const showModalSpy = Sinon.spy(el, 'showLoanUnavailableModal');
+
+    el.autoRenewExpiredLoan();
+    expect(el.loanRenewInProgress).to.be.true;
+
+    el.handleLendingActionError({
+      detail: {
+        action: 'renew_loan',
+        data: { error: 'book is not available' },
+      },
+    });
+
+    expect(el.loanRenewInProgress).to.be.false;
+    expect(showModalSpy.calledOnce).to.be.true;
+  });
+});
+
 describe('Shared Resize Observer', () => {
   it('can receive a Shared Resize Observer', async () => {
     const sharedObserverStub = new SharedResizeObserver();

package/web-test-runner.config.mjs

@@ -3,7 +3,7 @@
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   files: 'test/**/*.test.js',
   nodeResolve: true,
-  watch: true,
+  watch: false,
 
   /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
   esbuildTarget: 'auto',