var app = angular.module('plunker', [])
.directive('userMenu', function ($templateCache) {
return {
restrict: 'E',
templateUrl:'userMenuTpl.html',
controller: function ($scope, userSvc) {
if (userSvc.isAuthenticated()) {
$scope.profile = userSvc.getProfile();
}
$scope.getprofile = function(){
return userSvc.getProfile()
}
$scope.signout = function(){
userSvc.logout();
}
}
}
})
.factory('userSvc', function () {
var _isAuthenticated = false, _profile= null;
return {
isAuthenticated: function() {
return _isAuthenticated;
},
getProfile: function() {
return _profile
},
login: function(){
_isAuthenticated = true;
_profile = {username:'Shlomo'}
},
logout:function(){
_profile = _isAuthenticated = false;
}
}
})
describe('Testing user menu directive:: ', function() {
var $scope = null,userSvc,$timeout;
var $compile;
//you need to indicate your module in a test
beforeEach(module('plunker'));
beforeEach(inject(function($templateCache, _$compile_, userSvc, $timeout) {
$compile = _$compile_;
var directiveTemplate = null;
var req = new XMLHttpRequest();
req.onload = function() {
directiveTemplate = this.responseText;
};
// Using `false` as the third parameter to open() makes the operation synchronous.
req.open("get", "userMenuTpl.html", false);
req.send();
$templateCache.put("userMenuTpl.html", directiveTemplate);
}));
beforeEach(inject(function($rootScope, $injector) {
userSvc = $injector.get('userSvc');
$scope = $rootScope.$new();
}));
it('initialy should show "sign in" link', function() {
element = $compile('<user-menu></user-menu>')($scope);
$scope.$digest();
expect($(element).find('a:eq(0)').text()).toContain('Sign in');
});
it('when logged in should show "sign out" link and user name', function() {
userSvc.login();
element = $compile('<user-menu></user-menu>')($scope);
$scope.$digest()
expect($(element).find('a:eq(1)').text()).toContain('Sign out');
expect($(element).find('a:eq(0)').text()).toContain('Shlomo');
});
it('after loggin out- should show "Sign in" link again', function() {
userSvc.login();
element = $compile('<user-menu></user-menu>')($scope);
$scope.$digest();
expect($(element).find('a:eq(0)').text()).toContain('Shlomo');
expect($(element).find('a:eq(1)').text()).toBe('Sign out');
element.find('a').triggerHandler('click');
expect($(element).find('a:eq(0)').text()).toBe('Sign in');
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS test</title>
<link data-require="jasmine@1.3.1" data-semver="1.3.1" rel="stylesheet" href="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css" />
<script data-require="jasmine@1.3.1" data-semver="1.3.1" src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script>
<script data-require="jasmine@1.3.1" data-semver="1.3.1" src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script>
<script data-require="angular.js@1.3.1" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<script data-require="angular-mocks@1.3.0-rc.4" data-semver="1.3.0-rc.4" src="https://code.angularjs.org/1.3.0-rc.4/angular-mocks.js"></script>
<script data-require="json2@*" data-semver="0.0.2012100-8" src="//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
<script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://pivotal.github.com/jasmine/lib/jasmine-html.js"></script>
<link rel="stylesheet" href="http://pivotal.github.com/jasmine/lib/jasmine.css" />
<link href="style.css" rel="stylesheet" />
<script src="app.js"></script>
<script src="appSpec.js"></script>
<script src="jasmineBootstrap.js"></script>
<!-- bootstraps Jasmine -->
</head>
<body ng-app="plunker">
<div><user-menu></user-menu></div>
<div class="jasmine_reporter" id="HTMLReporter"></div>
</body>
</html>
(function() {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 250;
/**
Create the `HTMLReporter`, which Jasmine calls to provide results of each spec and each suite. The Reporter is responsible for presenting results to the user.
*/
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
/**
Delegate filtering of specs to the reporter. Allows for clicking on single suites or specs in the results to only run a subset of the suite.
*/
jasmineEnv.specFilter = function(spec) {
return htmlReporter.specFilter(spec);
};
/**
Run all of the tests when the page finishes loading - and make sure to run any previous `onload` handler
### Test Results
Scroll down to see the results of all of these specs.
*/
var currentWindowOnload = window.onload;
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
//document.querySelector('.version').innerHTML = jasmineEnv.versionString();
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
/* restore "body" styling that were changes by "jasmine.css"... */
body { background-color: white; padding: 0; margin: 8px; }
/* ... but remain the "jasmine.css" styling for the Jasmine reporting */
.jasmine_reporter { background-color: #eeeeee; padding: 0; margin: 0; }
<ul class="nav navbar-nav navbar-right" ng-if="getprofile()">
<li>
<a href="/profile"><i class="glyphicon glyphicon-user">
</i> {{profile.username}}
</a>
</li>
<li style="border-left:1px solid #fff">
<a href ng-click="signout()">Sign out</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" ng-if="!getprofile()">
<li>
<a href ng-click="open()">Sign in</a>
</li>
<li>
<a style="border-left:1px solid #fff" href="/link-to-login">Sign Up</a>
</li>
</ul>