Как проверить угловой компонент с помощью наблюдаемого ввода - PullRequest
Новая
       31

Как проверить угловой компонент с помощью наблюдаемого ввода

0 голосов
/ 24 мая 2018

Я пытаюсь проверить Angular Component, который в основном получает Observable и меняет его template на основе значений, излучаемых этим Observable.Вот упрощенная версия: 

@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.

Как я могу пропустить кадры вручную?Или, в качестве альтернативы, есть ли лучший способ проверить вышеуказанный компонент / сценарий (угловой компонент, который получает Observable, и я хочу проверить его поведение с учетом излучений наблюдаемого).

Я видел .flush(),но, как задокументировано, он запускает все выбросы Observable, поэтому я доберусь до окончательного статуса и не смогу проверить различные переходы между состояниями.

Спасибо

1 Ответ

0 голосов
/ 24 мая 2018

Вам не нужно использовать какую-либо библиотеку для тестирования.Более того, вы можете проверить это вне контекста 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();
  });
});
...