Angular-如何使用自定義輸入組件子級測試容器組件？

Question

問題

我有一個使用自定義輸入組件的容器組件。 在服務中或構建后，它可以正常工作，但在測試中不起作用。

這是我得到的錯誤： Error: No value accessor for form control with name: 'name'

---

這是我文件的簡化版本：

模板

<app-modal>
  <form [formGroup]="myForm" novalidate>
    <app-input formControlName="name"></app-input>
  </form>
</app-modal>

測試

@Component({ selector: 'app-input', template: '' })
class InputStubComponent {}

beforeEach(async(() => {
  TestBed.configureTestingModule({
    schemas: [ NO_ERRORS_SCHEMA ],
    declarations: [
      InputStubComponent
    ],
    imports: [
      ReactiveFormsModule,
    ]
  })
  .compileComponents();
}));

---

我也嘗試過：使用CUSTOM_ELEMENTS_SCHEMA而不聲明組件。

Answer 1

有兩種解決方法：

推薦的
1）您可以從imports屬性中刪除ReactiveFormsModule ，並將FormBuilder添加到providers屬性。 ReactiveFormsModule添加了formGroup和formControlName指令，它們在模板級別進行檢查。

這就是您的示例中的樣子：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    schemas: [ NO_ERRORS_SCHEMA ],
    declarations: [
      InputStubComponent
    ],
    providers: [
      FormBuilder
    ]
  })
  .compileComponents();
}));

---

2）如果要測試子組件或保留ReactiveFormsModule ，則此函數可使用值訪問器創建准系統存根組件：

const createAccessorComponent = (selector) => {
  @Component({
    selector: selector,
    template: '',
    providers: [
      {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => AccessorComponent),
        multi: true,
      },
    ],
  })
  class AccessorComponent implements ControlValueAccessor {
    writeValue(obj: any): void {}
    registerOnChange(fn: any): void {}
    registerOnTouched(fn: any): void {}
    setDisabledState(isDisabled: boolean): void {}
  }

  return AccessorComponent;
};

您可以通過以下方式使用它：

const InputStubComponent = createAccessorComponent('app-input');

beforeEach(async(() => {
  TestBed.configureTestingModule({
    schemas: [ NO_ERRORS_SCHEMA ],
    declarations: [
      InputStubComponent
    ],
    imports: [
      ReactiveFormsModule,
    ]
  })
  .compileComponents();
}));