test directive with ui-router $state.current - angularjs

Question

Trying to test a directive but I'm at a loss. Basically I don't know how to set the test up and I can't find any examples to step by step me. Can someone provide an explanation of how this should be set up? Right now the error I'm getting is
TypeError: 'undefined' is not an object (evaluating 'current.name')
directives.directive('convenienceNav', function(){
return {
restrict: 'A',
template: '<button class="btn btn-success" ui-sref=" {{$state.current.name}}.add"><i class="fa fa-user-plus"></i>Add {{$state.current.params.singular_title}}</button>'
};
});
describe('directive: convenienceNav', function() {
var element, scope, stateParams, state;
beforeEach(module('app.directives'));
beforeEach(module('ui.router'));
beforeEach(inject(function($rootScope, $compile, $state) {
scope = $rootScope.$new();
stateParams = {'api_resource_name': 'people'};
state = $state;
state.current.name = 'admin.people';
// state.current.params.singular_title = 'Person';
element ='<div convenience-nav></div>';
element = $compile(element)(scope);
scope.$digest();
}));
it('should have state.current.name = admin.people', function(){
expect(element.html()).toBe('<button class="btn btn-success" ui-sref="admin.people.add"><i class="fa fa-user-plus"></i>Add Person</button>');
});
});

Answer 1

Below are the examples of how you can test angular directives and routes navigation(ui router) in jasmine.
Button with name
var namedButtonModule = angular.module('namedButtonModule', []);
namedButtonModule.directive('namedButton', function() {
return {
restrict: 'AE',
scope: {
name: "=?"
},
template: '<button class="btn btn-success">I am {{name}} Button</button>',
controller: function($scope) {
$scope.name = $scope.name || 'simple';
}
};
});
describe('directive: namedButton', function() {
beforeEach(module('namedButtonModule'));
beforeEach(inject(function($rootScope, $compile) {
this.$rootScope = $rootScope;
this.$compile = $compile;
this.testContainer = document.getElementById('test-container');
this.compileDirective = function(template, scope) {
var element = this.$compile(template)(scope);
this.testContainer.appendChild(element[0]);
scope.$digest();
return element;
}
}));
afterEach(function() {
this.testContainer.innerHTML = '';
});
it('button should show default name', function() {
var template = '<div named-button></div>';
var scope = this.$rootScope.$new();
var element = this.compileDirective(template, scope);
expect(element.text()).toBe('I am simple Button');
});
it('button should show passed name to the scope', function() {
var template = '<div named-button name="inputName"></div>';
var scope = this.$rootScope.$new();
scope.inputName = "Angular Test";
var element = this.compileDirective(template, scope);
expect(element.text()).toBe('I am Angular Test Button');
});
});
<!-- jasmine -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.min.css" rel="stylesheet" />
<!-- angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-mocks.js"></script>
<div id="test-container"></div>
Navigation Button
on clicking button, app will redirect to that state.
var navigationButtonsModule = angular.module('navigationButtonsModule', ['ui.router']);
navigationButtonsModule.config(['$stateProvider',
function($stateProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: 'home.html'
});
}
]);
navigationButtonsModule.directive('navigationButton', function() {
return {
restrict: 'AE',
scope: {
state: "=?",
name: "=?"
},
template: '<button class="btn btn-success" ui-sref="{{state}}">Go to {{name}}</button>',
};
});
describe('directive: navigationButton', function() {
beforeEach(module('navigationButtonsModule'));
beforeEach(inject(function($rootScope, $compile, $state, $templateCache, $timeout) {
this.$rootScope = $rootScope;
this.$compile = $compile;
this.$state = $state;
this.$templateCache = $templateCache;
this.$timeout = $timeout;
this.testContainer = document.getElementById('test-container');
this.compileDirective = function(template, scope) {
var element = this.$compile(template)(scope);
this.testContainer.appendChild(element[0]);
scope.$digest();
return element;
}
}));
afterEach(function() {
this.testContainer.innerHTML = '';
});
it('navigation button should show passed name and ui-sref state', function() {
var template = '<navigation-button state="state" name="name"></navigation-button>';
var scope = this.$rootScope.$new();
scope.state = 'home';
scope.name = 'Home';
var element = this.compileDirective(template, scope);
expect(element.text()).toBe('Go to Home');
expect(element.find('button').attr('ui-sref')).toBe('home');
});
it('will show home href', function() {
expect(this.$state.href('home')).toEqual('#/home');
});
it('on button click browser should go to home state', function() {
var template = '<navigation-button state="state" name="name"></navigation-button>';
var scope = this.$rootScope.$new();
scope.state = 'home';
scope.name = 'Home';
var element = this.compileDirective(template, scope);
// mimicking home.html template
this.$templateCache.put('home.html', '');
this.$timeout(function() {
element.find('button')[0].click();
});
this.$timeout.flush();
this.$rootScope.$digest();
expect(this.$state.current.name).toBe('home');
});
});
<!-- jasmine -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.min.css" rel="stylesheet" />
<!-- angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-mocks.js"></script>
<div id="test-container"></div>
JSFiddle
I have kept replicated code as it is, so it can be easy to read and understand