Develop Reference

Getting method as undefined while running karma test

I have created a scope method inside my controller which is executing when a button is pressed. I am writing unit test cases for the same. I have injected my module in beforeEach block and created spyon my scope function and then using it in 'it' method and checking whether it is called or not. But getting an error as a method not found.
Controller
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope',View1Ctrl])
function View1Ctrl($scope) {
$scope.user = {
name: '',
last: ''
}
$scope.showFormData = function() {
$scope.formData = $scope.user.name + $scope.user.last;
}
}
spec.js
'use strict';
describe('myApp.view1 module', function () {
var $controller, $rootScope;
beforeEach(module('myApp.view1'));
beforeEach(inject(function (_$controller_, _$rootScope_) {
$controller = _$controller_;
$rootScope = _$rootScope_;
}));
describe('view1 controller', function () {
var $scope, controller, formData;
beforeEach(function () {
$scope = $rootScope.$new();
controller = $controller('View1Ctrl', {
$scope: $scope
});
spyOn(controller, 'showFormData');
});
it('should check for the show form details', function () {
$scope.user.name = "Sandeep";
$scope.user.last = "Gupta";
expect($scope.showFormData).toHaveBeenCalled();
expect($scope.user.name + $scope.user.last).toEqual(firstname);
});
});
});
Need help to resolve this issue.

It looks like you're trying to spy on the showFormData method of the controller:
spyOn(controller, 'showFormData');
However, the showFormData doesn't exist on the controller, it's a method of the controller's scope.
You'll need to use:
spyOn($scope, 'showFormData');
It's also important to know that you need to use the same object to both spyOn and expect(...).toHaveBeenCalled(). In your case you where spying on controller.showFormData(), yet expecting $scope.showFormData() to have been called.

Binding a Directive Controller's method to its parent $scope

I will explain what exactly I'm trying to do before explaining the issue. I have a Directive which holds a form, and I need to access that form from the parent element (where the Directive is used) when clicking on a submit button to check fi the form is valid.
To do this, I am trying to use $scope.$parent[$attrs.directiveName] = this; and then binding some methods to the the Directive such as this.isValid which will be exposed and executable in the parent.
This works fine when running locally, but when minifying and building my code (Yeoman angular-fullstack) I will get an error for aProvider being unknown which I traced back to a $scopeProvider error in the Controller.
I've had similar issues in the past, and my first thought was that I need to specifically say $inject for $scope so that the name isn't lost. But alas.....no luck.
Is something glaringly obvious that I am doing wrong?
Any help appreciated.
(function() {
'use strict';
angular
.module('myApp')
.directive('formDirective', formDirective);
function formDirective() {
var directive = {
templateUrl: 'path/to/template.html',
restrict: 'EA',
scope: {
user: '='
},
controller: controller
};
return directive;
controller.$inject = ['$scope', '$attrs', 'myService'];
function controller($scope, $attrs, myService) {
$scope.myService = myService;
// Exposes the Directive Controller on the parent Scope with name Directive's name
$scope.$parent[$attrs.directiveName] = this;
this.isValid = function() {
return $scope.myForm.$valid;
};
this.setDirty = function() {
Object.keys($scope.myForm).forEach(function(key) {
if (!key.match(/\$/)) {
$scope.myForm[key].$setDirty();
$scope.myForm[key].$setTouched();
}
});
$scope.myForm.$setDirty();
};
}
}
})();

Change the directive to a component and implement a clear interface.
Parent Container (parent.html):
<form-component some-input="importantInfo" on-update="someFunction(data)">
</form-component>
Parent controller (parent.js):
//...
$scope.importantInfo = {data: 'data...'};
$scope.someFunction = function (data) {
//do stuff with the data
}
//..
form-component.js:
angular.module('app')
.component('formComponent', {
template:'<template-etc>',
controller: Controller,
controllerAs: 'ctrl',
bindings: {
onUpdate: '&',
someInput: '<'
}
});
function Controller() {
var ctrl = this;
ctrl.someFormThing = function (value) {
ctrl.onUpdate({data: value})
}
}
So if an event in your form triggers the function ctrl.someFormThing(data). This can be passed up to the parent by calling ctrl.onUpdate().

