Start testing with Karma and Jasmine + Several changes

README.md

@@ -1,8 +1,22 @@
 WebApps 3: Project
 =
 
-Drawing webapplication
+Drawing Web Application
 -
 
+This Application was developed for my college class "WebApps III".
+
+Features:
+-
+* Draw together with others
+* Save your drawings
+* Authentication (& sessions)
+* Custom colors
+* Custom brush size
+* Clear the Canvas
+* Home Page showing several saved drawings
+* More to come...
+
+
 ##### By:
 Thomas Buys, 3D

client/app/auth/auth.config.js

@@ -1,5 +1,4 @@
 function AuthConfig($stateProvider, $httpProvider) {
-  'ngInject';
 
   // Define the routes
   $stateProvider
@@ -29,5 +28,6 @@ function AuthConfig($stateProvider, $httpProvider) {
   });
 
 };
+AuthConfig.$inject = ["$stateProvider", "$httpProvider"]; //Explicit annotation needed!
 
 export default AuthConfig;

client/app/canvas/canvas.config.js

@@ -1,5 +1,4 @@
 function CanvasConfig($stateProvider) {
-  'ngInject';
 
   $stateProvider
   .state('app.canvas', {
@@ -15,5 +14,6 @@ function CanvasConfig($stateProvider) {
   });
 
 };
+CanvasConfig.$inject = ["$stateProvider"]; //Explicit annotation needed!
 
 export default CanvasConfig;

client/app/canvas/canvas.controller.js

@@ -51,7 +51,7 @@ class CanvasCtrl {
 		this.App.canvas.onselectstart = () => {
 			return false;
 		};
-		this.App.ctx.fillStyle = 'solid';
+		this.App.ctx.fillStyle = '#000000';
 		this.App.ctx.strokeStyle = '#000000';
 		this.App.ctx.lineWidth = 5;
 		this.App.ctx.lineCap = 'round';

client/app/canvas/canvas.spec.js

@@ -0,0 +1,51 @@
+describe("Canvas Controller Test", () => {
+    describe("When I call canvas.init", () => {
+
+        beforeEach(angular.mock.module('app'));
+
+		let scope;
+		let vm;
+
+		beforeEach(inject(($controller, _$rootScope_) => {
+			scope = _$rootScope_.$new();
+			vm = $controller('CanvasCtrl', { $scope: scope });
+		}));
+
+        it('sets the brush size to 5', () => {
+			const size = 5;
+			expect(vm.App.ctx.lineWidth).toEqual(size);
+            expect(vm.ownBrushSize).toEqual(size);
+        });
+
+		it('sets the fillStyle to solid', () => {
+			const lineCap = "round";
+            expect(vm.App.ctx.lineCap).toEqual(lineCap);
+        });
+
+		it('changes brush size correctly when method is called', () => {
+			const initialSize = 5;
+			const newSize = 85;
+			expect(vm.App.ctx.lineWidth).toEqual(initialSize);
+			expect(vm.ownBrushSize).toEqual(initialSize);
+			vm.App.changeBrushSize(85);
+            expect(vm.App.ctx.lineWidth).toEqual(newSize);
+			expect(vm.ownBrushSize).toEqual(newSize);
+        });
+
+		it('sets the alert boolean to false initially', () => {
+			const bool = false;
+			expect(scope.showAlert).toEqual(bool);
+        });
+
+		it('changes brush color correctly when method is called', () => {
+			const initialColor = "#000000";
+			const newColor = "#111111";
+			expect(vm.App.ctx.strokeStyle).toEqual(initialColor);
+			expect(vm.ownColor).toEqual(initialColor);
+			scope.submitCustomColor("#111111");
+            expect(vm.App.ctx.strokeStyle).toEqual(newColor);
+			expect(vm.ownColor).toEqual(newColor);
+        });
+
+   });
+});

client/app/config/app.config.js

@@ -1,7 +1,6 @@
 import authInterceptor from './auth.interceptor';
 
 function AppConfig($httpProvider, $stateProvider, $locationProvider, $urlRouterProvider) {
-  'ngInject';
 
   $httpProvider.interceptors.push(authInterceptor);
 
@@ -25,5 +24,6 @@ function AppConfig($httpProvider, $stateProvider, $locationProvider, $urlRouterP
   $urlRouterProvider.otherwise('/');
 
 }
+AppConfig.$inject = ["$httpProvider", "$stateProvider", "$locationProvider", "$urlRouterProvider"]; //Explicit annotation needed!
 
 export default AppConfig;

client/app/config/app.run.js

@@ -17,5 +17,6 @@ function AppRun(AppConstants, $rootScope) {
   };
 
 }
+AppRun.$inject = ["AppConstants", "$rootScope"]; //Explicit annotation needed!
 
 export default AppRun;

client/app/config/auth.interceptor.js

@@ -17,5 +17,6 @@ function authInterceptor(JWT, AppConstants, $window, $q) {
 		}
 	}
 }
