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

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

赞 (0)

相关推荐

  • AngularJS 单元测试（二）详解

    使用对象模拟注入 我们可以非常容易的使用angularjs的$provider服务用一个对象模拟一个依赖并且注入. 例子如下 angular.module('artists',[]). factory('Artists',['imageStore',function(imageStore){ return { thumb:function(){ return imageStore.thumbnailUrl(id) } } }]) 如何实现 如何确定了服务 1.创建一个URL的引用,稍后会被moc

  • 浅谈Angular单元测试总结

    测试分类 按开发阶段划分 单元测试 单元测试又称模块测试,针对软件设计中的最小单位--程序模块,进行正确性检查的测试工作. 集成测试 集成测试又叫组装测试,通常在单元测试的基础上,将所有程序模块进行有序的.递增测试.重点测试不同模块的接口部分 系统测试 指的是将整个软件系统看成一个整体进行测试,包括对功能.性能以及软件所运行的软硬件环境进行测试. 验收测试 指按照项目任务书或合同.供需双方约定的验收依据文档进行的对整个系统的测试与评审,决定是否接收或拒收系统 按是否运行划分 静态测试 是指不实际

  • 利用Jasmine对Angular进行单元测试的方法详解

    前言 本文主要介绍的是关于利用Jasmine对Angular单元测试的相关内容,以下是我假定那些极少或压根没写单元测试的人准备的,因此,会白话解释诸多概念性问题,同时会结合 Jasmine 与之对应的方法进行讲解. 一.概念 Test Suite 测试套件,哪怕一个简单的类,也会有若干的测试用例,因此将这些测试用例集合在一个分类下就叫Test Suite. 而在 Jasmine 就是使用 describe 全局函数来表示,它的第一个字符串参数用来表示Suite的名称或标题,第二个方法参数就是实现

  • 对Angular.js Controller如何进行单元测试

    对Angular.js Controller如何进行单元测试

    一.写个简单的Angular App 在开始写测试之前,我们先写一个简单的计算App,它会计算两个数字之和. 代码如下: <html> <head> <script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular.min.js"></script> </head> <body> <!-- T

  • AngularJS 单元测试（一）详解

    AngularJS单元测试 网上有很多单元测试的教程,比如如何安装jasmine和ngMock,大家可以搜一下.这里就不在说了.下面重点介绍一个单元测试的过程. 加载一个模块 AngularJS用module来包括应用不同的部分比如controllers,services, filters.为了测试不同的部分,我们需要一个不同模块的引用,并且加载它.Angularjs模块注入使用ngMock模块.ngMock模块能够注入服务service进入单元测试. ngMock暴露出angular.mock

  • angularjs中的单元测试实例

    当ng项目越来越大的时候,单元测试就要提上日程了,有的时候团队是以测试先行,有的是先实现功能,后面再测试功能模块,这个各有利弊,今天主要说说利用karma和jasmine来进行ng模块的单元测试. 什么是Karma karma是一个单元测试的运行控制框架,提供以不同环境来运行单元测试,比如chrome,firfox,phantomjs等,测试框架支持jasmine,mocha,qunit,是一个以nodejs为环境的npm模块. 安装测试相关的npm模块建议使用----save-dev参数,因为

  • 在JavaScript的AngularJS库中进行单元测试的方法

    在JavaScript的AngularJS库中进行单元测试的方法

    开发者们都一致认为单元测试在开发项目中十分有好处.它们帮助你保证代码的质量,从而确保更稳定的研发,即使需要重构时也更有信心.  测试驱动开发流程图 AngularJS的代码声称其较高的可测性确实是合理的.单单文档中列出端对端的测试实例就能说明.就像AngularJS这样的项目虽然都说单元测试很简单但真正做好却不容易.即使官方文档中以提供了详尽的实例,但在我的实际应用中却还是很有挑战.这里我就简单示范一下我是怎么操作的吧. Instant Karma Karma 是来Angular团队针对Java

  • 使用Angular CLI进行单元测试和E2E测试的方法

    第一篇文章是: "使用angular cli生成angular5项目" ://www.jb51.net/article/136621.htm 第二篇文章是: "使用angular cli从蓝本生成代码" ://www.jb51.net/article/137031.htm 第三篇文章是: "使用Angular CLI生成路由" ://www.jb51.net/article/137033.htm 第四篇文章时: "使用Angular C

  • AngularJs unit-testing（单元测试）详解

    javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编译器几乎不能给开发者提供任何帮助.因为这个原因,我们感受到编写任何javascript代码都必须有一套强大完整的测试.angular拥有许多功能,让我们更加容易地测试我们的应用.我们应该没有借口不去写测试(这个嘛--). 一. It is all about NOT mixing concerns(全部都关于避免代码关系变得复杂--) 单元测试,正如名称那样,是关于测试单个"单元"的代码.单元测试努力解答这

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

    =在angular项目中时常有一些click.input.focusout等事件操作,那么如何在单元测试中触发这些事件呢? 一.触发Click事件 // 方法一 const ele = fixture.debugElement.query(By.css("#id")); ele.triggerEventHandler('click', null) fixture.detectChanges(); // 更新视图 // 方法二 const ele = fixture.nativeElem

  • 前端单元测试之UI测试功能性代码测试教程

    目录 前言 UI测试: 功能性代码测试: 让人闻风丧胆的单元测试 代码测试代码 Jest介绍 一.基础教程 安装 源码开发 测试用例编写 开始测试 二.核心API 全局方法 匹配器 异步代码测试 回调 Promise Async/Await Mock Functions 使用 mock 函数 .mock 属性 Mock 的返回值 Mocking Modules 快照测试 前言 <孤勇者>最近火爆的一塌糊涂,占领了小学生.甚至幼儿园,连我家2岁多的儿子尽然也会哼几句.虽然他以为这首歌是奥特曼的主

  • checkbox:click事件触发span元素内容改变的方法

    示例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>checkbox</title> <script src="jquery.js"></script> </head> <body> <p>我想去<span id

  • HTML中事件触发列表与解说

    一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3  鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O  鼠标双击事件 onMouseDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O  鼠标上的按钮被按下了 onMouseUp HTML: 2 | 3 

  • jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验)

    本文实例讲述了jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验).分享给大家供大家参考,具体如下: 前台显示页面: welcome.jsp <%@ page language="java" contentType="text/html; utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transiti

  • javascript 动态改变onclick事件触发函数代码

    javascript 动态改变onclick事件触发函数代码 function oc() { alert("原本的方法"); } function od() { alert("我改变方法了."); } function of() { document.getElementById('name').onclick = function(){ od(); }; } 原来的方法 通过点击,改变原来的方法的执行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • Jquery on绑定的事件 触发多次实例代码

    用'on'函数为一个新增的按钮绑定了一个事件,这是事件会触发多次. <html> <head> <meta name="viewport" content="width=device-width" /> <title>码上飘</title> <script src="/FrontStyle/js/jquery-1.11.2.min.js" type="text/javas

  • javascript下对于事件、事件流、事件触发的顺序随便说说

    javascript下对于事件、事件流、事件触发的顺序随便说说

    1.首先我们来了解几个概念,"事件","事件流","事件名称","事件处理函数/事件监听函数,也许是"老生常谈",知道的朋友可以越过. 事件: 事件是用户自身或浏览器进行的特定行为.如:用户点击 也就是常用的click事件 事件流:多个事件 按一定顺序触发 形成了事件流 事件名称:如上面所讲的click就是事件名 事件处理函数/事件监听函数(Dom的叫法)就是 事件触发后的处理函数,如obj.onclick=fn;函

  • 图片onload事件触发问题解决方法

    并且随页面大小的不同情况时好时坏,甚至代码位置的不同而不同. 火狐下一切正常. 解决办法是再onload触发前改变图片src的值,也就是相当于图片开始时有个临时的占位图片,页面载入过程中用js换成实际需要的src,只要每次onload事件触发前src发生变化,则onload表现正常.

  • Android 事件触发机制的深入学习

     Android 事件触发机制的深入学习 最近在研究android的事件触发和传播机制,说来很惭愧,web下的事件太熟悉不过了,可在android中却很郁闷,常用的触摸事件都糊里糊涂的,在网上看了半天,也整理一份,供大家参考: public class CustomDefaultActivity implements OnTouchListener { private GestureDetector gd1; private TableLayout tableLayout; @Override

随机推荐