Я пытаюсь выполнить модульное тестирование этого созданного мной метода, который вызывается при изменении флажка в серии флажков. Мы берем переданное событие, определяем значение и, если флажок установлен, а затем изменяем значение массива форм в зависимости от того, содержит ли FormArray значение флажка или нет. Компонент наследует свою родительскую форму, поэтому я издеваюсь над этим в модульном тесте компонента.
Моя проблема в том, что приведенный ниже код const checkArray: FormArray
всегда является пустым массивом в моем модульном тесте. Вот метод:
checkboxChange($event: any): void {
const checkArray: FormArray = this.parentForm.controls['roles'] as FormArray;
if ($event.source.value && $event.source.checked) {
checkArray.push(new FormControl($event.source.value));
} else if ($event.source.value && !$event.source.checked) {
checkArray.controls.forEach((item: FormControl, index: number) => {
if (item.value === $event.source.value) {
checkArray.removeAt(index);
return;
}
});
}
}
Итак, в своем модульном тесте я пытаюсь воссоздать форму, в состоянии инициации я оставляю ее пустой, поскольку использую ее для других тестов. Затем я перед своими тестами для приведенного выше кода пытаюсь установить значение элемента формы.
beforeEach(() => {
fixture = TestBed.createComponent(RolesCheckboxesComponent);
component = fixture.componentInstance;
component.parentForm = new FormGroup({
roles: new FormArray([])
});
fixture.detectChanges();
});
describe('checkboxChange', () => {
it('should remove a role that is already present then add it again', async(() => {
fixture.whenStable().then(() => {
component.parentForm.controls['roles'].patchValue(
[new FormControl('system_admin'), new FormControl('i_and_e_shop')]
);
// component.parentForm.controls['roles'].value.push(new FormControl('system_admin'));
// component.parentForm.controls['roles'].value.push(new FormControl('i_and_e_shop'));
fixture.detectChanges(component.parentForm.controls['roles'].value);
component.checkboxChange({ source: { value: 'i_and_e_shop', checked: false } });
expect(component.parentForm.controls['roles'].value)
.toEqual(['system_admin']);
component.checkboxChange({ source: { value: 'i_and_e_shop', checked: true } });
expect(component.parentForm.controls['roles'].value).toEqual(['system_admin', 'i_and_e_shop']);
});
}));
});
Проблема с моим модульным тестом заключается в том, что когда мой метод тестируется, component.parentForm.controls['roles']
пуст, в приложении он заполняется FormControls. Я пробовал нажимать, исправлять значение FormArray, но ничего из того, что я делаю, похоже, не работает. Кто-нибудь может дать совет, как воссоздать this.parentForm.controls['roles'] as FormArray;
, чтобы он не был пустым?
Если я не объяснил это хорошо или мне нужно объяснить больше, пожалуйста, дайте мне знать, и я переформулирую свой вопрос.