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)文章
這篇文章主要介紹了Angular2 環(huán)境配置的相關(guān)資料,需要的朋友可以參考下2016-09-09
AngularJS ng-change 指令的詳解及簡單實(shí)例
本文主要介紹AngularJS ng-change 指令,這里對ng-change指令資料做了詳細(xì)介紹，并提供源碼和運(yùn)行結(jié)果，有需要的小伙伴參考下2016-07-07
這篇文章主要介紹了SeaJS 與 RequireJS 的差異對比,本文主要對CMD規(guī)范和AMD規(guī)范的弊端做了對比,并做出了一個(gè)總結(jié),需要的朋友可以參考下2014-12-12
angular $watch 一個(gè)變量的變化(實(shí)例講解)
下面小編就為大家?guī)硪黄猘ngular $watch 一個(gè)變量的變化(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
本篇文章主要介紹了Angular 如何使用第三方庫的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
本篇文章主要介紹了淺談Angular路由復(fù)用策略，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
AngularJS雙向綁定和依賴反轉(zhuǎn)實(shí)例詳解
這篇文章主要介紹了AngularJS雙向綁定和依賴反轉(zhuǎn)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
深入理解angular2啟動(dòng)項(xiàng)目步驟
本篇文章主要介紹了深入理解angular2啟動(dòng)步驟 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了AngularJS中的過濾器使用詳解,過濾器是AngularJS中處理文本的一個(gè)非常有用的功能,需要的朋友可以參考下2015-06-06
AngularJS中數(shù)據(jù)綁定相信大家應(yīng)該都不陌生了,這篇文章主要給大家介紹了關(guān)于angular多選表單數(shù)據(jù)綁定的簡單嘗試,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05