This seems so, so easy, but I can't figure out why this simple code doesn't work.
I am adding a mock module to mock my API backend in my Angular E2E tests. I'm using Protractor 1.6.0. I need to pass additional arguments to the mocked module, which, according to the Protractor docs, is possible by just sending them as additional arguments. However, my function claims it has no arguments...
var mock = function() {
// This is undefined and arguments.length is 0....why???
var env = arguments[0];
var mocks = angular.module('mocks.login', ['MyApp', 'ngMockE2E']);
mocks.run(function($httpBackend) {
$httpBackend.whenGET(env.apiBase + '/companies').respond([]);
});
};
browser.addMockModule('mocks.login', mock, {apiBase: ""});
If it matters, I'm doing this in my Protractor config file in an onPrepare, as I'm trying to mock the API calls used during a user's login. Any help would be much appreciated.
Appearantely the args should be passed as array.
This is how it worked for me:
var test = {
val1: 'val1',
val2: 'val2'
};
browser.addMockModule('mockModule', function( args) {
angular.module('mockModule', [])
.value('TEST', args[0]);
}, [test]);
This works for me:
var mock = function(args) {
// args.apiBase should be available here
var env = args;
var mocks = angular.module('mocks.login', ['MyApp', 'ngMockE2E']);
mocks.run(function($httpBackend) {
$httpBackend.whenGET(env.apiBase + '/companies').respond([]);
});
};
browser.addMockModule('mocks.login', mock, {apiBase: ""});
Related
I have just jumped to another project and, basically, I have been asked to write Unit tests. Since I have already know Protractor for e2e testing, I now switched to Karma and Jasmine to carry out unit testing. I have already downloaded karma, jasmine, karma-jasmine, and karma-chrome-launcher. I installed angular-mocks as well so I should be ready to start. I have read many things on the internet but, now, what I really need is a concrete example of a real app to figure out how to start writing tests. I don't need easy examples but concrete examples and full explenations. Books and useful links are appreciated as well. Thanks in advance for your help/time.
describe('ServiceBeingTested Name', (): void => {
var mockFirstDependency;
var mockSecondDependency;
var TestedService;
//Mock all dependencies
beforeEach((): void => {
angular.mock.module('moduleServiceIsIn'); //Register the module which the service is in
mockFirstDependency = sinon.stub(new MockFirstDependency());//Sinon if useful for mocking
mockSecondDependency = sinon.stub(new MockSecondDependency());
angular.mock.module(($provide): void => {
$provide.value('FirstDependency', mockFirstDependency);
$provide.value('SecondDependency', mockSecondDependency);
});
});
beforeEach(inject(
['TestedService', (_TestedService_: TestedService): void => {
TestedService = _TestedService_;
}]));
//Describe each method in the service
describe('method to test', (): void => {
it("should...", () => {
//testing goes in here
expect(TestedService.someMethod()).toBe("some value");
});
});
This is a simple example of how to test an angular service. In this case the service is called TestedService.
The first thing you'll see is that three variable declarations. The first two are declared to mock out the two dependencies of this service.(Assume this service has two dependencies). The last variable declaration is going to be assigned the actual service being tested.
Now in the beforeEach:
angular.mock.module
This line registers the module in which the service you are testing is in. This line is very important.
The next two line use Sinon.js to mock the dependencies of the service being tested. I recommend looking into Sinon.js
The way it works is we have a dependency called "FirstDependency" which I created a stub of and called "MockedFirstDependency" and here I created an instance of it.
Now for the next part which (the part that includes $provide)
$provide.value('FirstDependency', mockFirstDependency);
What the above line does is it tells Angular that every time the FirstDependency service is used, instead use mockFirstDependency.
Now in the next beforeEach all I do is inject the actual service which I am testing and assign it to my global variable.
Then let the testing begin
EDIT: Testing Controllers
describe('mainCtrl', (): void => {
var $controllerConstructor;
var MainCtrlInstance;
var mockScope;
var mockState;
var mockStates;
var mockGlobalData;
beforeEach(() => {
angular.mock.module('mainCtrlModule');
mockScope = sinon.stub(new MockScope());
mockState = sinon.stub(new MockState());
mockStates = sinon.stub(new MockState());
mockGlobalData = sinon.stub(new MockGlobalData());
inject(($controller: ng.IControllerService): void => {
$controllerConstructor = $controller;
});
//Constructs the controller, all dependencies must be injected here
MainCtrlInstance = $controllerConstructor('mainCtrl',
{
'$Scope': mockScope,
'$State': mockState,
'States': mockStates,
'srvGlobalData': mockGlobalData
}
);
});
describe('Method to Tests', (): void => {
it("should...", (): void => {
//Testing Begins
expect(MainCtrlInstance.method()).toBe("some value");
});
});
});
EDIT: Testing Directives
First off you will need to install Html2JsPreprocessor with this command: npm install karma-ng-html2js-preprocessor --save-dev as stated here.
karma.conf.js
files: [
//Obviously include all of your Angular files
//but make sure to include your jQuery before angular.js
"directory/to/html/directive.html", // include html for directive
"directive.js" // file directive is contained in
"directive.spec.js"" // spec file
]
// include the directive html file to be preprocessed
preprocessors: {
'directory/to/html/directive.html': 'ng-html2js'
},
plugins : [
'karma-chrome-launcher',
'karma-jasmine',
'karma-ng-html2js-preprocessor' //include as a plugin too
],
ngHtml2JsPreprocessor: {
//this part has a lot of useful features but unfortunately I
//never got them to work, Google if you need help
},
directive.js
export class myDirectiveController {
constructor(/*dependencies for controller*/) {
//initializations
}
//other methods for directive class
}
export class myDirective implements ng.IDirective {
constructor(/*dependencies for directive*/) { }
static instance(/*dependencies*/): ng.IDirective {
return new myDirective(/*dependencies for directive*/);
}
restrict = 'E';
templateUrl = 'myDirective.html';
controller = myDirectiveController;
controllerAs = 'myDirectiveController';
scope: {};
}
angular
.module('myDirectiveModule')
.directive('myDirective', myDirective.instance);
myDirective.spec.js
describe("myDirective", () => {
//do you variable declarations but I'm leaving them out for simplicity
beforeEach(() => {
angular.mock.module(
'myDirectiveModule', //and other modules in use
'directory/to/html/directive.html'
//include directive html as a module
)
// now do your mock dependencies as you did with services
mockDependency = sinon.stub(new MockDependency());
angular.mock.module(($provide): void => {
$provide.value('dependency', mockDependency);
}
//inject $compile and $rootScope
inject(($compile, $rootScope) => {
scope = $rootScope.$new();
// your directive gets compiled here
element = angular.element("<my-directive></my-directive>");
$compile(element)(scope);
$rootScope.$digest();
directiveController = element.controller('myDirective'); //this is your directive's name defined in .directive("myDirective", ...)
});
}
describe("simple test", () => {
it("should click a link", () => {
var a = element.find("a");
a.triggerHandler('click');
//very important to call scope.$digest every you change anything in the view or the model
scope.$digest();
expect('whatever').toBe('whatever');
});
});
}
Earlier when I stated to included your jQuery file before you Angular, do this because angular.element() will produce a jQuery object on which you can use the jQuery API, but if you do not include jQuery first then you angular.element() returns a jQLite object which contains less methods.
It is also important to call scope.$digest() because that updates the bindings for your directive.
We are using angular 1.2.x (we have to due to IE8). We are testing with Karma and Jasmine. I want to test the behavior of my modules, in case the server responds with an error. According to the angular documentation, I should just simply prepare the $httpBackend mock like this (exactly as I'd expect):
authRequestHandler = $httpBackend.when('GET', '/auth.py');
// Notice how you can change the response even after it was set
authRequestHandler.respond(401, '');
This is what I am doing in my test:
beforeEach(inject(function($injector) {
keepSessionAliveService = $injector.get('keepSessionAliveService');
$httpBackend = $injector.get('$httpBackend');
$interval = $injector.get('$interval');
}));
(...)
describe('rejected keep alive request', function() {
beforeEach(function() {
spyOn(authStorageMock, 'get');
spyOn(authStorageMock, 'set');
$httpBackend.when('POST', keepAliveUrl).respond(500, '');
keepSessionAliveService.start('sessionId');
$interval.flush(90*60*1001);
$httpBackend.flush();
});
it('should not add the session id to the storage', function() {
expect(authStorageMock.set).not.toHaveBeenCalled();
});
});
But the test fails, because the mock function is being called and I can see in the code coverage that it never runs into the error function I pass to the §promise.then as second argument.
Apparently I am doing something wrong here. Could it have to with the older angular version we're using?
Any help would be appreciated!
Something like this:
it("should receive an Ajax error", function() {
spyOn($, "ajax").andCallFake(function(e) {
e.error({});
});
var callbacks = {
displayErrorMessage : jasmine.createSpy()
};
sendRequest(callbacks, configuration);
expect(callbacks.displayErrorMessage).toHaveBeenCalled();
I'm currently getting started with angular unit testing. As the first controller I wanted to tes looked like this, I got confused.
angular.module('sgmPaperApp')
.controller('AccountCtrl', function ($mdToast, user, $firebaseArray, Ref) {
var vm = this;
vm.data = user;
vm.save = saveUser;
vm.comments = $firebaseArray(Ref.child('comments').orderByChild('person').equalTo(user.$id));
function saveUser() {
vm.data.$save().then(function () {
$mdToast.showSimple('Data saved');
});
}
});
Should I really mock all external services I use? After all that controller isn't very much more then external services and mocking the firebaseArray could be difficult.
Thanks for your advice and helping me get started with testing
You don't need to worry about what the external dependencies do, just mock their APIs.
These are the only mocks I can see. I'm going to assume you're using Jasmine
var Ref, $firebaseArray, $mdToast, user, vm;
beforeEach(function() {
Ref = jasmine.createSpyObj('Ref', ['child', 'orderByChild', 'equalTo']);
Ref.child.and.returnValue(Ref);
Ref.orderByChild.and.returnValue(Ref);
Ref.equalTo.and.returnValue(Ref);
$firebaseArray = jasmine.createSpy('$firebaseArray').and.returnValue('comments');
$mdToast = jasmine.createSpyObj('$mdToast', ['showSimple']);
user = jasmine.createSpyObj('user', ['$save']);
user.$id = 'id';
module('sgmPaperApp'); // you should consider separate modules per "thing"
inject(function($controller) {
vm = $controller('AccountCtrl', {
$mdToast: $mdToast,
user: user,
$firebaseArray: $firebaseArray,
Ref: Ref
});
});
});
Then you can easily create your tests
it('assigns a bunch of stuff on creation', function() {
expect(vm.data).toBe(user);
expect(vm.comments).toEqual('comments'); // that's what the mock returns
expect(Ref.child).toHaveBeenCalledWith('comments');
expect(Ref.orderByChild).toHaveBeenCalledWith('person');
expect(Ref.equalTo).toHaveBeenCalledWith(user.$id);
expect($firebaseArray).toHaveBeenCalledWith(Ref);
});
You can even test promise based methods like saveUser
it('saves the user and makes some toast', inject(function($q, $rootScope) {
user.$save.and.returnValue($q.when()); // an empty, resolved promise
vm.saveUser();
expect(user.$save).toHaveBeenCalled();
expect($mdToast.showSimple).not.toHaveBeenCalled(); // because the promise hasn't resolved yet
$rootScope.$apply(); // resolves promises
expect($mdToast.showSimple).toHaveBeenCalledWith('Data saved');
}));
So to answer the question we need to consider what we're actually trying to do. If we are trying to unit test, then yes, we need to mock all dependencies.
Mocking your dependencies won't be hard though. You only need to mock what you're using.
For example, $firebaseArray starts off as a function that receives a paramter, we know that much:
var mockFirebaseArray = function(ref) {
};
Next, before we can finish it, we need to mock the Ref:
var mockRef = {
child: function(path) {
this.orderByChild = function(path) {
this.equalTo = function(val) {
};
return this;
};
return this;
}
};
With these things in place we can decide how the test will "pass". We could just use spies. Or, we could set local variables that we can assert later on our way through.
Spies are my preferred method because you can even verify they were called with specific values:
expect(mockFirebaseArray).toHaveBeenCalled();
expect(mockRef.child).toHaveBeenCalledWith('comments');
Now, if you're wanting to write an integration test that's different. In that case I'd still use spies, but you'd actually be executing those dependencies. Generally speaking there is no need to test your dependencies because they should be tested in isolation as well. Furthermore, there is less need to test other people's API's if they are from trustworthy sources.
I am totally new to testing in AngularJS. I have setup karma, and am now attempting to test a certain function in a factory I have written.
Here is a snippet of my factory:
app.factory('helpersFactory', ['constants', function (constants) {
return {
someFunction: function() {
},
is24x24Icon: function (iconNum) {
return ((iconNum >= 10090 && iconNum <= 10125) ;
}
};
}]);
I then have this test:
describe('Factory: helpersFactory', function () {
beforeEach(module('ppMobi'));
var fct;
beforeEach(inject(function ($factory) {
fct = $factory('helpersFactory');
}));
it('should detect iconNum 10090 is a 24 x 24 icon', function () {
var iconNum = 10090;
var is24x24Icon = fct.is24x24Icon(iconNum);
expect(is24x24Icon).toBeTruthy();
});
});
I get an error from Karma telling me it cannot read 'is24x24icon' of undefined. Therefore I can only assume my factory has not been created properly during the test. I do have a dependency on constants in the factory used by other functions. This is just an angular.constant() I have setup on my main application module.
I have found some other posts, but am unsure how to proceed, do I need to inject my constants dependency into my test?
Kind of new myself but I think you need to use the underscore name underscore trick to inject your factory:
var fct;
beforeEach(inject(function (_helpersFactory_) {
fct = _helpersFactory_;
}));
This blog uses mocha but I found it useful and the Karma stuff should be the same: https://www.airpair.com/angularjs/posts/testing-angular-with-karma
And yes you will need to inject the constants as well (the link shows how) but your posted code does not seem to use constants so you won't need it for this particular test.
I have a project using AngularAMD/RequireJS/Karma/Jasmine, that I have the basic configuration all working, most unit tests run and pass successfully.
I cannot get a mocked service injected correctly using either angular.mock.module or angularAMD.value().
I have:
// service definition in services/MyService.js
define(['app'],
function(app) {
app.factory('myService', [ '$document', function($document) {
function add(html) {
$document.find('body').append(html);
}
return { add: add };
}]);
}
);
// test
define(['angularAMD', 'angular-mocks', 'app', 'services/MyService'],
function(aamd, mocks, app) {
describe('MyService', function() {
var myBodyMock = {
append: function() {}
};
var myDocumentMock = {
find: function(sel) {
// this never gets called
console.log('selector: ' + sel);
return myBodyMock;
}
};
var svc;
beforeEach(function() {
// try standard way to mock a service through ng-mock
mocks.module(function($provide) {
$provide.value('$document', myDocumentMock);
});
// hedge my bets - try overriding in aamd as well as ng-mock
aamd.value('$document', myDocumentMock);
});
beforeEach(function() {
aamd.inject(['myService',
function(myService) {
svc = myService;
}]);
});
it('should work', function() {
// use svc expecting it to have injected mock of $document.
spyOn(myDocumentMock, 'find').andCallThrough();
spyOn(myBodyMock, 'append');
svc.add('<p></p>');
expect(myDocumentMock.find).toHaveBeenCalledWith('body');
expect(myBockMock.append).toHaveBeenCalledWith('<p></p>');
});
});
}
);
Does anyone know where I'm going wrong ? Any help would be much appreciated.
Angular isn't asynchronous, I think is not a good ideia use both. If you're trying to reach to a good modularization method, okay, but use the RequireJS optimizer to build everything before you put this on your browser, and about the tests, I think you can just use RequireJS optimizer to build your modules before, it will let you free from "CommonJS environment even in tests".
Looks like it'll be an issue with variable scopes, karma is very finicky about that. I think you should initialize your mock objects globally, then set them in the beforeEach.
The top line of my test files always looks something like:
var bodyMock, svcMock, foo, bar
Then in the beforeEach'es I set the values
Edit: Since bodyMock is only a scope variable, at the point where the tests are actually running and the browser is looking for an object 'bodyMock', it can't find anything.