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


Posted in Javascript onJanuary 20, 2020

=在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(); // 更新视图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
Js 随机数产生6位数字
May 13 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 #Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 #Javascript
阿望教你用vue写扫雷小游戏
Jan 20 #Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 #Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 #Javascript
js原生map实现的方法总结
Jan 19 #Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 #Javascript
You might like
自己做矿石收音机
2021/03/02 无线电
php 获得汉字拼音首字母的函数
2009/08/01 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python显示生日是星期几的方法
2015/05/27 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
什么是反射
2012/03/17 面试题
最新销售员个人自荐信
2013/09/21 职场文书
大学生个人总结的自我评价
2013/10/05 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
施工安全责任协议书
2016/03/23 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android