在Angular中进行集成测试时,可以使用dispatchEvent
方法来模拟鼠标事件,并指定目标元素。
以下是一个示例解决方法:
By
和DebugElement
:import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
DebugElement
:const buttonDebugElement: DebugElement = fixture.debugElement.query(By.css('button'));
dispatchEvent
方法模拟鼠标事件,并指定目标元素:const buttonElement: HTMLElement = buttonDebugElement.nativeElement;
buttonElement.dispatchEvent(new MouseEvent('click'));
完整的示例代码如下:
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { MyComponent } from './my.component';
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ MyComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should trigger click event on button', () => {
const buttonDebugElement: DebugElement = fixture.debugElement.query(By.css('button'));
const buttonElement: HTMLElement = buttonDebugElement.nativeElement;
const spy = spyOn(component, 'handleClick');
buttonElement.dispatchEvent(new MouseEvent('click'));
expect(spy).toHaveBeenCalled();
});
});
这个示例代码是在一个Angular组件的集成测试中模拟了一个按钮的点击事件,并验证了handleClick
方法是否被调用。
希望这个示例能帮助你解决问题!