keithamus · keithamus · Jul 9, 2025 · Jul 8, 2025 · Jul 9, 2025
diff --git a/package.json b/package.json
@@ -40,7 +40,8 @@
   "scripts": {
     "minify": "esbuild --bundle --minify index.js > observable.min.js",
     "prepublishOnly": "npm run minify",
-    "test": "echo TODO! Run ./wpt serve --inject-script=../observables-polyfill/observable.js for now."
+    "test": "echo TODO! Run ./wpt serve --inject-script=../observables-polyfill/observable.js for now.",
+    "test-serve": "npx http-server -c1 -t0 --cors --gzip --brotli -o test ."
   },
   "devDependencies": {
     "esbuild": "^0.25.2"

diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+  <head>
+    <script type="module">
+      import { apply } from "../observable.js";
+      apply();
+    </script>
+    <script defer src="./wpt/testharness.js"></script>
+    <script defer src="./wpt/testharnessreport.js"></script>
+    <script defer src="./wpt/observable-drop.any.js"></script>
+    <script defer src="./wpt/observable-filter.any.js"></script>
+    <script defer src="./wpt/observable-flatMap.any.js"></script>
+    <script defer src="./wpt/observable-inspect.any.js"></script>
+    <script defer src="./wpt/observable-reduce.any.js"></script>
+    <script defer src="./wpt/observable-takeUntil.any.js"></script>
+    <script defer src="./wpt/observable-catch.any.js"></script>
+    <script defer src="./wpt/observable-event-target.any.js"></script>
+    <script defer src="./wpt/observable-finally.any.js"></script>
+    <script defer src="./wpt/observable-forEach.any.js"></script>
+    <script defer src="./wpt/observable-last.any.js"></script>
+    <script defer src="./wpt/observable-some.any.js"></script>
+    <script defer src="./wpt/observable-takeUntil.window.js"></script>
+    <script defer src="./wpt/observable-constructor.any.js"></script>
+    <script defer src="./wpt/observable-event-target.window.js"></script>
+    <script defer src="./wpt/observable-find.any.js"></script>
+    <script defer src="./wpt/observable-forEach.window.js"></script>
+    <script defer src="./wpt/observable-map.any.js"></script>
+    <script defer src="./wpt/observable-switchMap.any.js"></script>
+    <script defer src="./wpt/observable-toArray.any.js"></script>
+    <script defer src="./wpt/observable-constructor.window.js"></script>
+    <script defer src="./wpt/observable-every.any.js"></script>
+    <script defer src="./wpt/observable-first.any.js"></script>
+    <script defer src="./wpt/observable-from.any.js"></script>
+    <script defer src="./wpt/observable-map.window.js"></script>
+    <script defer src="./wpt/observable-take.any.js"></script>
+  </head>
+</html>
diff --git a/test/wpt/README.md b/test/wpt/README.md
@@ -0,0 +1,3 @@
+These tests were all copied from WPT https://wpt.fyi/results/dom/observable/tentative?label=experimental&label=master&aligned
+
+Commit hash 39a3d27eb95f19313755d0098bc637ebbb96dfc5
diff --git a/test/wpt/idlharness.html b/test/wpt/idlharness.html
@@ -0,0 +1,20 @@
+<!doctype html>
+  <meta charset="utf-8" />
+  <meta name="author" title="Keith Cirkel" href="mailto:[email protected]" />
+  <link rel="help" href="https://github.com/WICG/observable" />
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <script src="/resources/WebIDLParser.js"></script>
+  <script src="/resources/idlharness.js"></script>
+
+  <script>
+    idl_test(["observable.tentative"], ["dom"], (idl_array) => {
+      idl_array.add_objects({
+        Observable: ["new Observable(() => {})"],
+        Subscriber: [
+          "(() => { let s = null; new Observable(_s => s = _s).subscribe({}); return s })()",
+        ],
+      });
+    });
+  </script>
+</t>
diff --git a/test/wpt/observable-catch.any.js b/test/wpt/observable-catch.any.js
@@ -0,0 +1,255 @@
+test(() => {
+  const source = new Observable(subscriber => {
+    subscriber.next(1);
+    subscriber.next(2);
+    subscriber.next(3);
+    subscriber.complete();
+  });
+
+  const caughtObservable = source.catch(() => {
+    assert_unreached("catch() is not called");
+  });
+
+  const results = [];
+
+  caughtObservable.subscribe({
+    next: value => results.push(value),
+    complete: () => results.push('complete')
+  });
+
+  assert_array_equals(results, [1, 2, 3, 'complete']);
+}, "catch(): Returns an Observable that is a pass-through for next()/complete()");
+
+test(() => {
+  let sourceError = new Error("from the source");
+  const source = new Observable(subscriber => {
+    subscriber.next(1);
+    subscriber.next(2);
+    subscriber.error(sourceError);
+  });
+
+  const caughtObservable = source.catch(error => {
+    assert_equals(error, sourceError);
+    return new Observable(subscriber => {
+      subscriber.next(3);
+      subscriber.complete();
+    });
+  });
+
+  const results = [];
+
+  caughtObservable.subscribe({
+    next: value => results.push(value),
+    complete: () => results.push("complete"),
+  });
+
+  assert_array_equals(results, [1, 2, 3, 'complete']);
+}, "catch(): Handle errors from source and flatten to a new Observable");
+
+test(() => {
+  const sourceError = new Error("from the source");
+  const source = new Observable(subscriber => {
+    subscriber.next(1);
+    subscriber.next(2);
+    subscriber.error(sourceError);
+  });
+
+  const catchCallbackError = new Error("from the catch callback");
+  const caughtObservable = source.catch(error => {
+    assert_equals(error, sourceError);
+    throw catchCallbackError;
+  });
+
+  const results = [];
+
+  caughtObservable.subscribe({
+    next: value => results.push(value),
+    error: error => {
+      results.push(error);
+    },
+    complete: () => results.push('complete'),
+  });
+
+  assert_array_equals(results, [1, 2, catchCallbackError]);
+}, "catch(): Errors thrown in the catch() callback are sent to the consumer's error handler");
+
+test(() => {
+  // A common use case is logging and keeping the stream alive.
+  const source = new Observable(subscriber => {
+    subscriber.next(1);
+    subscriber.next(2);
+    subscriber.next(3);
+    subscriber.complete();
+  });
+
+  const flatteningError = new Error("from the flattening operation");
+  function errorsOnTwo(value) {
+    return new Observable(subscriber => {
+      if (value === 2) {
+        subscriber.error(flatteningError);
+      } else {
+        subscriber.next(value);
+        subscriber.complete();
+      }
+    });
+  }
+
+  const results = [];
+
+  source.flatMap(value => errorsOnTwo(value)
+    .catch(error => {
+      results.push(error);
+      // This empty array converts to an Observable which automatically
+      // completes.
+      return [];
+    })
+  ).subscribe({
+    next: value => results.push(value),
+    complete: () => results.push("complete")
+  });
+
+  assert_array_equals(results, [1, flatteningError, 3, "complete"]);
+}, "catch(): CatchHandler can return an empty iterable");
+
+promise_test(async () => {
+  const sourceError = new Error("from the source");
+  const source = new Observable(subscriber => {
+    subscriber.next(1);
+    subscriber.next(2);
+    subscriber.error(sourceError);
+  });
+
+  const caughtObservable = source.catch(error => {
+    assert_equals(error, sourceError);
+    return Promise.resolve(error.message);
+  });
+
+  const results = await caughtObservable.toArray();
+
+  assert_array_equals(results, [1, 2, "from the source"]);
+}, "catch(): CatchHandler can return a Promise");
+
+promise_test(async () => {
+  const source = new Observable(subscriber => {
+    subscriber.next(1);
+    subscriber.next(2);
+    subscriber.error(new Error('from the source'));
+  });
+
+  const caughtObservable = source.catch(async function* (error) {
+    assert_true(error instanceof Error);
+    assert_equals(error.message, 'from the source');
+    yield 3;
+  });
+
+  const results = await caughtObservable.toArray();
+
+  assert_array_equals(results, [1, 2, 3], 'catch(): should handle returning an observable');
+}, 'catch(): should handle returning an async iterable');
+
+test(() => {
+  const sourceError = new Error("from the source");
+  const source = new Observable(subscriber => {
+    subscriber.next(1);
+    subscriber.next(2);
+    subscriber.error(sourceError);
+  });
+
+  const caughtObservable = source.catch(error => {
+    assert_equals(error, sourceError);
+    // Primitive values like this are not convertible to an Observable, via the
+    // `from()` semantics.
+    return 3;
+  });
+
+  const results = [];
+
+  caughtObservable.subscribe({
+    next: value => results.push(value),
+    error: error => {
+      assert_true(error instanceof TypeError);
+      results.push("TypeError");
+    },
+    complete: () => results.push("complete"),
+  });
+
+  assert_array_equals(results, [1, 2, "TypeError"]);
+}, "catch(): CatchHandler emits an error if the value returned is not " +
+   "convertible to an Observable");
+
+test(() => {
+  const source = new Observable(subscriber => {
+    susbcriber.error(new Error("from the source"));
+  });
+
+  const results = [];
+
+  const innerSubscriptionError = new Error("CatchHandler subscription error");
+  const catchObservable = source.catch(() => {
+    results.push('CatchHandler invoked');
+    return new Observable(subscriber => {
+      throw innerSubscriptionError;
+    });
+  });
+
+  catchObservable.subscribe({
+    error: e => {
+      results.push(e);
+    }
+  });
+
+  assert_array_equals(results, ['CatchHandler invoked', innerSubscriptionError]);
+}, "catch(): CatchHandler returns an Observable that throws immediately on " +
+   "subscription");
+
+// This test asserts that the relationship between (a) the AbortSignal passed
+// into `subscribe()` and (b) the AbortSignal associated with the Observable
+// returned from `catch()`'s CatchHandler is not a "dependent" relationship.
+// This is important because Observables have moved away from the "dependent
+// abort signal" infrastructure in https://github.com/WICG/observable/pull/154,
+// and this test asserts so.
+//
+// Here are all of the associated Observables and signals in this test:
+// 1. Raw outer signal passed into `subscribe()`
+// 2. catchObservable's inner Subscriber's signal
+//    a. Per the above PR, and Subscriber's initialization logic [1], this
+//       signal is set to abort in response to (1)'s abort algorithms. This
+//       means its "abort" event gets fired before (1)'s.
+// 3. Inner CatchHandler-returned Observable's Subscriber's signal
+//    a. Also per [1], this is set to abort in response to (2)'s abort
+//       algorithms, since we subscribe to this "inner Observable" with (2)'s
+//       signal as the `SubscribeOptions#signal`.
+//
+// (1), (2), and (3) above all form an abort chain:
+// (1) --> (2) --> (3)
+//
+// …such that when (1) aborts, its abort algorithms immediately abort (2),
+// whose abort algorithms immediately abort (3). Finally on the way back up the
+// chain, (3)'s `abort` event is fired, (2)'s `abort` event is fired, and then
+// (1)'s `abort` event is fired. This ordering of abort events is what this test
+// ensures.
+//
+// [1]: https://wicg.github.io/observable/#ref-for-abortsignal-add
+test(() => {
+  const results = [];
+  const source = new Observable(subscriber =>
+      susbcriber.error(new Error("from the source")));
+
+  const catchObservable = source.catch(() => {
+    return new Observable(subscriber => {
+      subscriber.addTeardown(() => results.push('inner teardown'));
+      subscriber.signal.addEventListener('abort',
+          e => results.push('inner signal abort'));
+
+      // No values or completion. We'll just wait for the subscriber to abort
+      // its subscription.
+    });
+  });
+
+  const ac = new AbortController();
+  ac.signal.addEventListener('abort', e => results.push('outer signal abort'));
+  catchObservable.subscribe({}, {signal: ac.signal});
+  ac.abort();
+
+  assert_array_equals(results, ['inner signal abort', 'inner teardown', 'outer signal abort']);
+}, "catch(): Abort order between outer AbortSignal and inner CatchHandler subscriber's AbortSignal");
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		These tests were all copied from WPT https://wpt.fyi/results/dom/observable/tentative?label=experimental&label=master&aligned

		Commit hash 39a3d27eb95f19313755d0098bc637ebbb96dfc5