如何在Angular服务的可观察订阅中测试代码块

Question

我有一个Angular服务方法，它使用另一个服务进行api调用。在调用成功后，在订阅内部，我调用了一些方法，例如notifySuccess、emit new value。。。

我的问题是如何测试订阅中的代码块，例如，期望调用notifyScess。我在订阅中设置了一个断点，但代码执行并没有就此停止。

对于测试组件，我知道要应用"fixture.detectChanges(("方法。对于服务测试，是否有类似的机制？

resource.service.ts

@Injectable({
providedIn: 'root',
})
export class ResourceService {
constructor(
private http: HttpClient,  
) {}
putData(newData: Data): Observable<Data> {
return this.http.put<Data>('/api/put-endpoint', newData);
}
}

store.service.ts

@Injectable({
providedIn: 'root',
})
export class StoreService {
constructor(
private resource: ResourceService,
private notificationService: NotificationService,
)
saveChanges(newData: Data) {
this.resourceServie.putData(newData).subscribe(() => {
this.notificationService.notifySuccess('Save changes successfully');
// do something else
}
}

store.service.spec.ts

describe('StoreService', () => {
let storeService: StoreService;
let resourceService: jasmine.SpyObj<ResourceService>;
let notificationService: jasmine.SpyObj<NotificationService>;
notificationService = jasmine.createSpyObj('NotificationService', ['notifySuccess']);
resourceService = jasmine.createSpyObj('ResourceService', ['putData']);
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
{ provide: ResourceService, useValue: resourceService },
{
provide: NotificationService,
useValue: notificationService,
},
],
});
});

it('should saveChanges', () => {
const newData: Data = {foo: bar};
resourceService.putData.and.returnValue(of(newData));
storeService.putData(newData);
expect(resourceService.putData).toHaveBeenCalledWith(newData); // PASS
expect(notificationService.notifySuccess).toHaveBeenCalledWith(Save changes successfully); // FAIL as the code block inside the subscription does not run
});
})

Answer 1

您的间谍需要返回一些值来触发订阅。关于间谍的更多高级信息，你可以在这里阅读您需要使用：

const newData: Data = {foo: bar};
resourceService = spyOn(resourceService,'putData').and.returnValue(newData);

而不是：

resourceService = jasmine.createSpyObj('ResourceService', ['putData']);

您还可以在组件中看到类似的订阅函数的后角度单元测试

---

尝试以这种方式实现store.service.spec.ts：

describe('StoreService', () => {
let storeService: StoreService;
let resourceService: ResourceService;
let notificationService: NotificationService;
const newData: Data = {foo: bar};
resourceService = spyOn(resourceService,'putData').and.returnValue(newData);
resourceService = spyOn(notificationService,'notifySuccess').and.returnValue('Save changes successfully');
beforeEach(() => {
TestBed.configureTestingModule({
providers: [],
});
resourceService= TestBed.inject(ResourceService);
notificationService= TestBed.inject(NotificationService);
storeService = TestBed.inject(storeService);
});
it('should saveChanges', () => {
storeService.saveChanges(newData);
expect(resourceService.putData).toHaveBeenCalledWith(newData); 
expect(notificationService.notifySuccess).toHaveBeenCalledWith(Save changes successfully); /
});
})