快捷導(dǎo)航

Angular單元測(cè)試之事件觸發(fā)的實(shí)現(xiàn)

更新時(shí)間：2020年01月20日 11:07:05 作者：Rachel

這篇文章主要介紹了Angular單元測(cè)試之事件觸發(fā)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

=在angular項(xiàng)目中時(shí)常有一些click、input、focusout等事件操作，那么如何在單元測(cè)試中觸發(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(); // 更新視圖

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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