[转]Angular 单元测试讲解
?
?
- Angular_單元測試
- 測試分類
- 按開發(fā)階段劃分
- 按是否運行劃分
- 按是否查看源代碼劃分
- 其他
- ATDD,TDD,BDD,DDD
- ATDD
- TDD
- BDD
- DDD
- Angular單元測試
- Karma的介紹
- jasmine介紹
- 單元測試的好處
- 使用jasmine和karma創(chuàng)建一個Angular項目
- Karma配置
- Test.ts文件
- 測試體驗
- 測試Form
- 測試服務service
- 常用斷言方法
- Mock
- Mock服務實例
- 測試分類
?
?
?
Angular_單元測試
?
測試分類
?
?
按開發(fā)階段劃分
?
- 單元測試
單元測試又稱模塊測試，針對軟件設計中的最小單位——程序模塊，進行正確性檢查的測試工作。 - 集成測試
集成測試又叫組裝測試，通常在單元測試的基礎上，將所有程序模塊進行有序的、遞增測試。重點測試不同模塊的接口部分 - 系統(tǒng)測試
指的是將整個軟件系統(tǒng)看成一個整體進行測試，包括對功能、性能以及軟件所運行的軟硬件環(huán)境進行測試。 - 驗收測試
指按照項目任務書或合同、供需雙方約定的驗收依據(jù)文檔進行的對整個系統(tǒng)的測試與評審，決定是否接收或拒收系統(tǒng)
?
按是否運行劃分
?
- 靜態(tài)測試
是指不實際運行被測軟件，而只是靜態(tài)地檢查程序代碼、界面或文檔中可能存在的錯誤過程 - 動態(tài)測試
是指實際運行被測程序，輸入相應的測試數(shù)據(jù)，檢查實際輸出結果和預期結果是否相符的過程。
?
按是否查看源代碼劃分
?
- 黑盒測試
指的是把被測的軟件看做一個黑盒子，不關心盒子里面的結構是什么樣子，只關心軟件的輸入數(shù)據(jù)和輸出數(shù)據(jù)。 - 白盒測試
指的是把盒子打開，去研究里面的源代碼和程序結構。
?
其他
?
- 回歸測試
是指軟件被修改后重新進行的測試，重復執(zhí)行上一個版本測試時的用例，是為了保證對軟件所做的修改沒有引入新的錯誤而重復進行的測試。 - 冒煙測試
是指在對一個新版本進行系統(tǒng)大規(guī)模的測試之前，先驗證一下軟件的基本功能是否實現(xiàn)，是否具備可測性。 - 隨機測試
是指測試中所有的輸入數(shù)據(jù)都是隨機生成的，其目的是模擬用戶的真實操作，并發(fā)現(xiàn)一些邊緣性的錯誤。
?
ATDD,TDD,BDD,DDD
?
ATDD
?
ATDD： Acceptance Test Driven Development（驗收測試驅(qū)動開發(fā)）
?
TDD 只是開發(fā)人員的職責，通過單元測試用例來驅(qū)動功能代碼的實現(xiàn)。在準備實施一個功能或特性之前，首先團隊需要定義出期望的質(zhì)量標準和驗收細則，以明確而且達成共識的驗收測試計劃（包含一系列測試場景）來驅(qū)動開發(fā)人員的TDD實踐和測試人員的測試腳本開發(fā)。面向開發(fā)人員，強調(diào)如何實現(xiàn)系統(tǒng)以及如何檢驗。
?
TDD
?
TDD： Test-driven development （測試驅(qū)動開發(fā)）
?
是一種使用自動化單元測試來推動軟件設計并強制依賴關系解耦的技術。使用這種做法的結果是一套全面的單元測試，可隨時運行，以提供軟件可以正常工作的反饋。
?
測試驅(qū)動開發(fā)是敏捷開發(fā)中的一項核心實踐和技術，也是一種設計方法論。TDD的原理是在開發(fā)功能代碼之前，先編寫單元測試用例代碼，測試代碼確定需要編寫什么產(chǎn)品代碼。TDD的基本思路就是通過測試來推動整個開發(fā)的進行，但測試驅(qū)動開發(fā)并不只是單純的測試工作，而是把需求分析，設計，質(zhì)量控制量化的過程。TDD首先考慮使用需求（對象、功能、過程、接口等），主要是編寫測試用例框架對功能的過程和接口進行設計，而測試框架可以持續(xù)進行驗證。。
?
BDD
?
BDD:Behavior-Driven Development (行為驅(qū)動開發(fā))
?
行為驅(qū)動開發(fā)是一種敏捷軟件開發(fā)的技術，它鼓勵軟件項目中的開發(fā)者、QA和非技術人員或商業(yè)參與者之間的協(xié)作。主要是從用戶的需求出發(fā)，強調(diào)系統(tǒng)行為。BDD最初是由Dan North在2003年命名，它包括驗收測試和客戶測試驅(qū)動等的極限編程的實踐，作為對測試驅(qū)動開發(fā)的回應。
?
?
DDD
?
DDD：領域驅(qū)動開發(fā)（Domain Drive Design）
?
DDD指的是Domain Drive Design，也就是領域驅(qū)動開發(fā),DDD實際上也是建立在這個基礎之上，因為它關注的是Service層的設計，著重于業(yè)務的實現(xiàn),將分析和設計結合起來，不再使他們處于分裂的狀態(tài)，這對于我們正確完整的實現(xiàn)客戶的需求，以及建立一個具有業(yè)務伸縮性的模型。
?
Angular單元測試
?
Unit Test(單元測試)
?
?
對正式的項目進行單元測試是必須的，如果選擇使用TDD(測試驅(qū)動開發(fā))方法，則無關緊要，否則使用它將會產(chǎn)生很多好處。
?
在本文中，我們首先簡單地提到單元測試的好處，然后我們將創(chuàng)建一個Angular單元測試的完整示例，使用jasmine和karma。
?
Karma的介紹
?
Karma是Testacular的新名字，在2012年google開源了Testacular，2013年Testacular改名為Karma。Karma是一個讓人感到非常神秘的名字，表示佛教中的緣分，因果報應，比Cassandra這種名字更讓人猜不透！
?
Karma是一個基于Node.js的JavaScript測試執(zhí)行過程管理工具（Test Runner）。該工具可用于測試所有主流Web瀏覽器，也可集成到CI（Continuous integration）工具，也可和其他代碼編輯器一起使用。這個測試工具的一個強大特性就是，它可以監(jiān)控(Watch)文件的變化，然后自行執(zhí)行，通過console.log顯示測試結果。
?
jasmine介紹
?
TDD(Test Driven Development)測試驅(qū)動開發(fā)，是敏捷開發(fā)中提出的最佳實踐之一。jasmine很有意思的提出了BDD(Behavior Driven Development)行為驅(qū)動開發(fā).
?
測試驅(qū)動開發(fā)，對軟件質(zhì)量起到了規(guī)范性的控制。未寫實現(xiàn)，先寫測試，一度成為Java領域研發(fā)的圣經(jīng)。隨著Javascript興起，功能越來越多，代碼量越來越大，開發(fā)人員素質(zhì)相差懸殊，真的有必要建立對代碼的規(guī)范性控制。jasmine就是為團隊合作而生。
?
Jasmine是一個用來編寫Javascript測試的框架，它不依賴于任何其它的javascript框架，也不需要對DOM。它有擁有靈巧而明確的語法可以讓你輕松的編寫測試代碼。
?
jasmine的結構很簡單：
?
describe("A suite", function() {var foo;beforeEach(function() {foo = 0;foo += 1;});afterEach(function() {foo = 0;});it("contains spec with an expectation", function() {expect(true).toBe(true);}); });?
每個測試都在一個測試集中運行，Suite就是一個測試集，用describe函數(shù)封裝。 Spec表示每個測試用例，用it函數(shù)封裝。通過expect函數(shù)，作為程序斷言來判斷相等關系。setup過程用beforeEach函數(shù)封裝，tearDown過程用afterEach封裝。
?
單元測試的好處
?
我們先來看看我認為在解決方案中使用單元測試的主要原因…
?
-
改進實現(xiàn)的設計
開始編寫一個功能而不給設計帶來太多的思考是開發(fā)人員非常常見的錯誤。使用單元測試將強制思考并重新考慮設計，如果您使用TDD，則影響會更大。 -
允許重構
既然你已經(jīng)有測試確保你所有的東西都能按預期工作，你可以很容易地添加對代碼的修改，確保你沒有添加任何錯誤。 -
添加新功能而不會破壞任何內(nèi)容
當您添加新功能時，您可以運行測試以確保您不會破壞應用程序的任何其他部分。
?
還有更多，但這三個在任何項目上都是如此巨大的勝利，對于我來說，這些贏利是封閉式的。但如果你不相信，讓我們再提幾個。
?
- 測試是很好的文檔。
- 測試使開發(fā)人員對他們的工作更有信心。
?
你可以說他們所有的好處都是以很高的成本來實現(xiàn)的，但是這完全是錯誤的。所有使用單元測試可能花費的時間與以后在您引入新功能或進行任何重構時要節(jié)省的時間相比將會很小。花在解決錯誤上的時間要比沒有使用單元測試時大大縮短。
?
我們將創(chuàng)建一個使用Angular，Jasmine和Karma的應用程序的小而完整的例子。
?
這些是我們要談論的一些事情：
?
- 解釋一下工具Karma和Jasmine
- 解釋karma配置
- 解釋test文件
- 創(chuàng)建第一個簡單的測試,介紹Jasmine和Angular測試功能
- 測試一個Angular form,介紹Jasmine和Angular測試功能
- 測試一個帶服務的組件，介紹Angular測試功能
?
使用jasmine和karma創(chuàng)建一個Angular項目
?
正如Angular團隊建議我們要用Angular cli來創(chuàng)建我們的應用程序。通過這樣做，jasmine和karma的配置可以幫我們解決，比較方便。
?
安裝angular-cli并創(chuàng)建一個新項目：
?
- npm install -g @angular/cli
- ng new UnitTest –routing
?
當你創(chuàng)建項目時，所有的依賴關系都會安裝，包括你需要創(chuàng)建測試的所有東西。
?
"@types/jasmine": "~2.8.6","@types/jasminewd2": "~2.0.3","@types/node": "~8.9.4","codelyzer": "~4.2.1","jasmine-core": "~2.99.1","jasmine-spec-reporter": "~4.2.1","karma": "~1.7.1","karma-chrome-launcher": "~2.2.0","karma-coverage-istanbul-reporter": "~1.4.2","karma-jasmine": "~1.1.1","karma-jasmine-html-reporter": "^0.2.2",?
- jasmine-core:Jasmine是我們將用來創(chuàng)建測試的框架。它有許多功能可以讓我們編寫不同類型的測試。
- karma:Karma是我們測試的任務跑步者。它使用配置文件來設置啟動文件，報告，測試框架，瀏覽器等等。
- 其余依賴主要為記錄我們的測試，工具使用karma和jasmine和browser的發(fā)射器。
?
要運行測試，只需運行命令“ng test”。該命令將執(zhí)行測試，打開瀏覽器，顯示控制臺和瀏覽器報告，同樣重要的是，將測試執(zhí)行保留為監(jiān)視模式。也就是當我們修改過后，可以自動更新測試結果。
?
ng test?
?
提示：如果想要終止，需要在終端內(nèi)按CTRL+C
?
Karma配置
?
讓我們來看看由angular-cli創(chuàng)建的karma配置文件。
?
// Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.htmlmodule.exports = function (config) {config.set({basePath: '',frameworks: ['jasmine', '@angular-devkit/build-angular'],plugins: [require('karma-jasmine'),require('karma-chrome-launcher'),require('karma-jasmine-html-reporter'),require('karma-coverage-istanbul-reporter'),require('@angular-devkit/build-angular/plugins/karma')],client: {clearContext: false // leave Jasmine Spec Runner output visible in browser},coverageIstanbulReporter: {dir: require('path').join(__dirname, '../coverage'),reports: ['html', 'lcovonly'],fixWebpackSourcePaths: true},reporters: ['progress', 'kjhtml'],port: 9876,colors: true,logLevel: config.LOG_INFO,autoWatch: true,browsers: ['Chrome'],singleRun: false}); };?
你大概可以猜到這些配置屬性的大部分用途，但我們來看看其中的一些。
?
- frameworks:這是jasmine被設定為測試框架的地方。如果你想使用另一個框架，這是做這件事的地方。
- reporters:負責將測試結果告知給開發(fā)者。通常是將結果打印到控制臺上，或者存入文件中
- autoWatch:如果設置為true，則測試將以Watch模式運行。如果您更改任何測試并保存文件，測試將重新生成并重新運行。
- browsers:這是您設置測試應該運行的瀏覽器的位置。默認情況下是chrome，但你可以安裝和使用其他瀏覽器啟動器。
?
Test.ts文件
?
karma的angular-cli配置使用文件“test.ts”作為應用程序測試的入口點。我們來看看這個文件;
?
// This file is required by karma.conf.js and loads recursively all the .spec and framework filesimport 'zone.js/dist/zone-testing'; import { getTestBed } from '@angular/core/testing'; import {BrowserDynamicTestingModule,platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';declare const require: any;// First, initialize the Angular testing environment. getTestBed().initTestEnvironment(BrowserDynamicTestingModule,platformBrowserDynamicTesting() ); // Then we find all the tests. const context = require.context('./', true, /\.spec\.ts$/); // And load the modules. context.keys().map(context);?
你可能永遠不需要改變這個文件，但是有時候還是會更改的，比如：某一個spec文件排除測試等。
?
測試體驗
?
我們來創(chuàng)建我們的第一個測試。修改app.component.ts。這個組件只有一個屬性“text”，其值為“Angular Unit Testing”，它是在HTML中的“h1”標記中呈現(xiàn)的，它還包含路由根元素和一些路由鏈接。讓我們創(chuàng)建一個測試文件來檢查組件是否實際具有該屬性，并且實際上是在HTML中呈現(xiàn)的。
?
app.component.html文件
?
<h1>{{text}}</h1> <router-outlet></router-outlet>?
app.component.ts文件
?
import { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'] }) export class AppComponent {text = 'Angular Unit Testing'; }?
app.component.spec.ts文件
?
import { TestBed, async } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => {beforeEach(async(() => {TestBed.configureTestingModule({imports: [RouterTestingModule],declarations: [AppComponent],}).compileComponents();}));it('should create the app', async(() => {const fixture = TestBed.createComponent(AppComponent);const app = fixture.debugElement.componentInstance;expect(app).toBeTruthy();}));it(`should have as title 'app'`, async(() => {const fixture = TestBed.createComponent(AppComponent);const app = fixture.debugElement.componentInstance;expect(app.text).toEqual('Angular Unit Testing');}));it('should render title in a h1 tag', async(() => {const fixture = TestBed.createComponent(AppComponent);fixture.detectChanges();const compiled = fixture.debugElement.nativeElement;expect(compiled.querySelector('h1').textContent).toContain('Welcome to Angular Unit Testing!');})); });?
此時執(zhí)行：
?
ng test?
或
?
npm test?
ng test的常用參數(shù).
- –code-coverage -cc 代碼覆蓋率報告, 默認這個是不開啟的, 因為生成報告的速度還是比較慢的.
- –colors 輸出結果使用各種顏色 默認開啟
- –single-run -sr 執(zhí)行測試, 但是不檢測文件變化 默認不開啟
- –progress 把測試的過程輸出到控制臺 默認開啟
- –sourcemaps -sm 生成sourcemaps 默認開啟
- –watch -w 運行測試一次, 并且檢測變化 默認開啟
?
在彈出的chrome瀏覽器窗口中顯示：
?
?
我們詳細介紹一下這個測試代碼
?
導入測試文件的所有依賴項
這里要注意，你在組件內(nèi)使用的依賴，這里面同樣需要導入，否則會無法運行。
使用describe開始我們的測試
?
describe是一個函數(shù),Jasmine 就是使用 describe 全局函數(shù)來測試的。
?
declare function describe(description: string, specDefinitions: () => void): void;?
表示分組類似測試套，也就是一組測試用例，支持description嵌套。
?
例子：
?
describe('測試顯示/隱藏篩選條件', ()=>{ })?
每個 Spec 內(nèi)包括多個 expectation 來測試需要測試的代碼，只要任何一個 expectation 結果為 false 就表示該測試用例為失敗狀態(tài)。
?
describe('demo test', () => {const VALUE = true;it('should be true', () => {expect(VALUE).toBe(VALUE);}) });?
如果有很多需要測試的，可以多個it：
?
describe('AppComponent', () => {beforeEach(async(() => {TestBed.configureTestingModule({imports: [RouterTestingModule],declarations: [AppComponent],}).compileComponents();}));it('should create the app', async(() => {const fixture = TestBed.createComponent(AppComponent);const app = fixture.debugElement.componentInstance;expect(app).toBeTruthy();})); });?
斷言，使用 expect 全局函數(shù)來表示，只接收一個代表要測試的實際值，并且需要與 Matcher 代表期望值。
?
代碼中有3個it
-
第一個為異步測試app是否true或false
如果app是0；兩次取反當然是false；
如果app是null；兩次取反是false；
如果app是undefined；兩次取法是false；
其余的，兩次取反是true； -
第二個為異步測試app是否有text屬性，并且判斷值是否和預期相同
- 第三個為異步測試app是否在h1標簽中的顯示值為預期值
?
測試Form
?
?
ng g c contact?
?
<div>{{text}}</div><form id="contact-form" [formGroup]="contactForm" (ngSubmit)="onSubmit()" novalidate><div class="form-group"><label class="center-block">Name:<input class="form-control" formControlName="name"></label><label class="center-block">Email:<input class="form-control" formControlName="email"></label><label class="center-block">Text:<input class="form-control" formControlName="text"></label></div><button type="submit"[disabled]="!contactForm.valid" class="btn btn-success">Save</button></form>?
這很簡單，針對代碼不做任何解釋了。
?
?
import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms';@Component({selector: 'app-contact',templateUrl: './contact.component.html',styleUrls: ['./contact.component.css'] }) export class ContactComponent {text = 'contact page';contactForm: FormGroup;contact = {name: '',email: '',text: ''};submitted = false;constructor() {this.createForm();}createForm(): void {this.contactForm = new FormGroup({'name': new FormControl(this.contact.name, [Validators.required,Validators.minLength(4)]),'email': new FormControl(this.contact.email, [Validators.required,Validators.email]),'text': new FormControl(this.contact.text, Validators.required)});}onSubmit(): void {this.submitted = true;} }?
這個組件也很容易理解。 onSubmit提交函數(shù)只是將提交的屬性更改為true。
?
?
import { ContactComponent } from './contact/contact.component'; import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router';const routes: Routes = [{path: '',redirectTo: 'contact',pathMatch: 'full'},{path: 'contact',component: ContactComponent} ];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule] }) export class AppRoutingModule { }?
此時終端執(zhí)行：
?
npm start?
?
?
import { BrowserModule, By } from '@angular/platform-browser'; import { async, ComponentFixture, TestBed } from '@angular/core/testing';import { ContactComponent } from './contact.component'; import { DebugElement } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';describe('ContactComponent', () => {let comp: ContactComponent;let fixture: ComponentFixture<ContactComponent>;let de: DebugElement;let el: HTMLElement;beforeEach(async(() => {TestBed.configureTestingModule({declarations: [ContactComponent],imports: [BrowserModule,FormsModule,ReactiveFormsModule]}).compileComponents().then(() => {fixture = TestBed.createComponent(ContactComponent);comp = fixture.componentInstance;de = fixture.debugElement.query(By.css('form'));el = de.nativeElement;});}));it(`should have as text 'contact page'`, async(() => {expect(comp.text).toEqual('contact page');}));it('should set submitted to true', async(() => {comp.onSubmit(); // 直接內(nèi)部調(diào)用onSubmit函數(shù)， submitted被更改為trueexpect(comp.submitted).toBeTruthy();}));it('form call the onSubmit method', async(() => {fixture.detectChanges();spyOn(comp, 'onSubmit');el = fixture.debugElement.query(By.css('button')).nativeElement;el.click(); // 模擬在html界面上點擊onSubmit，此時是不能被點擊的，因為沒有輸入，所以次數(shù)應該是0expect(comp.onSubmit).toHaveBeenCalledTimes(0);}));it('form should be invalid', async(() => {comp.contactForm.controls['email'].setValue('');comp.contactForm.controls['name'].setValue('');comp.contactForm.controls['text'].setValue('');expect(comp.contactForm.valid).toBeFalsy();}));it('form should be vaild', async(() => {comp.contactForm.controls['email'].setValue('asd@asd.com');comp.contactForm.controls['name'].setValue('aada');comp.contactForm.controls['text'].setValue('text');expect(comp.contactForm.valid).toBeTruthy();})); });?
此時執(zhí)行：
?
ng test?
?
我們來分析一下，這個測試文件做了哪些東西？
?
- 導入依賴模塊BrowserModule,FormsModule,ReactiveFormsModule
- 使用”By”將DOM中的form導入進來
- 第一個測試text屬性
- 測試onSubmit函數(shù)調(diào)用
- 第三個測試使用“fixture”對象的函數(shù)“detectChanges”將組件狀態(tài)應用于HTML，然后從DOM獲取提交按鈕并觸發(fā)單擊事件。在此之前，我們在組件的“onSubmit”功能上創(chuàng)建一個jasmine “spy”。最后，我們期望onSubmit函數(shù)不會被執(zhí)行，因為這個按鈕應該被禁用，因為表單無效。
- 第四個測試將無效值設置為組件表單，并期望表單有效屬性為false。
- 最后，在第五個測試中，我們將有效值設置為表單并期望表單有效屬性為真。
?
小提示
- detectChanges
在測試中的Angular變化檢測。每個測試程序都通過調(diào)用fixture.detectChanges()來通知Angular執(zhí)行變化檢測。
- By
By類是Angular測試工具之一，它生成有用的predicate。 它的By.css靜態(tài)方法產(chǎn)生標準CSS選擇器 predicate，與JQuery選擇器相同的方式過濾。
?
測試服務service
?
當你要測試一個帶有服務的組件時，就像我們已經(jīng)看到的那樣，你需要將提供者添加到在“beforeEach”中創(chuàng)建的測試模塊。事情是，你可能不想使用實際的服務，而是一個模擬版本，所以讓我們看看如何做到這一點……
?
?
ng g s app?
?
import { Injectable } from '@angular/core';@Injectable({providedIn: 'root' }) export class AppService {constructor() { }getInfo(): string {return 'test service';} }?
?
import { AppService } from './app.service'; import { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'] }) export class AppComponent {text = 'Angular Unit Testing';info: string;constructor(private service: AppService) {this.info = this.service.getInfo();} }?
注意引入AppService服務。
?
...providers: [AppService] ...it('should have as info test service', async(() => {const fixture = TestBed.createComponent(AppComponent);const app = fixture.debugElement.componentInstance;expect(app.info).toEqual('test service');}));?
?
import { TestBed, inject, async } from '@angular/core/testing';import { AppService } from './app.service';describe('AppService', () => {beforeEach(() => {TestBed.configureTestingModule({providers: [AppService]});});it('should be created', inject([AppService], (service: AppService) => {expect(service).toBeTruthy();}));it('should getInfo test service', inject([AppService], (service: AppService) => {expect(service.getInfo()).toEqual('test service');})); });?
此時執(zhí)行：
?
ng test?
測試全部通過。
?
小提示
有些時候我們希望不是異步的，這時需要使用takeAsync函數(shù)，fakeAsync最重要的好處是測試程序看起來像同步的。
?
it('should show quote after getQuote promise (fakeAsync)', fakeAsync(() => {fixture.detectChanges();tick(); // wait for async getQuotefixture.detectChanges(); // update view with quoteexpect(el.textContent).toBe(testQuote); }));?
常用斷言方法
?
Jasmine 提供非常豐富的API，一些常用的Matchers：
?
- toBe() 等同 ===
- toNotBe() 等同 !==
- toBeDefined() 等同 !== undefined
- toBeUndefined() 等同 === undefined
- toBeNull() 等同 === null
- toBeTruthy() 等同 !!obj
- toBeFalsy() 等同 !obj
- toBeLessThan() 等同 <
- toBeGreaterThan() 等同 >
- toEqual() 相當于 ==
- toNotEqual() 相當于 !=
- toContain() 相當于 indexOf
- toBeCloseTo() 數(shù)值比較時定義精度，先四舍五入后再比較。
- toHaveBeenCalled() 檢查function是否被調(diào)用過
- toHaveBeenCalledWith() 檢查傳入?yún)?shù)是否被作為參數(shù)調(diào)用過
- toMatch() 等同 new RegExp().test()
- toNotMatch() 等同 !new RegExp().test()
- toThrow() 檢查function是否會拋出一個錯誤
?
而這些API之前用 not 來表示負值的判斷。
?
expect(true).not.toBe(false);?
這些Matchers幾乎可以滿足我們?nèi)粘Ｐ枨?#xff0c;當然你也可以定制自己的Matcher來實現(xiàn)特殊需求。
?
Mock
?
在實際的組件測試中發(fā)現(xiàn)組件往往依賴于服務。而服務又依賴于外部資源如http交互、本地資源等。為了屏蔽外部依賴方便組件的測試，可以對服務進行mock。對于服務的mock方式有兩種：偽造服務實例（提供服務復制品）、刺探真實服務。這兩種方式都能夠達到mock的效果，我們可以挑選一種最適合自己當前測試文件的測試方式來進行測試。
?
Mock服務實例
?
第一步：編寫服務的mock類
?
class TaskMonitorStubService extends TaskMonitorService {public queryTaskList(request: ViewTaskRequest): Observable<any> {return request.code === -1 ? Observable.of(runningTaskResponse): Observable.of(finishedTashResponse)} }?
第二步：在configureTestingModule用Mock的服務替換真實的服務
?
TestBed.configureTestingModule({imports: [HttpModule,TaskMonitorModule],Providers: [{provide: TaskMonitorService, useClass: TaskMonitorStubService}] })?
刺探真實服務
?
Angular的服務都是通過注入器注入到系統(tǒng)中的，同樣我們可以從根TestBed獲取到注入服務的實例，然后結合刺探（Spy）對真實的服務的方法進行替換.
?
let taskMonitorService: TaskMonitorService = TestBe.get(TaskMonitorService); spyOn(taskMonitorService, 'queryTaskList').and.returnValue(Observable.of(runningTaskResponse));
---------------------
作者：FlyWine
來源：CSDN
原文：https://blog.csdn.net/wf19930209/article/details/80413904
版權聲明：本文為作者原創(chuàng)文章，轉載請附上博文鏈接！
總結
以上是生活随笔為你收集整理的[转]Angular 单元测试讲解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 利用JS脚本快速删除百度网盘同一目录下的
- 下一篇： 互联网架构的演变，看了好多这个讲的确实清