Moved oncePersistedPageShown to events, added tests

assets/js/upload.js

@@ -6,6 +6,7 @@ import { assertNotNull } from './utils/assert';
 import { fetchJson, handleError } from './utils/requests';
 import { $, $$, clearEl, hideEl, makeEl, showEl } from './utils/dom';
 import { addTag } from './tagsinput';
+import { oncePersistedPageShown } from './utils/events';
 
 const MATROSKA_MAGIC = 0x1a45dfa3;
 
@@ -27,27 +28,6 @@ function elementForEmbeddedImage({ camo_url, type }) {
   return makeEl(tagName, { className: 'scraper-preview--image', src: objectUrl });
 }
 
-/**
- * Execute the code when page was shown from back-forward cache.
- * @param {() => void} callback
- */
-function oncePersistedPageShown(callback) {
-  /**
-   * @param {PageTransitionEvent} event
-   */
-  function onPageShown(event) {
-    if (!event.persisted) {
-      return;
-    }
-
-    window.removeEventListener('pageshow', onPageShown);
-
-    callback();
-  }
-
-  window.addEventListener('pageshow', onPageShown);
-}
-
 function setupImageUpload() {
   const imgPreviews = $('#js-image-upload-previews');
   if (!imgPreviews) return;

assets/js/utils/__tests__/events.spec.ts

@@ -1,4 +1,12 @@
-import { delegate, fire, mouseMoveThenOver, leftClick, on, PhilomenaAvailableEventsMap } from '../events';
+import {
+  delegate,
+  fire,
+  mouseMoveThenOver,
+  leftClick,
+  on,
+  PhilomenaAvailableEventsMap,
+  oncePersistedPageShown,
+} from '../events';
 import { getRandomArrayItem } from '../../../test/randomness';
 import { fireEvent } from '@testing-library/dom';
 
@@ -129,6 +137,51 @@ describe('Event utils', () => {
     });
   });
 
+  describe('oncePersistedPageShown', () => {
+    it('should NOT fire on usual page show', () => {
+      const mockHandler = vi.fn();
+
+      oncePersistedPageShown(mockHandler);
+
+      fireEvent.pageShow(window, { persisted: false });
+
+      expect(mockHandler).toHaveBeenCalledTimes(0);
+    });
+
+    it('should fire on persisted pageshow', () => {
+      const mockHandler = vi.fn();
+
+      oncePersistedPageShown(mockHandler);
+
+      fireEvent.pageShow(window, { persisted: true });
+
+      expect(mockHandler).toHaveBeenCalledTimes(1);
+    });
+
+    it('should keep waiting until the first persistent page shown fired', () => {
+      const mockHandler = vi.fn();
+
+      oncePersistedPageShown(mockHandler);
+
+      fireEvent.pageShow(window, { persisted: false });
+      fireEvent.pageShow(window, { persisted: false });
+      fireEvent.pageShow(window, { persisted: true });
+
+      expect(mockHandler).toHaveBeenCalledTimes(1);
+    });
+
+    it('should NOT fire more than once', () => {
+      const mockHandler = vi.fn();
+
+      oncePersistedPageShown(mockHandler);
+
+      fireEvent.pageShow(window, { persisted: true });
+      fireEvent.pageShow(window, { persisted: true });
+
+      expect(mockHandler).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe('delegate', () => {
     it('should call the native addEventListener method on the element', () => {
       const mockElement = document.createElement('div');

assets/js/utils/events.ts

@@ -54,6 +54,23 @@ export function mouseMoveThenOver<El extends HTMLElement>(element: El, func: (e:
   );
 }
 
+export function oncePersistedPageShown(func: (e: PageTransitionEvent) => void) {
+  const controller = new AbortController();
+
+  window.addEventListener(
+    'pageshow',
+    (e: PageTransitionEvent) => {
+      if (!e.persisted) {
+        return;
+      }
+
+      controller.abort();
+      func(e);
+    },
+    { signal: controller.signal },
+  );
+}
+
 export function delegate<K extends keyof PhilomenaAvailableEventsMap, Target extends Element>(
   node: PhilomenaEventElement,
   event: K,