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();
    });