Some new features of async test in angular

@JiaLiPassion

自己紹介

• 名前: 李嘉
• 会社: 利達ソフト
• Zone.js: Collaborator
• Angular: Contributor
• Twitter: @jialipassion
• Github: JiaLiPassion

​

Agenda

• Proxy/Async/fakeAsync
• FakeAsync
• Date.now()
• jasmine.clock()
• Rxjs.scheduler (delay/asap/async)
• Async
• Pending Non Resolved Promiseを待つ
• async beforeEach + async itをサポート(Bug改修)
• 全体
• Jasmine 2.9 & 3.x サポート
• Mocha 5.x サポート
• そのた

Describe/beforeEach/it -> ProxyZone

import ‘zone.js/dist/zone-testing’; // angular-cli の場合､すでにImport済み

describe(‘test’, () => { // ProxyZone(SyncTestZone)

beforeEach(() => {}); // ProxyZone

it(() => {}); // ProxyZone

});

async

it('(async)', async(() => { // ProxyZone(AsyncTestZone)� asyncOpertion(); �� fixture.whenStable().then(() => {� // all async tasks finished� expect(quoteEl.textContent).toBe(testQuote);� });�}));

fakeAsync: setTimeout/Interval/requestAnimationFrame/Promise

it('(fakeAsync)', fakeAsync(() => {// ProxyZone(FakeAsyncZone)� setTimeout(() => {finish = true;}, 1000);� tick(1000);� expect(finish).toBe(true);�}));

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(async/delay/asap)

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(Release date unknown..)

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 できるだけ自動実行?
4. fakeAsync support MockBackend?
5. 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:[]}

​