响应式表单getter函数单元测试角

Question

angular单元测试getter函数如何实现这个方法。

get f() {
return this.setUpForm.controls;
}
get bp() {
return (<FormGroup>this.setUpForm.get('bookingPeriodTime')).controls;
}

Answer 1

// imports

@Component({
selector: 'mock-form-component',
template: `<form [formGroup]="form">
<input formControlName="number"/>
<div formArrayName="bookingPeriodTime">
<div *ngFor="let name of bookingPeriodTime.controls; index as i" [formGroupName]="i"></div>
</div>
</form>`,
})
class HostComponent {
this.form = this.formBuilder.group({
number: new FormControl('',Validators.required )
bookingPeriodTime: new FormArray([new FormGroup({ 
name: new FormControl('name')
}),
]),
});
}
describe('SetUpFormComponent', () => {
let component: SetUpFormComponent;
let fixture: ComponentFixture<HostComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ReactiveFormsModule, FormsModule],
declarations: [SetUpFormComponent, HostComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SetUpFormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create component', () => {
expect(component).toBeTruthy();
});
it('should test getter f', () => {
const controls = this.formBuilder.group({
number: new FormControl('',Validators.required )
bookingPeriodTime: new FormArray([new FormGroup({ 
name: new FormControl('name')
}),
]),
});

expect(component.f).toEqual(controls); 
});
it('should test getter bookingPeriodTime', () => {
const bookingPeriodTime = this.formBuilder.group({
number: new FormControl('',Validators.required )
bookingPeriodTime: new FormArray([new FormGroup({ 
name: new FormControl('name')
}),
]),
});
expect(component.bp).toEqual(bookingPeriodTimeControl.get('bookingPeriodTime')).controls;); 
});
});