angular - 使用 Angular 和 Jasmine 监听输入按键的测试指令

Question

我有一个指令，它监听 keydown 事件以便在按下 enter 时采取行动，以及一个使用它的组件：

onEnter 指令

@Directive({
    selector: '[appOnEnter]'
})
export class OnEnterDirective {

    @Output() enterPressed = new EventEmitter();

    @HostListener('document:keydown', ['$event'])
    onKeyPress(event: KeyboardEvent) {
        if ((event.which === 13)) {
            this.enterPressed.emit();
        }
    }

}

组件.html

<div appOnEnter (enterPressed)=do()></div>

组件.ts

export class Component {

    next = new EventEmitter<null>();

    do() {
        this.next.emit();
    }

}

我正在尝试用 Jasmine 对此进行测试，但似乎没有触发该事件。

组件.spec.ts

it('if enter is pressed action should be taken', () => {
        spyOn(component.next, 'emit');
        const event = new KeyboardEvent('keypress', {
            key: 'Enter'
        });
        fixture.detectChanges();
        expect(component.next.emit).toHaveBeenCalled();
    });

组件和指令工作正常，唯一的问题是模拟输入压力。

标签： angularjasmine