5

rc4 を使用するように Angular2 アプリをアップグレードしていますが、単体テストでエラーが発生し始めました。

非同期ゾーン テスト内から setInterval を使用できません

私のウィジェットは、そのngOnInitメソッドからデータを要求し、その要求が行われている間、読み込みインジケーターを表示します。私の模擬サービスは、1 ミリ秒後にいくつかのデータを返します。

これは、問題を明らかにする簡略化されたバージョンです

import { inject, async, TestComponentBuilder, ComponentFixture} from '@angular/core/testing';
import {Http, Headers, RequestOptions, Response, HTTP_PROVIDERS} from '@angular/http';
import {provide, Component} from '@angular/core';

import {Observable} from "rxjs/Rx";

class MyService {
    constructor(private _http: Http) {}
    getData() {
        return this._http.get('/some/rule').map(resp => resp.text());
    }
}

@Component({
    template: `<div>
      <div class="loader" *ngIf="_isLoading">Loading</div>
      <div class="data" *ngIf="_data">{{_data}}</div>
    </div>`
})
class FakeComponent {
    private _isLoading: boolean = false;
    private _data: string = '';

    constructor(private _service: MyService) {}

    ngOnInit() {
        this._isLoading = true;
        this._service.getData().subscribe(data => {
            this._isLoading = false;
            this._data = data;
        });
    }
}

describe('FakeComponent', () => {
    var service = new MyService(null);
    var _fixture:ComponentFixture<FakeComponent>;

    beforeEach(async(inject([TestComponentBuilder], (tcb:TestComponentBuilder) => {
        return tcb
            .overrideProviders(FakeComponent, [
                HTTP_PROVIDERS,
                provide(MyService, {useValue: service}),
            ])
            .createAsync(FakeComponent)
            .then((fixture:ComponentFixture<FakeComponent>) => {
                _fixture = fixture;
            });
    })));

    it('Shows loading while fetching data', (cb) => {
        // Make the call to getData take one ms so we can verify its state while the request is pending
        // Error occurs here, when the widget is initialized and sends out an XHR
        spyOn(service, 'getData').and.returnValue(Observable.of('value').delay(1));
        _fixture.detectChanges();
        expect(_fixture.nativeElement.querySelector('.loader')).toBeTruthy();
        // Wait a few ms, should not be loading
        // This doesn't seem to be the problem
        setTimeout(() => {
            _fixture.detectChanges();
            expect(_fixture.nativeElement.querySelector('.loader')).toBeFalsy();
            cb();
        }, 10);
    });
});

これは Angular2 rc1 では正常に機能していましたが、rc4 ではエラーがスローされます。何か提案はありますか?

setTimeoutまた、テスト自体から直接を使用してもエラーは発生しません

        fit('lets you run timeouts', async(() => {
            setTimeout(() => {
                expect(1).toBe(1);
            }, 10);
        }));
4

2 に答える 2

3

何らかの理由で、で作成された promise をObservable.of(anything).delay()テストで使用できないことがわかりました。

これに対する私の解決策は、その行を自分で実装することでした。これは、質問に投稿された他の例が機能したことを考えると、ほとんど意味があります。

// This is what we should be doing, but somehow, it isn't working.
// return Observable.of(result).delay(0));
function createDelayedObservable <T>(result:any, time:number = 0):Observable<T> {
    return new Observable<T>(observer => {
        setTimeout(() =>  observer.next(result), time);
    });
}

ただし、以下が失敗しない理由をまだ理解していないため、ゾーンをしっかりと理解している人が何が起こっているのか教えてくれることを期待して、自分の答えを受け入れていません。

it('should be able to use delay in tests', (cb) => {
    var obs = Observable.of(1).delay(0);
    obs.subscribe(val => {
        expect(val).toBe(1);
        cb()
    });
});
于 2016-07-26T17:57:18.147 に答える
2

私は同じ問題に遭遇しました。そして、ジャスミンdoneパラメーターを使用して回避できました。

fit('lets you run timeouts', (done) => {
    async(() => {
        setTimeout(() => {
            expect(1).toBe(1);
            done();
        }, 10);
    });
});
于 2016-07-26T15:43:40.107 に答える