Merge pull request #162 from nolanlawson/minimal-event-changes

Minimal changes to improve `Event` compatibility

Author: dumbmatter

src/lib/FakeEventTarget.ts

@@ -1,6 +1,10 @@
 import { InvalidStateError } from "./errors.js";
 import type FakeEvent from "./FakeEvent.js";
-import type { EventCallback, EventType } from "./types.js";
+import type {
+    EventCallback,
+    EventCallbackOrEventCallbackObject,
+    EventType,
+} from "./types.js";
 
 type EventTypeProp =
     | "onabort"
@@ -13,7 +17,7 @@ type EventTypeProp =
     | "onversionchange";
 
 interface Listener {
-    callback: EventCallback;
+    callback: EventCallbackOrEventCallbackObject;
     capture: boolean;
     type: EventType;
 }
@@ -32,8 +36,12 @@ const invokeEventListeners = (event: FakeEvent, obj: FakeEventTarget) => {
     event.currentTarget = obj;
 
     const errors: Error[] = [];
-    const invoke = (callback: EventCallback) => {
+    const invoke = (callbackOrObject: EventCallbackOrEventCallbackObject) => {
         try {
+            const callback =
+                typeof callbackOrObject === "function"
+                    ? callbackOrObject
+                    : callbackOrObject.handleEvent;
             // @ts-expect-error EventCallback's types are not quite right here
             callback.call(event.currentTarget, event);
         } catch (err) {
@@ -101,9 +109,12 @@ abstract class FakeEventTarget {
 
     public addEventListener(
         type: EventType,
-        callback: EventCallback,
-        capture = false,
+        callback: EventCallbackOrEventCallbackObject,
+        options?: boolean | AddEventListenerOptions | undefined,
     ) {
+        const capture = !!(typeof options === "object" && options
+            ? options.capture
+            : options);
         this.listeners.push({
             callback,
             capture,
@@ -113,9 +124,12 @@ abstract class FakeEventTarget {
 
     public removeEventListener(
         type: EventType,
-        callback: EventCallback,
-        capture = false,
+        callback: EventCallbackOrEventCallbackObject,
+        options?: boolean | AddEventListenerOptions | undefined,
     ) {
+        const capture = !!(typeof options === "object" && options
+            ? options.capture
+            : options);
         const i = this.listeners.findIndex((listener) => {
             return (
                 listener.type === type &&

src/lib/types.ts

@@ -12,6 +12,10 @@ interface EventInCallback extends Event {
 
 export type EventCallback = (event: EventInCallback) => void;
 
+export type EventCallbackOrEventCallbackObject =
+    | EventCallback
+    | { handleEvent: EventCallback };
+
 export type EventType =
     | "abort"
     | "blocked"

src/test/fakeIndexedDB/fakeIndexedDB.ts

@@ -747,6 +747,85 @@ describe("fakeIndexedDB Tests", () => {
                 done();
             });
         });
+
+        it("allows handleEvent object in addEventListener", () => {
+            return new Promise<void>((resolve, reject) => {
+                const request = fakeIndexedDB.open("test" + Math.random());
+                request.addEventListener("upgradeneeded", {
+                    handleEvent(e) {
+                        const db = (e.target as any).result as FDBDatabase;
+                        db.createObjectStore("store");
+                    },
+                });
+                request.addEventListener("success", {
+                    handleEvent(e) {
+                        const db = (e.target as any).result as FDBDatabase;
+
+                        const tx = db.transaction("store", "readwrite");
+                        tx.objectStore("store").put({}, 1);
+                        tx.onerror = (e) => reject(e.target.error);
+
+                        tx.addEventListener("complete", {
+                            handleEvent() {
+                                resolve();
+                            },
+                        });
+                    },
+                });
+            });
+        });
+
+        describe("capture", () => {
+            [
+                // capture=true
+                true,
+                { capture: true },
+                // capture=false
+                false,
+                { capture: false },
+                undefined,
+                null,
+            ].forEach((arg3) => {
+                const capture =
+                    typeof arg3 === "object" && arg3 ? arg3.capture : !!arg3;
+                it(`can set capture=${capture} using third argument: ${JSON.stringify(arg3)}`, async () => {
+                    const logs: string[] = [];
+                    const log = (text: string) => () => {
+                        logs.push(text);
+                    };
+                    await new Promise<void>((resolve) => {
+                        const request = fakeIndexedDB.open(
+                            "test" + Math.random(),
+                        );
+                        request.onupgradeneeded = (e) => {
+                            const db = e.target.result as FDBDatabase;
+                            db.createObjectStore("store");
+                            db.addEventListener(
+                                "abort",
+                                log("db"),
+                                arg3 as any,
+                            );
+                        };
+                        request.onsuccess = (e) => {
+                            const db = e.target.result as FDBDatabase;
+                            const tx = db.transaction("store", "readwrite");
+                            tx.addEventListener(
+                                "abort",
+                                log("tx"),
+                                arg3 as any,
+                            );
+                            tx.addEventListener("abort", () => resolve());
+                            tx.abort();
+                        };
+                    });
+                    const expected = ["tx", "db"]; // bubble order - bottom-up
+                    if (capture) {
+                        expected.reverse(); // capture order - top-down
+                    }
+                    assert.deepStrictEqual(logs, expected);
+                });
+            });
+        });
     });
 
     it("confirm openCursor works (issue #60)", (done) => {