ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

New feature of async fakeAsync test in angular

?
?
Jia Li
Jia Li

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

1 of 17
Download to read offline
Some new features of async test in angular @JiaLiPassion
×Ô¼º½B½é ¡ñ ÃûÇ°: Àî¼Î ¡ñ »áÉç: Àûß_¥½¥Õ¥È ¡ñ Zone.js: Collaborator ¡ñ Angular: Contributor ¡ñ Twitter: @jialipassion ¡ñ Github: JiaLiPassion
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 ¥µ¥Ý©`¥È ¡ñ ¤½¤Î¤¿
async it('should show quote after getQuote (async)', async(() => { asyncOpertion(); fixture.whenStable().then(() => { // all async tasks finished expect(quoteEl.textContent).toBe(testQuote); }); }));
fakeAsync: setTimeout/Interval/requestAnimationFrame/Promise it('should show quote after getQuote (fakeAsync)', fakeAsync(() => { asyncOpertion(); tick(); expect(quoteEl.textContent).toBe(testQuote); }));
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); }));
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); });
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'); }));
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); }); }));
Async:async beforeEach + async it beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], }).compileComponents(); })); it('simple timeout', async(() => { setTimeout(() => { expect(true).toBe(true); }, 200); }));
Jasmine 2.9 ~ 3.x, mocha 5.x support
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 }];
Zone.js 0.8.21
Don¡¯t call done in async/fakeAsync it('should show quote after getQuote (async)', async((done: DoneFn) => { asyncOpertion(() => { doneFn(); // doneFn is undefined }); }));
Don¡¯t return promise in async it('should show quote after getQuote (async)', async((done: DoneFn) => { return new Promise((res, rej) => { asyncOperation(res); }); }));
Sync operation in async it('sync', async() => { const a = 1 + 1; })); it('sync', async() => { btn.addEventListener(¡®click¡¯, listener); }));
Next... 1. Rename async -> ? 2. async should wait for pending observable. 3. fixture.detectChange ¤Ç¤­¤ë¤À¤±×Ô„ÓŒgÐÐ ? 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:[]}

More Related Content

New feature of async fakeAsync test in angular

  • 1. Some new features of async test in angular @JiaLiPassion
  • 2. ×Ô¼º½B½é ¡ñ ÃûÇ°: Àî¼Î ¡ñ »áÉç: Àûß_¥½¥Õ¥È ¡ñ 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 }];
  • 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 ¤Ç¤­¤ë¤À¤±×Ô„ÓŒgÐÐ ? 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:[]}