Как проверить состояние загрузки данных в угловом компоненте? - PullRequest
Новая
       34

Как проверить состояние загрузки данных в угловом компоненте?

0 голосов
/ 03 апреля 2019

У меня есть рабочий компонент угловой страницы, но я хочу добавить тесты, чтобы убедиться, что пользовательский интерфейс находится в правильном состоянии во время загрузки, когда данные успешно извлекаются и когда происходит сбой вызова API.

здесьмой компонент страницы 

export class ActionRequiredComponent implements OnInit, OnDestroy {
    login: ILogin | undefined;
    isLoadingLogin: boolean = false;
    hasLoadingError: boolean = true;
    isResetting: boolean = false;

    private loginSubscription: Subscription = new Subscription();

    constructor(private readonly apiService: apiService,
                private readonly route: ActivatedRoute) { }

    ngOnInit(): void {
        this.isResetting = false;
        this.isLoadingLogin = false;
        this.hasLoadingError = false;
        this.loginSubscription = this.getSub();
    }

    ngOnDestroy(): void {
        this.loginSubscription.unsubscribe();
    }

    private getSub(): Subscription {
        this.isLoadingLogin = true;
        this.hasLoadingError = false;
        const routeParams = this.route.params as Observable<IParamsWithLoginId>;
        return routeParams
            .pipe(switchMap((params: IParamsWithLoginId) => {
                return this.apiService.getLogin$(params.loginId);
            })).subscribe((login: ILogin) => {
                this.login = login;
                this.isLoadingLogin = false;
            }, () => {
                this.isLoadingLogin = false;
                this.hasLoadingError = true;
            });

    }

}

Вот основная часть моего теста для этого.Сейчас это не работает, но это основы того, что я хочу протестировать 

describe('Page Component: Action Required', () => {
    let component: ActionRequiredComponent ;
    let fixture: ComponentFixture<ActionRequiredComponent >;
    let debugEl: DebugElement;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                RouterTestingModule,
                HttpClientTestingModule
            ],
            declarations: [ ActionRequiredComponent ],
            providers: [
                apiService
            ]
        })
        .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(ActionRequiredComponent);
        component = fixture.componentInstance;
        debugEl = fixture.debugElement;
    });

    it('should properly set the UI while loading the login', fakeAsync(() => {
        fixture.detectChanges(); //triggers ngOnInit()
        tick();
        fixture.whenStable().then(() => {
            //fixture.detectChanges();

            //Expect proper component properties while loading
            expect(component.isLoadingLogin).toEqual(true);
            expect(component.hasLoadingError).toEqual(false);
            expect(component.isResetting).toEqual(false);
            expect(component.login).toBeUndefined();
        });
    }));
...

Сейчас у меня просто проблема с получением теста для установки подписки в состояние «загрузка»... как я могу смоделировать / протестировать это поведение?

Сейчас тест в настоящее время не проходит с этим выводом 

Error: 1 periodic timer(s) still in the queue.
...