Как проверить ControllValueAccessor в Angular2 - PullRequest
Новая
       20

Как проверить ControllValueAccessor в Angular2

0 голосов
/ 19 октября 2019

Я пишу тесты кармы для моего углового приложения. Я использую пользовательские элементы управления формы, созданные с помощью ControllValueAccessor.

Есть ли способ проверить реализованные методы ControllValueAccessor (registerOnChange, ...) 

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

1 Ответ

0 голосов
/ 19 октября 2019

Вы можете создать некоторые тестовые компоненты в вашем файле .spec.ts, в котором ваш my-form-input компонент находится в своих шаблонах. Взгляните на Angular Material Checkbox тесты , чтобы увидеть пример этого (вы также можете добавить form элемент к тестовым компонентам)

Как только вы создали компонент через TestBed, и имея доступ к базовому nativeElement из DebugElement, вы можете использовать функцию DOM dispatchEvent() для запуска пользовательских событий, таких как MouseEvent или KeyboarEvent - Нетанел Базаль (один из самых тщательных авторовдокументации Angular) имеет хороший пример

Чтобы проверить, что ваши функции были вызваны, вы должны использовать Jasmine spyOn, примененный к методам экземпляра компонента

...