angular-dashboard-framework · sdorra · Sep 3, 2015 · Sep 2, 2015
diff --git 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
@@ -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
@@ -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
@@ -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 → test/e2e/dashboardEditSpec.js b/e2e/dashboardEditSpec.js → test/e2e/dashboardEditSpec.js
diff --git a/e2e/dndSpec.js → test/e2e/dndSpec.js b/e2e/dndSpec.js → test/e2e/dndSpec.js
diff --git a/e2e/helper.js → test/e2e/helper.js b/e2e/helper.js → test/e2e/helper.js
diff --git a/test/unit/dashboardSpec.js 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 = '<adf-dashboard name="{{name}}" collapsible="{{collapsible}}" maximizable="{{maximizable}}" structure="4-8" adf-model="model" />';
+
+
+        $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});
+    });
+
+});