AngularJS : test uiDate directive
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
CSS
</style>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine.js"></script>
<script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine-html.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-mocks-1.0.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://tryjasmine.com/js/vendor/jasmine-1.1.0/jasmine.css">
<style>
JavaScript
describe('uiDate', function() {
// chargement du module
beforeEach(module("myApp"));
// vérification de l'affection de la date provenant du modèle au datepicker
it('should be able to get the date from the model', function() {
// injection du service $compile et du $rootScope
return inject(function($compile, $rootScope) {
// création d'un scope fils
var scope = $rootScope.$new();
// creation d'une date pour test
var aDate = new Date(2012, 6, 10);
// compilation de la directive
var element = $compile("<input ui-date ng-model='x'></input>")(scope);
// affectation de la date de test au scope
scope.$apply(function() {
return scope.x = aDate;
});
// test si le datepicker affiche bien la date de test
return expect(element.datepicker('getDate')).toEqual(aDate);
});
});
// vérification de l'affectation de la date sélectionnée dans le datepicker dans le modèle
it('should put the date in the model', function() {
// injection du service $compile et du $rootScope
return inject(function($compile, $rootScope) {
// création d'un scope fils
var scope = $rootScope.$new();
// creation d'une date pour test
var aDate = new Date(2012, 6, 10);
// compilation de la directive
var element = $compile("<input ui-date ng-model='x'></input>")(scope);
// simulation d'une sélection dans le datepicker
element.datepicker('setDate', aDate);
$.datepicker._selectDate(element);
// vérification que le modèle contient bien la date de test
return expect(scope.x).toEqual(aDate);
});
});
});
var myApp = angular.module('myApp', []);
myApp.directive('uiDate', function() {
return {
require: '?ngModel',
link: function($scope, element, attrs, controller) {
var originalRender, updateModel, usersOnSelectHandler;
if ($scope.uiDate == null) $scope.uiDate = {};
if (controller != null) {
...