Skip to content

Commit 6a4cd68

Browse files
benleshbenlesh
authored
feat(animationFrames): Adds an observable of animationFrames (#5021)
* feat(animationFrames): Adds an observable of animationFrames - Also adds tests and test harness for requestAnimationFrame stubbing with sinon - Updates TypeScript lib to use ES2018 (so we can use `findIndex` on `Array`). * refactor: switch to a loop-per-subscription approach Now each subscription will cause a new animation frame loop to be kicked off, instead of trying to share a single animation loop.
1 parent 56cbd22 commit 6a4cd68

File tree

6 files changed

+390
-5
lines changed

6 files changed

+390
-5
lines changed

‎spec-dtslint/observables/dom/animationFrames-spec.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { animationFrames } from 'rxjs';
2+
3+
it('should just be an observable of numbers', () => {
4+
const o$ = animationFrames(); // $ExpectType Observable<number>
5+
});
6+
7+
it('should allow the passing of a timestampProvider', () => {
8+
const o$ = animationFrames(performance); // $ExpectType Observable<number>
9+
});
10+
11+
it('should not allow the passing of an invalid timestamp provider', () => {
12+
const o$ = animationFrames({ now() { return 'wee' } }); // $ExpectError
13+
});

‎spec/helpers/test-helper.ts

+102
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { of, asyncScheduler, Observable, scheduled, ObservableInput } from 'rxjs
44
import { root } from 'rxjs/internal/util/root';
55
import { observable } from 'rxjs/internal/symbol/observable';
66
import { iterator } from 'rxjs/internal/symbol/iterator';
7+
import * as sinon from 'sinon';
78

89
export function lowerCaseO<T>(...args: Array<any>): Observable<T> {
910
const o = {
@@ -47,3 +48,104 @@ export const createObservableInputs = <T>(value: T) => of(
4748
) as Observable<ObservableInput<T>>;
4849

4950
global.__root__ = root;
51+
52+
let _raf: any;
53+
let _caf: any;
54+
let _id = 0;
55+
56+
/**
57+
* A type used to test `requestAnimationFrame`
58+
*/
59+
export interface RAFTestTools {
60+
/**
61+
* Synchronously fire the next scheduled animation frame
62+
*/
63+
tick(): void;
64+
65+
/**
66+
* Synchronously fire all scheduled animation frames
67+
*/
68+
flush(): void;
69+
70+
/**
71+
* Un-monkey-patch `requestAnimationFrame` and `cancelAnimationFrame`
72+
*/
73+
restore(): void;
74+
}
75+
76+
/**
77+
* Monkey patches `requestAnimationFrame` and `cancelAnimationFrame`, returning a
78+
* toolset to allow animation frames to be synchronously controlled.
79+
*
80+
* ### Usage
81+
* ```ts
82+
* let raf: RAFTestTools;
83+
*
84+
* beforeEach(() => {
85+
* // patch requestAnimationFrame
86+
* raf = stubRAF();
87+
* });
88+
*
89+
* afterEach(() => {
90+
* // unpatch
91+
* raf.restore();
92+
* });
93+
*
94+
* it('should fire handlers', () => {
95+
* let test = false;
96+
* // use requestAnimationFrame as normal
97+
* requestAnimationFrame(() => test = true);
98+
* // no frame has fired yet (this would be generally true anyhow)
99+
* expect(test).to.equal(false);
100+
* // manually fire the next animation frame
101+
* raf.tick();
102+
* // frame as fired
103+
* expect(test).to.equal(true);
104+
* // raf is now a SinonStub that can be asserted against
105+
* expect(requestAnimationFrame).to.have.been.calledOnce;
106+
* });
107+
* ```
108+
*/
109+
export function stubRAF(): RAFTestTools {
110+
_raf = requestAnimationFrame;
111+
_caf = cancelAnimationFrame;
112+
113+
const handlers: any[] = [];
114+
115+
(requestAnimationFrame as any) = sinon.stub().callsFake((handler: Function) => {
116+
const id = _id++;
117+
handlers.push({ id, handler });
118+
return id;
119+
});
120+
121+
(cancelAnimationFrame as any) = sinon.stub().callsFake((id: number) => {
122+
const index = handlers.findIndex(x => x.id === id);
123+
if (index >= 0) {
124+
handlers.splice(index, 1);
125+
}
126+
});
127+
128+
function tick() {
129+
if (handlers.length > 0) {
130+
handlers.shift().handler();
131+
}
132+
}
133+
134+
function flush() {
135+
while (handlers.length > 0) {
136+
handlers.shift().handler();
137+
}
138+
}
139+
140+
return {
141+
tick,
142+
flush,
143+
restore() {
144+
(requestAnimationFrame as any) = _raf;
145+
(cancelAnimationFrame as any) = _caf;
146+
_raf = _caf = undefined;
147+
handlers.length = 0;
148+
_id = 0;
149+
}
150+
};
151+
}

‎spec/observables/dom/animationFrames-spec.ts

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import { expect } from 'chai';
2+
import { animationFrames, Subject } from 'rxjs';
3+
import * as sinon from 'sinon';
4+
import { take, takeUntil } from 'rxjs/operators';
5+
import { RAFTestTools, stubRAF } from 'spec/helpers/test-helper';
6+
7+
describe('animationFrame', () => {
8+
let raf: RAFTestTools;
9+
let DateStub: sinon.SinonStub;
10+
let now = 1000;
11+
12+
beforeEach(() => {
13+
raf = stubRAF();
14+
DateStub = sinon.stub(Date, 'now').callsFake(() => {
15+
return ++now;
16+
});
17+
});
18+
19+
afterEach(() => {
20+
raf.restore();
21+
DateStub.restore();
22+
});
23+
24+
it('should animate', function () {
25+
const results: any[] = [];
26+
const source$ = animationFrames();
27+
28+
const subs = source$.subscribe({
29+
next: ts => results.push(ts),
30+
error: err => results.push(err),
31+
complete: () => results.push('done'),
32+
});
33+
34+
expect(DateStub).to.have.been.calledOnce;
35+
36+
expect(results).to.deep.equal([]);
37+
38+
raf.tick();
39+
expect(DateStub).to.have.been.calledTwice;
40+
expect(results).to.deep.equal([1]);
41+
42+
raf.tick();
43+
expect(DateStub).to.have.been.calledThrice;
44+
expect(results).to.deep.equal([1, 2]);
45+
46+
raf.tick();
47+
expect(results).to.deep.equal([1, 2, 3]);
48+
49+
// Stop the animation loop
50+
subs.unsubscribe();
51+
});
52+
53+
it('should use any passed timestampProvider', () => {
54+
const results: any[] = [];
55+
let i = 0;
56+
const timestampProvider = {
57+
now: sinon.stub().callsFake(() => {
58+
return [100, 200, 210, 300][i++];
59+
})
60+
};
61+
62+
const source$ = animationFrames(timestampProvider);
63+
64+
const subs = source$.subscribe({
65+
next: ts => results.push(ts),
66+
error: err => results.push(err),
67+
complete: () => results.push('done'),
68+
});
69+
70+
expect(DateStub).not.to.have.been.called;
71+
expect(timestampProvider.now).to.have.been.calledOnce;
72+
expect(results).to.deep.equal([]);
73+
74+
raf.tick();
75+
expect(DateStub).not.to.have.been.called;
76+
expect(timestampProvider.now).to.have.been.calledTwice;
77+
expect(results).to.deep.equal([100]);
78+
79+
raf.tick();
80+
expect(DateStub).not.to.have.been.called;
81+
expect(timestampProvider.now).to.have.been.calledThrice;
82+
expect(results).to.deep.equal([100, 110]);
83+
84+
raf.tick();
85+
expect(results).to.deep.equal([100, 110, 200]);
86+
87+
// Stop the animation loop
88+
subs.unsubscribe();
89+
});
90+
91+
it('should compose with take', () => {
92+
const results: any[] = [];
93+
const source$ = animationFrames();
94+
expect(requestAnimationFrame).not.to.have.been.called;
95+
96+
source$.pipe(
97+
take(2),
98+
).subscribe({
99+
next: ts => results.push(ts),
100+
error: err => results.push(err),
101+
complete: () => results.push('done'),
102+
});
103+
104+
expect(DateStub).to.have.been.calledOnce;
105+
expect(requestAnimationFrame).to.have.been.calledOnce;
106+
107+
expect(results).to.deep.equal([]);
108+
109+
raf.tick();
110+
expect(DateStub).to.have.been.calledTwice;
111+
expect(requestAnimationFrame).to.have.been.calledTwice;
112+
expect(results).to.deep.equal([1]);
113+
114+
raf.tick();
115+
expect(DateStub).to.have.been.calledThrice;
116+
// It shouldn't reschedule, because there are no more subscribers
117+
// for the animation loop.
118+
expect(requestAnimationFrame).to.have.been.calledTwice;
119+
expect(results).to.deep.equal([1, 2, 'done']);
120+
121+
// Since there should be no more subscribers listening on the loop
122+
// the latest animation frame should be cancelled.
123+
expect(cancelAnimationFrame).to.have.been.calledOnce;
124+
});
125+
126+
it('should compose with takeUntil', () => {
127+
const subject = new Subject();
128+
const results: any[] = [];
129+
const source$ = animationFrames();
130+
expect(requestAnimationFrame).not.to.have.been.called;
131+
132+
source$.pipe(
133+
takeUntil(subject),
134+
).subscribe({
135+
next: ts => results.push(ts),
136+
error: err => results.push(err),
137+
complete: () => results.push('done'),
138+
});
139+
140+
expect(DateStub).to.have.been.calledOnce;
141+
expect(requestAnimationFrame).to.have.been.calledOnce;
142+
143+
expect(results).to.deep.equal([]);
144+
145+
raf.tick();
146+
expect(DateStub).to.have.been.calledTwice;
147+
expect(requestAnimationFrame).to.have.been.calledTwice;
148+
expect(results).to.deep.equal([1]);
149+
150+
raf.tick();
151+
expect(DateStub).to.have.been.calledThrice;
152+
expect(requestAnimationFrame).to.have.been.calledThrice;
153+
expect(results).to.deep.equal([1, 2]);
154+
expect(cancelAnimationFrame).not.to.have.been.called;
155+
156+
// Complete the observable via `takeUntil`.
157+
subject.next();
158+
expect(cancelAnimationFrame).to.have.been.calledOnce;
159+
expect(results).to.deep.equal([1, 2, 'done']);
160+
161+
raf.tick();
162+
expect(DateStub).to.have.been.calledThrice;
163+
expect(requestAnimationFrame).to.have.been.calledThrice;
164+
expect(results).to.deep.equal([1, 2, 'done']);
165+
});
166+
});

‎src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export { ConnectableObservable } from './internal/observable/ConnectableObservab
44
export { GroupedObservable } from './internal/operators/groupBy';
55
export { Operator } from './internal/Operator';
66
export { observable } from './internal/symbol/observable';
7+
export { animationFrames } from './internal/observable/dom/animationFrames';
78

89
/* Subjects */
910
export { Subject } from './internal/Subject';

0 commit comments

Comments
 (0)