I have a template driven form with many inputs like the following
<input type="text" name="data" [(ngModel)]="data" [disabled]="disabled" />
I want to write a test which will ensure that all inputs are disabled when the disabled variable is set to true. Below is my test so far. It works, but there are several "disabled" properties on element and element.nativeElement which remain false. Plus, the rendered view in Chrome when stopped in the debugger doesn't look disabled. Only the "ng-reflect-is-disabled" attribute is actually true.
it("should disable all inputs when disabled is true", () => {
component.disabled = true;
fixture.detectChanges();
inputs = fixture.debugElement.queryAll(By.css('input'));
inputs.forEach(element => {
expect(element.attributes["ng-reflect-is-disabled"]).toBe('true');
});
});
Is there a better way that I can actually check the disabled state of my input?