脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angular 单元测试 事件触发

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中如何监控dom渲染完毕

    详解angular中如何监控dom渲染完毕

    AngularJs是Google开源的前端JS框架。使用AngularJs, 我们能够容易地、健壮的开发出类似于Gmail一样的单页Web应用。这篇文章主要介绍了详解angular中如何监控dom渲染完毕，有兴趣的可以了解一下。
    2017-01-01
  • Angular异步变同步处理方法

    Angular异步变同步处理方法

    今天小编就为大家分享一篇Angular异步变同步处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Angular设置别名alias的方法

    Angular设置别名alias的方法

    这篇文章主要介绍了Angular设置别名alias及打包命令的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • AngularJS使用ng-options指令实现下拉框

    AngularJS使用ng-options指令实现下拉框

    这篇文章主要介绍了AngularJS使用ng-options指令实现下拉框效果，ng-option指令使用也很简单，下文具体给大家说明，对angularjs 下拉框知识感兴趣的朋友一起看下吧
    2016-08-08
  • AngularJS全局scope与Isolate scope通信用法示例

    AngularJS全局scope与Isolate scope通信用法示例

    这篇文章主要介绍了AngularJS全局scope与Isolate scope通信用法,结合格式分析了全局scope和directive本地scope相关功能、通信用法与相关注意事项,需要的朋友可以参考下
    2016-11-11
  • Angular 4.x 动态创建表单实例

    Angular 4.x 动态创建表单实例

    本篇文章主要介绍了Angular 4.x 动态创建表单实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • AngularJS与BootStrap模仿百度分页的示例代码

    AngularJS与BootStrap模仿百度分页的示例代码

    分页在很多时候都能用到，这篇文章主要介绍了AngularJS与BootStrap模仿百度分页的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • angularjs实现柱状图动态加载的示例

    angularjs实现柱状图动态加载的示例

    本篇文章主要介绍了angularjs实现柱状图动态加载的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Angular中使用$watch监听object属性值的变化(详解)

    Angular中使用$watch监听object属性值的变化(详解)

    下面小编就为大家带来一篇Angular中使用$watch监听object属性值的变化(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • AngularJS实现数据列表的增加、删除和上移下移等功能实例

    AngularJS实现数据列表的增加、删除和上移下移等功能实例

    这篇文章给大家分享了AngularJS循环实现数据列表的增加、删除和上移下移等基础功能，对大家学习AngularJS具有一定的参考借鉴价值，有需要的朋友可以看看。
    2016-09-09

最新评论