Add unit tests with karma

Author: ALPIXELMaiki

.gitignore

@@ -3,3 +3,4 @@ node_modules/
 .vagrant
 npm-debug.*
 *.sublime-*
+test/unit/coverage/

src/js/store.js renamed to ___store.js

@@ -1,7 +1,8 @@
 === NPM Permissions : https://docs.npmjs.com/getting-started/fixing-npm-permissions ===
 
 1.
-sudo nano /etc/apache2/sites-available/000_default.conf (remove /public on DocumentRoot)
+sudo nano /etc/apache2/sites-available/000-default.conf
+(remove /public on DocumentRoot)
 
 
 2.
@@ -13,16 +14,7 @@ mkdir ~/.npm-global && npm config set prefix '~/.npm-global' && export PATH=~/.n
 
 
 4.
-mkdir ~/.npm-global/lib
-
-4.1.
-mkdir ~/.npm-global/lib/node_modules
-
-4.2.
-mkdir ~/.npm-global/bin
-
-4.3.
-mkdir ~/.npm-global/share
+mkdir ~/.npm-global/lib && mkdir ~/.npm-global/lib/node_modules && mkdir ~/.npm-global/bin && mkdir ~/.npm-global/share
 
 
 5.
@@ -40,3 +32,17 @@ sudo npm install cross-env webpack webpack-dev-server --save
 8.
 npm run dev
 
+
+
+=== KARMA ===
+
+1.
+npm i -g karma-cli --save
+
+2.
+export PHANTOMJS_BIN=/home/vagrant/.npm-global/bin/phantomjs
+
+
+
+3.
+npm run test

memo.txt

@@ -5,27 +5,40 @@
   "author": "Mickael SURREL",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
+    "test": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"
   },
   "dependencies": {
     "ChuckCSS": "^3",
     "cross-env": "^3.2.4",
+    "karma-cli": "^1.0.1",
     "lodash": "^4.17.4",
+    "phantomjs": "^2.1.7",
     "vue": "^2.2",
-    "webpack": "^2.2.1",
+    "webpack": "^2.3.1",
     "webpack-dev-server": "^2.4.2"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.6",
     "axios": "^0.15.3",
     "babel-core": "^6.0.0",
     "babel-loader": "^6.0.0",
+    "babel-polyfill": "^6.23.0",
     "babel-preset-es2015": "^6.0.0",
     "cross-env": "^3.2.3",
     "css-loader": "^0.25.0",
     "file-loader": "^0.9.0",
     "highcharts": "^5",
+    "jasmine-core": "^2.5.2",
     "json-loader": "^0.5.4",
+    "karma": "^1.5.0",
+    "karma-babel-preprocessor": "^6.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "^1.1.0",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "0.0.30",
+    "karma-webpack": "^2.0.3",
     "less": "^2.7.2",
     "less-loader": "^2.2.3",
     "moment": "^2.17.1",
@@ -38,7 +51,6 @@
     "vue-loader": "^10.0.0",
     "vue-router": "^2.2.1",
     "vue-template-compiler": "^2.2",
-    "vuelidate": "^0.4",
-    "vuex": "^2.2.1"
+    "vuelidate": "^0.4"
   }
 }

package.json

@@ -26,13 +26,6 @@
                                 <li>Statistiques</li>
                                 <li>Logs</li>
                                 <li>Notify</li>
-                                <li>Tests with :
-                                    <ul>
-                                        <li><a href="https://github.com/avajs/ava">Ava.js</a></li>
-                                        <li><a href="https://karma-runner.github.io/1.0/index.html">Karma</a></li>
-                                        <li><a href="https://jasmine.github.io/">Jasmine</a></li>
-                                    </ul>
-                                </li>
                             </ul>
                         </div>
                     </div>

src/js/views/dashboard/dashboard.vue

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+Vue.config.productionTip = false
+
+// Polyfill fn.bind() for PhantomJS
+/* eslint-disable no-extend-native */
+Function.prototype.bind = require('function-bind')
+
+// require all test files (files that ends with .spec.js)
+const testsContext = require.context('./specs', true, /\.spec$/)
+testsContext.keys().forEach(testsContext)
+
+// require all src files except main.js for coverage.
+// you can also change this to match only the subset of files that
+// you want coverage for.
+const srcContext = require.context('../../src/js', true, /^\.\/(?!main(\.js)?$)/)
+srcContext.keys().forEach(srcContext)

test/unit/index.js

@@ -0,0 +1,43 @@
+// Karma configuration
+
+var webpackConf = require('../../webpack.config.js');
+delete webpackConf.entry
+
+module.exports = function (config) {
+  config.set({
+
+    browsers: ['PhantomJS'],
+
+    frameworks: ['jasmine'],
+
+    reporters: ['spec', 'coverage'],
+
+    files: [
+        '../../node_modules/babel-polyfill/dist/polyfill.js',
+        './index.js'
+    ],
+
+    preprocessors: {
+        './index.js': ['webpack', 'sourcemap']
+    },
+
+    webpack: webpackConf,
+
+    webpackMiddleware: {
+      noInfo: true
+    },
+
+    coverageReporter: {
+        dir: './coverage',
+        reporters: [
+            {
+                type: 'lcov',
+                subdir: '.'
+            },
+            {
+                type: 'text-summary'
+            }
+        ]
+    }
+  })
+}

test/unit/karma.conf.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import dashboardTest from '../../../src/js/views/dashboard/dashboard.vue'
+
+
+// Jasmine 2.0 tests
+describe('dashboardTest', () => {
+
+    it('correctly sets loading status when mounted', () => {
+        const Ctor = Vue.extend(dashboardTest)
+        const vm = new Ctor().$mount()
+        expect(vm.loading).toBe(false)
+    })
+})