sonukapoor · Aug 22, 2020 · Aug 22, 2020 · Aug 27, 2020
diff --git a/aio/content/examples/comparing-observables/e2e/src/app.e2e-spec.ts b/aio/content/examples/comparing-observables/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,9 @@
+/*
+ * This example project is special in that it is not a cli app. To run tests appropriate for this
+ * project, the test command is overwritten in `aio/content/examples/observables/example-config.json`.
+ *
+ * This is an empty placeholder file to ensure that `aio/tools/examples/run-example-e2e.js` runs
+ * tests for this project.
+ *
+ * TODO: Fix our infrastructure/tooling, so that this hack is not necessary.
+ */
diff --git a/aio/content/examples/comparing-observables/example-config.json b/aio/content/examples/comparing-observables/example-config.json
@@ -0,0 +1,12 @@
+{
+  "tests": [
+    {
+      "cmd": "yarn",
+      "args": ["tsc", "--project", "tsconfig.spec.json", "--module", "commonjs"]
+    },
+    {
+      "cmd": "yarn",
+      "args": ["jasmine", "out-tsc/**/*.spec.js"]
+    }
+  ]
+}
diff --git a/aio/content/examples/comparing-observables/src/observables.spec.ts b/aio/content/examples/comparing-observables/src/observables.spec.ts
@@ -0,0 +1,26 @@
+import { docRegionChain, docRegionObservable, docRegionUnsubscribe } from './observables';
+
+describe('observables', () => {
+  it('should print 2', (doneFn: DoneFn) => {
+    const consoleLogSpy = spyOn(console, 'log');
+    const observable = docRegionObservable(console);
+    observable.subscribe(() => {
+      expect(consoleLogSpy).toHaveBeenCalledTimes(1);
+      expect(consoleLogSpy).toHaveBeenCalledWith(2);
+      doneFn();
+    });
+  });
+
+  it('should close the subscription', () => {
+    const subscription = docRegionUnsubscribe();
+    expect(subscription.closed).toBeTruthy();
+  });
+
+  it('should chain an observable', (doneFn: DoneFn) => {
+    const observable = docRegionChain();
+    observable.subscribe(value => {
+      expect(value).toBe(4);
+      doneFn();
+    });
+  });
+});
diff --git a/aio/content/examples/comparing-observables/src/observables.ts b/aio/content/examples/comparing-observables/src/observables.ts
@@ -1,40 +1,72 @@
-import { map } from 'rxjs/operators';
+// #docplaster
+
 import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
-// #docregion observable
+export function docRegionObservable(console: Console) {
+  // #docregion observable
 
-// declare a publishing operation
-const observable = new Observable<number>(observer => {
-  // Subscriber fn...
-});
+  // declare a publishing operation
+  const observable = new Observable<number>(observer => {
+    // Subscriber fn...
+    // #enddocregion observable
+    // The below code is used for unit testing only
+    observer.next(2);
+    // #docregion observable
+  });
 
-// initiate execution
-observable.subscribe(() => {
-  // observer handles notifications
-});
+  // initiate execution
+  observable.subscribe(value => {
+    // observer handles notifications
+    // #enddocregion observable
+    // The below code is used for unit testing only
+    console.log(value);
+    // #docregion observable
+  });
 
-// #enddocregion observable
+  // #enddocregion observable
+  return observable;
+}
 
-// #docregion unsubscribe
+export function docRegionUnsubscribe() {
+  const observable = new Observable<number>(() => {
+    // Subscriber fn...
+  });
+  // #docregion unsubscribe
 
-const subscription = observable.subscribe(() => {
-  // observer handles notifications
-});
+  const subscription = observable.subscribe(() => {
+    // observer handles notifications
+  });
 
-subscription.unsubscribe();
+  subscription.unsubscribe();
 
-// #enddocregion unsubscribe
+  // #enddocregion unsubscribe
+  return subscription;
+}
 
-// #docregion error
+export function docRegionError() {
+  const observable = new Observable<number>(() => {
+    // Subscriber fn...
+  });
 
-observable.subscribe(() => {
-  throw Error('my error');
-});
+  // #docregion error
+  observable.subscribe(() => {
+    throw new Error('my error');
+  });
+  // #enddocregion error
+}
 
-// #enddocregion error
+export function docRegionChain() {
+  let observable = new Observable<number>(observer => {
+    // Subscriber fn...
+    observer.next(2);
+  });
 
-// #docregion chain
+  observable =
+  // #docregion chain
 
-observable.pipe(map(v => 2 * v));
+  observable.pipe(map(v => 2 * v));
 
-// #enddocregion chain
+  // #enddocregion chain
+  return observable;
+}
diff --git a/aio/content/examples/comparing-observables/src/promises.spec.ts b/aio/content/examples/comparing-observables/src/promises.spec.ts
@@ -0,0 +1,23 @@
+import { docRegionError, docRegionPromise } from './promises';
+
+describe('promises', () => {
+  it('should print 2', (doneFn: DoneFn) => {
+    const consoleLogSpy = spyOn(console, 'log');
+    const pr = docRegionPromise(console, 2);
+    pr.then((value) => {
+      expect(consoleLogSpy).toHaveBeenCalledTimes(1);
+      expect(consoleLogSpy).toHaveBeenCalledWith(2);
+      expect(value).toBe(4);
+      doneFn();
+    });
+  });
+
+  it('should throw an error', (doneFn: DoneFn) => {
+    const promise = docRegionError();
+    promise
+      .then(() => {
+        throw new Error('Promise should be rejected.');
+      },
+        () => doneFn());
+  });
+});
diff --git a/aio/content/examples/comparing-observables/src/promises.ts b/aio/content/examples/comparing-observables/src/promises.ts
@@ -1,25 +1,44 @@
-// #docregion promise
-// initiate execution
-const promise = new Promise<number>((resolve, reject) => {
-  // Executer fn...
-});
-
-promise.then(value => {
-  // handle result here
-});
-
-// #enddocregion promise
-
-// #docregion chain
-
-promise.then(v => 2 * v);
-
-// #enddocregion chain
-
-// #docregion error
-
-promise.then(() => {
-  throw Error('my error');
-});
-
-// #enddocregion error
+// #docplaster
+
+export function docRegionPromise(console: Console, inputValue: number) {
+  // #docregion promise
+  // initiate execution
+  let promise = new Promise<number>((resolve, reject) => {
+    // Executer fn...
+    // #enddocregion promise
+    // The below is used in the unit tests.
+    resolve(inputValue);
+    // #docregion promise
+  });
+  // #enddocregion promise
+  promise =
+  // #docregion promise
+  promise.then(value => {
+    // handle result here
+    // #enddocregion promise
+    // The below is used in the unit tests.
+    console.log(value);
+    return value;
+    // #docregion promise
+  });
+  // #enddocregion promise
+  promise =
+  // #docregion chain
+  promise.then(v => 2 * v);
+  // #enddocregion chain
+
+  return promise;
+}
+
+export function docRegionError() {
+  let promise = Promise.resolve();
+  promise =
+  // #docregion error
+
+  promise.then(() => {
+    throw new Error('my error');
+  });
+
+  // #enddocregion error
+  return promise;
+}