Last active
September 19, 2016 14:35
-
-
Save fabiobiondi/d2a76a4f07530f6bd1019040793f1081 to your computer and use it in GitHub Desktop.
Angular 1.5 Component Test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
angular.module('myHelloModule', []) | |
.component('helloPanel', { | |
bindings: { | |
title: '@', | |
body: '<' | |
}, | |
templateUrl: 'app/hello-panel.tpl.html', | |
controller: function() { | |
this.opened = true; | |
this.toggle = function() { | |
this.opened = !this.opened; | |
} | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"use strict"; | |
describe('helloPanel', function () { | |
beforeEach(module('myHelloModule')); | |
beforeEach(module('templates')); | |
var element; | |
var scope; | |
var titlebar; | |
var controller; | |
beforeEach(inject(function($rootScope, $compile){ | |
scope = $rootScope.$new(); | |
element = angular.element('<hello-panel title="{{title}}" body="body"></hello-panel>'); | |
element = $compile(element)(scope); | |
scope.title = 'AngularJS'; | |
scope.body = 'bla bla'; | |
scope.$apply(); | |
titlebar = element.find('h1'); | |
controller = element.controller('helloPanel'); | |
})); | |
describe('when passing properties', function () { | |
it('should render the title', function() { | |
expect(titlebar.text()).toBe('AngularJS'); | |
}); | |
it('should expose opened and be true', function() { | |
expect(controller.opened).toBeDefined(); | |
expect(controller.opened).toBe(true); | |
}); | |
it('should update the rendered text when the parent scope changes', function() { | |
scope.title = 'Angular2'; | |
scope.body = 'mytext'; | |
scope.$apply(); | |
expect(titlebar.text()).toBe('Angular2'); | |
var body = element[0].querySelector('.body'); | |
expect(body.innerHTML).toBe(scope.body); | |
}); | |
}); | |
describe('when toggling', function () { | |
it('should update opened properties', function() { | |
controller.toggle(); | |
expect(controller.opened).toBe(false); | |
controller.toggle(); | |
expect(controller.opened).toBe(true); | |
}); | |
it('should invoke toggle() when click the titlebar', function() { | |
expect(controller.opened).toBeDefined(); | |
expect(controller.opened).toBe(true); | |
titlebar.triggerHandler('click'); | |
expect(controller.opened).toBe(false); | |
}); | |
it('should update opened property when toggle() is invoked', function() { | |
expect(controller.opened).toBeDefined(); | |
expect(controller.opened).toBe(true); | |
spyOn(controller, 'toggle').and.callThrough(); | |
controller.toggle(); | |
expect(controller.toggle).toHaveBeenCalled(); | |
expect(controller.opened).toBe(false); | |
}); | |
it('should add an hidden class when panel is closed', function() { | |
controller.opened = false; | |
var body = element[0].querySelector('.body'); | |
scope.$apply(); | |
var hasClass = angular.element(body).hasClass('hidden'); | |
expect(hasClass).toBe(true); | |
}); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
<h1 ng-click="$ctrl.toggle()">{{ $ctrl.title }}</h1> | |
<div class="body" | |
ng-class="{'hidden': !$ctrl.opened}">{{ $ctrl.body }}</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment