Angular单元测试之事件触发的实现

更新时间：2020年01月20日 11:07:05 作者：Rachel

这篇文章主要介绍了Angular单元测试之事件触发的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

=在angular项目中时常有一些click、input、focusout等事件操作，那么如何在单元测试中触发这些事件呢？

一、触发Click事件

// 方法一
const ele = fixture.debugElement.query(By.css("#id"));
ele.triggerEventHandler('click', null)
fixture.detectChanges(); // 更新视图

// 方法二
const ele = fixture.nativeElement.querySelector("#id");
ele.click();
fixture.detectChanges(); // 更新视图

二、触发input事件

触发input事件，需要在获取到input元素后，先给输入框绑定值，然后去触发输入事件，最后更新视图。

const input = fixture.nativeElement.querySelector("#input");
input.value = 'abc';
input.dispatchEvent(new Event('input'));
fixture.detectChanges(); // 更新视图

二、触发focusout事件

const input = fixture.nativeElement.querySelector("#input");
input.dispatchEvent(new Event('focusout'));
fixture.detectChanges(); // 更新视图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Angular value与ngValue区别详解
这篇文章主要介绍了Angular value与ngValue区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
angularjs的一些优化小技巧
这篇文章主要介绍了angularjs的一些优化小技巧,本文总结了5种优化技巧,如一次绑定、尽可能少调用 ng-repeat、尽量在指令里写原生语法、页面内尽量少用filters等,需要的朋友可以参考下
2014-12-12
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
这篇文章主要介绍了AngularJS使用angular.bootstrap完成模块手动加载的方法,结合实例形式分析了angular.bootstrap函数手动加载模块的步骤与相关操作技巧,需要的朋友可以参考下
2017-01-01
Angularjs过滤器实现动态搜索与排序功能示例
这篇文章主要介绍了Angularjs过滤器实现动态搜索与排序功能,涉及AngularJS过滤器相关搜索、查询、排序操作技巧,需要的朋友可以参考下
2017-12-12
angular框架实现全选与单选chekbox的自定义
这篇文章主要介绍了angular框架实现全选与单选chekbox的自定义,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
AngularJs 常用的过滤器
本篇文章主要介绍了AngularJs常用的过滤器。具有很好的参考价值。下面跟着小编一起来看下吧
2017-05-05
angularjs 表单密码验证自定义指令实现代码
这篇文章主要介绍了angularjs 表单密码验证自定义指令实现代码,需要的朋友可以参考下
2016-10-10
Angular2开发——组件规划篇
本文主要介绍了Angular2组件的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
2017-03-03
angularjs 页面自适应高度的方法
本篇文章主要介绍了angularjs 页面自适应高度的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
AngularJS实现tab选项卡的方法详解
这篇文章主要介绍了AngularJS实现tab选项卡的方法,结合实例形式较为详细的分析了AngularJS实现tab选项卡的原理、实现技巧与相关注意事项,需要的朋友可以参考下
2017-07-07