From d40ec5e6436cf4443275fb9b056b60890c1697d3 Mon Sep 17 00:00:00 2001 From: flob Date: Mon, 13 Jun 2016 17:41:33 +0000 Subject: [PATCH] Added basic datepicker tests. --- gulpfile.js | 20 ++++++ karma.conf.js | 32 +++++++++ package.json | 12 +++- src/js/datepicker.directive.js | 1 - src/js/datesCalculator.factory.js | 1 - tests/datepicker.directive.spec.js | 106 +++++++++++++++++++++++++++++ 6 files changed, 168 insertions(+), 4 deletions(-) create mode 100644 karma.conf.js create mode 100644 tests/datepicker.directive.spec.js diff --git a/gulpfile.js b/gulpfile.js index fdaaf30..b85137c 100644 --- a/gulpfile.js +++ b/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) diff --git a/karma.conf.js b/karma.conf.js new file mode 100644 index 0000000..5fe8f2f --- /dev/null +++ b/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'], + }) +} diff --git a/package.json b/package.json index 458ffdd..b2338c4 100644 --- a/package.json +++ b/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" } } diff --git a/src/js/datepicker.directive.js b/src/js/datepicker.directive.js index 032910d..5fbb4b7 100644 --- a/src/js/datepicker.directive.js +++ b/src/js/datepicker.directive.js @@ -1,5 +1,4 @@ (function() { - 'use strict'; /** diff --git a/src/js/datesCalculator.factory.js b/src/js/datesCalculator.factory.js index e4d4b57..dbff582 100644 --- a/src/js/datesCalculator.factory.js +++ b/src/js/datesCalculator.factory.js @@ -1,5 +1,4 @@ (function(){ - 'use strict'; /** diff --git a/tests/datepicker.directive.spec.js b/tests/datepicker.directive.spec.js new file mode 100644 index 0000000..5841b70 --- /dev/null +++ b/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 = '
' + })); + + it("compiles it's directive", function() { + //given + $scope.datepickerConfig = {}; + datepickerHtml = '
'; + //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); + } +}); \ No newline at end of file