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

问题描述：

我有一个这样的组件

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

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

As you see it's a custom form control. I use it in a component which I'm going to test.

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

',})导出类 AppComponent 实现 OnInit, OnDestroy {...}

So how can I mock app-custom-form-control for my test?

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

The current implementation needs a real component...

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

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

Otherwise(without declaration the component) I got an error Failed: No value accessor for form control with name: app-custom-form-control

否则(没有声明组件)我得到一个错误 Failed: No value accessor for form control with name: app-custom-form-control

解决方案

答

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

1- Stubbing unneeded components, where

1- 剔除不需要的组件，其中>

(...) 创建并声明组件的存根版本，在测试中发挥很小或没有作用的指令 (...)

2- NO_ERRORS_SCHEMA 其中

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

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

With this last one the compiler won't throw an error when it encounters the app-custom-form-control selector in the AppComponent template.

3- 同时使用这两种技术

选择一种或另一种方法，这取决于您，因为这取决于您测试的最终目标.

Selecting one approach or another, it's up to you, since it depends on the final goal you aim to with the test.

应用方法 1，它会是这样的:

Applying approach 1 it would be something like this:

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

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

相关推荐