Get the controller from a manual $compile invocation

I am rendering a directive manually using the following.
How can I get hold of the controller instantiated behind the scenes by the compile step, associated with the my-directive directive?
function renderDirective(hostElement) {
var $injector, $compile, link;
$injector = hostElement.injector();
$compile = $injector.get('$compile');
link = $compile(angular.element('<my-directive></my-directive>'));
// ... how can I get the controller instance
// associated with the instance of my-directive
// that has been instantiated by the previous
// line of code?
return link(createScope());
}
my-directive.js
return function MyDirective() {
return {
scope: {
'context': '='
},
restrict: 'E',
template: template,
controller: 'myController',
controllerAs: 'ctrl',
replace: true,
};
};

Try this:
function renderDirective(hostElement) {
var $injector, $compile, link;
$injector = hostElement.injector();
$compile = $injector.get('$compile');
link = $compile('<my-directive></my-directive>');
// ... how can I get the controller instance
// associated with the instance of my-directive
// that has been instantiated by the previous
// line of code?
return link(createScope());
}

How does one program PhantomJS to wait for AngularJS $resource to resolve before attempting test on returned data?

I have an AngularJS controller test script using PhantomJS. The test looks to see if the controller has loaded "users" data from a database via a RESTFul web service using AngularJS' $resource service. The problem is that the test fails because the $resource (which returns a promise I believe) isn't resolved yet when the test executes. What's the proper way to deal with this delay so that the test will pass? Here is my code:
CONTROLLER:
.controller('MainCtrl', function ($scope, Users) {
$scope.users = Users.query();
$scope.sortField = 'lastName';
$scope.reverseSort = true;
})
SERVICE:
angular.module('clearsoftDemoApp').factory('Users', function ($resource) {
return $resource('http://localhost:8080/ClearsoftDemoBackend/webresources/clearsoft.demo.users', {}, {
query: {method: 'GET', isArray: true}
});
});
TEST:
describe('Controller: MainCtrl', function () {
// load the controller's module
beforeEach(module('clearsoftDemoApp'));
var MainCtrl, scope;
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
MainCtrl = $controller('MainCtrl', {
$scope: scope
});
}));
it('should retrieve a list of users and assign to scope.users', function () {
expect(scope.users.length).toBeGreaterThan(0);
});
});

You need to mock the factory call and pass the mock to the controller:
beforeEach(inject(function ($controller, $rootScope) {
var users = { query: function() { return [{}]; } };
scope = $rootScope.$new();
MainCtrl = $controller('MainCtrl', {
$scope: scope,
Users: users
});
}))

Angular: How to access an element directive's scope in the controller

Given this simple Angular module:
angular.module('fixturesModule', [])
.directive('clubfixtures', function () {
"use strict";
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
club : "#club",
max : "#max"
},
templateUrl: "ClubResultsTemplate.html",
controller: function ($scope, $http) {
$http.get("data.json").success(function (data) {
$scope.results = data;
});
$scope.sortBy = "Date";
}
}
});
How do I access club and max in the controller function?
Thanks,
Jeff

Attributes on the scope set up with '#', as in scope: { myAttr: '#' } receive their values after the controller function has been called.
You can demonstrate this with a simple setTimeout - See http://jsfiddle.net/Q4seC/ (be sure to open the console)
$attrs, as you've found, is ready when you need it.
Interestingly, if you use '=' instead of '#', the value is ready and available, which makes me think this could be considered a bug in Angular...

The 2 mentioned variables (max and club) will be simply defined in a scope injected to directive's controller. This means that you can write:
controller: function ($scope, $http) {
$scope.max; //do sth with $scope.max
$scope.club //so sth with $scope.club
$http.get("data.json").success(function (data) {
$scope.results = data;
});
}
in your directive's controller.
If you want to read up more I would suggest the "Directive Definition Object" in the http://docs.angularjs.org/guide/directive where it talks about scopes in directives.