'Angular unit test formgroup with formarray as a fieldcontrol
I am just trying to run a basic unit test to test if the component is defined. The code works fine when I am running the application but when I am trying to create a basic unit test and the setvalue method on the formgroup is throwing an error in my OnInit lifecycle hook.
Code:
constructor(private _fb: FormBuilder,
public dialogRef: MatDialogRef<LineChartWidgetConfigComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
this._dataSource = data.dataSource;
this._config = data.config;
// Setup our reactive form (initialize to defaults)
this.widgetConfigForm = new FormGroup({
title: this._fb.control(null, Validators.required),
idColumnName: this._fb.control(null, Validators.required),
chartSeries: new FormArray([])
});
this.chartSeries = this.widgetConfigForm.get('chartSeries') as FormArray;
}
ngOnInit(): void {
// retrieve all the series plots
this._config.series.forEach(series => {
this.chartSeries.push(new FormGroup({
yAxisColumnName: this._fb.control(series.yAxisColumnName, Validators.required),
yAxisLabel: this._fb.control(series.yAxisLabel ? series.yAxisLabel : series.yAxisColumnName, Validators.required),
color: this._fb.control(series.color? series.color : 'auto'),
filter: this._fb.control(series.filter.length > 0 ? series.filter : []),
}));
});
// Setup our reactive form using the provided configuration data (Errors here)
this.widgetConfigForm.setValue({
title: this._config.title,
idColumnName: this._config.currentIdColumn,
chartSeries: this.chartSeries
});
}
Unit Test:
const dataSource: any = {
columns:[{name:'ID', dataType:'number'}],
data:[[123]]
};
const series: Series = {
yAxisColumnName: 'yColName',
yAxisLabel: 'yAxisLabel',
color: 'green',
filter: ['ALL']
};
const config: ChartConfig = {
series: [series],
title: 'test',
currentIdColumn: 'ID',
idIndex: 0
};
const mData: any = {
dataSource: dataSource,
config: config
}
fdescribe('ChartComponent', () => {
let component: ChartComponent;
let fixture: ComponentFixture<ChartComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ MaterialModule, FormsModule, ReactiveFormsModule, NoopAnimationsModule ],
declarations: [ ChartComponent ],
providers: [ { provide: MatDialogRef, useValue: {} }, { provide: MAT_DIALOG_DATA, useValue: mData }],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ChartComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
When the unit test is run I get this error:
Error: Must supply a value for form control at index: 0.
at node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js:4534:1
at node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js:4513:1
at <Jasmine>
at FormArray._forEachChild (node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js:4512:1)
at FormArray._checkAllValuesPresent (node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js:4532:1)
at FormArray.setValue (node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js:4334:1)
at node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js:3927:1
at <Jasmine>
at FormGroup.setValue (node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js:3925:1)
I am not sure why this is happening. Is it because I am not setting up the data correctly in the unit test? All the fields appear to be populated when it calls setValue but its still throwing this error. Any help would be appreciated. Thanks.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
