http://blog.artlogic.com/2013/05/06/angularjs-best-practices-ive-been-doing-it-wrong-part-2-of-3/
I am testing a routing directive with location.path refs to templates that cannot be found. So....
I want to mock a routing test with a mock configured $routeProvider, how to get the $routeProvider in karma/jasmine?
then I tried the spyOn mock approach described in best-practice, is there a syntax for which I can expect the $location.path().toBe('/path')?
spyOn($location, 'path').andCallFake(new LocationMock().path);
and I was wondering if I could
I created a fiddle which demonstrates mocking $location.
app.controller('testcont', function($scope, $location) {
$scope.path = $location.path();
});
...
beforeEach(inject(function($controller, $rootScope, $location){
scope = $rootScope.$new();
spyOn($location, 'path').andReturn('Fake location');
$controller('testcont', {$scope:scope});
}));
...
it('should spy on $location', function($location){
expect(scope.path).toBe('Fake location');
});
However templates can be loaded by prepopulating Angular's $templateCache with the directive.
Karma uses the ng-html2js-preprocessor. Could that help your problem?
Related
In unit tests for a service, I have been putting asserts inside of service stubs, which has come in rather handy.
unit-test.js
let fooServiceStub = Ember.Object.extend({
fooMethod(bar) {
this.assert.ok(bar, 'fooMethod called with bar');
}
});
...
test('blah', function(assert) {
assert.expect(1);
let stubFooService = fooServiceStub.create({ assert });
let fooService = this.subject({
fooService: stubFooService
});
fooService.fooMethod('data');
});
Is an assert inside of a stub service possible for an acceptance/integration test?
The issue that I am running into is that for acceptance/integration tests, the way the service is injected is different from unit tests.
acceptance-test.js
let fooServiceStub = Ember.Service.extend({
fooMethod(bar) {
return 'baz';
}
});
....
beforeEach: function () {
this.application.register('service:mockFooService', fooServiceStub);
this.application.inject('controller', 'fooService', 'service:mockFooService');
}
I have not found a way to pass in the 'assert' object into such a stub.
To me, this is desirable to do during an acceptance test. The service goes off and does stuff that would be rather complicated to mock in the acceptance test, and I don't want to re-test my service. I just want to confirm the expected service calls were triggered.
You can just do something like this in your test:
this.set('fooService.FooMethod', bar => assert.ok(bar, 'bla'));
This is example of my code:
describe('myCtrl functionality', function() {
var driver;
var ptor;
beforeEach(function() {
ptor = protractor.getInstance();
ptor.ignoreSynchronization = true;
browser.ignoreSynchronization = false;
driver = ptor.driver;
});
it('should login', function() {
driver.get('someurl');
driver.findElement(protractor.By.name('username')).sendKeys('admin');
driver.findElement(protractor.By.name('password')).sendKeys('admin');
driver.findElement(protractor.By.css('button[type="submit"]')).click();
});
describe('myCtrl testing', function() {
var $scope;
beforeEach(module('myApp'));
beforeEach(inject(function($rootScope, $controller) {
$scope = $rootScope.$new();
$controller('dashStoresCtrl', {$scope: $scope});
}));
it('should create "stores" model', function() {
var containerStores = element(by.css('.dashboardStores'));
containerStores.findElements(by.css('.store-item-holder')).then(function(elems) {
expect(elems.length).toEqual($scope.stores.length);
});
});
});
});
And the problem is when i run tests i get TypeError: object is not a function.
That is for the line beforeEach(module('myApp'));
I made research and find out that i need to include angular-mocks.js file in my project and in index.html.
I did it but still get TypeError: object is not a function.
Anyone who can help with this?
Thanks!!!
Protractor tests are end-to-end tests, where NodeJS executes tests that connect to your browser and use it like a numan being would do.
You're trying, in such a protractor test, to use the angularJS API and modules to unit-test a controller. That doesn't make much sense.
Unit tests are typically executed by Karma, inside your browser, and end-to-end protractor tests are typically executed using protractor, inside NodeJS. You shouldn't have a unit test and a protractor test in the same file.
I am pretty new at unit testing and AngularJS and I have some issue that I can't fix. One of my test is not working. I am trying to initiate a location.path() in my test by affecting a value, but in my controller, location.path() still have a undefined value.
Here is my controler:
angular.module('...')
.controller('SignUpCtrl', ['$location', function ($location) {
// Retrieve type of user
var userType = $location.path().substr(9);
if(userType == 'member'){
userType = 'user';
}
console.log($location.path());
console.log(userType);
$scope.uType = userType; ]);
And here is my test module:
describe('Controller: SignUpCtrl', function () {
// load the controller's module
beforeEach(module('...'));
var SignUpCtrl,
scope,
mockBackend,
environments,
location,
store;
beforeEach(inject(function ($controller, $rootScope, $httpBackend,$location,_Environments_) {
environments = _Environments_;
mockBackend = $httpBackend;
location = $location;
scope = $rootScope.$new();
SignUpCtrl = $controller('SignUpCtrl', {
$scope: scope,
$location: location
});
}));
it('should come from the right location', function(){
location.path('/sign-up/member');
expect(location.path()).toBe('/sign-up/member');
expect(scope.uType).toBe('user'); //Do not work
});
});
You're trying to use unit testing to do something that can only really be achieved using End-to-End (or E2E) testing. Unit testing in AngularJS is designed to test the javascript within a given module or sub-module (such as a service, factory, directive, etc). However, things like page navigation or browser location really need to be tested in an end-to-end testing environment.
Because of that, your $location object won't have all the normal methods (like path, url, etc). The $location object ends up simply being a "mock" of the actual $location object that you'd get in your module. So, you just need to move your test case for it('should come from the right location', function(){ ... }) to an end-to-end test and then continue on with your other module-specific unit tests. After you do that, you can simplify the $controller by only grabbing the $scope variable, as in the following:
scope = $rootScope.new();
SignUpCtrl = $controller('SignUpCtrl', {$scope: scope});
The guide for E2E testing can be found at this link. It walks you through how to write good E2E tests. There is a really great framework available for doing angular E2E tests called Protractor. The info for that is at this link. Protractor will soon (in 1.2) replace Karma as a better way to handle E2E testing.
I'm attempting to unit test controller code inside a module that takes other modules as dependencies, but haven't been able to figure out how to mock them properly.
I'm using the Jasmine Framework and running my tests with Karma (Testacular).
Module Code
var app = angular.module('events', ['af.widgets', 'angular-table']);
app.controller('eventsCtrl', function([dependencies]){
$scope.events = [];
...
});
Spec Code
describe('events module', function(){
var $scope,
ctrl;
beforeEach(function(){
angular.mock.module('af.widgets', []);
angular.mock.module('angular-table', []);
module('events', ['af.widgets', 'angular-table']);
});
beforeEach(inject(function($rootScope, $controller){
$scope = $rootScope.new();
ctrl = $controller('NameCtrl', {
$scope: $scope,
});
}));
it('should have an empty events array', function(){
expect($scope.events).toBe([]);
})
});
The error I'm getting is Karma is "no module af.widgets", so obviously I'm not mocking the module dependencies right. Any hints?
If you want to mock a module that declare one or more services I have used this code:
beforeEach(function(){
module('moduleToMock');
module(function ($provide) {
$provide.value('yourService', serviceMock);
});
});
This is useful if the service you want to mock is also a service that you want to unit test (in another jasmine describe).
The solution proposed by fscof is fine but you cannot create a unit test for the angular-table module.
Here's what I figured out:
I wasn't loading any 'angular-table' modules in my karma.conf.js file, hence the error. This was intentional at first as I wanted to test the 'events' module without the actual table module.
I was able to easily mock the 'angular-table' module by creating a new file in my test folder called 'mocks/angular-table.js' and added the following code:
/mocks/angular-table.js
'use-strict';
angular.module('angular-table', []);
I added this file to my karma.conf.js file, along with the real 'events' module I wanted to test:
karma.conf.js
...
files = [
JASMINE,
JASMINE_ADAPTER,
'scripts/libs/angular.js',
'scripts/libs/angular-mocks.js',
'scripts/events.js', // this is the real module.
'scripts/mocks/*.js', //loads all custom mocks.
'scripts/specs/*.spec.js' // loads my spec file.
]
...
Finally in my spec file, I was able to add both modules by calling them separately in a beforeEach block:
specs/events.spec.js
beforeEach(function(){
module('angular-table');
module('events');
});
I got the idea to structure my files in this way from this post
I recently released ngImprovedTesting that should make mock testing in AngularJS way easier.
In your case just use the following in your Jasmine test:
beforeEach(ModuleBuilder.forModule('events').serviceWithMocks('eventsCtrl').build());
For more information about ngImprovedTesting check out its introductory blog post: http://blog.jdriven.com/2014/07/ng-improved-testing-mock-testing-for-angularjs-made-easy/
I have a controller with an event listener in my Angular app, defined as follows.
angular.module('test').controller('TestCtrl', function($rootScope, $scope, testService) {
[...]
$scope.$on("myEvent", function(args, value) {
testService.doStuff(value);
});
});
This works perfectly in the app itself. However, when I try to unit test the functionality of the controller (using Jasmine and Karma), each test method throws the following error:
TypeError: $scope.$on is not a function in [...]/testController.js
I create the controller in my test methods as follows.
it('does stuff', inject(function($rootScope, $controller, testService) {
var scope = $rootScope.$new;
$controller('TestCtrl', {
$scope : scope
});
[...]
}));
I can get around the problem by changing my controller to use rootScope instead:
$rootScope.$on(...)
but then of course the app doesn't work anymore as expected. I can also get rid of the error by introducing the $on method in my test code:
var scope = $rootScope.$new;
scope.$on = function() {};
but mocking the listener like this kind of defeats the purpose of testing my real code.
Why doesn't the test code find the $on method of the scope? (But finds it on rootScope, still...)
There must be something fundamental that I'm missing here but I haven't been able to figure it out even after lots of googling and reading the Angular source code.
$rootScope.$new is a function. You need to invoke it ($rootScope.$new()):
it('does stuff', inject(function($rootScope, $controller, testService) {
var scope = $rootScope.$new();
$controller('TestCtrl', {
$scope : scope
});
[...]
}));
Example plunk: http://plnkr.co/edit/t1x62msmOQDkNItGzcp9?p=preview