如何测试包含自定义表单控件的组件？答案

【问题标题】：How to test a component which contains a custom form control?如何测试包含自定义表单控件的组件？
【发布时间】：2018-11-22 02:33:06
【问题描述】：

我有一个这样的组件

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

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

    @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 {...}

那么我如何模拟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: [
        { provide: Router, useValue: testRouter },
        { provide: DataService, useValue: testDataService }
      ],
      schemas: [ NO_ERRORS_SCHEMA ]
    }).compileComponents();
  }));

否则（不声明组件）我收到错误Failed: No value accessor for form control with name: app-custom-form-control

【问题讨论】：

标签： angular unit-testing testing custom-controls angular-reactive-forms

【解决方案1】：

在对 Angular 应用程序进行测试时，您可以遵循两种主要方法（和混合）：

1-Stubbing unneeded components，其中

(...) 您创建和声明组件的存根版本，并指令在测试中几乎没有作用（...）

2- NO_ERRORS_SCHEMA 其中

(...) 告诉 Angular 编译器忽略无法识别的元素和属性 (...)

使用最后一个，编译器在遇到AppComponent 模板中的app-custom-form-control 选择器时不会抛出错误。

3-Use both techniques together

选择一种或另一种方法，由您决定，因为这取决于您在测试中的最终目标。

应用方法 1 会是这样的：

describe('AppComponent', () => {

// component stub
@Component({selector: 'app-custom-form-control', template: ''})
class CustomFormControlComponentStub {}
//...
  beforeEach(async(() => {
    const testRouter = new RouterStub();
    const testDataService = new DataServiceStub();
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        CustomFormControlComponentStub // it is fake! stuff
      ],
      // ... code omitted
    }).compileComponents();
  }));
//...
});

【讨论】：