Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Async Testing giving you a sinking feeling
Similar to Async Testing giving you a sinking feeling (20)
Recently uploaded
Recently uploaded (20)
Async Testing giving you a sinking feeling
- 1. Async tests giving you a sinking feeling?
- 2. <span id="numbers">{{ numbers | async }}</span> <button (click)=“getNumbers()”>Subscribe</button> The Component getNumbers() { Observable.interval(1000) .subscribe(x => this.numbers.next(x)); }
- 3. The Test it('should have a value', () => { element.querySelector(‘button’).click(); expect(numbers.textContent).toContain(‘0'); }); 😢
- 4. The Problem of change detection <html>
- 8. How Angular does change detection
- 9. addEventListener() / removeEventListener() xhr request callback setTimeout() / setInterval() requestAnimationFrame() prompt() / alert() Sources of change
- 10. ▸ Detect when async functions run ▸ Run a bit of extra code when they do ▸ Angular zone is called ngZone ZoneJS
- 11. Running in the ngZone setTimeout(callback, delay);Zone.setTimeout(callback, delay); Zone.setTimeout = function (callback, delay) { const wrapped = function () { callback(); callAngularChangeDetection(); }; setTimeout(wrapped, delay); }
- 12. Tragically, test code doesn’t run in the ngZone No zone for you! 😢
- 13. it('should show the success message', (done) => { component.submit() We don’t need no automatic change detection SUBMIT SUCCESS! .then(() => { expect(getElement(‘.success’)).toBeTruthy(); done(); }); }); .then(() => fixture.detectChanges())
- 14. getNumbers() { Observable.interval(1000) .subscribe(x => this.numbers.next(x)); } Who watches the watchers? it('should have a value', () => { element.querySelector(‘button’).click(); fixture.detectChanges(); expect(numbers.textContent).toContain('1'); }); 🤔
- 15. - Special zone for running tests - Super powers! ▸ tick() ▸ flush()/flushMicrotasks() fakeAsync to the rescue
- 16. tick(n): advance time n milliseconds Tick tock
- 17. it(‘should have a value’, fakeAsync(() => { element.querySelector(‘button’).click(); tick(1000); fixture.detectChanges(); expect(element.textContent).toContain('0'); })); So close… Error: 1 periodic timer(s) still in the queue.
- 18. Description If there are any pending timers at the end of the function, an exception will be thrown. Remain calm
- 19. it(‘should have a value’, fakeAsync(() => { component.getNumbers(); tick(1000); fixture.detectChanges(); expect(element.textContent).toContain(‘0'); })); discardPeriodicTasks();
- 20. Chrome 66.0.3359 (Mac OS X 10.12.6): Executed 1 of 1 SUCCESS (0.135 secs / 0.127 secs)
- 21. ▸ flushMicrotasks() ‣ execute all remaining micro tasks ▸ flush() ▸ execute all remaining tasks ▸ fixture.whenStable() ▸ flush(), but different What if I’m not testing an interval?
- 22. it('should set the flag', () => { let flag = false; Promise.resolve() .then(() => flag = true); expect(flag).toBe(true); }); flushMicrotasks() Expected false to be true.
- 23. it('should set the flag', (done) => { let flag = false; Promise.resolve() .then(() => flag = true) .then(() => { expect(flag).toBe(true); done(); }); }); The old-fashioned way
- 24. it('should set the flag', fakeAsync(() => { let flag = false; Promise.resolve() .then(() => flag = true); expect(flag).toBe(true); })); The Angular way flushMicrotasks();
- 25. it('should set the flag', fakeAsync(() => { const time = Math.random() * 10000; let flag = false; setTimeout(() => flag = true, time); expect(flag).toBe(false); const timeElapsed = flush(); expect(flag).toBe(true); expect(timeElapsed).toBe(time); })); flush()
- 26. fixture.whenStable(): a different way to flush it('should be true', fakeAsync(() => { fixture.whenStable() .then(() => expect(app.result).toBe(true)); })); ngOnInit() { someAsyncThing().then(() => this.result = true); }
- 27. it('should be true', fakeAsync(() => { fixture.whenRenderingDone() .then(() => { expect(app.result).toBe(true); }); })); And one last thing…
- 28. ▸ fixture.detectChanges() ▸ fakeAsync() zone ▸ tick(), flush() & flushMicrotasks() ▸ fixture.whenStable() & fixture.whenRenderingDone() Our weapons in the fight against async tests
- 29. @ErinJZimmer