CODEWITHSUNDEEP
angularunit-testingjasminekarma-jasmineangular-unit-test
MD10
MD10

Reputation: 1521

Test if class is changed with Jasmine and Karma

I am trying to test if a button was clicked by the following way:

When the button is clicked some element class is changed from wrapper-container to wrapper-container-expanded(I don't want to check if the function is called when the button is clicked - this is not my purpose).

I am trying to check this in the following way:

it('should class be changed', ()=>{ 
   fixture.detectChanges()
   clickedElement.nativeElement.click() // click the button that causes the class change
   elementToBeExpanded = fixture.debugElement.nativeElement.querySelector('wrapper-container-expanded')
   expext(elementToBeExpanded).toBeTruthy() // check if the element with the new class exists in the DOM -the elementToBeExpanded is null
})

Although I can see that the function is called and the class is changed, the element with the new class cannot be found and the old wrapper-container appears to exist.

Upvotes: 4

Views: 1684

Answers (1)

lealceldeiro
lealceldeiro

Reputation: 14958

You need to call fixture.detectChanges() after the click event.

it('should class be changed', () => { 
   // ...
   clickedElement.nativeElement.click() // click the button that causes the class change
   fixture.detectChanges()              // detect the changes!!
   // ...
})

Upvotes: 4

Related Questions