如何对使用@Self装饰ngControl的反应组件进行单元测试

本文介绍了如何对使用@Self装饰ngControl的反应组件进行单元测试的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我已经通过注入NgControl编写了一个反应组件，并使用@Self装饰器对其进行了装饰.我的问题与此类组件的单元测试有关. 请查看下面的代码:

I've written a reactive component by injecting the NgControl and which is decorated using the @Self decorator. My problem is related to unit testing of such component. Please look at the code below:

免责声明:我已经快速复制了代码并进行了一些内联更改.因此，这可能不是编译器满意的代码.

Disclaimer: I've quickly copied the code and made some inline changes. So, this might not be a compiler happy code.

我的反应组件:

@Component({ selector: 'text-input', templateUrl: '<input type="text" class="native_input" />' }) class TextInput implements ControlValueAccessor { protected constructor(@Self() public controlDir: NgControl) { this.controlDir.valueAccessor = this; } // ...followed by other ControlValueAccessor methods }

单元测试:

describe('TextInput -', () => { let fixture: ComponentFixture<TextInputHost>; let textInput: TextInput; let inputElement: HTMLInputElement; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ TextInput, TextInputHost ], imports: [ FormsModule, ReactiveFormsModule ] }); })); beforeEach(fakeAsync(() => { fixture = getTestBed().createComponent(TextInputHost); textInput = fixtureponentInstance.textInputComponent; textInput.writeValue('TestValue'); inputElement = fixture.debugElement .query(By.css('native_input')).nativeElement; fixture.detectChanges(); tick(); })); it('Should have the initial value applied.', () => { expect(inputElement.value).toBe('TestValue'); }); }); // Host component @Component({ template: ` <form [formGroup]="pageForm"> <text-input formControlName="testInput"> </text-input> </form>` }) class TextInputHost { @ViewChild(TextInput) public textInputComponent: TextInput; public pageForm: FormGroup = new FormGroup({ testInput: new FormControl('Initial Value') }); }

每当我尝试运行上述单元测试时.它失败，并显示以下错误: Template parse errors: No provider for NgControl --> <text-input>....</text-input>

Whenever I try to run the above unit test. It fails with the following error: Template parse errors: No provider for NgControl --> <text-input>....</text-input>

因此，我正在寻找一种成功运行上述单元测试的方法.我正在寻找的是一种将NgControl注入到TextInput组件的方法.

So I'm looking for a way to successfully run the above unit test. What, I'm looking for is a way to inject the NgControl to the TextInput component.

推荐答案

如果有人偶然发现了这个问题，我将使用TestBed类的overrideComponent()方法解决该问题.

If anybody stumbles upon this question, I solved it using the overrideComponent() method of the TestBed class.

注意:如果您认为自己还有其他答案，请随时回答.

要注入NgControl:

To inject the NgControl:

beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ TextInput, TextInputHost ], imports: [ FormsModule, ReactiveFormsModule ] }) .overrideComponent(TextInput, { set: { providers: [ { provide: NgControl, useValue: new FormControlDirective([], [], null, null) } ] } }); }));