如何测试角度组件中的数据加载状态？

Question

我有一个正常的角度页面组件，但是我想添加一些测试以验证加载时，成功检索数据以及API调用失败时UI是否处于正确的状态。

这是我的页面组件

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.