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 相关文章推荐
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
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
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
群胜软件Java笔试题
2012/09/29 面试题
预防艾滋病宣传活动总结
2015/05/09 职场文书
培训感想范文
2015/08/07 职场文书
Android Rxjava3 使用场景详解
2022/04/07 Java/Android