Angular單元測試之事件觸發(fā)的實(shí)現(xiàn)
更新時(shí)間：2020年01月20日 11:07:05 作者：Rachel
這篇文章主要介紹了Angular單元測試之事件觸發(fā)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
=在angular項(xiàng)目中時(shí)常有一些click、input、focusout等事件操作，那么如何在單元測試中觸發(fā)這些事件呢？
一、觸發(fā)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(); // 更新視圖
二、觸發(fā)input事件
觸發(fā)input事件，需要在獲取到input元素后，先給輸入框綁定值，然后去觸發(fā)輸入事件，最后更新視圖。
const input = fixture.nativeElement.querySelector("#input");
input.value = 'abc';
input.dispatchEvent(new Event('input'));
fixture.detectChanges(); // 更新視圖
二、觸發(fā)focusout事件
const input = fixture.nativeElement.querySelector("#input");
input.dispatchEvent(new Event('focusout'));
fixture.detectChanges(); // 更新視圖
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
AngularJs是Google開源的前端JS框架。使用AngularJs, 我們能夠容易地、健壯的開發(fā)出類似于Gmail一樣的單頁Web應(yīng)用。這篇文章主要介紹了詳解angular中如何監(jiān)控dom渲染完畢，有興趣的可以了解一下。2017-01-01
今天小編就為大家分享一篇Angular異步變同步處理方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Angular設(shè)置別名alias及打包命令的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
AngularJS使用ng-options指令實(shí)現(xiàn)下拉框
這篇文章主要介紹了AngularJS使用ng-options指令實(shí)現(xiàn)下拉框效果，ng-option指令使用也很簡單，下文具體給大家說明，對angularjs 下拉框知識感興趣的朋友一起看下吧2016-08-08
AngularJS全局scope與Isolate scope通信用法示例
這篇文章主要介紹了AngularJS全局scope與Isolate scope通信用法,結(jié)合格式分析了全局scope和directive本地scope相關(guān)功能、通信用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11
Angular 4.x 動態(tài)創(chuàng)建表單實(shí)例
本篇文章主要介紹了Angular 4.x 動態(tài)創(chuàng)建表單實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
AngularJS與BootStrap模仿百度分頁的示例代碼
分頁在很多時(shí)候都能用到，這篇文章主要介紹了AngularJS與BootStrap模仿百度分頁的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
angularjs實(shí)現(xiàn)柱狀圖動態(tài)加載的示例
本篇文章主要介紹了angularjs實(shí)現(xiàn)柱狀圖動態(tài)加載的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
Angular中使用$watch監(jiān)聽object屬性值的變化(詳解)
下面小編就為大家?guī)硪黄狝ngular中使用$watch監(jiān)聽object屬性值的變化(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
AngularJS實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實(shí)例
這篇文章給大家分享了AngularJS循環(huán)實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等基礎(chǔ)功能，對大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值，有需要的朋友可以看看。2016-09-09