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 相关文章推荐
JavaScript入门教程 Cookies
Jan 31 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
跟我学习javascript的this关键字
May 28 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 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
php存储过程调用实例代码
2013/02/03 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
python 实现视频 图像帧提取
2019/12/10 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
.NET方向面试题
2014/11/20 面试题
高中毕业生个人自我鉴定
2013/11/24 职场文书
婚前保证书
2014/04/29 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
绿色环保倡议书
2015/04/28 职场文书