如何在Angular2中测试ControllValueAccessor

我正在为我的角度应用程序编写业力测试。我使用使用ControllValueAccessor创建的自定义表单控件

是否有方法测试已实现的ControlValueAccessor方法（registerOnChange，…）

---

您可以在

.spec.ts

文件中创建一些测试组件，这些组件的模板中包含

我的表单输入

组件。请看一个例子（您还可以向测试组件添加

form

元素）

一旦您通过

TestBed

创建了组件，并且可以访问

DebugElement

的底层

nativeElement

，您就可以使用DOM

dispatchEvent（）

函数触发自定义事件，例如

MouseEvent

或

KeyboarEvent

-netel（角度文档最彻底的作者之一）拥有

---

要检查函数是否已被调用，可以使用应用于组件实例方法的Jasmine

spyOn

测试它，就像对未编写的组件进行测试一样：在表单中使用组件，并检查其行为是否正确：当您在其中输入某个内容时，它是否会更新模型？它是否显示值s以编程方式设置et？当您禁用表单控件时，它是否会在视觉上被禁用？等等。

@Component({
    selector: 'my-form-input',
    templateUrl: 'input.html',
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => InputComponent),
            multi: true
        }
    ]
})
export class InputComponent extends InputAbstractComponent {
    @Input() showPlaceHolder: Boolean = true;
    value = undefined;

    onChange = (value: string) => {
    };
    onTouched = (touched: boolean) => {
    };

    registerOnChange(fn: any): void {
        this.onChange = fn;
    }

    registerOnTouched(fn: any): void {
        this.onTouched = fn;
    }

    setDisabledState(isDisabled: boolean): void {
    }

    writeValue(value: string): void {
        this.value = value;
    }

    updateValue(value: string): void {
        this.onTouched(true);
        this.onChange(value);
    }
}