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.
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);
})