如何使用 Observable Input 测试 Angular 组件

Question

我正在尝试测试一个 Angular Component，它基本上接收一个 Observable 并根据从该 Observable 发出的值更改其 template。这是一个简化版：

@Component({
    selector: 'async-text',
    template: `
        <span>{{ text | async }}</span>
    `,
})
export class AsyncTextComponent {    
    @Input() text: Observable<string>;
}

我想测试一下，目前这就是我所拥有的，使用rxjs-marbles（虽然不是必须的）。

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AsyncTextComponent } from './async-text.component';

describe('AsyncTextComponent', () => {
  let component: BannerComponent;
  let fixture: AsyncTextComponent<AsyncTextComponent>;

  it('...',
    marbles(m => {
      fixture = TestBed.createComponent(AsyncTextComponent);
      component = fixture.componentInstance;
      component.text = m.cold('-a-b-c|', {
        a: 'first',
        b: 'second',
        c: 'third',
      });

      fixture.detectChanges();
      expect(component.nativeElement.innerHTML).toContain('first');

      fixture.detectChanges();
      expect(component.nativeElement.innerHTML).toContain('second');

      fixture.detectChanges();
      expect(component.nativeElement.innerHTML).toContain('third');
    })
  );
});

显然这行不通。我的问题是我没有找到一种方法在每个 expect 之间将 TestScheduler 推进给定数量的“帧”。

如何手动跳帧？或者，是否有更好的方法来测试上述组件/场景（接收 Observable 的 Angular 组件，我想根据 Observable 的发射测试它的行为）。

我确实看到了.flush()，但据记录，它运行所有 Observable 的发射，所以我会到达最终状态，并且无法测试状态之间的不同转换。

谢谢

Answer 1

您不必使用任何库来测试它。更重要的是，您可以在 Angular 的上下文之外对其进行测试。

不管怎样，这里是解释。

要对此进行测试，我建议使用变量。但如果你想坚持你的方法，你应该坚持下去。

it('should display first', done => {
  // Mock your component
  component.text = Observable.of('first');
  // Detect template changes
  fixture.detectChanges();
  // trigger a change detection, just in case (try without, you never know)
  setTimeout(() => {
    // Get the element that is displaying (tip: it's not your whole component)
    const el = fixture.nativeElement.querySelector('span');
    // Test the innet text, not the HTML
    // Test with includes, in case you have spaces (but feel free to test without includes)
    expect(el.innerText.includes('first')).toEqual(true);
    // End your test
    done();
  });
});