angular - 是否可以在 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
});

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

Expected spy persist to have been called.

满足期望的唯一情况是我直接在我的测试用例中调用 spy 。但是，这对我没有用。我希望验证我的服务调用，就像 Mockito 使用 .verify();

有没有可能我完全错了？

PS:测试通过 Jasmine 2.8.0 运行

编辑:添加 beforeEach() 方法

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);