要测试调用两个服务的可观察链,你可以使用Angular的测试工具和技术。下面是一个示例代码,展示了如何测试一个组件,该组件调用两个服务的可观察链:
组件代码(app.component.ts):
import { Component } from '@angular/core';
import { DataService } from './data.service';
import { UserService } from './user.service';
@Component({
selector: 'app-root',
template: `
{{ data }}
{{ user }}
`,
})
export class AppComponent {
data: string;
user: string;
constructor(private dataService: DataService, private userService: UserService) {}
fetchData() {
this.dataService.getData().subscribe((result) => {
this.data = result;
});
}
fetchUser() {
this.userService.getUser().subscribe((result) => {
this.user = result;
});
}
ngOnInit() {
this.fetchData();
this.fetchUser();
}
}
服务代码(data.service.ts和user.service.ts):
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class DataService {
getData(): Observable {
return of('Data from DataService');
}
}
@Injectable({
providedIn: 'root',
})
export class UserService {
getUser(): Observable {
return of('User from UserService');
}
}
组件的测试代码(app.component.spec.ts):
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { DataService } from './data.service';
import { UserService } from './user.service';
import { of } from 'rxjs';
describe('AppComponent', () => {
let component: AppComponent;
let fixture: ComponentFixture;
let dataService: jasmine.SpyObj;
let userService: jasmine.SpyObj;
beforeEach(() => {
const dataServiceSpy = jasmine.createSpyObj('DataService', ['getData']);
const userServiceSpy = jasmine.createSpyObj('UserService', ['getUser']);
TestBed.configureTestingModule({
declarations: [AppComponent],
providers: [
{ provide: DataService, useValue: dataServiceSpy },
{ provide: UserService, useValue: userServiceSpy },
],
}).compileComponents();
fixture = TestBed.createComponent(AppComponent);
component = fixture.componentInstance;
dataService = TestBed.inject(DataService) as jasmine.SpyObj;
userService = TestBed.inject(UserService) as jasmine.SpyObj;
});
it('should set data and user from services', () => {
const dataFromService = 'Data from DataService';
const userFromService = 'User from UserService';
dataService.getData.and.returnValue(of(dataFromService));
userService.getUser.and.returnValue(of(userFromService));
fixture.detectChanges();
expect(dataService.getData).toHaveBeenCalled();
expect(userService.getUser).toHaveBeenCalled();
expect(component.data).toBe(dataFromService);
expect(component.user).toBe(userFromService);
});
});
在测试代码中,我们创建了DataService
和UserService
的间谍对象,并在beforeEach
块中用这些间谍对象替换了原始的服务提供商。然后,我们设置了这些间谍对象的方法,以便在调用时返回我们期望的值。最后,我们调用fixture.detectChanges()
触发组件的ngOnInit
方法,然后检查结果是否符合预期。
通过这种方式,我们可以测试调用两个服务的可观察链,确保组件能够正确获取并展示数据。