在日常生活中，我們常常用 「畫圖」 來協助溝通，圖像可以簡單的幫助我們清楚表達，整個思考流程與邏輯；那單元測試作為程式碼的文件，為什麼我們不乾脆用「畫圖」來撰寫單元測試呢？

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