TypeScript - Angular 集成测试 - Jasmine Spy - 无法模拟返回 Observable 的服务方法
我刚开始做集成测试。这整个事情太让人困惑了。
对于我的第一个测试，似乎我的监视没有按照我打算的方式返回数据。出现错误：预计是0，但为3。如果有人能帮我理解我做错了什么，那就太好了。
这是我的服务、页面、规格文件以及模板：
我的服务
import { Data } from './../data/data.model';
import { Injectable } from '@angular/core';
import { BehaviorSubject, of } from 'rxjs';
import { tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root',
})
export class MyService {
private _data = new BehaviorSubject<Data[]>([]);
get data() {
return this._data;
}
constructor() {}
getAllData() {
return of([
{
id: '1',
title: 'Rice',
},
{
id: '2',
title: 'Wheat',
},
{
id: '33',
title: 'Water',
},
]).pipe(
tap((data) => {
this._data.next(data);
})
);
}
}
数据页面组件
import { Component, OnInit } from '@angular/core';
import { BehaviorSubject, Observable, of, Subscription } from 'rxjs';
import { MyService } from '../services/my.service';
import { Data } from './data.model';
@Component({
selector: 'app-data',
templateUrl: './data.page.html',
styleUrls: ['./data.page.scss'],
})
export class DataPage implements OnInit {
allData: Data[];
dataServiceSub: Subscription;
isLoading: boolean;
constructor(private myService: MyService) {}
ngOnInit() {
this.dataServiceSub = this.myService.data.subscribe(
(data) => {
console.log(data);
this.allData = data;
}
);
}
ngOnDestroy() {
if (this.dataServiceSub) {
console.log('ngOnDestroy');
this.dataServiceSub.unsubscribe();
}
}
ionViewWillEnter() {
this.isLoading = true;
this.myService.getAllData().subscribe(() => {
console.log('ionViewWillEnter');
this.isLoading = false;
});
}
}
DataPage.spec
import { MyService } from '../services/my.service';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { DataPage } from './data.page';
import { of } from 'rxjs';
describe('DataPage', () => {
let component: DataPage;
let fixture: ComponentFixture<DataPage>;
let serviceSpy: jasmine.SpyObj<MyService>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [DataPage],
providers: [
{
provide: MyService,
useClass: MyService
},
],
imports: [IonicModule.forRoot()],
}).compileComponents();
fixture = TestBed.createComponent(DataPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
fit('Should show list of data if data is available', () => {
serviceSpy = TestBed.get(MyService);
spyOn(serviceSpy, 'getAllData').and.returnValue(of([
{
id: '1',
title: 'Rice',
},
{
id: '2',
title: 'Wheat',
},
{
id: '33',
title: 'Water',
},
]));
fixture.detectChanges();
const element = fixture.nativeElement.querySelectorAll(
'[test-tag="dataList"] ion-item'
);
console.log(
fixture.nativeElement.querySelectorAll('[test-tag="dataList"]')
);
expect(element.length).toBe(3);
});
});
HTML
<ion-content>
<div test-tag="empty" class="ion-text-center">
<ion-text color="danger">
<h1>No data</h1>
</ion-text>
</div>
<div test-tag="dataList">
<ion-list>
<ion-item *ngFor="let data of allData">
<ion-label test-tag="title">{{data.title}}</ion-label>
</ion-item>
</ion-list>
</div>
</ion-content>
答案＃1
好，所以问题在这里：
你需要调用 ionViewWillEnter() 来设置 this.allData 的值
原因：因为在创建 BehaviorSubject 时你使用了空值。要使用 data (this._data.next(data)) 发出值，你需要调用 getAllData()。
import { MyService } from '../services/my.service';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { DataPage } from './data.page';
import { of } from 'rxjs';
describe('DataPage', () => {
let component: DataPage;
let fixture: ComponentFixture<DataPage>;
let serviceSpy: jasmine.SpyObj<MyService>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [DataPage],
providers: [ MyService ],
imports: [IonicModule.forRoot()],
}).compileComponents();
fixture = TestBed.createComponent(DataPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
fit('Should show list of data if data is available', () => {
component.ionViewWillEnter(); // or create an event which will trigger ionViewWillEnter()
fixture.detectChanges();
const element = fixture.nativeElement.querySelectorAll(
'[test-tag="dataList"] ion-item'
);
console.log(
fixture.nativeElement.querySelectorAll('[test-tag="dataList"]')
);
expect(element.length).toBe(3);
});
});
请注意，我所做的更改很少：
- 移除了
UseClass（因为你没有按应有的方式使用它） - 移除了
spy（因为你在原始服务中已经有一个硬编码的值）
为了让你更好地理解 Angular 中的测试，你可以参考我的文章，其中还展示了 useClass 的使用供你参考。
顺便提一下：尝试使用 asObservable()，同时在创建 Observable 时遵循使用 $ 的惯例（this.data$.asObservable()）。这不是强制性的，但在 JS 社区中是被接受的做法。
get data() {
return this._data.asObservable();
}
答案＃2
为了避免在使用 observables 时产生麻烦，我建议使用像 ng-mocks 这样的模拟库，并查看其文章“如何在 Angular 测试中模拟 observable 流” https://ng-mocks.sudo.eu/extra/mock-observables。
在你的情况下，测试可能看起来像这样：
describe('DataPage', () => {
// mocks everything except DataPage
beforeEach(() => {
return MockBuilder(DataPage)
.mock(IonicModule.forRoot())
.mock(MyService);
});
// We need to stub it because of subscription in ionViewWillEnter.
// in a mock service, ionViewWillEnter does not return anything.
// But we need to tell it to return an empty observable stream
// to avoid errors like cannot call .subscribe on undefined.
// This line can be removed along with the debugging from the
// component.
beforeEach(() => MockInstance(MyService, 'getAllData', () => EMPTY));
it('Should show list of data if data is available', () => {
// spies the getter of the property the component uses.
MockInstance(MyService, 'data', jasmine.createSpy(), 'get')
.and.returnValue(of([
{
id: '1',
title: 'Rice',
},
{
id: '2',
title: 'Wheat',
},
{
id: '33',
title: 'Water',
},
]));
// render (already with detected changes)
const fixture = MockRender(DataPage);
// assertions
const element = fixture.nativeElement.querySelectorAll(
'[test-tag="dataList"] ion-item'
);
console.log(
fixture.nativeElement.querySelectorAll('[test-tag="dataList"]')
);
expect(element.length).toBe(3);
});
});