Instantly share code, notes, and snippets.

@bbraithwaite bbraithwaite/rootScope.html Secret
Last active Jan 24, 2017

Embed
What would you like to do?
<html>
<head>
<title>rootScope Examples</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine-html.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/boot.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular-mocks.js"></script>
</head>
<body>
<script type="text/javascript">
var app = angular.module('search', []);
app.factory('searchService', function (){
return {
search: function(query) {
// promise functionality here...
}
}
});
app.controller('SearchController', function ($scope, searchService) {
searchService.search($scope.query)
.then(function(data) {
$scope.results = data;
})
.catch(function() {
$scope.error = 'There has been an error!';
});
});
app.controller('SearchControllerWithRootScope', function ($rootScope, $scope) {
$rootScope.globalMenu = [
'item 1',
'item 2',
'item 3'
];
$scope.results = [
'child item 1',
'child item 2',
'child item 3'
];
});
app.controller('NestedController', function ($scope) {
// note that $scope.query is taken from the parent scope
$scope.message = 'You searched for: ' + $scope.query;
});
app.directive('searchControl', function() {
return {
replace: true,
restrict: 'E',
scope: false, // sets isolated scope
template: '<input type="search" placeholder="search...">'
};
});
app.directive('searchControlScope', function() {
return {
replace: true,
restrict: 'E',
scope: true, // sets isolated scope to true!
template: '<input type="search" placeholder="{{placeholder}}">'
};
});
app.directive('searchResult', function() {
return {
replace: true,
restrict: 'E',
scope: {
result: '='
},
template: '<div><h3>{{ result.title }}</h3></div>'
};
});
describe('Directive Tests: Search Result', function () {
var $compile;
var $rootScope;
beforeEach(module('search'));
beforeEach(inject(function(_$rootScope_, _$compile_) {
$rootScope = _$rootScope_;
$compile = _$compile_;
}));
it('should render directive', function () {
var innerHtml = '<!-- ngRepeat: result in results track by result.id --><div ng-repeat="result in results track by result.id" result="result" class="ng-scope ng-isolate-scope"><h3 class="ng-binding">Result 1</h3></div><!-- end ngRepeat: result in results track by result.id --><div ng-repeat="result in results track by result.id" result="result" class="ng-scope ng-isolate-scope"><h3 class="ng-binding">Result 2</h3></div><!-- end ngRepeat: result in results track by result.id -->'
$rootScope.results = [{
id: 1,
title: 'Result 1'
},
{
id: 2,
title: 'Result 2'
}];
var element = $compile("<div><search-result ng-repeat='result in results track by result.id' result='result'></search-result></div>")($rootScope);
$rootScope.$apply();
expect(element.html()).toBe(innerHtml);
expect($rootScope.$countChildScopes()).toBe(4);
expect($rootScope.$countWatchers()).toBe(5);
});
});
describe('Directive Tests: Simple', function () {
var $compile;
var $rootScope;
beforeEach(module('search'));
beforeEach(inject(function(_$rootScope_, _$compile_) {
$rootScope = _$rootScope_;
$compile = _$compile_;
}));
it('should render directive', function () {
$rootScope.query = 'tutorials';
var element = $compile("<search-control></search-control>")($rootScope);
$rootScope.$digest();
expect(element[0].outerHTML).toBe('<input type="search" placeholder="search..." class="ng-scope">');
expect($rootScope.$countChildScopes()).toBe(0);
expect($rootScope.$countWatchers()).toBe(0);
});
});
describe('Directive Tests: Scope', function () {
var $compile;
var $rootScope;
beforeEach(module('search'));
beforeEach(inject(function(_$rootScope_, _$compile_) {
$rootScope = _$rootScope_;
$compile = _$compile_;
}));
it('should render directive', function () {
$rootScope.placeholder = 'search';
var element = $compile("<search-control-scope></search-control-scope>")($rootScope);
$rootScope.$digest();
expect($rootScope.$countChildScopes()).toBe(1);
expect($rootScope.$countWatchers()).toBe(1);
});
});
describe('Controller that uses rootScope and child Scope', function () {
var $scope;
var $rootScope;
beforeEach(module('search'));
beforeEach(inject(function($controller, _$rootScope_) {
$rootScope = _$rootScope_;
$scope = _$rootScope_.$new();
$controller('SearchControllerWithRootScope', {
$rootScope: $rootScope,
$scope: $scope
});
}));
it('should set rootScope properties', function () {
expect($scope.globalMenu.length).toBe(3);
expect($scope.results.length).toBe(3);
});
});
describe('Controller that uses nested Controllers', function () {
var $controller;
var $childScope;
var $scope;
beforeEach(module('search'));
beforeEach(inject(function(_$controller_, _$rootScope_) {
$controller = _$controller_;
$rootScope = _$rootScope_;
$scope = _$rootScope_.$new();
}));
it('should set rootScope properties', function () {
$childScope = $scope.$new();
$scope.query = 'angular tutorials';
$controller('NestedController', {
$scope: $childScope
});
expect($childScope.message).toBe('You searched for: angular tutorials');
expect($rootScope.$countChildScopes()).toBe(2);
expect($rootScope.$countWatchers()).toBe(0);
});
});
describe('Search Tests with Promises', function () {
var $scope;
var $rootScope;
var $q;
beforeEach(module('search'));
beforeEach(inject(function($controller, _$rootScope_, _$q_, searchService) {
$q = _$q_;
$rootScope = _$rootScope_;
$scope = _$rootScope_.$new();
// Setup the Promise
searchServiceDeferred = _$q_.defer();
spyOn(searchService, 'search').and.returnValue(searchServiceDeferred.promise);
$controller('SearchController', { $scope: $scope, searchService: searchService });
}));
it('should resolve promose', function () {
// Resolve the promise and call $apply to start digest cycle.
searchServiceDeferred.resolve([{ id: 1 }, { id: 2 }]);
$rootScope.$apply();
expect($scope.results).not.toBe(undefined);
expect($scope.error).toBe(undefined);
});
it('should reject promise', function () {
// Reject the promise and call $apply to start digest cycle.
searchServiceDeferred.reject();
$rootScope.$apply();
expect($scope.results).toBe(undefined);
expect($scope.error).toBe('There has been an error!');
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment