Тест Angular2 HTML

Question

Я хочу проверить элементы, созданные в html '* ngFor' с массивом в .ts, но я не нашел документации об этом.

.ts:

steps: Array<number> = [1, 2, 3, 4, 5];

html:

<section class='mycontainer'>

  <article class="myArticle{{ steps.length }}">
    <div class='line'></div>
    <div *ngFor="let numberStep of steps;" class='circle'></div>
  </article>

</section>

Мне нужно проверить spect.ts элементы, созданные с помощью ngFor

Answer 1

попробуйте это, здесь я ищу все элементы (div.circle) и проверяю, что число не равно 0, чтобы убедиться, что хотя бы один из них создан. .queryAll возвращает массив, но вы можете использовать .query, чтобы получить только один элемент

 fixture = TestBed.createComponent(yourComponent);
 comp = fixture.componentInstance;

it('ngFor div should be created', () =>  {
      fixture.detectChanges();
      let ngForElement: DebugElement;
      ngForElement= fixture.debugElement.queryAll(By.css('div.circle'));
      expect((ngForElement.length).not.toBe(0); // check that ngFor contain at least one element

 });