test(docs-infra): add unit tests for rxjs examples (#34190)

This commit adds missing unit tests for all rxjs examples from the docs.

Closes #28017

PR Close #34190

aio/content/examples/observables-in-angular/src/main.ts

@@ -1,3 +1,4 @@
+// TODO: Add unit tests for this file.
 // tslint:disable: no-output-native
 // #docregion
 import { Component, Output, OnInit, EventEmitter, NgModule } from '@angular/core';

aio/content/examples/observables/example-config.json

@@ -2,7 +2,11 @@
   "tests": [
     {
       "cmd": "yarn",
-      "args": [ "tsc", "--project", "./tsconfig.app.json" ]
+      "args": ["tsc", "--project", "tsconfig.spec.json", "--module", "commonjs"]
+    },
+    {
+      "cmd": "yarn",
+      "args": ["jasmine", "out-tsc/**/*.spec.js"]
     }
   ]
 }

aio/content/examples/observables/src/creating.spec.ts

@@ -0,0 +1,55 @@
+import { docRegionFromEvent, docRegionSubscriber } from './creating';
+
+describe('observables', () => {
+  it('should create an observable using the constructor', () => {
+    const console = {log: jasmine.createSpy('log')};
+    docRegionSubscriber(console);
+    expect(console.log).toHaveBeenCalledTimes(4);
+    expect(console.log.calls.allArgs()).toEqual([
+      [1],
+      [2],
+      [3],
+      ['Finished sequence'],
+    ]);
+  });
+
+  it('should listen to input changes', () => {
+    let triggerInputChange;
+    const input = {
+      value: 'Test',
+      addEventListener: jasmine
+        .createSpy('addEvent')
+        .and.callFake((eventName: string, cb: (e) => void) => {
+          if (eventName === 'keydown') {
+            triggerInputChange = cb;
+          }
+        }),
+      removeEventListener: jasmine.createSpy('removeEventListener'),
+    };
+
+    const document = { getElementById: () => input };
+    docRegionFromEvent(document);
+    triggerInputChange({keyCode: 65});
+    expect(input.value).toBe('Test');
+
+    triggerInputChange({keyCode: 27});
+    expect(input.value).toBe('');
+  });
+
+  it('should call removeEventListener when unsubscribing', (doneFn: DoneFn) => {
+    const input = {
+      addEventListener: jasmine.createSpy('addEvent'),
+      removeEventListener: jasmine
+        .createSpy('removeEvent')
+        .and.callFake((eventName: string, cb: (e) => void) => {
+          if (eventName === 'keydown') {
+            doneFn();
+          }
+        })
+    };
+
+    const document = { getElementById: () => input };
+    const subscription = docRegionFromEvent(document);
+    subscription.unsubscribe();
+  });
+});

aio/content/examples/observables/src/creating.ts

@@ -1,10 +1,11 @@
+// #docplaster
 
 import { Observable } from 'rxjs';
 
