本頁面描述了一些最有用的 Angular 測試特性。
Angular 測試實(shí)用工具包括 ?TestBed
?、?ComponentFixture
?以及一些控制測試環(huán)境的函數(shù)。?TestBed
?和 ?ComponentFixture
?類是單獨(dú)介紹的。
下面是一些獨(dú)立函數(shù)的摘要,以使用頻率排序:
函數(shù) |
詳情 |
---|---|
waitForAsync
|
在一個(gè)特殊的async 測試區(qū)域中運(yùn)行測試(? |
fakeAsync
|
在一個(gè)特殊的fakeAsync 測試區(qū)域中運(yùn)行測試(? |
tick
|
通過在 fakeAsync 測試區(qū)域中刷新定時(shí)器和微任務(wù)(micro-task)隊(duì)列來仿真時(shí)間的流逝以及異步活動(dòng)的完成。 好奇和執(zhí)著的讀者可能會喜歡這篇長博客: 接受一個(gè)可選參數(shù),它可以把虛擬時(shí)鐘往前推進(jìn)特定的微秒數(shù)。清除調(diào)度到那個(gè)時(shí)間幀中的異步活動(dòng)。 |
inject
|
從當(dāng)前的 TestBed 注入器中把一個(gè)或多個(gè)服務(wù)注入到一個(gè)測試函數(shù)中。它不能用于注入組件自身提供的服務(wù)。 |
discardPeriodicTasks
|
當(dāng) ?fakeAsync ?測試程序以正在運(yùn)行的計(jì)時(shí)器事件任務(wù)(排隊(duì)中的 ?setTimeOut ?和 ?setInterval ?的回調(diào))結(jié)束時(shí),測試會失敗,并顯示一條明確的錯(cuò)誤信息。
一般來講,測試程序應(yīng)該以無排隊(duì)任務(wù)結(jié)束。當(dāng)待執(zhí)行計(jì)時(shí)器任務(wù)存在時(shí),調(diào)用 ? discardPeriodicTasks ?來觸發(fā)任務(wù)隊(duì)列,防止該錯(cuò)誤發(fā)生。 |
flushMicrotasks
|
當(dāng) ? 一般來說,測試應(yīng)該等待微任務(wù)結(jié)束。當(dāng)待執(zhí)行微任務(wù)存在時(shí),調(diào)用 ? |
ComponentFixtureAutoDetect
|
一個(gè)服務(wù)提供者令牌,用于開啟自動(dòng)變更檢測。 |
getTestBed
|
獲取當(dāng)前 ?TestBed ?實(shí)例。通常用不上,因?yàn)??TestBed ?的靜態(tài)類方法已經(jīng)夠用。?TestBed ?實(shí)例有一些很少需要用到的方法,它們沒有對應(yīng)的靜態(tài)方法。 |
?TestBed
?類是 Angular 測試工具的主要類之一。它的 API 很龐大,可能有點(diǎn)過于復(fù)雜,直到你一點(diǎn)一點(diǎn)的探索它們。
傳給 ?configureTestingModule
?的模塊定義是 ?@NgModule
? 元數(shù)據(jù)屬性的子集。
type TestModuleMetadata = {
providers?: any[];
declarations?: any[];
imports?: any[];
schemas?: Array<SchemaMetadata | any[]>;
};
每一個(gè)重載方法接受一個(gè) ?MetadataOverride<T>
?,這里 ?T
? 是適合這個(gè)方法的元數(shù)據(jù)類型,也就是 ?@NgModule
?、?@Component
?、?@Directive
? 或者 ?@Pipe
? 的參數(shù)。
type MetadataOverride<T> = {
add?: Partial<T>;
remove?: Partial<T>;
set?: Partial<T>;
};
?TestBed
?的 API 包含了一系列靜態(tài)類方法,它們更新或者引用全局的 ?TestBed
?實(shí)例。
在內(nèi)部,所有靜態(tài)方法在 ?getTestBed()
? 函數(shù)返回的當(dāng)前運(yùn)行時(shí)間的 ?TestBed
?實(shí)例上都有對應(yīng)的方法。
在 ?BeforeEach()
? 內(nèi)調(diào)用 ?TestBed
?方法,以確保在運(yùn)行每個(gè)單獨(dú)測試時(shí),都有嶄新的開始。
這里列出了最重要的靜態(tài)方法,以使用頻率排序。
方法 |
詳情 |
---|---|
configureTestingModule
|
測試墊片( |
compileComponents
|
在配置好測試模塊之后,異步編譯它。如果測試模塊中的任何一個(gè)組件具有 |
createComponent<T>
|
基于當(dāng)前 |
overrideModule
|
替換指定的 |
overrideComponent
|
替換指定組件類的元數(shù)據(jù),該組件類可能嵌套在一個(gè)很深的內(nèi)部模塊中。 |
overrideDirective
|
替換指定指令類的元數(shù)據(jù),該指令可能嵌套在一個(gè)很深的內(nèi)部模塊中。 |
overridePipe
|
替換指定管道類的元數(shù)據(jù),該管道可能嵌套在一個(gè)很深的內(nèi)部模塊中。 |
inject
|
從當(dāng)前 調(diào)用了 TestBed.inject 之后然后通過調(diào)用,TestBed 的配置就會在當(dāng)前測試期間被凍結(jié)。 |
initTestEnvironment
|
為整套測試的運(yùn)行初始化測試環(huán)境。
|
resetTestEnvironment
|
重設(shè)初始測試環(huán)境,包括默認(rèn)測試模塊在內(nèi)。 |
少數(shù) ?TestBed
?實(shí)例方法沒有對應(yīng)的靜態(tài)方法。它們很少被使用。
?TestBed.createComponent<T>
? 會創(chuàng)建一個(gè)組件 ?T
? 的實(shí)例,并為該組件返回一個(gè)強(qiáng)類型的 ?ComponentFixture
?。
?ComponentFixture
?的屬性和方法提供了對組件、它的 DOM 和它的 Angular 環(huán)境方面的訪問。
下面是對測試最重要的屬性,以使用頻率排序。
屬性 |
詳情 |
---|---|
componentInstance
|
被 |
debugElement
|
與組件根元素關(guān)聯(lián)的 |
nativeElement
|
組件的原生根 DOM 元素。 |
changeDetectorRef
|
組件的 |
fixture 方法使 Angular 對組件樹執(zhí)行某些任務(wù)。在觸發(fā) Angular 行為來模擬的用戶行為時(shí),調(diào)用這些方法。
下面是對測試最有用的方法。
方法 |
詳情 |
---|---|
detectChanges
|
為組件觸發(fā)一輪變化檢查。
|
autoDetectChanges
|
如果你希望這個(gè)夾具自動(dòng)檢測變更,就把這個(gè)設(shè)置為 |
checkNoChanges
|
運(yùn)行一次變更檢測來確認(rèn)沒有待處理的變化。如果有未處理的變化,它將拋出一個(gè)錯(cuò)誤。 |
isStable
|
如果 fixture 當(dāng)前是穩(wěn)定的,則返回 |
whenStable
|
返回一個(gè)承諾,在 fixture 穩(wěn)定時(shí)解析。
|
destroy
|
觸發(fā)組件的銷毀。 |
?DebugElement
?提供了對組件的 DOM 的訪問。
?fixture.debugElement
? 返回測試根組件的 ?DebugElement
?,通過它你可以訪問(查詢)fixture 的整個(gè)元素和組件子樹。
下面是 ?DebugElement
?最有用的成員,以使用頻率排序。
成員 |
詳情 |
---|---|
nativeElement
|
與瀏覽器中 DOM 元素對應(yīng)(WebWorkers 時(shí),值為 null)。 |
query
|
調(diào)用 |
queryAll
|
調(diào)用 |
injector
|
宿主依賴注入器。比如,根元素的組件實(shí)例注入器。 |
componentInstance
|
元素自己的組件實(shí)例(如果有)。 |
context
|
為元素提供父級上下文的對象。通常是控制該元素的祖級組件實(shí)例。
|
children
|
|
parent
|
|
name
|
元素的標(biāo)簽名字,如果它是一個(gè)元素的話。 |
triggerEventHandler
|
如果在該元素的 |
listeners
|
元素的 |
providerTokens
|
組件注入器的查詢令牌。包括組件自己的令牌和組件的 |
source
|
source 是在源組件模板中查詢這個(gè)元素的處所。 |
references
|
與模板本地變量(比如 |
?DebugElement.query(predicate)
? 和 ?DebugElement.queryAll(predicate)
? 方法接受一個(gè)條件方法,它過濾源元素的子樹,返回匹配的 ?DebugElement
?。
這個(gè)條件方法是任何接受一個(gè) ?DebugElement
?并返回真值的方法。下面的例子查詢所有擁有名為 ?content
?的模塊本地變量的所有 ?DebugElement
?:
// Filter for DebugElements with a #content reference
const contentRefs = el.queryAll( de => de.references['content']);
Angular 的 ?By
?類為常用條件方法提供了三個(gè)靜態(tài)方法:
靜態(tài)方法 |
詳情 |
---|---|
By.all
|
返回所有元素 |
By.css(selector)
|
返回符合 CSS 選擇器的元素 |
By.directive(directive)
|
返回 Angular 能匹配一個(gè)指令類實(shí)例的所有元素 |
// Can find DebugElement either by css selector or by directive
const h2 = fixture.debugElement.query(By.css('h2'));
const directive = fixture.debugElement.query(By.directive(HighlightDirective));
更多建議: