test(docs-infra): draft to ensure that everything is setup properly t…

…o run tests

against the Rx-JS examples

Addresses #28017

aio/content/examples/jasmine.json

@@ -0,0 +1,13 @@
+{
+  "spec_dir": "content/examples",
+  "spec_files": [
+    "observables/dist/out-tsc/src/**/*[sP]pec.js",
+    "practical-observable-usage/dist/out-tsc/src/**/*[sP]pec.js",
+    "rx-library/dist/out-tsc/content/examples/rx-library/src/**/*[sP]pec.js"
+
+  ],
+  "stopSpecOnExpectationFailure": true,
+  "random": false,
+  "reporter": "jasmine-spec-reporter",
+  "helpers": ["spec/helpers/reporter.js"]
+}

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

@@ -0,0 +1,11 @@
+
+import { sequence } from './creating';
+import { cold } from 'jasmine-marbles';
+
+describe('observables', () => {
+  it('should create an observable using the constructor', () => {
+    const source = sequence;
+    const expected = cold('(abc|)', { a: 1, b: 2, c: 3 });
+    expect(source).toBeObservable(expected);
+  });
+});

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

@@ -53,14 +53,21 @@ function fromEvent(target, eventName) {
 
 // #docregion fromevent_use
 
-const ESC_KEY = 27;
-const nameInput = document.getElementById('name') as HTMLInputElement;
-
-const subscription = fromEvent(nameInput, 'keydown')
-  .subscribe((e: KeyboardEvent) => {
-    if (e.keyCode === ESC_KEY) {
-      nameInput.value = '';
-    }
-  });
+// TODO: Find solution for document when running tests without a browser
+// The below code is part of the above fromEvent function.
+
+// const ESC_KEY = 27;
+// const nameInput = document.getElementById('name') as HTMLInputElement;
+
+// const subscription = fromEvent(nameInput, 'keydown')
+//   .subscribe((e: KeyboardEvent) => {
+//     if (e.keyCode === ESC_KEY) {
+//       nameInput.value = '';
+//     }
+//   });
 
 // #enddocregion fromevent_use
+
+export {
+  sequence
+};

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

@@ -1,5 +1,5 @@
 import { Observable } from 'rxjs';
-
+// TODO: Find solution for document when running tests without a browser
 // #docregion
 
 // Create an Observable that will start listening to geolocation updates
@@ -30,3 +30,7 @@ const locationsSubscription = locations.subscribe({
 // Stop listening for location after 10 seconds
 setTimeout(() => { locationsSubscription.unsubscribe(); }, 10000);
 // #enddocregion
+
+export {
+  locations
+}

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

@@ -0,0 +1,20 @@
+import { sequence, multicastSequence } from './multicasting';
+import { toArray } from 'rxjs/operators';
+
+describe('sequence', () => {
+  it('should create an observable and emit in sequence', (doneFn: DoneFn) => {
+    sequence.pipe(toArray()).subscribe((output: Array<number>) => {
+      expect(output).toEqual([1, 2, 3]);
+      doneFn();
+    });
+  });
+});
+
+describe('multicast', () => {
+  it('should create an observable and multicast the emissions', (doneFn: DoneFn) => {
+    multicastSequence.pipe(toArray()).subscribe((output: Array<number>) => {
+      expect(output).toEqual([1, 2, 3]);
+      doneFn();
+    });
+  });
+});

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

@@ -1,4 +1,3 @@
-
 import { Observable } from 'rxjs';
 
 // #docregion delay_sequence
@@ -23,17 +22,23 @@ function sequenceSubscriber(observer) {
   doSequence(seq, 0);
 
   // Unsubscribe should clear the timeout to stop execution
-  return {unsubscribe() {
-    clearTimeout(timeoutId);
-  }};
+  return {
+    unsubscribe() {
+      clearTimeout(timeoutId);
+    }
+  };
 }
 
 // Create a new Observable that will deliver the above sequence
 const sequence = new Observable(sequenceSubscriber);
 
 sequence.subscribe({
-  next(num) { console.log(num); },
-  complete() { console.log('Finished sequence'); }
+  next(num) {
+    console.log(num);
+  },
+  complete() {
+    console.log('Finished sequence');
+  }
 });
 
 // Logs:
@@ -48,15 +53,23 @@ sequence.subscribe({
 
 // Subscribe starts the clock, and will emit after 1 second
 sequence.subscribe({
-  next(num) { console.log('1st subscribe: ' + num); },
-  complete() { console.log('1st sequence finished.'); }
+  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(() => {
   sequence.subscribe({
-    next(num) { console.log('2nd subscribe: ' + num); },
-    complete() { console.log('2nd sequence finished.'); }
+    next(num) {
+      console.log('2nd subscribe: ' + num);
+    },
+    complete() {
+      console.log('2nd sequence finished.');
+    }
   });
 }, 500);
 
@@ -84,20 +97,24 @@ 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) {
-      timeoutId = doSequence({
-        next(val) {
-          // Iterate through observers and notify all subscriptions
-          observers.forEach(obs => obs.next(val));
+      timeoutId = doSequence(
+        {
+          next(val) {
+            // Iterate through observers and notify all subscriptions
+            observers.forEach(obs => obs.next(val));
+          },
+          complete() {
+            // Notify all complete callbacks
+            observers.slice(0).forEach(obs => obs.complete());
+          }
         },
-        complete() {
-          // Notify all complete callbacks
-          observers.slice(0).forEach(obs => obs.complete());
-        }
-      }, seq, 0);
+        seq,
+        0
+      );
     }
 
     return {
@@ -153,3 +170,5 @@ setTimeout(() => {
 // (at 3 seconds): 2nd sequence finished
 
 // #enddocregion multicast_sequence
+
+export { sequence, multicastSequence, multicastSequenceSubscriber };

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

@@ -0,0 +1,11 @@
+import { myObservable  } from './subscribing';
+import { toArray } from 'rxjs/operators';
+
+describe('subscribing', () => {
+  it('should subscribe and emit', (doneFn: DoneFn) => {
+    myObservable.pipe(toArray()).subscribe((output: Array<number>) => {
+      expect(output).toEqual([1, 2, 3]);
+      doneFn();
+    });
+  });
+});

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

@@ -1,5 +1,5 @@
 
-import { Observable, of } from 'rxjs';
+import { of } from 'rxjs';
 
 // #docregion observer
 
@@ -30,3 +30,7 @@ myObservable.subscribe(
   () => console.log('Observer got a complete notification')
 );
 // #enddocregion sub_fn
+
+export {
+  myObservable
+};

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

@@ -0,0 +1,31 @@
+import { backoff } from './backoff';
+import { map } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
+describe('observables', () => {
+  it('should retryWhen 3 times', (doneFn: DoneFn) => {
+    const obs = new Subject();
+    obs
+      .pipe(
+        map(val => {
+          if (val === 4) {
+            throw val;
+          }
+          return val;
+        }),
+        backoff(3, 250)
+      )
+      .subscribe(a => {
+        // should not emit 4
+        expect(a).not.toEqual(4);
+        if (a === 3) {
+          doneFn();
+        }
+      });
+
+    obs.next(1);
+    obs.next(2);
+    obs.next(3);
+    obs.next(4);
+  });
+});

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

@@ -14,10 +14,14 @@ function backoff(maxTries, ms) {
  );
 }
 
-ajax('/api/endpoint')
-  .pipe(backoff(3, 250))
-  .subscribe(data => handleData(data));
+// TODO: When running the unit tests, the below ajax code fails, because the endpoint does not exist. 
+// Need to fix this.
+// ajax('/api/endpoint')
+//   .pipe(backoff(3, 250))
+//   .subscribe(data => handleData(data));
 
-function handleData(data) {
-  // ...
-}
+// function handleData(data) {
+//   // ...
+// }
+
+export { backoff };

aio/content/examples/practical-observable-usage/src/typeahead-spec.ts

@@ -0,0 +1,20 @@
+import { document, typeahead } from './typeahead';
+
+fdescribe('typeahead', () => {
+  it('should listen to input changes', (doneFn: DoneFn) => {
+    typeahead.subscribe((data) => {
+      expect(data).toBe('Hello');
+      doneFn();
+    });
+
+    const input = document.getElementById('search-box');
+    const event = document.createEvent('Event');
+    input.value = 'Hello';
+    event.initEvent(
+      'input',
+      true,
+      true
+    );
+    input.dispatchEvent(event);
+  });
+});

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

@@ -1,8 +1,17 @@
+// This jsdom section is only requred to make sure that the code is testable.
+// It is not part of the docregion that is displayed on the website.
+import * as jsdom from 'jsdom';
+
+const { JSDOM } = jsdom;
+const dom = new JSDOM(`<html><body><input type='text' id='search-box'></body></html`);
+const document = dom.window.document;
+
+// #docregion typeahead
+
 import { fromEvent } from 'rxjs';
 import { ajax } from 'rxjs/ajax';
 import { debounceTime, distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators';
 
-
 const searchBox = document.getElementById('search-box');
 
 const typeahead = fromEvent(searchBox, 'input').pipe(
@@ -16,3 +25,7 @@ const typeahead = fromEvent(searchBox, 'input').pipe(
 typeahead.subscribe(data => {
  // Handle the data from the API
 });
+
+// #enddocregion typeahead
+
+export { typeahead, document, dom, ajax };

aio/content/examples/rx-library/src/error-handling-spec.ts

@@ -0,0 +1,10 @@
+import { apiData } from './error-handling';
+import { cold } from 'jasmine-marbles';
+
+describe('error-handling', () => {
+  it('should return an empty array', () => {
+      const source = apiData;
+      const expected = cold('(a|)', { a: [] });
+      expect(source).toBeObservable(expected);
+  });
+});

aio/content/examples/rx-library/src/error-handling.ts

@@ -7,6 +7,7 @@ import { ajax } from 'rxjs/ajax';
 import { map, catchError } from 'rxjs/operators';
 // Return "response" from the API. If an error happens,
 // return an empty array.
+
 const apiData = ajax('/api/data').pipe(
   map(res => {
     if (!res.response) {
@@ -23,3 +24,5 @@ apiData.subscribe({
 });
 
 // #enddocregion
+
+export { apiData };

aio/content/examples/rx-library/src/operators-spec.ts

@@ -0,0 +1,10 @@
+import { squaredNums } from './operators';
+import { cold } from 'jasmine-marbles';
+
+describe('squaredNums - operators.ts', () => {
+  it('should return square odds', () => {
+    const source = squaredNums;
+    const expected = cold('(abc|)', { a: 1, b: 4, c: 9 });
+    expect(source).toBeObservable(expected);
+  });
+});

aio/content/examples/rx-library/src/operators.1-spec.ts

@@ -0,0 +1,10 @@
+import { squareOdd } from './operators.1';
+import { cold } from 'jasmine-marbles';
+
+describe('squareOdd - operators.1.ts', () => {
+  it('should return square odds', () => {
+    const source = squareOdd;
+    const expected = cold('(abc|)', { a: 1, b: 9, c: 25 });
+    expect(source).toBeObservable(expected);
+  });
+});

aio/content/examples/rx-library/src/operators.1.ts

@@ -20,4 +20,4 @@ squareOdd.subscribe(x => console.log(x));
 
 // #enddocregion
 
-
+export { squareOdd };

aio/content/examples/rx-library/src/operators.2-spec.ts

@@ -0,0 +1,10 @@
+import { squareOdd } from './operators.2';
+import { cold } from 'jasmine-marbles';
+
+describe('squareOdd - operators.2.ts', () => {
+  it('should return square odds', () => {
+    const source = squareOdd;
+    const expected = cold('(abc|)', { a: 1, b: 9, c: 25 });
+    expect(source).toBeObservable(expected);
+  });
+});

aio/content/examples/rx-library/src/operators.2.ts

@@ -14,3 +14,5 @@ const squareOdd = of(1, 2, 3, 4, 5)
 squareOdd.subscribe(x => console.log(x));
 
 // #enddocregion
+
+export { squareOdd };