Currently using Angular 8 with Jasmine testing. I have a simple loop of radio buttons and want to test a function that sets the checked attribute on the (x)th radio button within the loop based on this.startingCarType.
I am encountering false and null test errors and seeking advice on the best way to approach this problem.
Any suggestions would be greatly appreciated.
I've observed that changing [checked]="setChecked(i)" to checked="true" leads to passing tests, which is logical. Therefore, my question/issue revolves around [checked]="setChecked(i)".
HTML
<div class="cars">
<div *ngFor="let car of arrayOfCarType; let i = index">
<input
type="radio"
name="cars"
[id]="i"
[checked]="setChecked(i)"
/>
<label [for]="i">Car Type {{ i }}</label>
</div>
</div>
TS
this.arrayOfCarTypes = new Array(4).fill({})
this.startingCarType = 0
....
public setChecked(i: number) {
return this.startingCarType === i;
}
SPEC
let component: CarComponent;
let fixture: ComponentFixture<CarComponent>;
let input: any;
let startingCarType: number;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [CarComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CarComponent);
component = fixture.componentInstance;
component.arrayOfItems = new Array(4).fill({});
fixture.detectChanges();
});
describe('setChecked()', () => {
it('should set checked attribute', () => {
startingCarType = 0;
fixture.detectChanges();
input = fixture.nativeElement.querySelector('.cars div input[id="0"]');
expect(input.checked).toBeTruthy(); // Expected false to be truthy
expect(input.getAttribute('checked')).toEqual('true'); // Expected null to equal 'true'
});
});