gpt4 book ai didi

angular - 无法在单元测试用例中调用@HostListener方法

转载 作者:行者123 更新时间:2023-12-02 21:18:24 25 4
gpt4 key购买 nike

我使用 @Directive 创建了一个自定义指令,其中使用 @HostListener 并且代码工作正常。
现在,在编写测试用例时,我需要从单元测试用例中调用 @HostListener 方法。我还可以看到,在代码覆盖率中,代码没有被覆盖。
代码如下:

focus-encapsulation.directive.ts

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
selector: '[appFocusEncapsulation]'
})
export class FocusEncapsulationDirective {

constructor(private el: ElementRef) { }

@HostListener('keydown', ['$event'])
keyDown(event: Event) {
console.log('event : ', event);
event.preventDefault();
}

}

focus-encapsulation.directive.spec.ts

import { FocusEncapsulationDirective } from './focus-encapsulation.directive';
import { Component, ElementRef, DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from "@angular/platform-browser";

@Component({
template: `<div appFocusEncapsulation><button type="button" (click)="add()">ADD</button></div>`
})
class TestHoverFocusComponent {
constructor(private el: ElementRef) {
console.log('in constructor')
}
}

fdescribe('FocusEncapsulationDirective', () => {

let component: TestHoverFocusComponent;
let fixture: ComponentFixture<TestHoverFocusComponent>;
let inputEl: DebugElement;
let elementRef: ElementRef

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestHoverFocusComponent, FocusEncapsulationDirective]
});
fixture = TestBed.createComponent(TestHoverFocusComponent);
component = fixture.componentInstance;
elementRef = fixture.nativeElement;
inputEl = fixture.debugElement.query(By.css('button'));
});

it('should create an instance', () => {
const directive = new FocusEncapsulationDirective(elementRef)
expect(directive).toBeTruthy();
});

it('Focus over elements', () => {
fixture.detectChanges();
const event = {
which : 9,
keyCode : 9,
srcElement :{
innerText : 'ADD'
},
preventDefault: function() {
console.log('preventDefault() method called');
}
}
spyOn(event, 'preventDefault');
inputEl.triggerEventHandler('keydown', event);
expect(event.preventDefault()).toHaveBeenCalled();
});

});

下面您还可以看到代码覆盖率报告:
enter image description here

在这里,我需要覆盖代码并执行该方法所需的正确测试用例。谢谢。

最佳答案

这是测试的固定版本:

fdescribe('FocusEncapsulationDirective', () => {

let fixture: ComponentFixture<TestHoverFocusComponent>;
let inputEl: HTMLElement;

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestHoverFocusComponent, FocusEncapsulationDirective]
});
fixture = TestBed.createComponent(TestHoverFocusComponent);
inputEl = fixture.nativeElement.querySelector('button');
});

it('Focus over elements', () => {
fixture.detectChanges();
const event = new Event('keydown', { bubbles: true });
spyOn(event, 'preventDefault');
inputEl.dispatchEvent(event);
expect(event.preventDefault).toHaveBeenCalled();
});

});

要点:

  • 您需要将 spy 函数本身传递给expect(),以检查它是否已被调用。您的代码调用 sied 函数,并将其返回的内容传递给 epect()。
  • 您需要传递一个实际事件(尤其是 bubbles 标志设置为 true 的事件,否则该事件不会冒泡,并且封闭 div 上的监听器将不会收到该事件的通知在随附的按钮上触发)到 native DOM 元素。

关于angular - 无法在单元测试用例中调用@HostListener方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48194179/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com