I have a factory service inside a folder,,,i have mentioned the path in karma.conf.js file correctly and added the angular-mocks before that..But
if i try to load a factory/service which is not available in that folder then Unknown provider error is thrown
If i include the correct factory service then am not getting any error
But if i try to call a method in that factory/service,then the mocked service object is undefined and am getting cannot read a function from undefined error message..
I couldn't figure out why...can any1 help me in this issue..
Spec.js
describe('dfgh', function () {
var mockService,httpBackend;
beforeEach(function () {
module('app');
});
beforeEach(function () {
inject(function ($httpBackend, _familyService_) {
mockService = _familyService_;
httpBackend = $httpBackend;
});
});
it('Factory Service Testing', function () {
/// Code here
});
});
FamilySvc.js
(function() {
'use strict';
angular.module('app')
.factory('familyService', familyService);
familyService.$inject = ['$rootScope', '$http', '$q', 'service2', 'service3'];
function familyService() {
var a="Some String";
return a;
}
}());
Karma.conf.js
files: [
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'app/*.js', --> Holds FamilySvc.js
'tests/*.*' -- >holds Spec.js
],
Related
I created few test cases in jasmine/protractor. When i run these using
protractor conf.js
all test case run and pass successfully.
But when i run using
protractor conf.js --grep="dummytag3"
then selected test case get executed, but it fails. I am finding it really strange that why a test case may fail with tagging and pass without tagging.
spec.js
'use strict';
var HomePage = require('./pages/homePage.js');
var BusPage = require('./pages/busPage.js');
describe('Login cases' , function() {
var homePage= new HomePage();
it('Login without username & password #dummytag3' , function() {
homePage.mainLoginButtonClick();
homePage.popupLoginButtonClick();
expect(homePage.errMsgUsername).toEqual('Please enter valid Email or Mobile Number');
});
});
homePage.js
'use strict';
var HomePage = function () {
browser.get('https://www.mobikwik.com');
browser.driver.manage().window().maximize();
};
HomePage.prototype = Object.create({}, {
//Login
mainLoginButton: { get: function () { return element(by.id('qa-mbkLogin')); }},
mainLoginButtonClick: { value: function () { this.mainLoginButton.click(); }},
popupLoginButton: { get: function () { return element(by.xpath('//*[#id="loginInfo"]/div[3]/p/button')); }},
popupLoginButtonClick: { value: function () { this.popupLoginButton.click(); }},
errMsgUsername: { get: function () { return element(by.xpath('//*[#id="loginInfo"]/div[1]/span')).getText(); }},
});
module.exports = HomePage;
error:
Error: Error while waiting for Protractor to sync with the page: "window.anular is undefined. This could be either because this is a non-angular page or ecause your test involves client-side navigation, which can interfere with Protactor's bootstrapping. See http://git.io/v4gXM for details"
Following the testingBot example for protractor-based projects I got this code
var TestingBot = require('testingbot-api');
describe('Protractor Demo App', function () {
var tb;
beforeEach(function () {
tb = new TestingBot({
api_key: "master_key",
api_secret: "secret_007"
});
});
afterEach(function () {
browser.getSession().then(function (session) {
tb.updateTest({
'test[success]': true/*where do I get this 'test[success]' attribute? */
}, session.getId(), function () {
console.log("Hi! :D");
});
})
});
it('should have a title', function () {
browser.get('http://juliemr.github.io/protractor-demo/');
expect(browser.getTitle()).toEqual('Super Calculator');
});
});
I need to send the success of the test back through the tb.updateTest() but I don't know where I get the value of a passed or failed test. For now the value is a static true. I'd appreciate a jasmine approach too.
You can use a custom reporter with Jasmine.
There you can hook into specDone or suiteDone which has a result parameter, containing the test's success state.
You can then use this state to write a custom report or send it to somewhere else.
I want to test a service call loginUser inside a LoginController.
Now it is fine if loginUser is global method.
but i am trying to test it after the login button was click.
Controller
$scope.login = function () {
UtilsFactory.showLoader();
LoginService.loginUser($scope.data.username, $scope.data.password, false).success(function (data) {
UtilsFactory.hideLoader();
if ($scope.loginSuccessfull(data)) {
$location.path('/tab');
} else {
UtilsFactory.hideLoader();
UtilsFactory.popup('Login failed!', data.Message);
}
}).error(function (data) {
UtilsFactory.hideLoader();
UtilsFactory.popup('Login failed!', 'Login credentials failed!');
});
}
Tests
describe("Unit: Login Controllers", function () {
var $rootScope, $scope, $controller, LoginService;
// load the controller's module
beforeEach(module('starter'));
beforeEach(inject(function (_$rootScope_, _$controller_, _LoginService_) {
$rootScope = _$rootScope_;
$scope = $rootScope.$new();
$controller = _$controller_;
LoginService = _LoginService_;
$controller('LoginController', {
'$rootScope': $rootScope,
'$scope': $scope,
'LoginService': LoginService
});
}));
//Success
it("should call the login method on the LoginController", function () {
spyOn($scope, "login");
$scope.login();
expect($scope.login).toHaveBeenCalled();
});
//Fails
it("calls the loginUser() function", function () {
spyOn(LoginService, "loginUser");
spyOn($scope, "login");
$scope.login();
expect(LoginService.loginUser).toHaveBeenCalled();
});
});
and the error i am getting is
calls the loginUser() function
Error: Expected a spy, but got undefined.
I understand why i am getting it, just don't know how to fix it.
spyOn does no return a spy, but replaces a method of your object with a spy. So your spy variable gets undefined, because again spyOn does not return anything, and that's why you get this error. Instead, you should pass a method which is being replaced by a spy to expect:
// replaces method 'loginUser' in LoginService object
spyOn(LoginService, 'loginUser');
// ...
// pass a spy to expect
expect(LoginService.loginUser).toHaveBeenCalled();
Jasmine docs for spyOn
Here is my app.js module part
angular
.module('flickrNgSpaApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ngMock'
])
filter that I am using (flickrNgSpaApp)
'use strict';
angular.module('flickrNgSpaApp')
.filter('flickrURL', function () {
return function (input, dimension) {
var url = 'http://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}_[mstzb].jpg';
return url.replace('{farm-id}', input.farm)
.replace('{server-id}', input.server)
.replace('{id}', input.id)
.replace('{secret}', input.secret)
.replace('[mstzb]', dimension);
};
});
And filter unit test that fails for some reason :)
'use strict';
describe('Filter: flickrURLFilter', function () {
var $filter;
beforeEach(function(){module('flickrNgSpaApp')});
beforeEach(inject(function (_$filter_) {
$filter=_$filter_;
}));
it('returns null',function(){
var input={
farm:"1",
server:"2",
id:"3",
secret:"4",
dimension:"q"
};
expect($filter('flickrURLFilter')(input, 'q')).not.toEqual(0);
})
});
and error:
Chrome 43.0.2357 (Windows 8.1 0.0.0) Filter: flickrURLFilter returns null FAILED
Error: [$injector:unpr] Unknown provider: flickrURLFilterFilterProvider
<- flickrURLFilterFilter
Could anyone take a look and give me any hints... I would be grateful! :)
Use the name of the filter, and replace $filter('flickrURLFilter') with $filter('flickrURL').
I am new to backbone and requirejs...
I am working on a small gallery app where i came across this error in firefox firebug and in chrome it doesn't show any error chrome dev tool... please help me in this
here is my code
PhotosCollectionjs
define([
'jquery',
'underscore',
'backbone',
'models/thumb/PhotoModel'
], function ($, _, Backbone, PhotoModel) {
var PhotosCollection = Backbone.Collection.extend({
model: PhotoModel,
url: '/photos?query=xxx',
fetch: function (options) {
options = options || {};
.......
Backbone.Collection.prototype.fetch.call(this, options);
},
parse: function (response) {
......
return response.photos;
}
});
return PhotosCollection;
});
loadphotos js
define([
'jquery',
'underscore',
'backbone',
'collections/thumb/PhotosCollection'
], function ($, _, Backbone, PhotosCollection) {
console.log(PhotosCollection); .... undefined(firebug) ... function (){return r.apply(this,arguments)} (chrome dev tool)
var loadPhotos = function (container, options) {
var photos;
photos = void 0;
if (options) {
photos = new PhotosCollection();
options.collection = photos;
}
.....................
................
};
return loadPhotos;
});
in firebug it is giving error
TypeError: PhotosCollection is not a constructor
photos = new PhotosCollection();
EDIT
its temporarily solved .... but now again after few refreshes i receive same error in firebug but no error in chrome... Please someone help me
Edit 2
Trial and error i found that it occurs only while debugging with breakpoints.... if i remove all breakpoints its giving no error... is it related to async loading of scripts or something else???
i just included initialize in PhotosCollection js and now its giving no error... i dont know what exactly the problem but it got solved.....
But i am interested in knowing the cause for it... as only firebug thrown error and chrome doesn't... Please give me some insight
here is my new photosCollection js with blank intialize....
define([
'jquery',
'underscore',
'backbone',
'models/thumb/PhotoModel'
], function ($, _, Backbone, PhotoModel) {
var PhotosCollection = Backbone.Collection.extend({
model: PhotoModel,
url: '/photos?query=xxx',
initialize:function(options){},
fetch: function (options) {
options = options || {};
.......
Backbone.Collection.prototype.fetch.call(this, options);
},
parse: function (response) {
......
return response.photos;
}
});
return PhotosCollection;
});