I have simple test of mat-checkbox wrapper in Angular. I want to check if mat-ripple disappeared after blur event. Looks like fakeAsync in that case doesn’t work
it('test for checkbox', fakeAsync(() => {
expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
.toBe(0, 'NO RIPPLE');
// DISPATCH PART
dispatchFakeEvent(inputElement, 'keydown');
dispatchFakeEvent(inputElement, 'focus');
tick(5000);
expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
.toBe(1, 'RIPPLE VISABLE');
dispatchFakeEvent(checkboxInstance._inputElement.nativeElement, 'blur');
tick(15000); // here in normal after blur mat-ripple-element disappeared, but in test no
expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
.toBe(0, 'RIPPLE NOT VISABLE');
}));
To check it I create simple function directly in component to trigger actions:
code from component
testActionMethod(){
const input = document.querySelector('input');
if (input) {
const event1 = new KeyboardEvent('keydown');
const event2 = new KeyboardEvent('focus');
input.dispatchEvent(event1);
input.dispatchEvent(event2);
const classx = document.querySelectorAll('.mat-ripple-element')
console.log(classx,'.mat-ripple-element exist?') // shows that exist
const event3 = new KeyboardEvent('blur');
input.dispatchEvent(event3);
const classx12 = document.querySelectorAll('.mat-ripple-element')
console.log(classx12,'mat-ripple-element exist?') // shows that exist
setTimeout(() => {
const classx1 = document.querySelectorAll('.mat-ripple-element')
console.log(classx1,'mat-ripple-element exist?') //shows that doesn't exist
},5000)
}
Of course after blur event when I just click element it works <mat-ripple-element does disappeared after blur, in settimeout also, but in test no>
anyone knows why it can behave like that?