Angular2 test Html

Question

I want to check the elements creates in html '*ngFor' with a Array in .ts , But I don't found documentation about it.

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

I need check in spect.ts the elements create with ngFor

Answer 1

try this, here i look for all elements (div.circle) and check that count isn't equal to 0 to make sure that at least one is created. .queryAll return an array but you can use .query to get only one element

 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

 });