From 80b023b1c171ee06d885489ef7a2b985681e8bb4 Mon Sep 17 00:00:00 2001 From: Raul Gomis Date: Wed, 2 Sep 2015 23:20:20 +0200 Subject: [PATCH] Added karma unit test support and first unit tests for dashboard directive. Moved e2e tests to a particular folder. --- gulpfile.js | 13 ++- karma.conf.js | 60 ++++++++++++ package.json | 7 +- protractor.conf.js | 2 +- {e2e => test/e2e}/dashboardEditSpec.js | 0 {e2e => test/e2e}/dndSpec.js | 0 {e2e => test/e2e}/helper.js | 0 test/unit/dashboardSpec.js | 126 +++++++++++++++++++++++++ 8 files changed, 205 insertions(+), 3 deletions(-) create mode 100644 karma.conf.js rename {e2e => test/e2e}/dashboardEditSpec.js (100%) rename {e2e => test/e2e}/dndSpec.js (100%) rename {e2e => test/e2e}/helper.js (100%) create mode 100644 test/unit/dashboardSpec.js diff --git a/gulpfile.js b/gulpfile.js index 5410cf4b..2e359a34 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -30,6 +30,7 @@ var $ = require('gulp-load-plugins')(); var del = require('del'); var jsReporter = require('jshint-stylish'); var pkg = require('./package.json'); +var karmaServer = require('karma').Server; var name = pkg.name; var templateOptions = { @@ -219,6 +220,16 @@ gulp.task('webserver', ['install-widgets'], function(){ gulp.task('serve', ['webserver', 'watch']); + +gulp.task('test', ['build', 'karma']); +gulp.task('karma', ['build'], function(done) { + new karmaServer({ + configFile : __dirname +'/karma.conf.js', + singleRun: true + }, done).start(); +}); + + /** e2e **/ // The protractor task @@ -247,7 +258,7 @@ gulp.task('e2e-server', ['install-widgets'], function(){ // Setting up the test task gulp.task('e2e', ['e2e-server', 'webdriver_update'], function(cb) { - gulp.src('e2e/*Spec.js') + gulp.src('test/e2e/*Spec.js') .pipe(protractor(protractorOptions)) .on('error', function(e) { // stop webserver diff --git a/karma.conf.js b/karma.conf.js new file mode 100644 index 00000000..e3190471 --- /dev/null +++ b/karma.conf.js @@ -0,0 +1,60 @@ +module.exports = function(config) { + config.set({ + + // Base path, that will be used to resolve files and exclude + basePath: '', + + // Frameworks to use + frameworks: ['jasmine'], + + // List of files / patterns to load in the browser + files: [ + 'sample/components/jquery/dist/jquery.js', + 'sample/components/es5-shim/es5-shim.js', + 'sample/components/angular/angular.js', + 'sample/components/angular-mocks/angular-mocks.js', + 'sample/components/angular-route/angular-route.js', + 'sample/components/angular-bootstrap/ui-bootstrap.js', + 'sample/components/Sortable/Sortable.js', + 'sample/components/bootstrap/dist/js/bootstrap.js', + 'sample/components/angular-local-storage/dist/angular-local-storage.js', + + 'dist/angular-dashboard-framework.js', + 'test/unit/**/*Spec.js' + ], + + // List of files to exclude + exclude: [], + + // Web server port + port: 9876, + + // Level of logging + // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG + logLevel: config.LOG_INFO, + + // Enable / disable watching file and executing tests whenever any file changes + autoWatch: true, + + // Start these browsers, currently available: + // - Chrome + // - ChromeCanary + // - Firefox + // - Opera + // - Safari (only Mac) + // - PhantomJS + // - IE (only Windows) + browsers: ['PhantomJS'], + + // Which plugins to enable + plugins: [ + 'karma-phantomjs-launcher', + 'karma-chrome-launcher', + 'karma-jasmine' + ], + + // Continuous Integration mode + // if true, it capture browsers, run tests and exit + singleRun: false + }); +}; diff --git a/package.json b/package.json index dc8a64c7..fd4715a0 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,11 @@ "gulp-uglify": "^1.4.0", "gulp-usemin": "^0.3.14", "gulp-useref": "^1.3.0", - "jshint-stylish": "^2.0.1" + "jshint-stylish": "^2.0.1", + "karma": "^0.13.9", + "karma-jasmine": "^0.3.6", + "karma-chrome-launcher": "^0.2.0", + "karma-firefox-launcher": "~0.1", + "karma-phantomjs-launcher": "^0.2.1" } } diff --git a/protractor.conf.js b/protractor.conf.js index d8c64ef5..db32ee07 100644 --- a/protractor.conf.js +++ b/protractor.conf.js @@ -13,7 +13,7 @@ exports.config = { // Spec patterns are relative to the current working directly when // protractor is called. - specs: ['e2e/*Spec.js'], + specs: ['test/e2e/*Spec.js'], // Options to be passed to Jasmine-node. jasmineNodeOpts: { diff --git a/e2e/dashboardEditSpec.js b/test/e2e/dashboardEditSpec.js similarity index 100% rename from e2e/dashboardEditSpec.js rename to test/e2e/dashboardEditSpec.js diff --git a/e2e/dndSpec.js b/test/e2e/dndSpec.js similarity index 100% rename from e2e/dndSpec.js rename to test/e2e/dndSpec.js diff --git a/e2e/helper.js b/test/e2e/helper.js similarity index 100% rename from e2e/helper.js rename to test/e2e/helper.js diff --git a/test/unit/dashboardSpec.js b/test/unit/dashboardSpec.js new file mode 100644 index 00000000..ed7fa507 --- /dev/null +++ b/test/unit/dashboardSpec.js @@ -0,0 +1,126 @@ +'use strict'; + +describe('Dashboard Directive tests', function() { + + var $compile, + $rootScope, + $scope, + directive; + + // Load the myApp module, which contains the directive + beforeEach(module('adf')); + + // Store references to $rootScope and $compile + // so they are available to all tests in this describe block + beforeEach(inject(function(_$compile_, _$rootScope_){ + // The injector unwraps the underscores (_) from around the parameter names when matching + $compile = _$compile_; + $rootScope = _$rootScope_; + $scope = $rootScope.$new(); + directive = ''; + + + $scope.name = 'sample-01'; + $scope.model = { + title: "Sample 01", + structure: "4-8", + rows: [{ + columns: [{ + styleClass: "col-md-4", + widgets: [] + }] + }] + }; + $scope.collapsible = false; + $scope.maximizable = false; + + })); + + function compileTemplate(template) { + // Compile a piece of HTML containing the directive + var el = $compile(template)($scope); + $scope.$digest(); + return el; + } + + it('should have the proper name in the h1 element (default template)', function() { + + var element = compileTemplate(directive); + expect(element.find("h1").text().trim()).toBe('Sample 01'); + }); + + it('should not change the name when the title changes (default template)', function() { + + var element = compileTemplate(directive); + expect(element.find("h1").text().trim()).toBe('Sample 01'); + + // Change the name of the dashboard + $scope.name = 'Sample 02'; + expect(element.find("h1").text().trim()).toBe('Sample 01'); + }); + + it('should not change the name when the title changes (default template)', function() { + + var element = compileTemplate(directive); + expect(element.find("h1").text().trim()).toBe('Sample 01'); + + // Change the name of the dashboard + $scope.name = 'Sample 02'; + expect(element.find("h1").text().trim()).toBe('Sample 01'); + }); + + it('should toggle edit mode correctly', function() { + + var element = compileTemplate(directive); + expect(element.controller).not.toBeUndefined(); + expect($scope).not.toBeUndefined(); + + var isolatedScope = element.isolateScope(); + + // By default it is false + expect(isolatedScope.editMode).toBeFalsy(); + + // Enable edit mode + isolatedScope.toggleEditMode(); + expect(isolatedScope.editMode).toBeTruthy(); + + // Disable edit mode + isolatedScope.toggleEditMode(); + expect(isolatedScope.editMode).toBeFalsy(); + }); + + it('should cancel edit mode correctly', function() { + + var element = compileTemplate(directive); + expect(element.controller).not.toBeUndefined(); + expect($scope).not.toBeUndefined(); + + var isolatedScope = element.isolateScope(); + + // By default it is false + expect(isolatedScope.editMode).toBeFalsy(); + + // Enable edit mode + isolatedScope.toggleEditMode(); + expect(isolatedScope.editMode).toBeTruthy(); + + // Cancel edit mode + isolatedScope.cancelEditMode(); + expect(isolatedScope.editMode).toBeFalsy(); + }); + + it('should dispatch the `dfDashboardCollapseExapand` event downwards to all child scopes (and their children)', function() { + + var element = compileTemplate(directive); + expect(element.controller).not.toBeUndefined(); + expect($scope).not.toBeUndefined(); + + var isolatedScope = element.isolateScope(); + spyOn($rootScope, '$broadcast'); + + // Enable edit mode + isolatedScope.collapseAll(1); + expect($rootScope.$broadcast).toHaveBeenCalledWith('adfDashboardCollapseExapand',{collapseExpandStatus : 1}); + }); + +});