不带依赖的Service

Service不带有 constructor 或者 constructor 的不含参数的即为不带依赖的Service。如下方的CityService：

  1. import { Injectable } from '@angular/core';
  2. import { Subject } from 'rxjs';
  4. @Injectable()
  5. export class CityService {
  6.   private city: string;
  7.   citySubject = new Subject<string>();
  8.   getCity() {
  9.     return this.city;
  10.   }
  11.   setCity(city: string) {
  12.     this.city = city;
  13.     this.citySubject.next(this.city);
  14.   }
  15.   getCitys() {
  16.     return ['北京','上海','广州','深圳'];
  17.   }
  18.   getObservableValue() {
  19.     return this.citySubject.asObservable();
  20.   }
  21.   getPromiseValue() {
  22.     return this.citySubject.toPromise();
  23.   }
  24. }

使用new操作符即可创建该类Service的实例，并进行测试。

  1. import { CityService } from "./city3.service"
  3. describe('CityService', () => {
  4.   let service: CityService;
  5.   beforeEach(() => {
  6.     service = new CityService();
  7.   });
  8.   it('#getCities 应该返回城市列表', () => {
  9.     const cities = service.getCities();
  10.     expect(cities).toBeTruthy();
  11.     expect(cities.length).toBeGreaterThanOrEqual(1);
  12.   });
  13.   it('getObservableValue 能正确返回设置值', (done) => {
  14.     service.getObservableValue().subscribe(city => {
  15.       expect(city).toBe('广州');
  16.       done()
  17.     });
  18.     service.citySubject.next('广州');
  19.   });
  20.   it('#getPromiseValue 能正确返回设置值', done => {
  21.     service.getPromiseValue().then(city => {
  22.       expect(city).toBe('北京');
  23.       done();
  24.     });
  25.     service.citySubject.next('北京');
  26.     service.citySubject.complete();
  27.   });
  28. });

带有依赖的Service

注入的Service依赖足够简单

  1. describe('MasterService without Angular testing support', () => {
  2.   let masterService: MasterService;
  4.   it('#getValue should return real value from the real service', () => {
  5.     masterService = new MasterService(new ValueService());
  6.     expect(masterService.getValue()).toBe('real value');
  7.   });
  9.   it('#getValue should return faked value from a fake object', () => {
  10.     const fake =  { getValue: () => 'fake value' };
  11.     masterService = new MasterService(fake as ValueService);
  12.     expect(masterService.getValue()).toBe('fake value');
  13.   });
  15.   it('#getValue should return stubbed value from a spy', () => {
  16.     const valueServiceSpy =
  17.       jasmine.createSpyObj('ValueService', ['getValue']);
  19.     const stubValue = 'stub value';
  20.     valueServiceSpy.getValue.and.returnValue(stubValue);
  22.     masterService = new MasterService(valueServiceSpy);
  24.     expect(masterService.getValue())
  25.       .toBe(stubValue, 'service returned stub value');
  26.     expect(valueServiceSpy.getValue.calls.count())
  27.       .toBe(1, 'spy method was called once');
  28.     expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
  29.       .toBe(stubValue);
  30.   });
  31. });

使用 TestBed 测试服务

TestBed 是 Angular 测试实用工具中最重要的。 TestBed 创建了一个动态构造的 Angular 测试模块，用来模拟一个 Angular 的 @NgModule 。
TestBed.configureTestingModule() 方法接受一个元数据对象，它可以拥有@NgModule的大部分属性。
要测试某个服务，你可以在元数据属性 providers 中设置一个要测试或模拟的服务数组。

  1. let masterService: MasterService;
  2. let valueServiceSpy: jasmine.SpyObj<ValueService>;
  4. beforeEach(() => {
  5.   const spy = jasmine.createSpyObj('ValueService', ['getValue']);
  7.   TestBed.configureTestingModule({
  8.     providers: [
  9.       MasterService,
  10.       { provide: ValueService, useValue: spy }
  11.     ]
  12.   });
  13.   masterService = TestBed.inject(MasterService);
  14.   valueServiceSpy = TestBed.inject(ValueService) as jasmine.SpyObj<ValueService>;
  15. });

注意： TestBed.get() 已在 Angular 9 中弃用。