this is my controller code
$scope.loadMajorObjects = function () {
var appId = $scope.currentAppId;
var type = $scope.majorObject.type;
if (_.isEmpty(appId))
return;
var cacheKey = { key: cacheKeys.objectTypeList($scope.asCacheOptions({ ObjectType: type })) };
return dataFactory.get("/MajorObject/All?applicationId=" + appId + "&type=" + type, { cache: cacheKey })
.then(function (result) {
$scope.majorObjects = result.data.data;
$scope.majorObjectsList = $scope.majorObjects.slice(0, $scope.itemsPerPage);
$scope.totalItems = $scope.majorObjects.length;
$scope.isLoad = true;
});
};
and this is test case and in this i am calling $scope.loadMajorObject
describe("Testing MajorObjectsCtrl", function () {
//checking dataFactory.get called only once
it("should call dataFactory.get and called only once", function () {
scope.currentAppId = mockApplicationId;
scope.applications = applicationsMockData;
scope.itemsPerPage = 10;
$controller('AppSettingCtrl',
{
$scope: scope,
dataFactory: mainmockdataFactory
});
expect(mockdataFactory.get.calls.count()).toBe(0);
scope.currentAppId = mockApplicationId;
scope.majorObjects.slice();
scope.loadMajorObjects();
scope.$digest();
expect(mockdataFactory.get).toHaveBeenCalled();
expect(mockdataFactory.get.calls.count()).toBe(1);
});
when i call this function it is throwing and exception as object doesn't support property or method 'slice', how to rectify this?
Related
I am still learning the ropes when it comes to unit testing with angular. I have an angular service that I use to create HTML5 notifications. Code is similar to the following:
(function() {
'use strict';
angular
.module('blah')
.factory('OffPageNotification', offPageNotificationFactory);
function offPageNotificationFactory($window) {
//Request permission for HTML5 notifications as soon as we can
if($window.Notification && $window.Notification.permission !== 'denied') {
$window.Notification.requestPermission(function (status) { });
}
function OffPageNotification () {
var self = Object.create(OffPageNotification.prototype);
self.visibleNotification = null;
return self;
}
OffPageNotification.prototype.startNotification = function (options) {
var self = this;
self.options = options;
if(self.options.showHtml5Notification && (!self.options.onlyShowIfPageIsHidden || $window.document.hidden)) {
if($window.Notification && $window.Notification.permission !== 'denied') {
self.visibleNotification = new $window.Notification('Notification', {
body: self.options.notificationText,
icon: self.options.notificationIcon
});
}
}
};
.
.
.
return new OffPageNotification();
}
})();
I am attempting to write unit tests for this but am unsure how to mock $window.Notification so it can be used as both a constructor...
self.visibleNotification = new $window.Notification(....)
and also contain properties
if($window.Notification && $window.Notification.permission !== 'denied')
and methods....
$window.Notification.requestPermission(
An example of something I have tried is:
describe('startNotification', function() {
beforeEach(function() {
var mockNotification = function (title, options) {
this.title = title;
this.options = options;
this.requestPermission = sinon.stub();
};
mockNotification.prototype.permission = 'granted';
mockWindow = {
Notification: new mockNotification('blah', {}),
document: {hidden: true}
};
inject(function (_OffPageNotification_) {
OffPageNotification = _OffPageNotification_;
});
});
it('should display a html5 notification if the relevant value is true in the options, and permission has been granted', function(){
var options = {
showHtml5Notification: true,
onlyShowIfPageIsHidden: true
};
OffPageNotification.startNotification(options);
});
});
I get an error saying '$window.Notification is not a constructor' with this setup and I understand why (I am passing in an instantiated version of the mockNotification). But if I set mockWindow.Notification = mockNotification then I get an error when it calls requestPermission since this is undefined.
Any help is appreciated
Notification should be a constructor. And it should have static properties and methods.
All of the relevant properties of mockNotification are instance properties, while they should be static:
function MockNotification() {}
MockNotification.title = title;
MockNotification.options = options;
MockNotification.requestPermission = sinon.stub();
mockWindow = {
Notification: MockNotification,
document: {hidden: true}
};
I am using promises in my controller, and most of the times it works well. But sometimes it just loads forever and the WordPress.getAllCategories() function does not even get called.
This is my controller:
var mod = angular.module('app.controllers.home', []);
mod.controller('HomeCtrl', function ($scope, $q, $sce, $ionicPlatform, WordPress, Loading) {
console.log('HomeCtrl init');
$scope.$on('$ionicView.enter', function () {
Loading.show();
WordPress.getAllCategories()
.then(function (cats) {
console.info(angular.toJson(cats));
console.info('cats ^');
$q.all(cats.data.map(function (cat) {
var d = $q.defer();
console.error(cat.name);
WordPress.getLatestPostOfCategory(cat.id)
.then(function (post) {
console.debug(post.data.title.rendered);
WordPress.getMediaById(post.data.featured_media)
.then(function (media) {
console.log(media.data.source_url);
cat.firstPost = {};
cat.firstPost.id = post.data.id;
cat.firstPost.title = post.data.title.rendered;
cat.firstPost.content = post.data.content.rendered;
if (cat.firstPost.title.length > 50) {
cat.firstPost.title = cat.firstPost.title + '...';
}
if (cat.firstPost.content.length > 70) {
cat.firstPost.content = cat.firstPost.content.substr(0, 60) + '...';
}
cat.firstPost.thumbnail = media.data.source_url;
d.resolve(cat);
}, function (err) {
console.error(angular.toJson(err));
});
});
return d.promise;
})).then(function (cats) {
console.log('Loaded all articles and for main page.');
$scope.homeCategories = cats;
Loading.hide();
});
});
});
});
Is there anything wrong in my controller?
P.S. I also debug all the WordPress service functions and they work just fine, and provide the needed data.
EDIT:
Sometimes when it loads forever, I see the console.error(cat.name); debug message only logs 3 messages. But still proceeds to the next function...
This is how I solved it, by Bergi's advice.
Source for help: Promise anti pattern by Gorgi Kosev (bluebird)
var categories = [];
function sort() {
return WordPress.getAllCategories()
.then(function (cats) {
console.log('thens');
return $q.all(cats.data.map(function (cat) {
console.info('cat: ' + cat.name);
var category = {};
category.name = cat.name;
return WordPress.getLatestPostOfCategory(cat.id)
.then(function (post) {
var post = post.data;
category.post = {};
category.post.id = post.id;
category.post.title = post.title.rendered;
category.post.content = post.content.rendered;
console.log('ID: ' + category.post.id + ', title: ' + category.post.title);
return WordPress.getMediaById(post.featured_media);
}).then(function (media) {
category.post.thumbnail = media.data.source_url;
categories.push(category);
console.log('Pushed category "' + category.name + '"');
});
}));
}, function (err) {
console.error('ERR1');
console.error(angular.toJson(err));
});
}
sort()
.then(function () {
console.info('LOADED ALL CATEGORIES');
$scope.categories = categories;
}, function (err) {
console.error('err:' + angular.toJson(err));
});
I'm trying to test the following service and seem to be having trouble matching the mock response:
public getCustomerDetails(customerID:string): ng.IPromise<ICustomerDetails> {
return this.testService.getCustomerDetails(customerID).then((customerResponse:ICustomerResult) => {
var customer = customerResponse.customers;
var customerDetailsResult:ICustomerDetails = {
customerNumber: customer.displayCustomerNumber,
name: customer.name,
userId: customer.buId,
customerType: customer.type,
address: customer.displayAddress
};
return customerDetailsResult;
});
}
Here is the Jasmine code:
describe('CustomerService', () => {
var mockTestService: any = {};
var $q: ng.IQService;
var createCustomerDetailsService;
var customerDetailsService;
var createResolvedPromise;
var resolvePromises;
var serviceResponse = {
customerNumber: 'string',
name: 'name',
userId: 'buId',
customerType: 'type',
address: 'displayAddress'
};
var rootScope;
beforeEach(() => {
module('app.customer');
inject(( _$q_, $injector) => {
this.$q = _$q_;
rootScope = $injector.get('$rootScope');
createResolvedPromise = (result) => {
return this.$q.when(result);
};
resolvePromises = () => {
rootScope.$apply();
};
createCustomerDetailsService = () => {
return new app.customer.CustomerService(
mockRnsService);
};
});
});
it('WILL search by customer ID and return a customers details', () => {
var searchResponsePromise;
mockTestService.getCustomerDetails = jasmine.createSpy("getCustomerDetails").and.callFake(createResolvedPromise);
customerDetailsService = createCustomerDetailsService();
searchResponsePromise = customerDetailsService.getCustomerDetails('12345678');
resolvePromises();
expect(searchResponsePromise).toEqual(serviceResponse);
});
});
The error I'm getting is:
TypeError: 'undefined' is not an object (evaluating 'customer.displayCustomerNumber')
Can anyone tell me why I'm getting this error? Thanks for any help.
createResolvedPromise sets up getCustomerDetails to return a promise with the value of the parameter that you pass in - in this case '12345678'. This means that the value of customerResponse is '12345678'. So customer which takes it's value from customerResponse.customers is undefined as there is no property customers on a string. So the error happens as you are trying to evaluate customer.displayCustomerNumber because customer is undefined.
I have a simple query that I am struggling with:
.factory('Config', function($http, DB) {
var self = this;
self.setValue = function(key,value) {
console.log('setValue(value)', value);
return DB.query("UPDATE config SET value = '"+value+"' WHERE key = '"+key+"'")
.then(function(result){
return DB.fetchAll(result);
});
}
self.getValue = function(key) {
return DB.query("SELECT value FROM config WHERE key = '"+key+"'")
.then(function(result){
return DB.fetchOne(result);
});
};
return self;
})
with the following code in controller.js under the heading:
.factory('DB', function($q, DB_CONFIG) {
var self = this;
self.db = null;
(I took the init part of the function away for the sake of simplicity. Also DB is working well when inserting, getting and updating data.)
self.fetchOne = function(result) {
var output = null;
output = angular.copy(result.rows.item(0));
return output;
};
self.query = function (sql, bindings) {
bindings = typeof bindings !== 'undefined' ? bindings : [];
var deferred = $q.defer();
self.db.transaction(function (transaction) {
transaction.executeSql(sql, bindings, function (transaction, result) {
deferred.resolve(result);
}, function (transaction, error) {
deferred.reject(error);
});
});
return deferred.promise;
};
self.fetchAll = function (result) {
var output = [];
for (var i = 0; i < result.rows.length; i++) {
output.push(result.rows.item(i));
}
return output;
};
Called like so:
$scope.config.recordar = Config.getValue("recordar");
Doing a console.log returns:
I am struggling to access the value: "true" which is highlighted in BLUE in the above image.
Any leads?
$scope.config.recordar = Config.getValue("recordar");
Does not work (ala JS). It has to be called like so:
Config.getValue("recordar").then(function(data) {
$scope.config.recordar
});
I assume that you shall change your function declaration from :
self.setValue = function(key,value) {
console.log('setValue(value)', value);
return DB.query("UPDATE config SET value = '"+value+"' WHERE key = '"+key+"'")
.then(function(result){
return DB.fetchAll(result);
});
}
to
self.setValue = function(key,value) {
console.log('setValue(value)', value);
DB.query("UPDATE config SET value = '"+value+"' WHERE key = '"+key+"'")
.then(function(result){
return DB.fetchAll(result);
});
}
You will return the result of your promise, not your promise
I have changed "return DB..." to "DB..."
I am getting a series of error messages on my unit tests and Its been a few hours since I have made any progress. If anyone has the time to take a look it would be much appreciated. This is part of a larger controller so if anyone wants to see more code please let me know but I think this should cover it.
The errors I am getting are:
1)
Test 'CampaginLinksController getCampaignLinks():is loading' failed
Expected undefined to be true.
2)
Test 'CampaginLinksController getCampaignLinks():has a webSiteId that is not 0 and a buyRequestId that is not "" ' failed
Expected spy mockCampaginLinkSrv.getWebSiteBuyRequestLinks to have been called with [ 54, 8, 432, 200, { nextRowKey : 'fdsf2', nextPartitionKey : '5432gee' } ] but it was never called.
CampaginLinksCtrlSpec.js
describe('CampaignLinksController', function () {
//make module avalible to tests
beforeEach(module('pb.campaignLinks.controllers'));
beforeEach(module('ui.router'));
beforeEach(module('ui.bootstrap'));
var $controller;
var mockPromiseObj;
var length = 200;
var continuationToken = {
nextRowKey: 'fdsf2',
nextPartitionKey: '5432gee'
};
var mockCampaignLinkService = {
//all but delete must return a promiseObj
getCampaignLinks: jasmine.createSpy('mockCampaignLinkService.getCampaignLinks').and.returnValue(mockPromiseObj),
getCampaignBuyRequestLinks: jasmine.createSpy('mockCampaignLinkService.getCampaignBuyRequestLinks').and.returnValue(mockPromiseObj),
getWebSiteBuyRequestLinks: jasmine.createSpy('mockCampaignLinkService.getWebSiteBuyRequestLinks').and.returnValue(mockPromiseObj),
deleteCampaignLink: jasmine.createSpy('mockCampaignLinkService.deleteCampaignLinks').and.returnValue(mockPromiseObj)
};
var mockGlobal = {
activeOrganizationId: 54
};
var mockCampaignLinks = true;
var mockCurrentView;
beforeEach(inject(function (_$controller_) {
$controller = _$controller_;
}));
beforeEach(inject(function ($rootScope, $q) {
scope = $rootScope.$new();
var mockPromiseObj = {
hello: "world",
then: function (orgId, entityId) {
var defer = $q.defer();
defer.resolve(this.account);
return defer.promise;
}
}
controller = $controller('CampaignLinksController',
{
$scope: scope,
//$stateParams: mockStateParams,
global: mockGlobal,
campaignLinks: mockCampaignLinks,
campaignLinkService: mockCampaignLinkService,
currentVeiw: mockCurrentView,
promiseObj: mockPromiseObj
});
}));
describe('getCampaignLinks()', function () {
beforeEach(function () {
mockCurrentView = {
campaignId: 32,
webSiteId: 8
};
});
//describing loading
it('is loading', function () {
scope.getCampaignLinks(mockCurrentView, length, continuationToken);
expect(mockCampaignLinks.loading).toBe(true);
});
it('is not loading', function () {
mockCampaignLinks = false;
scope.getCampaignLinks(mockCurrentView, length, continuationToken);
expect(mockCampaignLinks.loading).toEqual(undefined);
});
it('has a webSiteId that is not 0 and a buyRequestId that is not "" ', function () {
mockCurrentView.buyRequestId = 432;
scope.getCampaignLinks(mockCurrentView, length, continuationToken);
expect(mockCampaignLinkService.getWebSiteBuyRequestLinks).toHaveBeenCalledWith(mockGlobal.activeOrganizationId, mockCurrentView.webSiteId, mockCurrentView.buyRequestId, length, continuationToken);
// must check that what is returned is a promise
expect(scope.promiseObj).toEqual(mockPromiseObj);
});
});
CampaginLinksController.js
$scope.getCampaignLinks = function (currentView, length, continuationToken) {
// When loading list items, display loading image
if ($scope.campaignLinks) $scope.campaignLinks.loading = true;
var promiseObj = null;
if (currentView.campaignId && currentView.campaignId !== 0 && !currentView.buyRequestId) {
promiseObj = campaignLinkService.getCampaignLinks(global.activeOrganizationId, currentView.campaignId, length, continuationToken)
} else if (currentView.campaignId && currentView.buyRequestId && currentView.campaignId !== 0 && currentView.buyRequestId !== '') {
promiseObj = campaignLinkService.getCampaignBuyRequestLinks(global.activeOrganizationId, currentView.campaignId, currentView.buyRequestId, length, continuationToken);
} else if (currentView.webSiteId && currentView.buyRequestId && currentView.webSiteId !== 0 && currentView.buyRequestId !== '') {
promiseObj = campaignLinkService.getWebSiteBuyRequestLinks(global.activeOrganizationId, currentView.webSiteId, currentView.buyRequestId, length, continuationToken);
}
if (promiseObj) {
promiseObj.then(function (data) {
// If there are already some campaign links being displayed, add newly loaded list to the end
if ($scope.campaignLinks) {
$scope.campaignLinks.continuationToken = data.continuationToken;
$scope.campaignLinks.total += data.total;
$.each(data.items, function (index) {
$scope.campaignLinks.items.push(data.items[index]);
});
} else {
// Otherwise add loaded list to scope
$scope.campaignLinks = data;
}
// When done loading, hide loading image
$scope.campaignLinks.loading = false;
});
}
};
First test: When you initialize mockCampaignLinks, you should give it an object, not true. Also, you probably should initialize it in beforeEach since you mutate it in the tests.
Second test: getCampaignBuyRequestLinks is the method being called.