+authInterceptor.$inject = ["JWT", "AppConstants", "$window", "$q"]; //Explicit annotation needed!
 
 export default authInterceptor;

client/app/home/home.config.js

@@ -1,5 +1,4 @@
 function HomeConfig($stateProvider) {
-  'ngInject';
 
   $stateProvider
   .state('app.home', {
@@ -11,5 +10,6 @@ function HomeConfig($stateProvider) {
   });
 
 };
+HomeConfig.$inject = ["$stateProvider"]; //Explicit annotation needed!
 
 export default HomeConfig;

client/app/services/jwt.service.js

@@ -17,4 +17,5 @@ export default class JWT {
 	destroy() {
 		this._$window.localStorage.removeItem(this._AppConstants.jwtKey);
 	}
-}
+}
+JWT.$inject = ["AppConstants", "$window"]; //Explicit annotation needed!

karma.conf.babel.js

@@ -0,0 +1,94 @@
+// Karma configuration
+// Generated on Tue Dec 06 2016 21:41:03 GMT+0100 (Romance Standard Time)
+
+module.exports = function(config) {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine'],
+
+
+    // list of files / patterns to load in the browser
+    files: [
+		'https://code.jquery.com/jquery-3.1.1.js',
+		'node_modules/angular/angular.js',
+		'node_modules/angular-mocks/angular-mocks.js',
+		'node_modules/angular-ui-router/release/angular-ui-router.js',
+		'node_modules/angular-material/angular-material.js',
+		'node_modules/angular-animate/angular-animate.js',
+		'node_modules/angular-aria/angular-aria.js',
+		'http://localhost:9876/socket.io/socket.io.js',
+		'client/app/app.js',
+		{ pattern: 'test-context.js', watched: false }
+    ],
+
+
+    // list of files to exclude
+    exclude: [
+    ],
+
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+		'client/app/app.js': ['webpack'],
+		'test-context.js': ['webpack']
+    },
+	webpack: {
+            module: {
+                loaders: [
+                    { test: /\.js/, exclude: /node_modules/, loader: 'babel-loader' }
+                ]
+            },
+			node: {
+				fs: 'empty'
+			},
+            watch: true
+        },
+        webpackServer: {
+            noInfo: true
+    },
+
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['progress'],
+
+
+    // web server port
+    port: 9876,
+
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+    // 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
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['Chrome'],
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: false,
+
+    // Concurrency level
+    // how many browser should be started simultaneous
+    concurrency: Infinity
+  })
+}

package.json

@@ -19,6 +19,7 @@
   },
   "homepage": "https://github.com/gevalo1/WebApps3#readme",
   "devDependencies": {
+    "angular-mocks": "^1.5.8",
     "babel-cli": "^6.18.0",
     "babel-core": "^6.18.2",
     "babel-loader": "^6.2.7",
@@ -45,6 +46,13 @@
     "gulp-notify": "^2.2.0",
     "gulp-rename": "^1.2.2",
     "gulp-uglify": "^2.0.0",
+    "jasmine": "^2.5.2",
+    "jasmine-core": "^2.5.2",
+    "karma": "^1.3.0",
+    "karma-babel-preprocessor": "^6.0.1",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-jasmine": "^1.0.2",
+    "karma-webpack": "^1.8.0",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0"
   },
@@ -57,13 +65,13 @@
     "body-parser": "1.15.2",
     "cookie-parser": "1.4.3",
     "cors": "^2.8.1",
-    "ejs": "2.5.2",
+    "ejs": "2.5.5",
     "express": "4.14.0",
     "gulp": "^3.9.1",
     "jsonwebtoken": "^7.1.9",
     "mongoose": "^4.6.6",
     "morgan": "1.7.0",
-    "serve-favicon": "2.3.0",
+    "serve-favicon": "2.3.2",
     "socket.io": "^1.5.1"
   }
 }