Am trying to write a spec as below but am not able to run it,below are the sample files i used
Sample.js
(function (app) {
var SimpleController = function ($scope) {
$scope.x = 3;
$scope.y = 4;
$scope.doubleIt = function () {
$scope.x *= 2;
$scope.y *= 2;
};
};
app.controller("SimpleController",
["$scope", SimpleController]);
}(angular.module("myApp")));
Spec.js
describe("myApp", function() {
beforeEach(module('myApp'));
describe("SimpleController", function() {
var scope;
beforeEach(inject(function($rootScope, $controller) {
scope = $rootScope.$new();
$controller("SimpleController", {
$scope: scope
});
}));
it("should double the numbers", function() {
scope.doubleIt();
expect(scope.x).toBe(6);
});
});
});
I have below js files
- jasmine.js
jasmine-html.js
angular.js
angular-mocks.js
sample.js
While running the spec it displays
Error: No module: myApp
TypeError: Unable to get value of the property 'doubleIt': object is null or undefined
Kindly help me solve this problem
Related
In my angular application, I am trying to write a test case for following scenario but getting error 'Expected spy reinvite to have been called.'. Im testing on "jasmine-core: ^2.5.2 and "karma: ^1.3.0". I have written similar test cases and they passed without error.
In my controller file:
function reinvite() {
var emailsToReInvite = $j.map($scope.settingsData.userSettingsDetails, function(user) {
if(user.reInviteChecked){
return user.email;
}
});
if (emailsToReInvite.length >= 1) {
var invitation = { invitees: emailsToReInvite, listId: listId};
invitation = JSON.stringify(invitation);
inviteCollaboratorsModalDataService.reinvite(invitation).then(
function success(response) {
if(response.data.messages[0].code == 214){
$scope.showReinviteSuccess = true;
}
}else{
$scope.showReinviteSuccess = false;
}
}
);
}
}
And my spec file:
describe('settingsModalController', function() {
var controllerUnderTest = "settingsModalController";
var controllerResolver, rootScope, injector, $scope, inviteCollaboratorsModalDataService
beforeEach(function(){
angular.mock.module('sharedListApp');
inject(function($controller, $rootScope, $injector){
controllerResolver = $controller;
rootScope = $rootScope;
injector = $injector;
});
$scope = rootScope.$new();
inviteCollaboratorsModalDataService = injector.get('uiCommon.inviteCollaboratorsModalDataService');
});
it("should send re-invitation mail to selected users successfully", shouldReinviteSelectedUsers);
function shouldReinviteSelectedUsers() {
var $q = injector.get('$q');
$scope.settingsData = {
userSettingsDetails: [{email: 'abc#xyz.com'}]
};
var data = {
messages: [ { code: 214 }],
invite: {
invitation: $scope.settingsData
}
};
var response = { data: data };
var mockResult = new $q.defer();
mockResult.resolve(response);
spyOn(inviteCollaboratorsModalDataService, 'reinvite').and.returnValue(mockResult.promise);
controllerResolver(controllerUnderTest, { $scope: $scope });
$scope.reinvite();
$scope.showReinviteSuccess = true;
$scope.$apply();
expect(inviteCollaboratorsModalDataService.reinvite).toHaveBeenCalled();
expect($scope.showReinviteSuccess).toBe(true);
}
}
What am i doing wrong or what am i missing? Thanks in advance.
Ok, so i missed one variable to add in $scope.settingsData in my spec file which was why my spec code was not parsing into the first 'if' loop of the controller. Got it working by adding 'reInviteChecked: true' in:
$scope.settingsData = {
userSettingsDetails: [{email: 'abc#xyz.com', reInviteChecked: true}]
};
I've spent a lot of time trying to figure out how to go inside anonymous functions in jasmine.
Sample of method:
numerateColumns: function (rows) {
rows.each(function () {
var $row = $(this);
$row.children().each(function (index) {
var $cell = $(this);
$cell.addClass('column-' + (index + 1));
});
});
}
Try to test with:
it("[TEST] Should call each method.", function () {
// setup
var rows = {
each: function () {
return {
children: function () {
return {
replaceWith: function () {
return null;
}
};
}
};
}
};
spyOn(rows, 'each').and.callThrough();
// method under test
module.numerateColumns(rows);
// expectations
expect(rows.each).toHaveBeenCalled();
});
But coverage test shows me that code of method is read only in first line (rows.each).
How to force it to read all the code inside (function() {}) ?
Why you want to test jQuery? It works perfectly, if not - some tests probably it will catch before new version publication.
function numerateColumns($rows) {
$rows.each(function() {
var $row = $(this);
$row.children().each(function(index) {
var $cell = $(this);
$cell.addClass('column-' + (index + 1));
});
});
}
describe('Iterate over columns`', function() {
var mockRows
beforeEach(function() {
mockRows = $('<div><div></div></div>')
})
it("calls .each() on passed jQuery collection", function() {
spyOn($, 'each').and.callThrough();
expect($.each).not.toHaveBeenCalled();
numerateColumns(mockRows);
expect($.each).toHaveBeenCalled();
});
it("adds CSS class to each child", function() {
var column = $(mockRows[0]).find('div');
expect(column.hasClass('column-1')).toBeFalsy()
numerateColumns(mockRows);
expect(column.hasClass('column-1')).toBeTruthy()
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" />
<script src="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script>
What you can test - it is extracted business logic that is independent to jQuery itself.
My controller file :
define(['app', 'back123','loginService'], function (app) {
app.controller('loginController', function ($scope, $window, loginService, srvAuth) {$scope.emailValidate = function () {
var pattern = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (!pattern.test($scope.Email) ) {
$scope.email_invalid = true;
return false;
}
else {
$scope.email_invalid = false;
return true;
}
};
})
});
My test file:
define(['app', 'jquery', 'angular-mock', 'coreService', 'setterService', 'loginService','logincontroller'], function (App, $) {
describe('app', function () {
beforeEach(module('app'));
describe('logincontroller Email Vaidate', function () {
var scope;
beforeEach(inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
$controller("loginController", {
$scope: scope
});
}));
it('sets email false', function () {
scope.email_invalid = false;
scope.Email = 'true';
scope.emailValidate();
expect(scope.email_invalid).toEqual(false);
});
});
});
});
In my browser 'Sources' tab loginCtrl file is loaded which contains logincontroller function
Still getting error
Error: [ng:areq] Argument 'loginController' is not a function, got undefined
Please suggest
Since I have used angularAMD, I updated the code as folows :
angularAMD.inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
$controller("loginController", {
$scope: scope
});
});
Also, I included angularAMD as dependency in define module:
define(['app', 'jquery', 'angularAMD', 'angular-mock', 'coreService', 'setterService', 'loginService', 'loginController'], function (App, $, angularAMD) {
I'm having difficulty testing that Reflux actions are triggering correctly in my application, and in fact they do not seem to be working at all with Jest. I have this example test:
jest.autoMockOff();
describe('Test', function () {
it('Tests actions', function () {
var Reflux = require('../node_modules/reflux/index');
var action = Reflux.createAction('action');
var mockFn = jest.genMockFn();
var store = Reflux.createStore({
init: function () {
this.listenTo(action, this.onAction);
},
onAction: function () {
mockFn();
}
});
action('Hello World');
expect(mockFn).toBeCalled();
});
});
Which outputs:
● Test › it Tests actions
- Expected Function to be called.
at Spec.<anonymous> (__tests__/Test.js:20:20)
at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)
Even with Jasmine async functions it doesn't seem to be working
jest.autoMockOff();
describe('Test', function () {
it('Tests actions', function () {
var Reflux = require('../node_modules/reflux/index');
var action = Reflux.createAction('action');
var mockFn = jest.genMockFn();
var flag = false;
var store = Reflux.createStore({
init: function () {
this.listenTo(action, this.onAction);
},
onAction: function () {
mockFn();
flag = true;
}
});
runs(function () {
action();
});
waitsFor(function () {
return flag;
}, 'The action should be triggered.', 5000);
runs(function () {
expect(mockFn).toBeCalled();
});
});
});
gives me...
FAIL __tests__/Test.js (6.08s)
● Test › it Tests actions
- Throws: [object Object]
Has anybody made this work?
I figured it out! I just needed to use Jest's own methods for fast-forwarding any timers. i.e. just add the line
jest.runAllTimers();
So the working version of my first example would be
jest.autoMockOff();
describe('Test', function () {
it('Tests actions', function () {
var Reflux = require('../node_modules/reflux/index');
var action = Reflux.createAction('action');
var mockFn = jest.genMockFn();
var store = Reflux.createStore({
init: function () {
this.listenTo(action, this.onAction);
},
onAction: function () {
mockFn();
}
});
action('Hello World');
jest.runAllTimers();
expect(mockFn).toBeCalled();
});
});
I want to test the "addGroup" function using Jasmine. I get the following error:
Error: Expected spy modifyMyHtml to have been called.at null.
I don't know what is the best way to test the addGroup function. Please HELP.....
var myRecord = {
addGroup: function(groupNumber) {
$.when(myRecord.getHtml())
.done(function(returnedHtml){
myRecord.modifyMyHtml(returnedHtml);
});
},
getHtml: function() {
return $.ajax({url: "myHtmlFile.html", dataType: "html" });
},
// adds options and events to my returned HTML
modifyMyHtml: function(returnedHtml) {
$('#outerDiv').html(returnedHtml);
var myOptions = myRecord.getOptions();
$('#optionsField').append(myOptions);
myRecord.bindEventsToDiv();
},
}
====JASMINE TEST
describe("Configure Record page", function() {
var fixture;
jasmine.getFixtures().fixturesPath = "/test/" ;
jasmine.getFixtures().load("myHtmlFile.html");
fixture = $("#jasmine-fixtures").html();
describe("addGroup", function(){
beforeEach(function() {
var groupNumber = 0;
spyOn(myRecord, "getHtml").andCallFake(function(){
return $.Deferred().promise();
});
spyOn(myRecord, "modifyMyHtml");
myRecord.addGroup(groupNumber);
});
it("Should call getHtml", function() {
expect(myRecord.getHtml).toHaveBeenCalled();
});
it("Should call modifyMyHtml", function() {
expect(myRecord.modifyMyHtml).toHaveBeenCalled(); ==>FAILS
});
});
});
You have to resolve the promise before you return em in your andCallFake.
spyOn(myRecord, "getHtml").andCallFake(function(){
return $.Deferred().resolve ().promise();
});
Btw. you should not test that the function on the object you wanna test are called, but that the html in the DOM are set with the right html
it("Should call modifyMyHtml", function() {
spyOn(myRecord, "getHtml").andCallFake(function(){
return $.Deferred().resolveWith(null, 'returnedHtml').promise();
});
expect($('#outerDiv').html).toEqual('returnedHtml')
});