Added basic datepicker tests.

gulpfile.js

@@ -3,13 +3,18 @@
 var es   = require('event-stream');
 var gulp = require('gulp');
 var $    = require('gulp-load-plugins')();
+var karmaServer = require('karma').Server;
 
 var paths = {
     src: {
         html: __dirname+'/src/templates/**/*.html',
         js: __dirname+'/src/js/**/*.js',
+        tests: __dirname+'/tests/**/*.js',
         scss: __dirname+'/src/scss/**/*.scss'
     },
+    config: {
+        karma: __dirname+'/karma.conf.js'
+    },
     tmp: __dirname+'/.tmp/',
     dist: __dirname+'/dist/'
 };
@@ -21,6 +26,9 @@ var plumberErrorHandler = {
     }
 };
 
+gulp.task('install', ['sass', 'js']);
+gulp.task('default', ['install']);
+
 gulp.task('js', function(){
     return es.merge(getTemplatesStream(), gulp.src(paths.src.js))
         .pipe($.plumber(plumberErrorHandler))
@@ -45,6 +53,12 @@ gulp.task('sass', function(){
         .pipe(gulp.dest(paths.dist));
 });
 
+gulp.task('test', function (done) {
+  new karmaServer({
+    configFile: __dirname + '/karma.conf.js',
+    singleRun: true
+  }, done).start();
+});
 /**
  * Watch
  */
@@ -56,6 +70,12 @@ gulp.task('watch', function(){
         gulp.start('js', done);
     }));
 });
+gulp.task('watch-test', function(){
+    $.watch([paths.src.js, paths.src.html, paths.src.tests, paths.config.karma], $.batch(function(events, done){
+        gulp.start('test', done);
+    }));
+});
+
 
 function getTemplatesStream() {
     return gulp.src(paths.src.html)

karma.conf.js

@@ -0,0 +1,32 @@
+module.exports = function(config) {
+  config.set({
+    basePath: '',
+    plugins: [ 
+      'karma-phantomjs-launcher', 
+      'karma-jasmine', 
+      'karma-ng-html2js-preprocessor' 
+    ], 
+    frameworks: ['jasmine'],
+    files: [
+      'node_modules/moment/moment.js',
+      'node_modules/angular/angular.js',
+      'node_modules/angular-mocks/angular-mocks.js',
+      'src/js/*.js',
+      'src/templates/*.html',
+      'tests/**/*.js',
+    ],
+    preprocessors: {
+      "src/templates/*.html": ["ng-html2js"]
+    },
+    ngHtml2JsPreprocessor: {
+      stripPrefix: "src/templates/",
+      moduleName: "ngFlatDatepicker",
+    },
+    exclude: [],
+    reporters: ['progress'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    browsers: ['PhantomJS'],
+  })
+}

package.json

@@ -13,7 +13,7 @@
   ],
   "main": "dist/ng-flat-datepicker.min.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "gulp install test"
   },
   "repository": {
     "type": "git",
@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "angular": "^1.4.5",
+    "angular-mocks": "^1.5.6",
     "event-stream": "^3.3.1",
     "gulp": "^3.9.0",
     "gulp-angular-filesort": "^1.1.1",
@@ -41,6 +42,13 @@
     "gulp-sass": "^2.0.4",
     "gulp-uglify": "^1.4.0",
     "gulp-watch": "^4.3.5",
-    "moment": "^2.10.6"
+    "jasmine": "^2.4.1",
+    "jasmine-core": "^2.4.1",
+    "karma": "^0.13.22",
+    "karma-jasmine": "^1.0.2",
+    "karma-ng-html2js-preprocessor": "^1.0.0",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "moment": "^2.10.6",
+    "phantomjs-prebuilt": "^2.1.7"
   }
 }

src/js/datepicker.directive.js

