Angular: установка начального значения FormArray для модульных тестов

Question

Я пытаюсь выполнить модульное тестирование созданного мной метода, который возникает при изменении флажка в серии флажков. Мы берем пройденное событие, определяем значение и, если флажок был отмечен, отмечаем, а затем изменяем значение массива форм в зависимости от того, содержит или нет FormArray значение флажка. Компонент наследует свой parentForm, поэтому я высмеиваю это в модульном тесте компонента.

Моя проблема в том, что приведенный ниже код 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;, чтобы он не был пустым?

Если я не объяснил это хорошо или мне нужно объяснить больше, пожалуйста, дайте мне знать, и я перефразирую свой вопрос.

Answer 1

Перед тестами мне пришлось переназначить форму

beforeEach(() => {
      component.parentForm = new FormGroup({
        roles: new FormArray(
          [ new FormControl('system_admin'), new FormControl('i_and_e_shop') ])
      });
      fixture.detectChanges();
    });