是否可以验证 Angular 组件内的服务调用?

Question

我在尝试验证 Angular 5 组件函数中的服务调用时遇到了许多问题。

@Component({
selector: 'app-example',
templateUrl: './app-example.html',
styleUrls: ['./app-example.css'],
providers: [ PersistanceService, AnotherService ]
})
export class ExampleComponent {
callPersist: boolean = false;
private simpleObj = {
"name": "a",
"age" : 20
}
constructor(private persistanceService: PersistanceService, anotherService: AnotherService) {}
persist() {
if (this.callPersist)
this.persistanceService.persist(this.simpleObj);
else
this.anotherService.terminate();
}
}

在我的测试中，我想验证在调用persist((时是否正在调用相应的服务。这是我的测试用例：

it('should call persistService', () => {
let persistService = TestBed.get(PersistanceService); //this is being declared in TestBed.configureTestingModule
spyOn(persistService, 'persist').and.callThrough(); //create spy
component.callPersist = true; //set flag for persistance
fixture.detectChanges(); //update variables in fixture
component.persist(); //call parent method
expect(persistService.persist).toHaveBeenCalled(); // error
expect(persistService).toHaveBeenCalled(); // error
expect(persistService.calls.any()).toBeTruthy(); //error
});

无论期望是什么，结果永远是

预期的间谍仍然被召唤。

满足期望的唯一情况是当我直接在我的测试用例中呼叫间谍时。但是，这对我来说毫无用处。我希望像 Mockito 使用.verify((一样验证我的服务调用;

我有没有可能完全错了？

PS：测试正在通过Jasmine 2.8.0运行

编辑：在Each((方法之前添加

beforeEach(async() => {
TestBed.configureTestingModule({
declarations: [ ExampleComponent ],
providers: [
PersistanceService,
AnotherService
]
}).compileComponents();
fixture = TestBed.createComponent(ExampleComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

Answer 1

让我们看看您要测试的内容。

您有在组件级别提供服务的组件：

@Component({
...
providers: [ PersistanceService, AnotherService ]
})
export class ExampleComponent {

然后在测试中，您将在根模块级别提供相同的服务：

TestBed.configureTestingModule({
declarations: [ ExampleComponent ],
providers: [
PersistanceService,
AnotherService
]
}).compileComponents();

正如您可以猜到的那样，当运行测试时，这些服务将是完全不同的实例。

如何检查？

const componentPersistService = fixture.debugElement.injector.get(PersistanceService);
const globalPersistService = TestBed.get(PersistanceService);
componentPersistService === globalPersistService // false

另请参阅文档：

• https://angular.io/guide/testing#testbedget

我想您现在明白了，我们需要测试在组件级别提供的服务。

给你：

it('should call persistService', () => {
const persistService = fixture.debugElement.injector.get(PersistanceService);
const persistSpy = spyOn(persistService, 'persist').and.callThrough(); // create spy
component.callPersist = true; // set flag for persistance
fixture.detectChanges(); // update variables in fixture
component.persist(); // call parent method
expect(persistService.persist).toHaveBeenCalled(); // error
expect(persistSpy).toHaveBeenCalled(); // error
expect(persistSpy.calls.any()).toBeTruthy(); // error
});

注意：如果要提供组件级服务的自定义实现，则应使用overrideComponent方法，例如：

fixture = TestBed.overrideComponent(ExampleComponent, {
providers: { provide: PersistanceService, useClass: PersistanceServiceSpy }
})
.createComponent(ExampleComponent);