test(docs-infra): add unit tests for rx-library examples (#38905)
This commit adds missing unit tests for all rx-library examples from the docs. Closes #28017 PR Close #38905
This commit is contained in:

committed by
Alex Rickabaugh

parent
5ef2c983b9
commit
fd7146cc71
@ -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"]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
46
aio/content/examples/rx-library/src/error-handling.spec.ts
Normal file
46
aio/content/examples/rx-library/src/error-handling.spec.ts
Normal file
@ -0,0 +1,46 @@
|
||||
import { Subject, throwError } from 'rxjs';
|
||||
import { docRegionDefault } from './error-handling';
|
||||
|
||||
describe('error-handling', () => {
|
||||
let mockConsole;
|
||||
let ajaxSubject;
|
||||
let ajax;
|
||||
|
||||
beforeEach(() => {
|
||||
mockConsole = {log: jasmine.createSpy('log')};
|
||||
ajaxSubject = new Subject();
|
||||
ajax = jasmine
|
||||
.createSpy('ajax')
|
||||
.and.callFake((url: string) => ajaxSubject);
|
||||
});
|
||||
|
||||
afterEach(() => ajaxSubject.unsubscribe());
|
||||
|
||||
it('should return the response object', () => {
|
||||
docRegionDefault(mockConsole, ajax);
|
||||
|
||||
ajaxSubject.next({response: {foo: 'bar'}});
|
||||
expect(mockConsole.log.calls.allArgs()).toEqual([
|
||||
['data: ', {foo: 'bar'}]
|
||||
]);
|
||||
});
|
||||
|
||||
it('should return an empty array when using an object without a `response` property', () => {
|
||||
docRegionDefault(mockConsole, ajax);
|
||||
|
||||
ajaxSubject.next({foo: 'bar'});
|
||||
expect(mockConsole.log.calls.allArgs()).toEqual([
|
||||
['data: ', []]
|
||||
]);
|
||||
});
|
||||
|
||||
it('should return an empty array when the ajax observable errors', () => {
|
||||
ajax.and.returnValue(throwError('Test Error'));
|
||||
|
||||
docRegionDefault(mockConsole, ajax);
|
||||
|
||||
expect(mockConsole.log.calls.allArgs()).toEqual([
|
||||
['data: ', []]
|
||||
]);
|
||||
});
|
||||
});
|
@ -1,25 +1,36 @@
|
||||
|
||||
import { of } from 'rxjs';
|
||||
|
||||
// #docplaster
|
||||
/*
|
||||
Because of how the code is merged together using the doc regions,
|
||||
we need to indent the imports with the function below.
|
||||
*/
|
||||
/* tslint:disable:no-shadowed-variable */
|
||||
/* tslint:disable:align */
|
||||
// #docregion
|
||||
|
||||
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) {
|
||||
throw new Error('Value expected!');
|
||||
}
|
||||
return res.response;
|
||||
}),
|
||||
catchError(err => of([]))
|
||||
);
|
||||
|
||||
apiData.subscribe({
|
||||
next(x) { console.log('data: ', x); },
|
||||
error(err) { console.log('errors already caught... will not run'); }
|
||||
});
|
||||
import { of } from 'rxjs';
|
||||
import { ajax } from 'rxjs/ajax';
|
||||
import { map, catchError } from 'rxjs/operators';
|
||||
|
||||
// #enddocregion
|
||||
|
||||
export function docRegionDefault(console, ajax) {
|
||||
// #docregion
|
||||
// Return "response" from the API. If an error happens,
|
||||
// return an empty array.
|
||||
const apiData = ajax('/api/data').pipe(
|
||||
map((res: any) => {
|
||||
if (!res.response) {
|
||||
throw new Error('Value expected!');
|
||||
}
|
||||
return res.response;
|
||||
}),
|
||||
catchError(err => of([]))
|
||||
);
|
||||
|
||||
apiData.subscribe({
|
||||
next(x) { console.log('data: ', x); },
|
||||
error(err) { console.log('errors already caught... will not run'); }
|
||||
});
|
||||
|
||||
// #enddocregion
|
||||
return apiData;
|
||||
}
|
||||
|
14
aio/content/examples/rx-library/src/operators.1.spec.ts
Normal file
14
aio/content/examples/rx-library/src/operators.1.spec.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { docRegionDefault } from './operators.1';
|
||||
|
||||
describe('squareOdd - operators.1.ts', () => {
|
||||
it('should return square odds', () => {
|
||||
const console = {log: jasmine.createSpy('log')};
|
||||
docRegionDefault(console);
|
||||
expect(console.log).toHaveBeenCalledTimes(3);
|
||||
expect(console.log.calls.allArgs()).toEqual([
|
||||
[1],
|
||||
[9],
|
||||
[25],
|
||||
]);
|
||||
});
|
||||
});
|
@ -1,23 +1,30 @@
|
||||
import { of, pipe } from 'rxjs';
|
||||
|
||||
// #docplaster
|
||||
/*
|
||||
Because of how the code is merged together using the doc regions,
|
||||
we need to indent the imports with the function below.
|
||||
*/
|
||||
/* tslint:disable:align */
|
||||
// #docregion
|
||||
|
||||
import { filter, map } from 'rxjs/operators';
|
||||
|
||||
const nums = of(1, 2, 3, 4, 5);
|
||||
|
||||
// Create a function that accepts an Observable.
|
||||
const squareOddVals = pipe(
|
||||
filter((n: number) => n % 2 !== 0),
|
||||
map(n => n * n)
|
||||
);
|
||||
|
||||
// Create an Observable that will run the filter and map functions
|
||||
const squareOdd = squareOddVals(nums);
|
||||
|
||||
// Subscribe to run the combined functions
|
||||
squareOdd.subscribe(x => console.log(x));
|
||||
import { of, pipe } from 'rxjs';
|
||||
import { filter, map } from 'rxjs/operators';
|
||||
|
||||
// #enddocregion
|
||||
|
||||
export function docRegionDefault(console) {
|
||||
// #docregion
|
||||
const nums = of(1, 2, 3, 4, 5);
|
||||
|
||||
// Create a function that accepts an Observable.
|
||||
const squareOddVals = pipe(
|
||||
filter((n: number) => n % 2 !== 0),
|
||||
map(n => n * n)
|
||||
);
|
||||
|
||||
// Create an Observable that will run the filter and map functions
|
||||
const squareOdd = squareOddVals(nums);
|
||||
|
||||
// Subscribe to run the combined functions
|
||||
squareOdd.subscribe(x => console.log(x));
|
||||
|
||||
// #enddocregion
|
||||
}
|
||||
|
14
aio/content/examples/rx-library/src/operators.2.spec.ts
Normal file
14
aio/content/examples/rx-library/src/operators.2.spec.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { docRegionDefault } from './operators.2';
|
||||
|
||||
describe('squareOdd - operators.2.ts', () => {
|
||||
it('should return square odds', () => {
|
||||
const console = {log: jasmine.createSpy('log')};
|
||||
docRegionDefault(console);
|
||||
expect(console.log).toHaveBeenCalledTimes(3);
|
||||
expect(console.log.calls.allArgs()).toEqual([
|
||||
[1],
|
||||
[9],
|
||||
[25],
|
||||
]);
|
||||
});
|
||||
});
|
@ -1,16 +1,25 @@
|
||||
import { Observable, of } from 'rxjs';
|
||||
|
||||
// #docplaster
|
||||
/*
|
||||
Because of how the code is merged together using the doc regions,
|
||||
we need to indent the imports with the function below.
|
||||
*/
|
||||
/* tslint:disable:align */
|
||||
// #docregion
|
||||
|
||||
import { filter, map } from 'rxjs/operators';
|
||||
|
||||
const squareOdd = of(1, 2, 3, 4, 5)
|
||||
.pipe(
|
||||
filter(n => n % 2 !== 0),
|
||||
map(n => n * n)
|
||||
);
|
||||
|
||||
// Subscribe to get values
|
||||
squareOdd.subscribe(x => console.log(x));
|
||||
import { of } from 'rxjs';
|
||||
import { filter, map } from 'rxjs/operators';
|
||||
|
||||
// #enddocregion
|
||||
|
||||
export function docRegionDefault(console) {
|
||||
// #docregion
|
||||
const squareOdd = of(1, 2, 3, 4, 5)
|
||||
.pipe(
|
||||
filter(n => n % 2 !== 0),
|
||||
map(n => n * n)
|
||||
);
|
||||
|
||||
// Subscribe to get values
|
||||
squareOdd.subscribe(x => console.log(x));
|
||||
|
||||
// #enddocregion
|
||||
}
|
||||
|
14
aio/content/examples/rx-library/src/operators.spec.ts
Normal file
14
aio/content/examples/rx-library/src/operators.spec.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { docRegionDefault } from './operators';
|
||||
|
||||
describe('squaredNums - operators.ts', () => {
|
||||
it('should return square odds', () => {
|
||||
const console = {log: jasmine.createSpy('log')};
|
||||
docRegionDefault(console);
|
||||
expect(console.log).toHaveBeenCalledTimes(3);
|
||||
expect(console.log.calls.allArgs()).toEqual([
|
||||
[1],
|
||||
[4],
|
||||
[9],
|
||||
]);
|
||||
});
|
||||
});
|
@ -1,20 +1,28 @@
|
||||
|
||||
import { Observable, of } from 'rxjs';
|
||||
|
||||
// #docplaster
|
||||
/*
|
||||
Because of how the code is merged together using the doc regions,
|
||||
we need to indent the imports with the function below.
|
||||
*/
|
||||
/* tslint:disable:align */
|
||||
// #docregion
|
||||
|
||||
import { map } from 'rxjs/operators';
|
||||
|
||||
const nums = of(1, 2, 3);
|
||||
|
||||
const squareValues = map((val: number) => val * val);
|
||||
const squaredNums = squareValues(nums);
|
||||
|
||||
squaredNums.subscribe(x => console.log(x));
|
||||
|
||||
// Logs
|
||||
// 1
|
||||
// 4
|
||||
// 9
|
||||
import { of } from 'rxjs';
|
||||
import { map } from 'rxjs/operators';
|
||||
|
||||
// #enddocregion
|
||||
|
||||
export function docRegionDefault(console) {
|
||||
// #docregion
|
||||
const nums = of(1, 2, 3);
|
||||
|
||||
const squareValues = map((val: number) => val * val);
|
||||
const squaredNums = squareValues(nums);
|
||||
|
||||
squaredNums.subscribe(x => console.log(x));
|
||||
|
||||
// Logs
|
||||
// 1
|
||||
// 4
|
||||
// 9
|
||||
|
||||
// #enddocregion
|
||||
}
|
||||
|
45
aio/content/examples/rx-library/src/retry-on-error.spec.ts
Normal file
45
aio/content/examples/rx-library/src/retry-on-error.spec.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import { of, throwError } from 'rxjs';
|
||||
import { tap } from 'rxjs/operators';
|
||||
import { docRegionDefault } from './retry-on-error';
|
||||
|
||||
describe('retry-on-error', () => {
|
||||
let mockConsole;
|
||||
beforeEach(() => mockConsole = { log: jasmine.createSpy('log') });
|
||||
|
||||
it('should return the response object', () => {
|
||||
const ajax = () => of({ response: { foo: 'bar' } });
|
||||
|
||||
docRegionDefault(mockConsole, ajax);
|
||||
expect(mockConsole.log.calls.allArgs()).toEqual([
|
||||
['data: ', { foo: 'bar' }],
|
||||
]);
|
||||
});
|
||||
|
||||
it('should return an empty array after 3 retries + 1 initial request', () => {
|
||||
const ajax = () => {
|
||||
return of({ noresponse: true }).pipe(tap(() => mockConsole.log('Subscribed to AJAX')));
|
||||
};
|
||||
|
||||
docRegionDefault(mockConsole, ajax);
|
||||
expect(mockConsole.log.calls.allArgs()).toEqual([
|
||||
['Subscribed to AJAX'],
|
||||
['Error occured.'],
|
||||
['Subscribed to AJAX'],
|
||||
['Error occured.'],
|
||||
['Subscribed to AJAX'],
|
||||
['Error occured.'],
|
||||
['Subscribed to AJAX'],
|
||||
['Error occured.'],
|
||||
['data: ', []],
|
||||
]);
|
||||
});
|
||||
|
||||
it('should return an empty array when the ajax observable throws an error', () => {
|
||||
const ajax = () => throwError('Test Error');
|
||||
|
||||
docRegionDefault(mockConsole, ajax);
|
||||
expect(mockConsole.log.calls.allArgs()).toEqual([
|
||||
['data: ', []],
|
||||
]);
|
||||
});
|
||||
});
|
@ -1,26 +1,35 @@
|
||||
|
||||
import { Observable, of } from 'rxjs';
|
||||
|
||||
|
||||
// #docplaster
|
||||
/*
|
||||
Because of how the code is merged together using the doc regions,
|
||||
we need to indent the imports with the function below.
|
||||
*/
|
||||
/* tslint:disable:no-shadowed-variable */
|
||||
/* tslint:disable:align */
|
||||
// #docregion
|
||||
|
||||
import { ajax } from 'rxjs/ajax';
|
||||
import { map, retry, catchError } from 'rxjs/operators';
|
||||
|
||||
const apiData = ajax('/api/data').pipe(
|
||||
map(res => {
|
||||
if (!res.response) {
|
||||
throw new Error('Value expected!');
|
||||
}
|
||||
return res.response;
|
||||
}),
|
||||
retry(3), // Retry up to 3 times before failing
|
||||
catchError(err => of([]))
|
||||
);
|
||||
|
||||
apiData.subscribe({
|
||||
next(x) { console.log('data: ', x); },
|
||||
error(err) { console.log('errors already caught... will not run'); }
|
||||
});
|
||||
import { of } from 'rxjs';
|
||||
import { ajax } from 'rxjs/ajax';
|
||||
import { map, retry, catchError } from 'rxjs/operators';
|
||||
|
||||
// #enddocregion
|
||||
|
||||
export function docRegionDefault(console, ajax) {
|
||||
// #docregion
|
||||
const apiData = ajax('/api/data').pipe(
|
||||
map((res: any) => {
|
||||
if (!res.response) {
|
||||
console.log('Error occured.');
|
||||
throw new Error('Value expected!');
|
||||
}
|
||||
return res.response;
|
||||
}),
|
||||
retry(3), // Retry up to 3 times before failing
|
||||
catchError(err => of([]))
|
||||
);
|
||||
|
||||
apiData.subscribe({
|
||||
next(x) { console.log('data: ', x); },
|
||||
error(err) { console.log('errors already caught... will not run'); }
|
||||
});
|
||||
|
||||
// #enddocregion
|
||||
}
|
||||
|
@ -0,0 +1,14 @@
|
||||
import { of } from 'rxjs';
|
||||
import { docRegionPromise } from './simple-creation.1';
|
||||
|
||||
describe('simple-creation.1', () => {
|
||||
it('should create a promise from an observable and return an empty object', () => {
|
||||
const console = {log: jasmine.createSpy('log')};
|
||||
const fetch = () => of({foo: 42});
|
||||
docRegionPromise(console, fetch);
|
||||
expect(console.log.calls.allArgs()).toEqual([
|
||||
[{foo: 42}],
|
||||
['Completed'],
|
||||
]);
|
||||
});
|
||||
});
|
24
aio/content/examples/rx-library/src/simple-creation.1.ts
Normal file
24
aio/content/examples/rx-library/src/simple-creation.1.ts
Normal file
@ -0,0 +1,24 @@
|
||||
// #docplaster
|
||||
/*
|
||||
Because of how the code is merged together using the doc regions,
|
||||
we need to indent the imports with the function below.
|
||||
*/
|
||||
/* tslint:disable:align */
|
||||
// #docregion promise
|
||||
import { from } from 'rxjs';
|
||||
|
||||
// #enddocregion promise
|
||||
|
||||
export function docRegionPromise(console, fetch) {
|
||||
// #docregion promise
|
||||
// Create an Observable out of a promise
|
||||
const data = from(fetch('/api/endpoint'));
|
||||
// Subscribe to begin listening for async result
|
||||
data.subscribe({
|
||||
next(response) { console.log(response); },
|
||||
error(err) { console.error('Error: ' + err); },
|
||||
complete() { console.log('Completed'); }
|
||||
});
|
||||
|
||||
// #enddocregion promise
|
||||
}
|
@ -0,0 +1,21 @@
|
||||
import { docRegionInterval } from './simple-creation.2';
|
||||
|
||||
describe('simple-creation.2', () => {
|
||||
beforeEach(() => jasmine.clock().install());
|
||||
afterEach(() => jasmine.clock().uninstall());
|
||||
|
||||
it('should create an Observable that will publish a value on an interval', () => {
|
||||
const console = {log: jasmine.createSpy('log')};
|
||||
const subscription = docRegionInterval(console);
|
||||
jasmine.clock().tick(1000);
|
||||
expect(console.log).toHaveBeenCalledWith('It\'s been 1 seconds since subscribing!');
|
||||
console.log.calls.reset();
|
||||
|
||||
jasmine.clock().tick(999);
|
||||
expect(console.log).not.toHaveBeenCalled();
|
||||
|
||||
jasmine.clock().tick(1);
|
||||
expect(console.log).toHaveBeenCalledWith('It\'s been 2 seconds since subscribing!');
|
||||
subscription.unsubscribe();
|
||||
});
|
||||
});
|
22
aio/content/examples/rx-library/src/simple-creation.2.ts
Normal file
22
aio/content/examples/rx-library/src/simple-creation.2.ts
Normal file
@ -0,0 +1,22 @@
|
||||
// #docplaster
|
||||
/*
|
||||
Because of how the code is merged together using the doc regions,
|
||||
we need to indent the imports with the function below.
|
||||
*/
|
||||
/* tslint:disable:align */
|
||||
// #docregion interval
|
||||
import { interval } from 'rxjs';
|
||||
|
||||
// #enddocregion interval
|
||||
|
||||
export function docRegionInterval(console) {
|
||||
// #docregion interval
|
||||
// Create an Observable that will publish a value on an interval
|
||||
const secondsCounter = interval(1000);
|
||||
// Subscribe to begin publishing values
|
||||
const subscription = secondsCounter.subscribe(n =>
|
||||
console.log(`It's been ${n + 1} seconds since subscribing!`));
|
||||
|
||||
// #enddocregion interval
|
||||
return subscription;
|
||||
}
|
@ -0,0 +1,53 @@
|
||||
import { docRegionEvent } from './simple-creation.3';
|
||||
|
||||
describe('simple-creation.3', () => {
|
||||
let triggerMousemove;
|
||||
let mockConsole;
|
||||
let input;
|
||||
let mockDocument;
|
||||
|
||||
beforeEach(() => {
|
||||
mockConsole = {log: jasmine.createSpy('log')};
|
||||
input = {
|
||||
addEventListener: jasmine
|
||||
.createSpy('addEventListener')
|
||||
.and.callFake((eventName, cb) => {
|
||||
if (eventName === 'mousemove') {
|
||||
triggerMousemove = cb;
|
||||
}
|
||||
}),
|
||||
removeEventListener: jasmine.createSpy('removeEventListener'),
|
||||
};
|
||||
mockDocument = { getElementById: () => input };
|
||||
});
|
||||
|
||||
it('should log coords when subscribing', () => {
|
||||
docRegionEvent(mockConsole, mockDocument);
|
||||
|
||||
expect(mockConsole.log).not.toHaveBeenCalled();
|
||||
|
||||
triggerMousemove({ clientX: 50, clientY: 50 });
|
||||
triggerMousemove({ clientX: 30, clientY: 50 });
|
||||
triggerMousemove({ clientX: 50, clientY: 30 });
|
||||
expect(mockConsole.log).toHaveBeenCalledTimes(3);
|
||||
expect(mockConsole.log.calls.allArgs()).toEqual([
|
||||
['Coords: 50 X 50'],
|
||||
['Coords: 30 X 50'],
|
||||
['Coords: 50 X 30']
|
||||
]);
|
||||
});
|
||||
|
||||
it('should call unsubscribe when clientX and clientY are below < 40 ', () => {
|
||||
docRegionEvent(mockConsole, mockDocument);
|
||||
|
||||
expect(mockConsole.log).not.toHaveBeenCalled();
|
||||
|
||||
// Ensure that we have unsubscribed.
|
||||
triggerMousemove({ clientX: 30, clientY: 30 });
|
||||
expect(input.removeEventListener).toHaveBeenCalledWith('mousemove', triggerMousemove, undefined);
|
||||
mockConsole.log.calls.reset();
|
||||
|
||||
triggerMousemove({ clientX: 50, clientY: 50 });
|
||||
expect(mockConsole.log).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
32
aio/content/examples/rx-library/src/simple-creation.3.ts
Normal file
32
aio/content/examples/rx-library/src/simple-creation.3.ts
Normal file
@ -0,0 +1,32 @@
|
||||
// #docplaster
|
||||
/*
|
||||
Because of how the code is merged together using the doc regions,
|
||||
we need to indent the imports with the function below.
|
||||
*/
|
||||
/* tslint:disable:align */
|
||||
// #docregion event
|
||||
import { fromEvent } from 'rxjs';
|
||||
|
||||
// #enddocregion event
|
||||
|
||||
export function docRegionEvent(console, document) {
|
||||
// #docregion event
|
||||
const el = document.getElementById('my-element');
|
||||
|
||||
// Create an Observable that will publish mouse movements
|
||||
const mouseMoves = fromEvent(el, 'mousemove');
|
||||
|
||||
// Subscribe to start listening for mouse-move events
|
||||
const subscription = mouseMoves.subscribe((evt: MouseEvent) => {
|
||||
// Log coords of mouse movements
|
||||
console.log(`Coords: ${evt.clientX} X ${evt.clientY}`);
|
||||
|
||||
// When the mouse is over the upper-left of the screen,
|
||||
// unsubscribe to stop listening for mouse movements
|
||||
if (evt.clientX < 40 && evt.clientY < 40) {
|
||||
subscription.unsubscribe();
|
||||
}
|
||||
});
|
||||
|
||||
// #enddocregion event
|
||||
}
|
14
aio/content/examples/rx-library/src/simple-creation.spec.ts
Normal file
14
aio/content/examples/rx-library/src/simple-creation.spec.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { of } from 'rxjs';
|
||||
import { docRegionAjax } from './simple-creation';
|
||||
|
||||
describe('ajax', () => {
|
||||
it('should make a request and console log the status and response', () => {
|
||||
const console = {log: jasmine.createSpy('log')};
|
||||
const ajax = jasmine.createSpy('ajax').and.callFake((url: string) => {
|
||||
return of({status: 200, response: 'foo bar'});
|
||||
});
|
||||
|
||||
docRegionAjax(console, ajax);
|
||||
expect(console.log).toHaveBeenCalledWith(200, 'foo bar');
|
||||
});
|
||||
});
|
@ -1,65 +1,19 @@
|
||||
|
||||
// #docregion promise
|
||||
|
||||
import { from } from 'rxjs';
|
||||
|
||||
// Create an Observable out of a promise
|
||||
const data = from(fetch('/api/endpoint'));
|
||||
// Subscribe to begin listening for async result
|
||||
data.subscribe({
|
||||
next(response) { console.log(response); },
|
||||
error(err) { console.error('Error: ' + err); },
|
||||
complete() { console.log('Completed'); }
|
||||
});
|
||||
|
||||
// #enddocregion promise
|
||||
|
||||
// #docregion interval
|
||||
|
||||
import { interval } from 'rxjs';
|
||||
|
||||
// Create an Observable that will publish a value on an interval
|
||||
const secondsCounter = interval(1000);
|
||||
// Subscribe to begin publishing values
|
||||
secondsCounter.subscribe(n =>
|
||||
console.log(`It's been ${n} seconds since subscribing!`));
|
||||
|
||||
// #enddocregion interval
|
||||
|
||||
|
||||
// #docregion event
|
||||
|
||||
import { fromEvent } from 'rxjs';
|
||||
|
||||
const el = document.getElementById('my-element');
|
||||
|
||||
// Create an Observable that will publish mouse movements
|
||||
const mouseMoves = fromEvent(el, 'mousemove');
|
||||
|
||||
// Subscribe to start listening for mouse-move events
|
||||
const subscription = mouseMoves.subscribe((evt: MouseEvent) => {
|
||||
// Log coords of mouse movements
|
||||
console.log(`Coords: ${evt.clientX} X ${evt.clientY}`);
|
||||
|
||||
// When the mouse is over the upper-left of the screen,
|
||||
// unsubscribe to stop listening for mouse movements
|
||||
if (evt.clientX < 40 && evt.clientY < 40) {
|
||||
subscription.unsubscribe();
|
||||
}
|
||||
});
|
||||
|
||||
// #enddocregion event
|
||||
|
||||
|
||||
// #docplaster
|
||||
/*
|
||||
Because of how the code is merged together using the doc regions,
|
||||
we need to indent the imports with the function below.
|
||||
*/
|
||||
/* tslint:disable:no-shadowed-variable */
|
||||
/* tslint:disable:align */
|
||||
// #docregion ajax
|
||||
|
||||
import { ajax } from 'rxjs/ajax';
|
||||
import { ajax } from 'rxjs/ajax';
|
||||
|
||||
// Create an Observable that will create an AJAX request
|
||||
const apiData = ajax('/api/data');
|
||||
// Subscribe to create the request
|
||||
apiData.subscribe(res => console.log(res.status, res.response));
|
||||
|
||||
// #enddocregion ajax
|
||||
|
||||
|
||||
export function docRegionAjax(console, ajax) {
|
||||
// #docregion ajax
|
||||
const apiData = ajax('/api/data');
|
||||
// Subscribe to create the request
|
||||
apiData.subscribe(res => console.log(res.status, res.response));
|
||||
// #enddocregion ajax
|
||||
}
|
||||
|
Reference in New Issue
Block a user