Currently, I am in the process of testing a component that involves calling multiple services. To simulate fake function calls, I have been injecting services and utilizing spyOn().
However, I encountered an issue where calling a specific function on one of the services resulted in the error
Error: <spyOn : refreshThings() method does not exist>spyOn() works perfectly fine.
Below are some relevant code snippets demonstrating how the BasketController relies on the ThingService:
Note: Code has been cleaned up for clarity
Unit Test
describe("BasketController test", () => {
let $componentController: ng.IComponentControllerService;
let $scope: ng.IRootScopeService;
let BasketService;
let ctrl;
let ThingService: ThingService;
// Injections and controller
beforeEach(() => {
angular.mock.module("myModule");
angular.mock.inject(
(_$componentController_: ng.IComponentControllerService,
_$rootScope_: ng.IRootScopeService,
_BasketService_: BasketService,
_ThingService_: ThingService
) => {
$componentController = _$componentController_;
$scope = _$rootScope_;
BasketService = _BasketService_;
ThingService = _ThingService_;
}
);
ctrl = $componentController('basket',
{
'$scope': $scope,
'BasketService': BasketService,
'ThingService': ThingService
}
);
spyOn(ThingService, 'refreshThings').and.callFake(() => {
});
});
it('should be testable', () => {
expect(ctrl).toBeDefined();
});
Controller
export class BasketController {
static $inject = ["BasketService", "$state", "AlertService", "$filter", "ThingService"];
constructor(_BasketService_: BasketService,
private $state: ng.ui.IStateService,
private AlertService: AlertService,
private $filter,
private ThingService: ThingService) {
this.BasketService = _BasketService_;
}
BasketService: BasketService;
headerData: Object;
basketForm: ng.IFormController;
basket: Basket;
basketList: Array<Basket>;
selectAll: boolean;
toolbarButtons: any;
columns: [string];
itemFormatter: any;
self: any;
$onInit() {
// GETs baskets from the service
this.ThingService.refreshThings();
}
}
Injected Service
export class ThingService {
static $inject = ["ApiHttpService", "$q", "AlertService", "StatusThingService"];
currentThing: Thing;
thingList: Array<Thing>;
constructor(private ApiHttpService: IHttpService,
private $q: ng.IQService,
private AlertService: AlertService,
private StatusThingService: StatusThingService) {
}
$onInit() {
}
getThing(href:string) {
let defer = this.$q.defer();
this.ApiHttpService.get(href).then(
(res:GetThing) => {
defer.resolve(res);
},
(res) => {
defer.reject(res);
}
);
return defer.promise;
}
getAllThings() {
let defer = this.$q.defer();
this.ApiHttpService.get("/api/Thing").then(
(res:Array<GetThing>) => {
defer.resolve(res);
},
(res) => {
defer.reject(res);
}
);
return defer.promise;
}
refreshThings() {
this.thingList = [];
this.getAllThings().then(
(res:Array<GetThing>) => {
for(let getTemp of res) {
let thing = new Thing();
thing.fromGet(getTemp);
this.thingList.push(thing);
}
},
(res) => {
console.error("Unable to refresh things");
}
);
}
}
Main.module.service("ThingService", ThingService);
Attempting to spy on refreshThings results in the error message
Error: <spyOn> : refreshThings() method does not exist