Можно ли проверить вызов службы внутри компонента Angular? - PullRequest
Новая
       8

Можно ли проверить вызов службы внутри компонента Angular?

0 голосов
/ 09 октября 2018

Я испытываю множество проблем при попытке проверить сервисный вызов внутри функции компонента 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

Правка: добавление метода beforeEach () 

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

    fixture = TestBed.createComponent(ExampleComponent);
    component = fixture.componentInstance;

    fixture.detectChanges();
});

1 Ответ

0 голосов
/ 15 октября 2018

Давайте посмотрим, что вы пытаетесь проверить.

У вас есть компонент, которому вы предоставляете услуги на уровне компонента: 

@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

См. Также документ:

Я думаю, теперь вы понимаете, что нам нужно протестировать сервис, который предоставляется на уровне компонентов,

Вот, пожалуйста: 

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