-// #docregion subscriber
+export function docRegionSubscriber(console) {
-
+  // #docregion subscriber
-// This function runs when subscribe() is called
+  // This function runs when subscribe() is called
-function sequenceSubscriber(observer) {
+  function sequenceSubscriber(observer) {
     // synchronously deliver 1, 2, and 3, then complete
     observer.next(1);
     observer.next(2);
@@ -14,24 +15,24 @@ function sequenceSubscriber(observer) {
     // unsubscribe function doesn't need to do anything in this
     // because values are delivered synchronously
     return {unsubscribe() {}};
-}
+  }
 
-// Create a new Observable that will deliver the above sequence
+  // Create a new Observable that will deliver the above sequence
-const sequence = new Observable(sequenceSubscriber);
+  const sequence = new Observable(sequenceSubscriber);
 
-// execute the Observable and print the result of each notification
+  // execute the Observable and print the result of each notification
-sequence.subscribe({
+  sequence.subscribe({
     next(num) { console.log(num); },
     complete() { console.log('Finished sequence'); }
-});
+  });
 
-// Logs:
+  // Logs:
-// 1
+  // 1
-// 2
+  // 2
-// 3
+  // 3
-// Finished sequence
+  // Finished sequence
-
+  // #enddocregion subscriber
-// #enddocregion subscriber
+}
 
 // #docregion fromevent
 
@@ -51,16 +52,18 @@ function fromEvent(target, eventName) {
 
 // #enddocregion fromevent
 
-// #docregion fromevent_use
+export function docRegionFromEvent(document) {
+  // #docregion fromevent_use
 
-const ESC_KEY = 27;
+  const ESC_KEY = 27;
-const nameInput = document.getElementById('name') as HTMLInputElement;
+  const nameInput = document.getElementById('name') as HTMLInputElement;
 
-const subscription = fromEvent(nameInput, 'keydown')
+  const subscription = fromEvent(nameInput, 'keydown').subscribe((e: KeyboardEvent) => {
-  .subscribe((e: KeyboardEvent) => {
     if (e.keyCode === ESC_KEY) {
       nameInput.value = '';
     }
   });
+  // #enddocregion fromevent_use
+  return subscription;
+}
 
-// #enddocregion fromevent_use

aio/content/examples/observables/src/geolocation.ts

@@ -1,5 +1,5 @@
+// TODO: Add unit tests for this file.
 import { Observable } from 'rxjs';
-
 // #docregion
 
 // Create an Observable that will start listening to geolocation updates

aio/content/examples/observables/src/multicasting.spec.ts

@@ -0,0 +1,48 @@
+import { docRegionDelaySequence, docRegionMulticastSequence } from './multicasting';
+
+describe('multicasting', () => {
+  let console;
+  beforeEach(() => {
+    jasmine.clock().install();
+    console = {log: jasmine.createSpy('log')};
+  });
+
+  afterEach(() => {
+    jasmine.clock().uninstall();
+  });
+
+  it('should create an observable and emit in sequence', () => {
+    docRegionDelaySequence(console);
+    jasmine.clock().tick(10000);
+    expect(console.log).toHaveBeenCalledTimes(12);
+    expect(console.log.calls.allArgs()).toEqual([
+      [1],
+      ['1st subscribe: 1'],
+      ['2nd subscribe: 1'],
+      [2],
+      ['1st subscribe: 2'],
+      ['2nd subscribe: 2'],
+      [3],
+      ['Finished sequence'],
+      ['1st subscribe: 3'],
+      ['1st sequence finished.'],
+      ['2nd subscribe: 3'],
+      ['2nd sequence finished.']
+    ]);
+  });
+
+  it('should create an observable and multicast the emissions', () => {
+    docRegionMulticastSequence(console);
+    jasmine.clock().tick(10000);
+    expect(console.log).toHaveBeenCalledTimes(7);
+    expect(console.log.calls.allArgs()).toEqual([
+      ['1st subscribe: 1'],
+      ['1st subscribe: 2'],
+      ['2nd subscribe: 2'],
+      ['1st subscribe: 3'],
+      ['2nd subscribe: 3'],
+      ['1st sequence finished.'],
+      ['2nd sequence finished.']
+    ]);
+  });
+});

aio/content/examples/observables/src/multicasting.ts

@@ -1,9 +1,10 @@
+// #docplaster
 
 import { Observable } from 'rxjs';
 
-// #docregion delay_sequence
+export function docRegionDelaySequence(console) {
-
+  // #docregion delay_sequence
-function sequenceSubscriber(observer) {
+  function sequenceSubscriber(observer) {
     const seq = [1, 2, 3];
     let timeoutId;
 
@@ -23,58 +24,61 @@ function sequenceSubscriber(observer) {
     doInSequence(seq, 0);
 
     // Unsubscribe should clear the timeout to stop execution
-  return {unsubscribe() {
+    return {
+      unsubscribe() {
         clearTimeout(timeoutId);
-  }};
+      }
-}
+    };
+  }
 
-// Create a new Observable that will deliver the above sequence
+  // Create a new Observable that will deliver the above sequence
-const sequence = new Observable(sequenceSubscriber);
+  const sequence = new Observable(sequenceSubscriber);
 
-sequence.subscribe({
+  sequence.subscribe({
     next(num) { console.log(num); },
     complete() { console.log('Finished sequence'); }
-});
+  });
 
-// Logs:
+  // Logs:
-// (at 1 second): 1
+  // (at 1 second): 1
-// (at 2 seconds): 2
+  // (at 2 seconds): 2
-// (at 3 seconds): 3
+  // (at 3 seconds): 3
-// (at 3 seconds): Finished sequence
+  // (at 3 seconds): Finished sequence
 
-// #enddocregion delay_sequence
+  // #enddocregion delay_sequence
 
-// #docregion subscribe_twice
+  // #docregion subscribe_twice
 
-// Subscribe starts the clock, and will emit after 1 second
+  // Subscribe starts the clock, and will emit after 1 second
-sequence.subscribe({
+  sequence.subscribe({
     next(num) { console.log('1st subscribe: ' + num); },
     complete() { console.log('1st sequence finished.'); }
-});
+  });
 
-// After 1/2 second, subscribe again.
+  // After 1/2 second, subscribe again.
-setTimeout(() => {
+  setTimeout(() => {
     sequence.subscribe({
       next(num) { console.log('2nd subscribe: ' + num); },
       complete() { console.log('2nd sequence finished.'); }
     });
-}, 500);
+  }, 500);
 
-// Logs:
+  // Logs:
-// (at 1 second): 1st subscribe: 1
+  // (at 1 second): 1st subscribe: 1
-// (at 1.5 seconds): 2nd subscribe: 1
+  // (at 1.5 seconds): 2nd subscribe: 1
-// (at 2 seconds): 1st subscribe: 2
+  // (at 2 seconds): 1st subscribe: 2
-// (at 2.5 seconds): 2nd subscribe: 2
+  // (at 2.5 seconds): 2nd subscribe: 2
-// (at 3 seconds): 1st subscribe: 3
+  // (at 3 seconds): 1st subscribe: 3
-// (at 3 seconds): 1st sequence finished
+  // (at 3 seconds): 1st sequence finished
-// (at 3.5 seconds): 2nd subscribe: 3
+  // (at 3.5 seconds): 2nd subscribe: 3
-// (at 3.5 seconds): 2nd sequence finished
+  // (at 3.5 seconds): 2nd sequence finished
 
-// #enddocregion subscribe_twice
+  // #enddocregion subscribe_twice
+}
 
-// #docregion multicast_sequence
+export function docRegionMulticastSequence(console) {
-
+  // #docregion multicast_sequence
-function multicastSequenceSubscriber() {
+  function multicastSequenceSubscriber() {
     const seq = [1, 2, 3];
     // Keep track of each observer (one for every active subscription)
     const observers = [];
@@ -84,7 +88,7 @@ function multicastSequenceSubscriber() {
 
     // Return the subscriber function (runs when subscribe()
     // function is invoked)
-  return (observer) => {
+    return observer => {
       observers.push(observer);
       // When this is the first subscription, start the sequence
       if (observers.length === 1) {
@@ -111,11 +115,11 @@ function multicastSequenceSubscriber() {
         }
       };
     };
-}
+  }
 
-// Run through an array of numbers, emitting one value
+  // Run through an array of numbers, emitting one value
-// per second until it gets to the end of the array.
+  // per second until it gets to the end of the array.
-function doSequence(observer, arr, idx) {
+  function doSequence(observer, arr, idx) {
     return setTimeout(() => {
       observer.next(arr[idx]);
       if (idx === arr.length - 1) {
@@ -124,32 +128,33 @@ function doSequence(observer, arr, idx) {
         doSequence(observer, arr, ++idx);
       }
     }, 1000);
-}
+  }
 
-// Create a new Observable that will deliver the above sequence
+  // Create a new Observable that will deliver the above sequence
-const multicastSequence = new Observable(multicastSequenceSubscriber());
+  const multicastSequence = new Observable(multicastSequenceSubscriber());
 
-// Subscribe starts the clock, and begins to emit after 1 second
+  // Subscribe starts the clock, and begins to emit after 1 second
-multicastSequence.subscribe({
+  multicastSequence.subscribe({
     next(num) { console.log('1st subscribe: ' + num); },
     complete() { console.log('1st sequence finished.'); }
-});
+  });
 
-// After 1 1/2 seconds, subscribe again (should "miss" the first value).
+  // After 1 1/2 seconds, subscribe again (should "miss" the first value).
-setTimeout(() => {
+  setTimeout(() => {
     multicastSequence.subscribe({
       next(num) { console.log('2nd subscribe: ' + num); },
       complete() { console.log('2nd sequence finished.'); }
     });
-}, 1500);
+  }, 1500);
 
-// Logs:
+  // Logs:
-// (at 1 second): 1st subscribe: 1
+  // (at 1 second): 1st subscribe: 1
-// (at 2 seconds): 1st subscribe: 2
+  // (at 2 seconds): 1st subscribe: 2
-// (at 2 seconds): 2nd subscribe: 2
+  // (at 2 seconds): 2nd subscribe: 2
-// (at 3 seconds): 1st subscribe: 3
+  // (at 3 seconds): 1st subscribe: 3
-// (at 3 seconds): 1st sequence finished
+  // (at 3 seconds): 1st sequence finished
-// (at 3 seconds): 2nd subscribe: 3
+  // (at 3 seconds): 2nd subscribe: 3
-// (at 3 seconds): 2nd sequence finished
+  // (at 3 seconds): 2nd sequence finished
 
-// #enddocregion multicast_sequence
+  // #enddocregion multicast_sequence
+}

aio/content/examples/observables/src/subscribing.spec.ts

@@ -0,0 +1,19 @@
+import { docRegionObserver } from './subscribing';
+
+describe('subscribing', () => {
+  it('should subscribe and emit', () => {
+    const console = {log: jasmine.createSpy('log')};
+    docRegionObserver(console);
+    expect(console.log).toHaveBeenCalledTimes(8);
+    expect(console.log.calls.allArgs()).toEqual([
+      ['Observer got a next value: 1'],
+      ['Observer got a next value: 2'],
+      ['Observer got a next value: 3'],
+      ['Observer got a complete notification'],
+      ['Observer got a next value: 1'],
+      ['Observer got a next value: 2'],
+      ['Observer got a next value: 3'],
+      ['Observer got a complete notification'],
+    ]);
+  });
+});

aio/content/examples/observables/src/subscribing.ts

@@ -1,32 +1,35 @@
+// #docplaster
+import { of } from 'rxjs';
 
-import { Observable, of } from 'rxjs';
+export function docRegionObserver(console) {
+  // #docregion observer
 
-// #docregion observer
+  // Create simple observable that emits three values
+  const myObservable = of(1, 2, 3);
 
-// Create simple observable that emits three values
+  // Create observer object
-const myObservable = of(1, 2, 3);
+  const myObserver = {
-
-// Create observer object
-const myObserver = {
     next: x => console.log('Observer got a next value: ' + x),
     error: err => console.error('Observer got an error: ' + err),
     complete: () => console.log('Observer got a complete notification'),
-};
+  };
 
-// Execute with the observer object
+  // Execute with the observer object
-myObservable.subscribe(myObserver);
+  myObservable.subscribe(myObserver);
-// Logs:
-// Observer got a next value: 1
-// Observer got a next value: 2
-// Observer got a next value: 3
-// Observer got a complete notification
 
-// #enddocregion observer
+  // Logs:
+  // Observer got a next value: 1
+  // Observer got a next value: 2
+  // Observer got a next value: 3
+  // Observer got a complete notification
 
-// #docregion sub_fn
+  // #enddocregion observer
-myObservable.subscribe(
+
+  // #docregion sub_fn
+  myObservable.subscribe(
     x => console.log('Observer got a next value: ' + x),
     err => console.error('Observer got an error: ' + err),
     () => console.log('Observer got a complete notification')
-);
+  );
-// #enddocregion sub_fn
+  // #enddocregion sub_fn
+}

aio/content/examples/practical-observable-usage/example-config.json

@@ -2,7 +2,11 @@
   "tests": [
     {
       "cmd": "yarn",
-      "args": [ "tsc", "--project", "./tsconfig.app.json" ]
+      "args": ["tsc", "--project", "tsconfig.spec.json", "--module", "commonjs"]
+    },
+    {
+      "cmd": "yarn",
+      "args": ["jasmine", "out-tsc/**/*.spec.js"]
     }
   ]
 }

aio/content/examples/practical-observable-usage/src/backoff.ts

@@ -1,4 +1,4 @@
-
+// TODO: Add unit tests for this file.
 import { pipe, range, timer, zip } from 'rxjs';
 import { ajax } from 'rxjs/ajax';
 import { retryWhen, map, mergeMap } from 'rxjs/operators';