angular appの単体テストを書いています。サービス関数が値を返すかどうかをテストしています。
component.spec.ts
import {TopToolBarService} from '../../top-toolbar/top-toolbar.service';
beforeEach(async(() => {
TestBed.configureTestingModule ({
declarations: [ UsersListComponent],
providers: [TopToolBarService],//tried mocking service here,still test failed
schemas:[CUSTOM_ELEMENTS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should return data from service function', async(() => {
let mockTopToolBarService: jasmine.SpyObj<TopToolBarService>;
mockTopToolBarService = jasmine.createSpyObj('TopToolBarService', ['getCustomer']);
mockTopToolBarService.getCustomer.and.returnValue("king");
fixture.detectChanges();
expect(component.bDefine).toBe(true); //fails
}))
component.ts
bDefine = false;
ngOnInit() {
let customer = this.topToolBarService.getCustomer();
if (customer == null) {
bDefine = false;
} else {
bDefine = true;
}
}
私はテストでサービス関数をモックしたと思うので、変数が「true」に設定されている他の部分に到達しているはずです。
TopToolBarService.ts
import { EventEmitter, Injectable, Output } from "@angular/core";
@Injectable()
export class TopToolBarService {
customer = null;
getCustomer() {
return this.customer;
}
}
コードを実行する前に、テストモジュールを構成する必要があります。インポートとしてTestBed.configureTestingModule
に渡さない限り、スパイオブジェクトについては認識されません。
https://angular.io/guide/testing#component-with-a-dependency
プロバイダーの値を変更する
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ UsersListComponent],
providers: [{
provide: TopToolBarService,
useValue: jasmine.createSpyObj('TopToolBarService', ['getCustomer'])
}],
schemas:[CUSTOM_ELEMENTS_SCHEMA]
});
mockTopToolBarService = TestBed.get(TopToolBarService);
mockTopToolBarService.getCustomer.and.returnValue(of([])); // mock output of function
})