我想測驗一個功能。要在單元測驗中呼叫該函式，我需要創建組件類的實體。組件類包含不同的服務作為建構式中的引數，包括服務 CookieService。該服務依賴于具有 setter 和 getter 的第三個庫“ngx-cookie”。
我試圖模擬服務以便能夠像這樣創建組件類的實體：
import {CookieService} from "ngx-cookie-service";
....
beforeEach(async(() => {
const mockedFormBuilder = jasmine.createSpyObj('FormBuilder', ['control', 'array', 'group']);
const get = function get(name: string): string {
return 'test...';
};
TestBed.configureTestingModule({
declarations: [HelloWorldComponent,...],
imports: [
...
],
providers: [
{provide: FormBuilder, useValue: mockedFormBuilder},
{provide: CookieService, useValue: get('name')},
]
})
.compileComponents();
}));
describe('getArr', () => {
it('should return array', () => {
const text = '[email protected]';
const textArr = ['[email protected]']
let getArr: string[];
// @ts-ignore
getArr = new HelloWorldComponent(FormBuilder,CookieService).getTextArray(tex);
expect(getArr).toBe(textArr);
})
})
運行測驗時出現以下錯誤：
TypeError: this.cookieService.get is not a function
at <Jasmine>
at new HelloWorldComponent(http://localhost:9876/_karma_webpack_/src/app/helloworld.component.ts:63:51)
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/helloworld.component.spec.ts:113:28)
at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:359:1)
at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:308:1)
at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:358:1)
at Zone.run (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:124:1)
at runInTestZone (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:561:1)
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:576:1)
這是 ComponentClass 的樣子：
export class HelloWorldComponent {
constructor(private fb: FormBuilder, private cookieService:CookieService){
const cookie:string=this.cookieService.get('somename')
}
}
我知道 cookieService 除了 getter 和 setter 之外沒有其他功能，但我不太了解如何模擬 getter 以及如何正確地將其插入提供程式
有人在測驗時遇到同樣的錯誤，你是如何解決的？
任何幫助將不勝感激！
更新：使用存根服務
export class CookieServiceStub{
cookie:string= 'gdhjgsfgsjdfg';
get (name:string):string{
return this.cookie;
}
}
在規格檔案中：...
TestBed.configureTestingModule({
declarations: [HelloWorldComponent,...],
imports: [
...
],
providers: [
{provide: FormBuilder, useValue: mockedFormBuilder},
{provide: CookieService, useClass:CookieServiceStub},
]
})
.compileComponents();
}));
uj5u.com熱心網友回復：
您當前正在提供呼叫結果get('name')作為 CookieService 服務的值。我認為這是不正確的......這里：
{provide: CookieService, useValue: get('name')}
在這種情況下創建存根類會更容易一些：
首先在您的組件中顯示您從服務呼叫的函式，然后為其創建一個存根類：
class CookieServiceStub{
get(name: string) {
return 'your value'
}
secondFunction() {}
// add as many as necessary
}
然后你可以用你的存根類替換你提供的 CookieService ：
{provide: CookieService, useClass: CookieServiceStub}
同樣在您的測驗中，您正在創建組件類的新實體，超出了角度的范圍，這需要進行調整。而不是這樣做：
getArr = new HelloWorldComponent(FormBuilder,CookieService).getTextArray(tex);
您應該使用 TestBed 創建它：
...
let component: HelloWorldComponent;
beforeEach(() => {
fixture = TestBed.createComponent(HelloWorldComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
describe('getArr', () => {
it('should return array', () => {
const text = '[email protected]';
const textArr = ['[email protected]']
let getArr: string[];
getArr = component.getTextArray(tex);
expect(getArr.length).toBe(1);
expect(getArr[0]).toBe(text);
})
})
...
uj5u.com熱心網友回復：
jasmine.createSpyObj用于創建將監視方法的模擬。它將為間諜中定義的每個屬性回傳一個物件。
您可以創建一個 mockCookieService 并添加該get方法
mockCookieService = jasmine.createSpyObj('CookieService', ['get']);
試試這樣：
describe('Service: ', () => {
let mockCookieService;
beforeEach(() => {
mockCookieService = jasmine.createSpyObj('CookieService', ['get']);
TestBed.configureTestingModule({
imports: [
...
],
providers: [
{ provide: CookieService, useValue: mockCookieService },
]
});
});
你可以參考這篇文章
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/488717.html
標籤：有角度的 单元测试 ngx-cookie 服务
上一篇：失敗：單元測驗角度錯誤