New feature of async fakeAsync test in angular
0 likes843 views
This document summarizes some new features of async testing in Angular, including: - The async and fakeAsync functions for writing asynchronous tests and controlling time - How fakeAsync can control Date.now(), timeouts, intervals, requestAnimationFrames, and promises - Using jasmine.clock() to automatically run tests in fakeAsync mode - Supporting pending non-resolved promises and async beforeEach/it blocks - Support for Jasmine 2.9+, 3.x and Mocha 5.x - Proposed enhancements like supporting more async operations and better timeout errors
![Async:async beforeEach + async it
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));
it('simple timeout', async(() => {
setTimeout(() => {
expect(true).toBe(true);
}, 200);
}));](https://image.slidesharecdn.com/newfeatureofasynctest-180311142118/85/New-feature-of-async-fakeAsync-test-in-angular-10-320.jpg)
![fakeAsync: support more async operations
// tell fakeAsync should support HTMLCanvasElement.toBlob
window['__zone_symbol__FakeAsyncTestMacroTask'] = [{
source: 'HTMLCanvasElement.toBlob',
callbackArgs: [{size: 100}] // the test blob data which will be passed back to
callback
}];](https://image.slidesharecdn.com/newfeatureofasynctest-180311142118/85/New-feature-of-async-fakeAsync-test-in-angular-12-320.jpg)
![Next...
1. Rename async -> ?
2. async should wait for pending observable.
3. fixture.detectChange できるだけ自動実行 ?
4. Better timeout message
Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
--Pendng async tasks are: [type: macroTask, source: setTimeout, args: {handleId:3,isPeriodic:false,delay:10000,args:[]}](https://image.slidesharecdn.com/newfeatureofasynctest-180311142118/85/New-feature-of-async-fakeAsync-test-in-angular-17-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to New feature of async fakeAsync test in angular (20)
Ad
Recently uploaded (20)
Ad
New feature of async fakeAsync test in angular
- 1. Some new features of async test in angular @JiaLiPassion
- 2. 自己紹介 ● 名前: 李嘉 ● 会社: 利達ソフト ● Zone.js: Collaborator ● Angular: Contributor ● Twitter: @jialipassion ● Github: JiaLiPassion
- 3. Agenda ● Async/fakeAsync ● FakeAsync ○ Date.now() ○ jasmine.clock() ○ Rxjs.scheduler (delayなど) ● Async ○ Pending Non Resolved Promiseを待つ ○ async beforeEach + async itをサポート(Bug改修) ● 全体 ○ Jasmine 2.9 & 3.x サポート ○ Mocha 5.x サポート ● そのた
- 4. async it('should show quote after getQuote (async)', async(() => { asyncOpertion(); fixture.whenStable().then(() => { // all async tasks finished expect(quoteEl.textContent).toBe(testQuote); }); }));
- 5. fakeAsync: setTimeout/Interval/requestAnimationFrame/Promise it('should show quote after getQuote (fakeAsync)', fakeAsync(() => { asyncOpertion(); tick(); expect(quoteEl.textContent).toBe(testQuote); }));
- 6. fakeAsync: Date.now() it('should show quote after getQuote (fakeAsync)', fakeAsync(() => { const start = Date.now(); tick(100); const end = Date.now(); expect(end - start).toBe(100); }));
- 7. FakeAsync: jasmine.clock() -> auto fakeAsync beforeEach(() => { jasmine.clock().install(); }); afterEach(() => { jasmine.clock().uninstall(); }); it('should get date diff correctly', () => { // we don't need fakeAsync here. // automatically run into fake async zone, because jasmine.clock() is installed. const start = Date.now(); jasmine.clock().tick(100); const end = Date.now(); expect(end - start).toBe(100); });
- 8. FakeAsync: rxjs scheduler it('should show quote after getQuote (fakeAsync)', fakeAsync(() => { observable.delay(1000).subscribe(v => { result = v; }); expect(result).toBeNull(); testZoneSpec.tick(1000); expect(result).toBe('hello'); }));
- 9. Async: Pending non resolved promise.then it('should fail', async(() => { const promise = new Promise((res, rej) => { jsonp(url, res); // where jsonp is not zone aware }); promise.then(() => { expect(false).toBe(true); }); }));
- 10. Async:async beforeEach + async it beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], }).compileComponents(); })); it('simple timeout', async(() => { setTimeout(() => { expect(true).toBe(true); }, 200); }));
- 11. Jasmine 2.9 ~ 3.x, mocha 5.x support
- 12. fakeAsync: support more async operations // tell fakeAsync should support HTMLCanvasElement.toBlob window['__zone_symbol__FakeAsyncTestMacroTask'] = [{ source: 'HTMLCanvasElement.toBlob', callbackArgs: [{size: 100}] // the test blob data which will be passed back to callback }];
- 13. Zone.js 0.8.21
- 14. Don’t call done in async/fakeAsync it('should show quote after getQuote (async)', async((done: DoneFn) => { asyncOpertion(() => { doneFn(); // doneFn is undefined }); }));
- 15. Don’t return promise in async it('should show quote after getQuote (async)', async((done: DoneFn) => { return new Promise((res, rej) => { asyncOperation(res); }); }));
- 16. Sync operation in async it('sync', async() => { const a = 1 + 1; })); it('sync', async() => { btn.addEventListener(‘click’, listener); }));
- 17. Next... 1. Rename async -> ? 2. async should wait for pending observable. 3. fixture.detectChange できるだけ自動実行 ? 4. Better timeout message Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL. --Pendng async tasks are: [type: macroTask, source: setTimeout, args: {handleId:3,isPeriodic:false,delay:10000,args:[]}