This document discusses RxJS marble testing. It provides an overview of Observables, Schedulers, and the TestScheduler. The TestScheduler allows testing asynchronous code by virtualizing time, mocking Observables with marble diagrams, and asserting expected emissions. Examples demonstrate creating cold Observables, time, and testing an Epic that uses delay with the redux-observable-test-helper. Marble testing makes asynchronous code more testable.

1. - RxJS Marble Testing

2. Observable

3. What is Observable ?

4. What is Observable ?
Collection+ Time

5. Observable
What is Observable ?

6. var mouseMove = Observable
.fromEvent(DOM, 'mousemove');
var subscription = mouseMove
.subscribe(x !=> console.log(x));
subscription.unsubscribe();
Observable

7. Observable.of(2, 3, 4)
Observable.from([2, 3, 4])
Observable.fromEvent(DOM, 'click')
Observable.interval(1000)
Observable.empty()
Observable.never()
Observable.throw()
Observable

8. var sub = Observable
.from([1, 2, 3])
.map(x !=> x + 1)
.filter(x !=> x % 2 ##=== 0)
.subscribe({
next: x !=> console.log(x),
error: err !=> {},
complete: () !=> {},
});

9. observable
• Observable
•
• (subscribe)
• operator
var sub = Observable
.from([1, 2, 3])
.map(x !=> x + 1)
.filter(x !=> x % 2 ##=== 0)
.subscribe({
next: x !=> console.log(x),
error: err !=> {},
complete: () !=> {},
});

10. operator
• Observable
•
•
observable
var sub = Observable
.from([1, 2, 3])
.map(x !=> x + 1)
.filter(x !=> x % 2 ##=== 0)
.subscribe({
next: x !=> console.log(x),
error: err !=> {},
complete: () !=> {},
});

11. observer
• observable
• next
error complete
var sub = Observable
.from([1, 2, 3])
.map(x !=> x + 1)
.filter(x !=> x % 2 ##=== 0)
.subscribe({
next: x !=> console.log(x),
error: err !=> {},
complete: () !=> {},
});

12. subscription
• observable
•
•
(unsubscribe)
var sub = Observable
.from([1, 2, 3])
.map(x !=> x + 1)
.filter(x !=> x % 2 ##=== 0)
.subscribe({
next: x !=> console.log(x),
error: err !=> {},
complete: () !=> {},
});

14. Marble Diagram
--a--b--c--d--e|

15. Marble Diagram
• - : (10 frames)
• n(0-9/a-z): (next)
• |: (complete)
• #: (error)
• ():
time
----0---1---2---3--
----0---1---2---3｜
----0---1---2---3--#
(123|)

16. Observable.of(1, 2, 3)
Observable.from([1, 2, 3])
(123|)

17. Observable.interval(10) -0123..

18. Observable
.fromEvent(DOM, 'click') ---e--ee-e--e-...

19. Observable.interval(10)
.take(3)
.map(x !=> x + 1)
.filter(x !=> x % 2 ##=== 0)
-012..
-012|
--2|
-01(2|)
-12(3|)

20. -a-bc-d---
• 10 frames a
• 30 frames b
• 40 frames c
• 60 frames d
•

21. --a-b-(c|)
• 20 frames a
• 40 frames b
• 50 frames c complete

22. marble diagram observable

23. marble diagram
observable

24. Jerry Hong
Front End Engineer |
Website: blog.jerry-hong.com
Facebook: J.H.MingChen

25. Testing Asynchronous Code
is Hard

26. Testing Asynchronous Code is Hard
•

30. Testing Asynchronous Code is Hard
•
•
•
•

31. Marble Testing

32. Scheduler

33. Scheduler
• Scheduler
• Observable Scheduler next, error, complete
Scheduler
• Scheduler setTimeout, setInterval
•

34. const sub = Scheduler.async.schedule(() !=> {
console.log('123');
}, 100);
sub.unsubscribe();

35. RxJS 5 - Scheduler
• queue - queue
• async - setInterval timer-base observable
• asap - setImmediate async
(Node node v0.9 process.nextTick v0.9 setImmediate )
• animationFrame - requestAnimationFrame

36. Observable.of(0, 1, 2, Scheduler.async);
Observable.from([0, 1, 2], Scheduler.async);
Observable.interval(0, Scheduler.animationFrame);

37. TestScheduler

38. TestScheduler
• TestScheduler Scheduler
• TestScheduler 100%
• (virtual Time)

39. let testScheduler = new TestScheduler(
(actual, expected) !=>
expect(actual).toEqual(expected)
);
Scheduler
• new
Scheduler
• callback
callback
(deepEqual)
•
testScheduler
side
effect

40. it('of', () !=> {
const actual = Observable
.of('Jerry', testScheduler);
testScheduler
.expectObservable(actual)
.toBe('(a|)', { a: 'Jerry' });
testScheduler.flush();
});
observable
• Observable
Scheduler
testScheduler
• testScheduler
expectObservable
• flush()

41. const obs = testScheduler
.createColdObservable(
'%%---u|',
{ u: 'http:%//google.com'}
);
mock observable

42. const obs = testScheduler
.createColdObservable(
'%%---#',
null,
new Error('test')
);
mock observable
with error

43. const time = testScheduler
.createTime('%%---|');
createTime

44. Demo

45. Redux-Observable

46. export const show = () !=> ({ type: 'SHOW' });
export const close = data !=> ({ type: 'CLOSE' });
export const delayEpic = action$ !=>
action$.ofType('SHOW').delay(3000).map(x !=> close());
Action Creator & Epic

47. redux-observable-test-helper

48. import {
createExpectedEpic,
} from 'redux-observable-test-helper';
const expectedEpic = createExpectedEpic(
(actual, expected) !=> {
expect(actual).toEqual(expected);
}
);

49. export const show = () !=>
({ type: 'SHOW' });
export const close = () !=>
({ type: 'CLOSE' });
export const delayEpic = action$ !=>
action$.ofType('SHOW')
.delay(3000)
.map(x !=> close());
test('test delay', () !=> {
expectedEpic(
delayEpic,
{
action: ['a', { a: show() }],
expect: ['(--a', { a: close() }],
},
mockDelay('(--|')
);
});
reducer.js reducer.test.js

50. • Promise Observable marble testing mock
subscribe (#701)
• timer operator (delay, throttle, debounce)
Observable.prototype mock
• v5.5, 5.6 lettable
• redux-observable-test-helper