5

我正在尝试测试一个Component基本上接收并根据从该 Observable 发出的值Observable更改它的 Angular。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');
    })
  );
});

显然这是行不通的。我的问题是我没有找到一种方法将 TestScheduler 推进每个expect.

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

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

谢谢

4

1 回答 1

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();
  });
});
于 2018-05-24T14:42:51.047 回答