added tests to DC visualisation

Motivation: Code without tests is bad code. Added way to test code written in JS by QUnit and PhantomJS.
dounoit · Oct 27, 2015 · a835ddb · a835ddb
1 parent d64639d
commit a835ddb
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 6 deletions.
diff --git a/bower.json b/bower.json
@@ -25,6 +25,8 @@
     "angular-loading-bar": "~0.8.0"
   },
   "devDependencies": {
-    "qunit": "~1.18.0"
+    "qunit": "~1.18.0",
+    "sinon": "http://sinonjs.org/releases/sinon-1.16.1.js",
+    "sinon-qunit": "~2.0.0"
   }
 }
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,4 +1,4 @@
-var gulp = require('gulp');
+var gulp = require('gulp'),
     watch = require('gulp-watch'),
     runSequence = require('run-sequence'),
     rename = require('gulp-rename'),
@@ -77,8 +77,9 @@ gulp.task('js', function(){
 });
 
 gulp.task('test', function() {
-    qunit('./src/ralph/js_tests/test_runner.html', {}, function(code) {
-        process.exit(code);
+    var runners = ['test_runner', 'angular_runner'];
+    runners.forEach(function(runner) {
+        qunit('./src/ralph/js_tests/' + runner + '.html');
     });
 });
 

diff --git a/src/ralph/dc_view/static/js/app/data_center/controllers.js b/src/ralph/dc_view/static/js/app/data_center/controllers.js
@@ -18,7 +18,7 @@
                 $scope.info = item;
             };
 
-            $scope.newRack = function(data_center, x, y) {
+            $scope.newRack = function(x, y) {
                 var rack = new RackModel();
                 rack.visualization_col = x;
                 rack.visualization_row = y;

diff --git a/src/ralph/dc_view/static/partials/data_center/data_center.html b/src/ralph/dc_view/static/partials/data_center/data_center.html
@@ -73,7 +73,7 @@
 <div class="data-center">
     <div class="grid rows-{{ data_center.visualization_rows_num }} cols-{{ data_center.visualization_cols_num }} {{ mode }}">
         <div class="grid_wrapper" ng-mousemove="updatePosition($event)">
-            <div class="rack add x-{{ actualX }} y-{{ actualY }}" ng-show="mode == 'edit'" ng-click="newRack(data_center, actualX, actualY)">+</div>
+            <div class="rack add x-{{ actualX }} y-{{ actualY }}" ng-show="mode == 'edit'" ng-click="newRack(actualX, actualY)">+</div>
             <rack-top
                 ng-mouseleave="setInfo(null)"
                 ng-mouseover="setInfo(rack)"

diff --git a/src/ralph/js_tests/angular_runner.html b/src/ralph/js_tests/angular_runner.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>QUnit Example</title>
+  <link rel="stylesheet" href="../../../bower_components/qunit/qunit/qunit.css">
+</head>
+<body>
+  <div id="qunit"></div>
+  <div id="qunit-fixture"></div>
+
+  <script src="../../../bower_components/qunit/qunit/qunit.js"></script>
+
+  <script src="../../../bower_components/sinon/index.js"></script>
+  <script src="../../../bower_components/sinon-qunit/lib/sinon-qunit.js"></script>
+
+  <script src="../../../bower_components/angular/angular.js"></script>
+  <script src="../../../bower_components/angular-resource/angular-resource.js"></script>
+  <script src="../../../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
+  <script src="../../../bower_components/angular-breadcrumb/release/angular-breadcrumb.js"></script>
+  <script src="../../../bower_components/angular-loading-bar/build/loading-bar.js"></script>
+
+  <script type="text/javascript" src="../dc_view/static/js/app/apps.js"></script>
+
+  <script type="text/javascript" src="../dc_view/static/js/app/common/filters.js"></script>
+
+  <script type="text/javascript" src="../dc_view/static/js/app/data_center/controllers.js"></script>
+  <script type="text/javascript" src="../dc_view/static/js/app/data_center/directives.js"></script>
+  <script type="text/javascript" src="../dc_view/static/js/app/data_center/services.js"></script>
+
+  <script type="text/javascript" src="../dc_view/static/js/app/rack/controllers.js"></script>
+  <script type="text/javascript" src="../dc_view/static/js/app/rack/directives.js"></script>
+  <script type="text/javascript" src="../dc_view/static/js/app/rack/services.js"></script>
+
+  <script src="./dc_view/data_center/controllers.test.js"></script>
+</body>
diff --git a/src/ralph/js_tests/dc_view/data_center/controllers.test.js b/src/ralph/js_tests/dc_view/data_center/controllers.test.js
@@ -0,0 +1,52 @@
+var serviceLocator = angular.injector(['ng', 'dataCenterVisualizationApp']);
+var $controllers = serviceLocator.get('$controller');
+var scope = {};
+var dataCenterMock = {
+    rack_set: []
+};
+var rackModel;
+
+QUnit.module('Data Center controllers', {
+    setup: function () {
+        scope = serviceLocator.get('$rootScope').$new();
+        rackModel = serviceLocator.get('RackModel');
+        $controllers('DataCenterController', {$scope: scope, data_center: dataCenterMock, RackModel: rackModel});
+    }
+});
+
+test('newRack should add rack to rack_set', function(){
+    ok(scope.data_center.rack_set.length === 0);
+    scope.newRack(1, 1);
+    ok(scope.data_center.rack_set.length === 1);
+});
+
+test('updatePosition should not update variables actualX and actualY when target is not equal currentTarget', function() {
+    var mockedPos = 1;
+    scope.actualX = mockedPos;
+    scope.actualY = mockedPos;
+    var mockedEvent = {
+        target: {element: 'rack'},
+        currentTarget: {element: 'grid'},
+        offsetX: 800,
+        offsetY: 400,
+    };
+    scope.updatePosition(mockedEvent);
+    ok(scope.actualX == mockedPos);
+    ok(scope.actualY == mockedPos);
+});
+
+test('updatePosition should update variables actualX and actualY', function() {
+    var mockedTarget = {
+        offsetLeft: 0,
+        offsetTop: 0
+    };
+    var mockedEvent = {
+        target: mockedTarget,
+        currentTarget: mockedTarget,
+        offsetX: 80,  // 2 times grid size
+        offsetY: 40
+    };
+    scope.updatePosition(mockedEvent);
+    ok(scope.actualX === 2);
+    ok(scope.actualY === 1);
+});