Angular 2 测试加载指示器，用于使用异步管道进行观察答案

【问题标题】：Angular 2 test loading indicator for observable with async pipeAngular 2 测试加载指示器，用于使用异步管道进行观察
【发布时间】：2021-04-05 05:29:15
【问题描述】：

问题组件有无限加载屏幕。如何触发可观察到完成？

在服务中，我有一个简单的方法可以从 http GET 请求返回 observable

此方法参考分配给rentalPoints$

后来被html组件使用异步管道消费。并在加载时显示加载指示器。

Component.ts

ngOnInit(): void {
    // Storing observable with rental points
    this.rentalPoints$ = this.rentalPointService.getRentalPoints();
}

Component.html

 <ng-container *ngIf="rentalPoints$ | async as rentalPoints; else loading">
    <div class="points">
        <h4>{{rentalPoints.availableAmount}}</h4>
    </div>
</ng-container>

<ng-template #loading>
    <div class="text-center h4">
        <i class="fas fa-spinner fa-spin"></i>
    </div>
</ng-template>

测试组件

// Creating mocked cabinet service
const RentalPointServiceStub = {
    // Creating method for cabinet mocked service
    getRentalPoints() {
        // Returning observable with loyalty points information
        return scheduled([{
            pendingAmount: 1,
            availableAmount: 2
        }]
        , asyncScheduler);
    }
};

    describe('RentalPointsComponent', () => {
        // Declaring test variables
        let component: RentalPointsComponent;
        let fixture: ComponentFixture<RentalPointsComponent>;
        let debugElement: DebugElement;
        let nativeElement: any;

    // Setting up Test Bed ( Testing envirement )
    beforeEach(async () => {
        TestBed.configureTestingModule({
            imports: [
            ],
            providers: [
                { provide: RentalPointsService, useValue: RentalPointServiceStub },
            ],
            declarations: [
                RentalPointsComponent,
            ]
        }).compileComponents();
    });

    // Reseting variables each test
    beforeEach(() => {
        fixture = TestBed.createComponent(RentalPointsComponent);
        component = fixture.componentInstance;
        debugElement = fixture.debugElement;
        nativeElement = debugElement.nativeElement;
        fixture.detectChanges();
    });

       it('should show indicator while loading, and render view after', fakeAsync(() => {
        expect(debugElement.query(By.css('.fa-spinner')).nativeElement).toBeTruthy();
        tick(50000); // doesnt finish observable
        flush();  // doesnt finish observable
        fixture.detectChanges();
        // expect(nativeElement.query(By.css('.points')));
    }));
});

【问题讨论】：

标签： angular testing integration-testing

【解决方案1】：

请证明我错了。

由于某种原因，HTML 组件中的异步管道在测试环境中没有订阅 observable。因此，promise 或 request 无法解决。

我之所以开始这个讨论，是因为我想要更简洁、更易读、更同步的代码。

如果有人为此苦苦挣扎。我发现的唯一测试方法是将其包装在 done 函数中并订阅 observable。

  it('should render loading indicator while data is loading', done => {
        component.rentalPoints$.subscribe(() => {
            expect(debugElement.query(By.css('.fa-spinner'))).toBeTruthy();
            fixture.detectChanges();
            expect(debugElement.query(By.css('.fa-spinner'))).toBeFalsy();
            done();
        });
    });

【讨论】：