@@ -1,5 +1,4 @@
 (function() {
-
     'use strict';
 
     /**

src/js/datesCalculator.factory.js

@@ -1,5 +1,4 @@
 (function(){
-
     'use strict';
 
     /**

tests/datepicker.directive.spec.js

@@ -0,0 +1,106 @@
+/*globals expect inject angular moment*/
+
+describe('datepicker', function() {
+var $compile;
+  var $rootScope;
+  var $scope;
+  var datepickerHtml;
+
+    var input;
+    var datepickerElement;
+    var datepicker;
+    var datepickerContainer;
+
+  beforeEach(module('ngFlatDatepicker'));
+  beforeEach(inject(function(_$compile_, _$rootScope_) {
+    $compile = _$compile_;
+    $rootScope = _$rootScope_;
+    $scope = $rootScope.$new();
+    datepickerHtml = '<div id="testContainer"><input ng-model="date" ng-flat-datepicker datepicker-config="datepickerConfig"> </input></div>'
+  }));
+
+  it("compiles it's directive", function() {
+    //given
+    $scope.datepickerConfig = {};
+    datepickerHtml = '<div id="testContainer"><input ng-model="date" ng-flat-datepicker datepicker-config="datepickerConfig"> </input></div>';
+    //when
+    var node = $compile(datepickerHtml)($scope);
+    $rootScope.$digest();
+    //then
+    expect(node.children().hasClass('ng-flat-datepicker-wrapper')).toBe(true);
+  });
+
+  it("compiles it's directive with a date set", function() {
+    //given
+    $rootScope.date = '02.05.1900';
+    $rootScope.datepickerConfig = {
+      dateFormat: 'DD.MM.YYYY'
+    }
+
+    //when
+    compileDatepickerAndPrepareTest();
+
+    //then
+    expect(datepickerContainer.children().hasClass('ng-flat-datepicker-wrapper')).toBe(true);
+  });
+  it("opens on input click", function() {
+    //given
+    compileDatepickerAndPrepareTest();
+    expect(datepicker.hasClass('ng-hide')).toBe(true);
+    expect(datepicker.scope().pickerDisplayed).toBe(false);
+
+    //when
+    input.triggerHandler('click');
+
+    //then
+    expect(datepicker.scope().pickerDisplayed).toBe(true);
+    expect(datepicker.hasClass('ng-hide')).toBe(false);
+    expect(datepicker.scope().currentWeeks.length > 0).toBe(true);
+  });
+  it("updates the datepicker on model update", function() {
+    //given
+    $scope.date = '02.05.2000';
+    $scope.datepickerConfig = {
+      dateFormat: 'DD.MM.YYYY'
+    };
+    compileDatepickerAndPrepareTest();
+
+    //when
+    $scope.date = '03.07.2000';
+    $rootScope.$digest();
+    input.triggerHandler('click');
+    $rootScope.$digest();
+
+    expect(datepicker.scope().calendarCursor.format('LLL')).toBe(moment.utc(new Date('2000-07-03')).format('LLL'));
+    var selectedDateNode = angular.element(datepickerElement.getElementsByClassName('isSelected'));
+    expect(selectedDateNode.html()).toBe('03');
+  });
+
+  it("updates the model on date select", function() {
+   //given
+    $scope.date = '2000-05-02';
+    $scope.datepickerConfig = {
+      dateFormat: 'YYYY-MM-DD'
+    };
+    compileDatepickerAndPrepareTest();
+
+    //when
+    input.triggerHandler('click');
+    var dayNode = angular.element(datepickerElement.getElementsByClassName('day-item')[20]);
+    var dayNodeDay = dayNode.html();
+    dayNode.triggerHandler('click');
+    $rootScope.$digest();
+
+    //then
+    expect($scope.date).toBe('2000-05-'+dayNodeDay);
+  });
+
+  function compileDatepickerAndPrepareTest(){
+    datepickerContainer = $compile(datepickerHtml)($scope);
+    $rootScope.$digest();
+
+    input = datepickerContainer.find('input');
+    datepickerElement = datepickerContainer[0].getElementsByClassName('ng-flat-datepicker')[0];
+    datepicker = angular.element(datepickerElement);
+  }
+});