Checking if multiple elements are rendering using jasmine

it('should check if all div are appearing which are dependent on a common condition', () => {
  component.someCommonCondition = true;
  fixture.detectChanges();
  // now the prob lies in line below since it only gets the first element of the mentioned class
  const contentCheck = fixture.debugElement.query(By.css('.someClass'))
  expect() // what to write here to check all 3 divs are getting rendered
})

<div *ngif="someCommonCondition" class="someClass"></div>
<div *ngif="someCommonCondition" class="someClass"></div>
<div *ngif="someCommonCondition" class="someClass"></div>

Greetings, I am trying to write a unit test where i can test if multiple divs are getting rendered which depend on a common condition. I want to know if there is a way to do it in one test rather than writing a test for each of them individually since they all dependent on a common condition. That is, either none of them appear or all of them should.

Answer

I think you can use queryAll instead of query. queryAll will return an array.

Try the following:

it('should check if all div are appearing which are dependent on a common condition', () => {
  component.someCommonCondition = true;
  fixture.detectChanges();
  // now the prob lies in line below since it only gets the first element of the mentioned class
  const contentChecks = fixture.debugElement.queryAll(By.css('.someClass'))
  expect(contentChecks.length).toBe(3);
})