Jasmine + AngularJS: Shared examples not loading - angularjs
Jasmine keeps complaining that I have no tests in one of my shared specs, even though there are specs:
Spec 'mysite ProductsIndexCtrl behaves like an index controller' has no expectations.
my spec file looks like this:
//= require helpers/load-angular-ilook-module
//= require products/services/services
//= require products/controllers/products_index_controller
//= require helpers/shared_examples_for_products_index_controller
describe('mysite', function() {
var scope, ProductsIndexCtrl;
beforeEach(function() {
module('mysite');
});
describe('ProductsIndexCtrl', function() {
beforeEach(inject(function($controller, $rootScope, $injector) {
scope = $rootScope.$new();
$httpBackend = $injector.get('$httpBackend');
$httpBackend.when('/api/color_groups').respond([{"id":1,"name":"Browns","created_at":"2014-08-06T21:38:41.000Z","updated_at":"2014-08-06T21:38:41.000Z"},{"id":2,"name":"Blues","created_at":"2014-08-06T21:38:53.000Z","updated_at":"2014-08-06T21:38:53.000Z"},{"id":3,"name":"Greens","created_at":"2014-08-06T21:39:03.000Z","updated_at":"2014-08-06T21:39:03.000Z"}]);
$httpBackend.when('/api/shapes').respond([{"id":1,"name":"Round","created_at":"2014-05-23T17:10:32.000Z","updated_at":"2014-05-23T17:10:32.000Z"},{"id":2,"name":"Cat Eye","created_at":"2014-05-27T18:53:36.000Z","updated_at":"2014-05-27T18:53:36.000Z"},{"id":3,"name":"sharps","created_at":"2014-05-28T21:41:44.000Z","updated_at":"2014-07-02T14:13:59.000Z"},{"id":4,"name":"square","created_at":"2014-06-02T15:29:58.000Z","updated_at":"2014-06-02T15:29:58.000Z"},{"id":5,"name":"Round","created_at":"2014-06-02T15:35:06.000Z","updated_at":"2014-06-02T15:35:06.000Z"},{"id":6,"name":"fffff","created_at":"2014-07-02T14:14:23.000Z","updated_at":"2014-07-02T14:14:23.000Z"},{"id":7,"name":"Rectangular","created_at":"2014-07-29T15:17:01.000Z","updated_at":"2014-07-29T15:17:01.000Z"},{"id":8,"name":"Diamond","created_at":"2014-07-29T15:17:08.000Z","updated_at":"2014-07-29T15:17:08.000Z"}]);
$httpBackend.when('/api/materials').respond([{"id":1,"name":"Steel","created_at":"2014-05-23T17:04:42.000Z","updated_at":"2014-05-23T17:04:42.000Z"},{"id":2,"name":"Cotton","created_at":"2014-05-23T17:04:47.000Z","updated_at":"2014-05-23T17:04:47.000Z"},{"id":3,"name":"woods","created_at":"2014-05-28T20:26:16.000Z","updated_at":"2014-07-02T14:35:09.000Z"},{"id":4,"name":"plastic","created_at":"2014-06-02T15:30:05.000Z","updated_at":"2014-06-02T15:30:05.000Z"},{"id":5,"name":"glass","created_at":"2014-06-02T15:34:58.000Z","updated_at":"2014-06-02T15:34:58.000Z"},{"id":7,"name":"wood","created_at":"2014-06-02T16:51:47.000Z","updated_at":"2014-06-02T16:51:47.000Z"},{"id":8,"name":"rubber","created_at":"2014-07-02T14:35:51.000Z","updated_at":"2014-07-02T14:35:51.000Z"},{"id":9,"name":"carbon","created_at":"2014-07-29T14:52:44.000Z","updated_at":"2014-07-29T14:52:44.000Z"},{"id":10,"name":"paper","created_at":"2014-07-29T14:53:31.000Z","updated_at":"2014-07-29T14:53:31.000Z"},{"id":11,"name":"sandpaper","created_at":"2014-07-29T14:56:39.000Z","updated_at":"2014-07-29T14:56:39.000Z"},{"id":12,"name":"xfsdfsf","created_at":"2014-07-29T14:56:44.000Z","updated_at":"2014-07-29T14:56:44.000Z"}]);
ProductsIndexCtrl = $controller('ProductsIndexCtrl', {
'$scope': scope
});
$httpBackend.expectGET('/api/color_groups').respond([{"id":1,"name":"Browns","created_at":"2014-08-06T21:38:41.000Z","updated_at":"2014-08-06T21:38:41.000Z"},{"id":2,"name":"Blues","created_at":"2014-08-06T21:38:53.000Z","updated_at":"2014-08-06T21:38:53.000Z"},{"id":3,"name":"Greens","created_at":"2014-08-06T21:39:03.000Z","updated_at":"2014-08-06T21:39:03.000Z"}]);
$httpBackend.expectGET('/api/shapes').respond([{"id":1,"name":"Round","created_at":"2014-05-23T17:10:32.000Z","updated_at":"2014-05-23T17:10:32.000Z"},{"id":2,"name":"Cat Eye","created_at":"2014-05-27T18:53:36.000Z","updated_at":"2014-05-27T18:53:36.000Z"},{"id":3,"name":"sharps","created_at":"2014-05-28T21:41:44.000Z","updated_at":"2014-07-02T14:13:59.000Z"},{"id":4,"name":"square","created_at":"2014-06-02T15:29:58.000Z","updated_at":"2014-06-02T15:29:58.000Z"},{"id":5,"name":"Round","created_at":"2014-06-02T15:35:06.000Z","updated_at":"2014-06-02T15:35:06.000Z"},{"id":6,"name":"fffff","created_at":"2014-07-02T14:14:23.000Z","updated_at":"2014-07-02T14:14:23.000Z"},{"id":7,"name":"Rectangular","created_at":"2014-07-29T15:17:01.000Z","updated_at":"2014-07-29T15:17:01.000Z"},{"id":8,"name":"Diamond","created_at":"2014-07-29T15:17:08.000Z","updated_at":"2014-07-29T15:17:08.000Z"}]);
$httpBackend.expectGET('/api/materials').respond([{"id":1,"name":"Steel","created_at":"2014-05-23T17:04:42.000Z","updated_at":"2014-05-23T17:04:42.000Z"},{"id":2,"name":"Cotton","created_at":"2014-05-23T17:04:47.000Z","updated_at":"2014-05-23T17:04:47.000Z"},{"id":3,"name":"woods","created_at":"2014-05-28T20:26:16.000Z","updated_at":"2014-07-02T14:35:09.000Z"},{"id":4,"name":"plastic","created_at":"2014-06-02T15:30:05.000Z","updated_at":"2014-06-02T15:30:05.000Z"},{"id":5,"name":"glass","created_at":"2014-06-02T15:34:58.000Z","updated_at":"2014-06-02T15:34:58.000Z"},{"id":7,"name":"wood","created_at":"2014-06-02T16:51:47.000Z","updated_at":"2014-06-02T16:51:47.000Z"},{"id":8,"name":"rubber","created_at":"2014-07-02T14:35:51.000Z","updated_at":"2014-07-02T14:35:51.000Z"},{"id":9,"name":"carbon","created_at":"2014-07-29T14:52:44.000Z","updated_at":"2014-07-29T14:52:44.000Z"},{"id":10,"name":"paper","created_at":"2014-07-29T14:53:31.000Z","updated_at":"2014-07-29T14:53:31.000Z"},{"id":11,"name":"sandpaper","created_at":"2014-07-29T14:56:39.000Z","updated_at":"2014-07-29T14:56:39.000Z"},{"id":12,"name":"xfsdfsf","created_at":"2014-07-29T14:56:44.000Z","updated_at":"2014-07-29T14:56:44.000Z"}]);
$httpBackend.flush();
}));
//HERE!
it('behaves like an index controller', function() {
sharedExamplesForIndexControllers(scope);
});
});
});
That's weird because my shared_examples_for_products_index_controller.js file looks like this:
function sharedExamplesForIndexControllers(scope) {
it('sets color_groups', function() {
expect(JSON.stringify(scope.color_groups)).toEqual(JSON.stringify([{"id":1,"name":"Browns","created_at":"2014-08-06T21:38:41.000Z","updated_at":"2014-08-06T21:38:41.000Z"},{"id":2,"name":"Blues","created_at":"2014-08-06T21:38:53.000Z","updated_at":"2014-08-06T21:38:53.000Z"},{"id":3,"name":"Greens","created_at":"2014-08-06T21:39:03.000Z","updated_at":"2014-08-06T21:39:03.000Z"}]));
});
it('sets shapes', function() {
expect(JSON.stringify(scope.shapes)).toEqual(JSON.stringify([{"id":1,"name":"Round","created_at":"2014-05-23T17:10:32.000Z","updated_at":"2014-05-23T17:10:32.000Z"},{"id":2,"name":"Cat Eye","created_at":"2014-05-27T18:53:36.000Z","updated_at":"2014-05-27T18:53:36.000Z"},{"id":3,"name":"sharps","created_at":"2014-05-28T21:41:44.000Z","updated_at":"2014-07-02T14:13:59.000Z"},{"id":4,"name":"square","created_at":"2014-06-02T15:29:58.000Z","updated_at":"2014-06-02T15:29:58.000Z"},{"id":5,"name":"Round","created_at":"2014-06-02T15:35:06.000Z","updated_at":"2014-06-02T15:35:06.000Z"},{"id":6,"name":"fffff","created_at":"2014-07-02T14:14:23.000Z","updated_at":"2014-07-02T14:14:23.000Z"},{"id":7,"name":"Rectangular","created_at":"2014-07-29T15:17:01.000Z","updated_at":"2014-07-29T15:17:01.000Z"},{"id":8,"name":"Diamond","created_at":"2014-07-29T15:17:08.000Z","updated_at":"2014-07-29T15:17:08.000Z"}]));
});
it('sets materials', function() {
expect(JSON.stringify(scope.materials)).toEqual(JSON.stringify([{"id":1,"name":"Steel","created_at":"2014-05-23T17:04:42.000Z","updated_at":"2014-05-23T17:04:42.000Z"},{"id":2,"name":"Cotton","created_at":"2014-05-23T17:04:47.000Z","updated_at":"2014-05-23T17:04:47.000Z"},{"id":3,"name":"woods","created_at":"2014-05-28T20:26:16.000Z","updated_at":"2014-07-02T14:35:09.000Z"},{"id":4,"name":"plastic","created_at":"2014-06-02T15:30:05.000Z","updated_at":"2014-06-02T15:30:05.000Z"},{"id":5,"name":"glass","created_at":"2014-06-02T15:34:58.000Z","updated_at":"2014-06-02T15:34:58.000Z"},{"id":7,"name":"wood","created_at":"2014-06-02T16:51:47.000Z","updated_at":"2014-06-02T16:51:47.000Z"},{"id":8,"name":"rubber","created_at":"2014-07-02T14:35:51.000Z","updated_at":"2014-07-02T14:35:51.000Z"},{"id":9,"name":"carbon","created_at":"2014-07-29T14:52:44.000Z","updated_at":"2014-07-29T14:52:44.000Z"},{"id":10,"name":"paper","created_at":"2014-07-29T14:53:31.000Z","updated_at":"2014-07-29T14:53:31.000Z"},{"id":11,"name":"sandpaper","created_at":"2014-07-29T14:56:39.000Z","updated_at":"2014-07-29T14:56:39.000Z"},{"id":12,"name":"xfsdfsf","created_at":"2014-07-29T14:56:44.000Z","updated_at":"2014-07-29T14:56:44.000Z"}]));
});
it('sets color_group_ids', function() {
expect(scope.color_group_ids).toEqual([]);
});
it('sets shape_ids', function() {
expect(scope.shape_ids).toEqual([]);
});
it('sets material_ids', function() {
expect(scope.material_ids).toEqual([]);
});
it('fsdf', function() {
expect(scope.blah).toEqual("ffffff");
});
describe('changeSelectedColor', function() {
it('sets the selected_color attribute of the product', function() {
product = {name: "Product Name"};
color = {name: "Red"};
scope.changeSelectedColor(product, color);
expect(product.selected_color).toEqual(color);
});
});
describe('clearAll', function() {
it('empties the color_group_ids array', function() {
scope.color_group_ids = [1,2,3];
scope.clearAll();
expect(scope.color_group_ids).toEqual([]);
});
it('empties the shape_ids array', function() {
scope.shape_ids = [1,2,3];
scope.clearAll();
expect(scope.shape_ids).toEqual([]);
});
it('empties the material_ids array', function() {
scope.material_ids = [1,2,3];
scope.clearAll();
expect(scope.material_ids).toEqual([]);
});
it('sets selected to false for every object in color_groups', function() {
expect(scope.color_groups.length).toBeGreaterThan(0);
scope.clearAll();
selected_is_false_for_all_color_groups = true;
for (var i = 0; i < scope.color_groups.length; i++) {
var color_group = scope.color_groups[i];
if (color_group.selected) {
selected_is_false_for_all_color_groups = false;
break;
}
}
expect(selected_is_false_for_all_color_groups).toBeTruthy();
});
it('sets selected to false for every object in shapes', function() {
expect(scope.shapes.length).toBeGreaterThan(0);
scope.clearAll();
selected_is_false_for_all_shapes = true;
for (var i = 0; i < scope.shapes.length; i++) {
var shape = scope.shapes[i];
if (shape.selected) {
selected_is_false_for_all_shapes = false;
break;
}
}
expect(selected_is_false_for_all_shapes).toBeTruthy();
});
it('sets selected to false for every object in materials', function() {
expect(scope.materials.length).toBeGreaterThan(0);
scope.clearAll();
selected_is_false_for_all_materials = true;
for (var i = 0; i < scope.materials.length; i++) {
var material = scope.materials[i];
if (material.selected) {
selected_is_false_for_all_materials = false;
break;
}
}
expect(selected_is_false_for_all_materials).toBeTruthy();
});
});
describe("toggleMaterialFilter", function() {
it("when material_ids includes material_id: it removes material_id from material_ids", function() {
scope.material_ids = [1,2,3];
scope.toggleMaterialFilter(1);
expect(scope.material_ids).toEqual([2,3]);
});
it("when material_ids does not include material_id: it adds material_id to material_ids", function() {
scope.material_ids = [2,3];
scope.toggleMaterialFilter(1);
expect(scope.material_ids).toEqual([2,3,1]);
});
});
describe("toggleShapeFilter", function() {
it("when shape_ids includes shape_id: it removes shape_id from shape_ids", function() {
scope.shape_ids = [1,2,3];
scope.toggleShapeFilter(1);
expect(scope.shape_ids).toEqual([2,3]);
});
it("when shape_ids does not include shape_id: it adds shape_id to shape_ids", function() {
scope.shape_ids = [2,3];
scope.toggleShapeFilter(1);
expect(scope.shape_ids).toEqual([2,3,1]);
});
});
describe("toggleColorFilter", function() {
it("when color_group_ids includes color_group_id: it removes color_group_id from color_group_ids", function() {
scope.color_group_ids = [1,2,3];
scope.toggleColorFilter(1);
expect(scope.color_group_ids).toEqual([2,3]);
});
it("when color_group_ids does not include color_group_id: it adds color_group_id to color_group_ids", function() {
scope.color_group_ids = [2,3];
scope.toggleColorFilter(1);
expect(scope.color_group_ids).toEqual([2,3,1]);
});
});
}
What am I doing wrong??? How do I make shared examples for my controllers?
The problem is that you are wrapping an it inside of another it. As javaCity rightfully thought, you cannot do that & need to wrap your call to sharedExamplesForIndexControllers inside of a describe.
However, this causes the second problem you describe with scope being undefined. This is because when the call to sharedExamplesForIndexControllers is actually being called before the beforeEach, while the outer describe is being executed. A such, scope is undefined at that point. What you need to do is defer getting scope until after your beforeEach fires, ideally until you actually need it in your various its.
A way to do this, though perhaps not the cleanest, is to pass a closure that closes over scope into your shared example so that when you execute it inside of your it it has the value that has been assigned by your beforeEach. There might be a cleaner way, but here is a brief example:
describe('ProductsIndexCtrl', function() {
beforeEach(inject(function($controller, $rootScope, $injector) {
scope = $rootScope.$new();
…
ProductsIndexCtrl = $controller('ProductsIndexCtrl', {
'$scope': scope
});
…
}));
//HERE!
it('behaves like an index controller', function() {
sharedExamplesForIndexControllers(function () { return scope; });
});
});
})
shared example:
function sharedExamplesForIndexControllers(scopeGetter) {
it('sets color_groups', function() { expect(JSON.stringify(scopeGetter().color_groups)).toEqual(<expected_value>);
Related
How to test $scope.$watch properly with Jasmine in AngularJS
I'm new to AngularJS and unit testing,
I'm testing a list that gets changing by selected category.
The test is passing but only if I use the httpBackend.expectGET() that expects the XMLHttpRequest from the "getSomethingElse" method.
I also tried to use the scope.$digest() but I got the same results...
The Controller:
app.controller('mainCtrl', ['$scope', 'myService', function($scope,
myService) {
$scope.category = null;
myService.getSomethingElse().then(function(res) {
$scope.somethingElse = res.data;
});
$scope.$watch('category', function() {
if ($scope.category !== null) {
myService.getListByCat($scope.category.name).then(function(res) {
$scope.list = res.data;
});
}
else {
myService.getLongList().then(function(res) {
$scope.list = res.data;
});
}
});
}]);
The Service:
app.service('myService', ['$http', function($http) {
this.getListByCat = function(category) {
return $http.get('getting-list?cat=' + category);
};
this.getLongList = function() {
return $http.get('getting-long-list');
};
this.getSomethingElse = function() {
return $http.get('getting-something-else');
};
}]);
The Test
describe('Testing mainCtrl', function() {
var scope, ctrl;
var myServiceMock = {
getSomethingElse: jasmine.createSpy().and.returnValue(1),
getListByCat: jasmine.createSpy().and.returnValue(2)
};
beforeEach(function() {
module('app');
inject(function($rootScope, $controller) {
scope = $rootScope.$new();
ctrl = $controller('mainCtrl', {
$scope: scope,
myService: myServiceMock
});
});
});
it('should update the list by selected category', function() {
expect(scope.category).toBeNull();
expect(scope.list).toBeUndefined();
scope.category = {
id: 1,
name: 'Jobs'
};
scope.$apply();
expect(myServiceMock.getSomethingElse).toHaveBeenCalled();
expect(myServiceMock.getListByCat).toHaveBeenCalled();
});
});
The test is passing but only if I use the httpBackend.expectGET() that expects the XMLHttpRequest from the "getSomethingElse" method.
This is because your myServiceMock is not replacing the original myService. You have various ways to test this - one of them is given below. Here we are replacing myService with the service mock:-
beforeEach(function() {
module('app');
module(function($provide){
$provide.factory('myServiceMock',
function(){
return myServiceMock;
);
});
inject(function($rootScope, $controller) {
scope = $rootScope.$new();
ctrl = $controller('mainCtrl', {
$scope: scope,
myService: myServiceMock
});
});
});
You can add your watcher like this.
$scope.categoryWatcher = categoryWatcher;
$scope.$watch('category', categoryWatcher);
function categoryWatcher() {
if ($scope.category !== null) {
myService.getListByCat($scope.category.name).then(function(res) {
$scope.list = res.data;
});
}
else {
myService.getLongList().then(function(res) {
$scope.list = res.data;
});
}
}
and in Unit testing just create new it construct for that handler
it('should test categoryWatcher for null value', function(){
$scope.category = null;
$scope.categoryWatcher();
// your expectations
});
it('should test categoryWatcher for "desiredValue" value', function(){
$scope.category = "desiredValue";
$scope.categoryWatcher();
// your expectations
});
that way, if&else clauses will be taken in the test.
Unit testing controller with injected service
What is the best way to go about unit testing the following controller? I'm having trouble properly injecting AuthService into my controller. I've seen so many different ways to do it and I'm not really sure what the best practice is - i.e. mocks vs spies?
I have a simple service like this:
angular.module('users')
.factory('AuthService', ['$http', '$window',
function($http, $window) {
var authService = {};
authService.login = function(creds) {
return $http.post('/auth', creds)
.then(function(res) {
$window.localStorage.exampleToken = res.data.returned_token;
return res;
});
};
authService.isLoggedIn = function() {
if($window.localStorage.exampleToken) {
return true;
} else {
return false;
}
};
authService.clear = function() {
delete $window.localStorage.exampleToken;
};
return authService;
}]);
My controller:
angular.module('users')
.controller('ExampleCtrl', ['AuthService',
function(AuthService) {
var vm = this;
vm.isLoggedIn = AuthService.isLoggedIn();
}]);
My unfinished test:
describe('ExampleCtrl', function() {
beforeEach(module('users'));
var ctrl;
beforeEach(inject(function($controller) {
ctrl = $controller('ExampleCtrl', {});
}));
describe('when logged in', function() {
beforeEach(function() {
// how do i mock the isLoggedIn function to
// return true
});
it('should return true', function() {
expect(ctrl.isLoggedIn).toBe(true);
});
});
describe('when not logged in', function() {
beforeEach(function() {
// how do i mock the isLoggedIn function to
// return false
});
it('should return false', function() {
expect(ctrl.isLoggedIn).toBe(false);
});
});
});
You can merely use the callFake function of Jasmine:
By chaining the spy with and.callFake, all calls to the spy will delegate to the supplied function.
var AuthService; //so that you can have a reference within all your test file
beforeEach(function() {
inject(function(_AuthService_) {
AuthService = _AuthService_;
});
spyOn(AuthService, 'isLoggedIn').and.callFake(function() {
return true;
});
});
Angularjs unit test resolve promise inside custom directive with external template
I have a custom directive that uses an external template and is passed data from a service. I decided to ensure that the promise was resolved before modifying the data, which was fine in the actual code but broke my unit tests, which is annoying. I have tried a number of variations but am now stuck. I am using 'ng-html2js' preprocessor.
Here is the unit test
describe('ccAccordion', function () {
var elm, scope, deferred, promise, things;
beforeEach(module('ccAccordion'));
// load the templates
beforeEach(module('components/accordion/accordion.html'));
beforeEach(inject(function ($rootScope, $compile, $q) {
elm = angular.element(
'<cc-accordion items="genres"></cc-accordion>'
);
scope = $rootScope;
things = [{
title: 'Scifi',
description: 'Scifi description'
}, {
title: 'Comedy',
description: 'Comedy description'
}];
deferred = $q.defer();
promise = deferred.promise;
promise.then(function (things) {
scope.items = things;
});
// Simulate resolving of promise
deferred.resolve(things);
// Propagate promise resolution to 'then' functions using $apply().
scope.$apply();
// compile the template?
$compile(elm)(scope);
scope.$digest();
}));
it('should create clickable titles', function () {
var titles = elm.find('.cc-accord h2');
expect(titles.length).toBe(2);
expect(titles.eq(0).text().trim()).toBe('Scifi');
expect(titles.eq(1).text().trim()).toBe('Comedy');
});
I have left out the custom addMatchers and the rest of the tests. The error I get is
TypeError: 'undefined' is not an object (evaluating 'scope.items.$promise')
Here is the directive
var ccAccordion = angular.module("ccAccordion", []);
ccAccordion.directive("ccAccordion", function () {
return {
restrict: "AE",
templateUrl: "components/accordion/accordion.html",
scope: {
items: "="
},
link: function (scope) {
scope.items.$promise.then(function (items) {
angular.forEach(scope.items, function (item) {
item.selected = false;
});
items[0].selected = true;
});
scope.select = function (desiredItem) {
(desiredItem.selected === true) ? desiredItem.selected = false : desiredItem.selected = true;
angular.forEach(scope.items, function (item) {
if (item !== desiredItem) {
item.selected = false;
}
});
};
}
};
});
This is where the directive is used in main.html
<cc-accordion items="genres"></cc-accordion>
In the main controller the genres service is passed in ie
angular.module('magicApp')
.controller('GenresCtrl', ['$scope', 'BREAKPOINTS', 'Genre',
function ($scope, BREAKPOINTS, Genre) {
$scope.bp = BREAKPOINTS;
$scope.genres = Genre.query();
}]);
Okay, I would move that code you put in link into the controller. The data processing should probably happen in a service. I know you've been told big controllers are bad, but big linking functions are generally worse, and should never do that kind of data processing.
.controller('GenresCtrl', ['$scope', 'BREAKPOINTS', 'Genre',
function ($scope, BREAKPOINTS, Genre) {
$scope.bp = BREAKPOINTS;
$scope.genres = Genre.query().then(function (items) {
angular.forEach(scope.items, function (item) {
item.selected = false;
});
items[0].selected = true;
});
scope.select = function (desiredItem) {
(desiredItem.selected === true) ? desiredItem.selected = false : desiredItem.selected = true;
angular.forEach(scope.items, function (item) {
if (item !== desiredItem) {
item.selected = false;
}
});
};
});
Your link function is now empty. Define items on the rootScope instead, this ensures that the isolateScope and your directive interface are working correctly.
beforeEach(inject(function ($rootScope, $compile, $q) {
elm = angular.element(
'<cc-accordion items="genres"></cc-accordion>'
);
scope = $rootScope;
things = [{
title: 'Scifi',
description: 'Scifi description'
}, {
title: 'Comedy',
description: 'Comedy description'
}];
scope.items = things; // Tests your directive interface
// compile the template?
$compile(elm)(scope);
scope.$digest();
}));
The behavior of the promise should be tested in a controller test, by mocking the return value of the service. Your problem with the $promise test has been solved.
The actual issue was that you were assuming that $q.defer() gave you the same kind of promise as the angular $http, but that is solved by design instead.
As peter said remove the promise from the directive and add it to the controller
angular.module('magicApp')
.controller('MainCtrl', ['$scope', 'Genre',
function ($scope, Genre) {
$scope.genres = Genre.query();
$scope.genres.$promise.then(function () {
angular.forEach($scope.genres, function (genre) {
genre.selected = false;
});
$scope.genres[0].selected = true;
});
}]);
This will also allow the controller to specify which tab is selected to begin with.
In the directive
var ccAccordion = angular.module("ccAccordion", []);
ccAccordion.directive("ccAccordion", function () {
return {
restrict: "AE",
templateUrl: "components/accordion/accordion.html",
scope: {
items: "="
},
link: function (scope) {
scope.select = function (desiredItem) {
(desiredItem.selected === true) ? desiredItem.selected = false : desiredItem.selected = true;
angular.forEach(scope.items, function (item) {
if (item !== desiredItem) {
item.selected = false;
}
});
};
}
};
});
The directive unit test now looks like this
describe('ccAccordion', function () {
var elm, scope, deferred, promise, things;
beforeEach(module('ccAccordion'));
beforeEach(function () {
jasmine.addMatchers({
toHaveClass: function () {
return {
compare: function (actual, expected) {
var classTest = actual.hasClass(expected);
classTest ? classTest = true : classTest = false;
return {
pass: classTest,
message: 'Expected ' + angular.mock.dump(actual) + ' to have class ' + expected
};
}
};
}
});
});
// load the templates
beforeEach(module('components/accordion/accordion.html'));
beforeEach(inject(function ($rootScope, $compile, $q) {
elm = angular.element(
'<cc-accordion items="genres"></cc-accordion>'
);
scope = $rootScope;
scope.genres = [{
title: 'Scifi',
description: 'Scifi description'
}, {
title: 'Comedy',
description: 'Comedy description'
}];
$compile(elm)(scope);
scope.$digest();
}));
it('should create clickable titles', function () {
var titles = elm.find('.cc-accord h2');
expect(titles.length).toBe(2);
expect(titles.eq(0).text().trim()).toBe('Scifi');
expect(titles.eq(1).text().trim()).toBe('Comedy');
});
it('should bind the content', function () {
var contents = elm.find('.cc-accord-content div:first-child');
expect(contents.length).toBe(2);
expect(contents.eq(0).text().trim()).toBe('Scifi description');
expect(contents.eq(1).text().trim()).toBe('Comedy description');
});
it('should change active content when header clicked', function () {
var titles = elm.find('.cc-accord h2'),
divs = elm.find('.cc-accord');
// click the second header
titles.eq(1).find('a').click();
// second div should be active
expect(divs.eq(0)).not.toHaveClass('active');
expect(divs.eq(1)).toHaveClass('active');
});
});
And the unit test for main controller now has the added property of selected
'use-strict';
describe('magicApp controllers', function () {
// using addMatcher because $resource is not $http and returns a promise
beforeEach(function () {
jasmine.addMatchers({
toEqualData: function () {
return {
compare: function (actual, expected) {
return {
pass: angular.equals(actual, expected)
};
}
};
}
});
});
beforeEach(module('magicApp'));
beforeEach(module('magicServices'));
describe('MainCtrl', function () {
var scope, ctrl, $httpBackend;
beforeEach(inject(function (_$httpBackend_, $rootScope, $controller) {
$httpBackend = _$httpBackend_;
$httpBackend.expectGET('/api/genres').
respond([{title: 'Scifi', selected: true}, {title: 'Comedy', selected: false}]);
scope = $rootScope.$new();
ctrl = $controller('MainCtrl', {$scope: scope});
}));
it('should create "genres" model with 2 genres fetched from xhr', function () {
expect(scope.genres).toEqualData([]);
$httpBackend.flush();
expect(scope.genres).toEqualData(
[{title: 'Scifi', selected: true}, {title: 'Comedy', selected: false}]);
});
});
});
How can I invoke a function after two or more $scope events have been received?
For example, let's assume I need to run a function after receiving two events "eventA" and "eventB". What I usually do is to declare for each event a boolean variable, set the variable to true when the event is received, and ask if the other variable is true to run the function:
var a = false,
b = false;
$scope.$on("eventA", function(){
a = true;
if (b)
performTask();
});
$scope.$on("eventB", function(){
b = true;
if (a)
performTask();
});
var performTask = function() {
/* do something... */
};
This gets more complex if there are three or more events. Is there a design pattern to handle these cases?
You can use $q promises.
var dfdATask= $q.defer();
var dfdBTask= $q.defer();
$scope.$on("eventA", function(){
// whatever this function does
dfdATask.resolve(true);//or pass a value
});
$scope.$on("eventB", function(){
//whatever this function does
dfdBTask.resolve(true);//or pass a value
});
$q.all([dfdATask.promise, dfdBTask.promise]).then(function(){
//be sure to pass in an array of promises
//perform task
})
So theory wise if you only want to execute this magical action after you've received these two events have been called at least once then you probably want to use promises.
app.controller('ExampleOneController', [
'$log',
'$scope',
'$q',
'$rootScope',
function ($log, $scope, $q, $rootScope) {
$scope.anotherAction1FiredCount = 0;
var aDeferred = $q.defer(),
bDeferred = $q.defer();
$scope.$on('e-1-a', function () {
$log.log('Fired e-1-a');
aDeferred.resolve();
});
$scope.$on('e-1-b', function () {
$log.log('Fired e-1-b');
bDeferred.resolve();
});
$q.all([aDeferred.promise, bDeferred.promise]).then(function () {
$log.log('Fired another action 1!');
$scope.anotherAction1 = 'Hello World 1!';
$scope.anotherAction1FiredCount++;
});
}
]);
That being said usually I want to execute everytime two things happen so I tend to 'reset' my promises.
app.controller('ExampleTwoController', [
'$log',
'$scope',
'$q',
function ($log, $scope, $q) {
$scope.anotherAction2FiredCount = 0;
var aDeferred = $q.defer(),
bDeferred = $q.defer();
$scope.$on('e-2-a', function () {
$log.log('Fired e-2-a');
aDeferred.resolve();
});
$scope.$on('e-2-b', function () {
$log.log('Fired e-2-b');
bDeferred.resolve();
});
var wait = function () {
$q.all([aDeferred.promise, bDeferred.promise]).then(function () {
$log.log('Fired another action 2!');
$scope.anotherAction2 = 'Hello World 2!';
$scope.anotherAction2FiredCount++;
aDeferred = $q.defer();
bDeferred = $q.defer();
wait();
});
};
wait();
}
]);
Here's the working plunker!
Promises are life.
active polling using $scope.$watch:
One way to do this:
var a = false, b = false;
$scope.$on("eventA", function(){ a = true; });
$scope.$on("eventB", function(){ b = true; });
$scope.$watch(
function() { return a && b; },
function(newval, oldval) {
if (newval) { performTask(); }
}
);
one step further:
var events = { a: false, b: false };
$scope.$on("eventA", function(){ events.a = true; });
$scope.$on("eventB", function(){ events.b = true; });
$scope.$watch(
function() {
var result = true;
for (var key in events) {
result = result && events[key];
}
return result;
},
function(newval, oldval) {
if (newval) { performTask(); }
}
);
http://plnkr.co/edit/5NrOhTwblMCCCoKncVAW?p=preview
Be sure to read the developer guide and check the "Scope $watch Performance Considerations" section.
regular callback:
var events = { a: false, b: false };
function checkIfPerfomTask() {
for (var key in events) {
if (!events[key]) { return; }
}
performTask();
}
$scope.$on("eventA", function(){ events.a = true; checkIfPerfomTask(); });
$scope.$on("eventB", function(){ events.b = true; checkIfPerfomTask(); });
http://plnkr.co/edit/5NrOhTwblMCCCoKncVAW?p=preview
with one promise, $q.defer():
var events = { a: false, b: false };
var shouldPerform = $q.defer();
function checkIfPerfomTask() {
for (var key in events) {
if (!events[key]) { return; }
}
shouldPerform.resolve();
}
$scope.$on("eventA", function(){ events.a = true; checkIfPerfomTask(); });
$scope.$on("eventB", function(){ events.b = true; checkIfPerfomTask(); });
shouldPerform.promise.then(performTask);
http://plnkr.co/edit/5NrOhTwblMCCCoKncVAW?p=preview
with multiple promises...
Already been covered by multiple answers.
Promises are meant for your use case. But since you mentioned you were looking for a design pattern, I'll put down one way to do this using the Observer pattern.
You can check out this live Plunkr: http://plnkr.co/edit/1Oqn2TAGTr7NLYZd9ax1?p=preview
Has an angularjs service that handles the logic for tracking events and calling the final action.
The controller simply defines your events, the final event and registers them with your service.
app.controller('MainCtrl', function($scope, EventService) {
var events = [];
... //define events
EventService.registerEvents(events);
EventService.registerEventsCallback(finalEvent); //the observer
});
The service makes this work by removing a called event from the events list upon first execution.
app.factory('EventService', function(){
var events = [];
var finalEvent;
var eventsCallback = function(){
if(!events.length){
finalEvent();
}
}
var resolveEvent= function(event){
var eventIndex = events.indexOf(event);
if(eventIndex>=0){
events.splice(eventIndex,1);
}
}
return{
registerEvents: function(eventsList){
events = angular.copy(eventsList);
},
registerEventsCallback: function(event){
finalEvent = event;
},
publishEvent: function(event){
event();
resolveEvent(event);
eventsCallback();
}
}
});
Jasmine + AngularJS: Global services causes Unexpected GET request
I have a service, $language, that gets called in app config (so before every Spec runs). The method called, $language.update(), triggers $translate.use() (which in turn triggers an $http.get()). This causes an Unexpected request: GET /<lang>/i18n.
I've tried a few different things to resolve this, but each seems to cause a new problem:
Globally mock the $translate service
// not inside a describe()
beforeEach(function() {
module(function($provide) {
$provide.value('$translate', {
get: function() { return false; },
storage: function() { return false; },
storageKey: function() {
return {
get: function() { return false; },
set: function() { return false; }
};
},
use: function() { return false; }
});
});
});
But something tries to call $translate(), so I tried making the mock a function returning an object, but that didn't work either.
Mocking the GET request via $httpBackend
// not inside a describe()
beforeEach(function() {
// this already existed to avoid another problem caused by $translate
module('MyApp', function config($translateProvider, $anotherProvider) {
// …
});
// new
inject(function($httpBackend) {
$httpBackend.when('GET', '/<lang>/i18n').respond({});
});
});
But then it complains Injector already created, can not register a module! (order of module and inject doesn't seem to matter).
I thought of globally mocking my $language service, but then I would not be able to test it in its own Spec.
Ideally I'd prefer to globally mock $translate as it seems to cause one problem after another.
The problem was that $translate is a provider; therefore a provider needs to be $provide'd:
// Outside of a describe so it's treated as global
beforeEach(function() {
module('MyModule', function config($providerA, $provide) {
// …
$provide.provider('$translate', function() {
var store = {};
this.get = function() { return false; };
this.preferredLanguage = function() { return false; };
this.storage = function() { return false; };
this.translations = function() { return {}; };
this.$get = ['$q', function($q) {
var $translate = function(key) {
var deferred = $q.defer(); deferred.resolve(key); return deferred.promise;
};
$translate.addPair = function(key, val) { store[key] = val; };
$translate.isPostCompilingEnabled = function() { return false; };
$translate.preferredLanguage = function() { return false; };
$translate.storage = function() { return false; };
$translate.storageKey = function() { return true; };
$translate.use = function() { return false; };
return $translate;
}];
});
});
});