相关疑难解决方法(0)

如何测试包含自定义表单控件的组件?

我有一个这样的组件

@Component({
      selector: 'app-custom-form-control',
      templateUrl: '<input>',
      providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef(() => SelectComponent),
          multi: true
        }
      ]
    })
export class CustomFormControlComponent implements ControlValueAccessor {...}
Run Code Online (Sandbox Code Playgroud)

如您所见,它是一个自定义表单控件。我在要测试的组件中使用它。

    @Component({
      selector: 'app-root',
      templateUrl: '<div [formGroup]="form">
          <app-custom-form-control formControlName="my_field"></app-custom-form-control>
      </div>',
    })
    export class AppComponent implements OnInit, OnDestroy {...}
Run Code Online (Sandbox Code Playgroud)

那么我该如何模拟app-custom-form-control我的测试呢?

当前的实现需要一个真正的组件......

  beforeEach(async(() => {
    const testRouter = new RouterStub();
    const testDataService = new DataServiceStub();
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        CustomFormControlComponent // it is a real stuff
      ],
      imports: [
        ReactiveFormsModule
      ],
      providers: [
        { …
Run Code Online (Sandbox Code Playgroud)

testing unit-testing custom-controls angular angular-reactive-forms

6
推荐指数
1
解决办法
3448
查看次数