I am facing issues with some of my karma jasmine unit tests failing after adding an ngAfterViewChecked. Despite initializing the "mySwitchEl" as shown below, the error persists.
@Component({
selector: 'my-component',
templateUrl: './my.component.html'
})
export class MyComponent implements OnInit, OnDestroy, AfterViewChecked {
@ViewChild('myswitch') mySwitchEl: ElementRef;
public somethingEnabled: boolean;
public switchWidth: number;
constructor(private cd: ChangeDetectorRef) {
}
ngOnInit(): void {
// do stuff
}
ngOnDestory(): void {
// do stuff
}
ngAfterViewChecked(): void {
this.switchWidth = this.mySwitchEl.nativeElement.offsetWidth * 2;
this.cd.detectChanges();
}
}
Below is a snippet of the unit test code. Placing "fixture.detectChanges" in the beforeEach causes all unit tests to fail instead of just a few.
import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
@ViewChild('myswitch') mySwitchEl: ElementRef;
public somethingEnabled: boolean;
public switchWidth: number;
constructor(private cd: ChangeDetectorRef) {
}
ngOnInit(): void {
// do stuff
}
ngOnDestory(): void {
// do stuff
}
ngAfterViewChecked(): void {
this.switchWidth = this.mySwitchEl.nativeElement.offsetWidth * 2;
this.cd.detectChanges();
}
}
Here's a sample of the HTML structure:
<label class="switch-light" [style.width.px]="switchWidth">
<a class="btn btn-primary" id="my-switch-identifier" #myswitch>
Some Text Here
</a>
</label>
Any insights on what could be causing these errors?