在Angular測試中使用spy的教程詳解
更新時間：2024年03月28日 11:33:30 作者：白如意i
spy?是一種檢查函數(shù)是否被調用或提供自定義返回值的方法,我們可以使用spy?來測試依賴于服務的組件,并避免實際調用服務的方法來獲取值,在本文中,您將學習如何在?Angular?項目中使用?Jasmine?spy,需要的朋友可以參考下
簡介
Jasmine spy 用于跟蹤或存根函數(shù)或方法。spy 是一種檢查函數(shù)是否被調用或提供自定義返回值的方法。我們可以使用spy 來測試依賴于服務的組件，并避免實際調用服務的方法來獲取值。這有助于保持我們的單元測試專注于測試組件本身的內部而不是其依賴關系。
在本文中，您將學習如何在 Angular 項目中使用 Jasmine spy。
先決條件
要完成本教程，您需要：
- 在本地安裝 Node.js
- 一些關于設置 Angular 項目的基礎知識。
本教程已使用 Node v16.2.0、npm v7.15.1 和 @angular/core v12.0.4 進行驗證。
步驟 1 — 設置項目
讓我們使用一個與我們在 Angular 單元測試介紹中使用的示例非常相似的示例。
首先，使用 @angular/cli 創(chuàng)建一個新項目：
ng new angular-test-spies-example
然后，切換到新創(chuàng)建的項目目錄：
cd angular-test-spies-example
以前，該應用程序使用兩個按鈕在 0 到 15 之間增加和減少值。
對于本教程，邏輯將被移動到一個服務中。這將允許多個組件訪問相同的中央值。
ng generate service increment-decrement
然后，打開您的代碼編輯器中的 increment-decrement.service.ts 并用以下代碼替換內容：
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class IncrementDecrementService {
value = 0;
message!: string;
increment() {
if (this.value < 15) {
this.value += 1;
this.message = '';
} else {
this.message = 'Maximum reached!';
}
}
decrement() {
if (this.value > 0) {
this.value -= 1;
this.message = '';
} else {
this.message = 'Minimum reached!';
}
}
}
打開您的代碼編輯器中的 app.component.ts 并用以下代碼替換內容：
import { Component } from '@angular/core';
import { IncrementDecrementService } from './increment-decrement.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(public incrementDecrement: IncrementDecrementService) { }
increment() {
this.incrementDecrement.increment();
}
decrement() {
this.incrementDecrement.decrement();
}
}
打開您的代碼編輯器中的 app.component.html 并用以下代碼替換內容：
<h1>{{ incrementDecrement.value }}</h1>
<hr>
<button (click)="increment()" class="increment">Increment</button>
<button (click)="decrement()" class="decrement">Decrement</button>
<p class="message">
{{ incrementDecrement.message }}
</p>
接下來，打開您的代碼編輯器中的 app.component.spec.ts 并修改以下代碼行：
import { TestBed, waitForAsync, ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { AppComponent } from './app.component';
import { IncrementDecrementService } from './increment-decrement.service';
describe('AppComponent', () => {
let fixture: ComponentFixture<AppComponent>;
let debugElement: DebugElement;
let incrementDecrementService: IncrementDecrementService;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
providers: [ IncrementDecrementService ]
}).compileComponents();
fixture = TestBed.createComponent(AppComponent);
debugElement = fixture.debugElement;
incrementDecrementService = debugElement.injector.get(IncrementDecrementService);
}));
it('should increment in template', () => {
debugElement
.query(By.css('button.increment'))
.triggerEventHandler('click', null);
fixture.detectChanges();
const value = debugElement.query(By.css('h1')).nativeElement.innerText;
expect(value).toEqual('1');
});
it('should stop at 15 and show maximum message', () => {
incrementDecrementService.value = 15;
debugElement
.query(By.css('button.increment'))
.triggerEventHandler('click', null);
fixture.detectChanges();
const value = debugElement.query(By.css('h1')).nativeElement.innerText;
const message = debugElement.query(By.css('p.message')).nativeElement.innerText;
expect(value).toEqual('15');
expect(message).toContain('Maximum');
});
});
請注意，我們可以使用 debugElement.injector.get 獲取對注入服務的引用。
以這種方式測試我們的組件是有效的，但實際調用也將被傳遞到服務，并且我們的組件沒有被孤立測試。接下來，我們將探討如何使用 spy 來檢查方法是否已被調用或提供存根返回值。
步驟 2 —— 監(jiān)視服務的方法
以下是如何使用 Jasmine 的 spyOn 函數(shù)調用一個服務方法并測試它是否被調用：
import { TestBed, waitForAsync, ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { AppComponent } from './app.component';
import { IncrementDecrementService } from './increment-decrement.service';
describe('AppComponent', () => {
let fixture: ComponentFixture<AppComponent>;
let debugElement: DebugElement;
let incrementDecrementService: IncrementDecrementService;
let incrementSpy: any;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
providers: [ IncrementDecrementService ]
}).compileComponents();
fixture = TestBed.createComponent(AppComponent);
debugElement = fixture.debugElement;
incrementDecrementService = debugElement.injector.get(IncrementDecrementService);
incrementSpy = spyOn(incrementDecrementService, 'increment').and.callThrough();
}));
it('should call increment on the service', () => {
debugElement
.query(By.css('button.increment'))
.triggerEventHandler('click', null);
expect(incrementDecrementService.value).toBe(1);
expect(incrementSpy).toHaveBeenCalled();
});
});
spyOn 接受兩個參數(shù)：類實例（在本例中是我們的服務實例）和一個字符串值，表示要監(jiān)視的方法或函數(shù)的名稱。
在這里，我們還在 spy 上鏈接了 .and.callThrough()，這樣實際方法仍然會被調用。在這種情況下，我們的 spy 只用于判斷方法是否被調用以及監(jiān)視參數(shù)。
以下是斷言方法被調用兩次的示例：
expect(incrementSpy).toHaveBeenCalledTimes(2);
以下是斷言方法未被使用 'error' 參數(shù)調用的示例：
expect(incrementSpy).not.toHaveBeenCalledWith('error');
如果我們想避免實際調用服務上的方法，可以在 spy 上使用 .and.returnValue。
我們的示例方法不適合這樣做，因為它們不返回任何內容，而是改變內部屬性。
讓我們向服務添加一個實際返回值的新方法：
minimumOrMaximumReached() {
return !!(this.message && this.message.length);
}
我們還向組件添加一個新方法，模板將使用它來獲取值：
limitReached() {
return this.incrementDecrement.minimumOrMaximumReached();
}
然后，我們可以測試當達到限制時，我們的模板消息是否會顯示，而無需實際調用服務上的方法：
import { TestBed, waitForAsync, ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { AppComponent } from './app.component';
import { IncrementDecrementService } from './increment-decrement.service';
describe('AppComponent', () => {
let fixture: ComponentFixture<AppComponent>;
let debugElement: DebugElement;
let incrementDecrementService: IncrementDecrementService;
let minimumOrMaximumSpy: any;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
providers: [ IncrementDecrementService ]
}).compileComponents();
fixture = TestBed.createComponent(AppComponent);
debugElement = fixture.debugElement;
incrementDecrementService = debugElement.injector.get(IncrementDecrementService);
minimumOrMaximumSpy = spyOn(incrementDecrementService, 'minimumOrMaximumReached').and.returnValue(true);
}));
it(`should show 'Limit reached' message`, () => {
fixture.detectChanges();
const message = debugElement.query(By.css('p.message')).nativeElement.innerText;
expect(message).toEqual('Limit reached!');
});
});
結論
在本文中，您學習了如何在 Angular 項目中使用 Jasmine spy。
到此這篇關于在Angular測試中使用spy的教程詳解的文章就介紹到這了,更多相關Angular中使用spy內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了AngularJS中比較兩個數(shù)組是否相同，介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看下吧2016-08-08
在AngularJS中，控制器是一個Javascript函數(shù)（類型/類），用來增強除了根作用域意外的作用域實例的。當你或者AngularJS本身通過<code>scope.$new</code>倆創(chuàng)建一個新的子作用域對象時，有一個選項能讓你將它當做參數(shù)傳遞給控制器。2015-05-05
本文給大家推薦的是使用angularjs實現(xiàn)整合微信新推出的UI（weui）的全部過程，有相同需求的小伙伴可以參考下2016-03-03
這篇文章主要給大家介紹了關于Angular 1.x個人使用的一些經驗，屬于一些基礎入門教程，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
AngularJS的依賴注入實例分析(使用module和injector)
這篇文章主要介紹了AngularJS的依賴注入,結合實例形式分析了依賴注入的原理及使用module和injector實現(xiàn)依賴注入的步驟與操作技巧,需要的朋友可以參考下2017-01-01
本文通過實例給大家介紹了angular排序的相關知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-06-06
AngularJS實現(xiàn)的生成隨機數(shù)與猜數(shù)字大小功能示例
這篇文章主要介紹了AngularJS實現(xiàn)的生成隨機數(shù)與猜數(shù)字大小功能,結合完整實例形式分析了AngularJS隨機數(shù)生成與數(shù)值判定相關操作技巧,需要的朋友可以參考下2017-12-12
AngularJS ng-change 指令的詳解及簡單實例
本文主要介紹AngularJS ng-change 指令,這里對ng-change指令資料做了詳細介紹，并提供源碼和運行結果，有需要的小伙伴參考下2016-07-07
AngularJS自定義插件實現(xiàn)網站用戶引導功能示例
這篇文章主要介紹了AngularJS自定義插件實現(xiàn)網站用戶引導功能,結合實例形式分析了AngularJS自定義插件的實現(xiàn)步驟與相關功能技巧,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了Angular設置別名alias及打包命令的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11