4

在 Angular 9 应用程序中，我有一个组件

ngOnInit(): void {
  this.records$ = this.service.loadRecords();
}

loadReords()在 Http 请求完成后返回 Observable 开始null和 next 发出记录列表。

在模板中有条件，如果records$为空，所谓的“加载”div 将是可见的，当更改记录列表 - 记录表时。

当我尝试在page.navigateTo();返回后用量角器测试它（e2e）时：

navigateTo(): Promise<unknown> {
 return browser.get(`${browser.baseUrl}${this.url}`) as Promise<unknown>;
}

我可以遍历已完成的页面（已加载的记录 - 甚至故意延迟这些记录的代理 API 调用）。

如何在records$加载流之前遍历以“加载”阶段呈现的页面？

4

1 回答 1

0

您为此使用 e2e 测试而不是更孤立的测试是否有特定原因？后者将使您能够监视服务的方法并添加延迟，以便您可以在加载状态下进行断言：

describe('MyComponent', ()=>{
  let fixture: ComponentFixture<MyComponent>;
  let comonent: MyComponent;
  let myService: MyService;
  
  beforeEach(()=>{
    TestBed.configureTestingModule({
       declarations: [MyComponent]
    });
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    myService = TestBed.inject(MyService);
  });

  it('should show the loading <div>', fakeAsync(() => {
    // set up the fake service method with a delay
    const simulatedDelayMS = 500;
    const recordsStub = [{foo: 'bar'}, {foo: 'baz'}, {foo: 'qux'}];
    const recordsStubWithDelay$ = of(recordsStub).pipe(delay(simulatedDelayMS));
    spyOn(myService, 'loadRecords').and.returnValue(recordsStubWithDelay$);

    // perform the first change detection run
    fixture.detectChanges();
    const getLoadingDiv = () => fixture.debugElement.query(By.css('div.loading'))).nativeElement;

    // the <div> should be displayed
    expect(getLoadingDiv()).not.toBeNull();

    // simulate the enough time passing for the data to finish loading
    tick(1000);
    
    // the <div> should no longer be displayed
    expect(getLoadingDiv()).toBeNull();
  }));
})
于 2020-10-16T00:32:03.550 回答