Javascript 如何使用Jest单元测试触发transitionend
我使用angular 8和Jest进行单元测试。我已经在元素上添加了一个“transitionend”的侦听器,但是我还没有弄清楚如何使用Jest触发/模拟transitionend事件Javascript 如何使用Jest单元测试触发transitionend,javascript,css,angular,unit-testing,jestjs,Javascript,Css,Angular,Unit Testing,Jestjs,我使用angular 8和Jest进行单元测试。我已经在元素上添加了一个“transitionend”的侦听器,但是我还没有弄清楚如何使用Jest触发/模拟transitionend事件 this.animatedElement.nativeElement.addEventListener('transitionend', () => { this.transitionEnded = true; }); 我正在尝试创建一个单元测试来测试这一点。transitionEnded是
this.animatedElement.nativeElement.addEventListener('transitionend', () => {
this.transitionEnded = true;
});
我正在尝试创建一个单元测试来测试
这一点。transitionEnded
是真的我能够找到一些适合我的东西
it('Should set transitionEnded to true', () => {
// created 'transitionend' event
const event = new Event('transitionend');
const component = TextBed.createComponent(AppComponent).componentInstance;
// call method that adds event listener to animatedElement
component.methodToAddListener();
// dispatch event that you created on animatedElement
component.animatedElement.nativeElement.dispatchEvent(event);
expect(component.transitionEnded).toBe(true);
});
使用此帮助器函数可触发任何事件:
function triggerTransitionEnd(element) {
let event = document.createEvent("Event");
event.initEvent("transitionend", true, true);
element.dispatchEvent(event);
}
然后在测试中,像这样使用它:
test("Some description here", () => {
const popup = document.getElementById("popup");
triggerTransitionEnd(popup);
expect(popup.classList.contains("show")).toBeFalsy();
});