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

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

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


person Mike Sav    schedule 21.04.2020    source источник


Ответы (1)


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

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