Now first working Jest tests. Therefore Hello.vue now has a Component…

… property `hellomsg`, which we can check from within the test. The App also uses the new property and defines the hellomsg.

README.md

@@ -477,12 +477,41 @@ https://docs.npmjs.com/getting-started/updating-local-packages
 
 ## Testing 
 
+#### Install vue-test-utils
+
+https://github.com/vuejs/vue-test-utils
+
+`npm install --save-dev @vue/test-utils`
+
 #### Jest
 
 https://facebook.github.io/jest/
 
 Intro-Blogpost: https://blog.codecentric.de/2017/06/javascript-unit-tests-sind-schwer-aufzusetzen-keep-calm-use-jest/
 
+https://github.com/vuejs/vue-test-utils-jest-example
+
+###### Jest Configuration  
+
+* [package.json](frontend/package.json):
+
+```
+"scripts": {
+    ...
+    "unit": "jest --config test/unit/jest.conf.js --coverage",
+    ....
+  },
+```
+
+* [frontend/test/unit/jest.conf.js](frontend/test/unit/jest.conf.js)
+
+###### Run Unit tests
+
+`npm run unit`
+
+Run all tests (incl. E2E): `npm test`
+
+
 #### E2E tests with Nightwatch
 
 http://nightwatchjs.org/

frontend/package.json

@@ -22,6 +22,7 @@
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
+    "@vue/test-utils": "^1.0.0-beta.20",
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.26.3",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",

frontend/src/App.vue

@@ -1,12 +1,18 @@
 <template>
   <div id="app">
-    <router-view></router-view>
+    <router-view :hellomsg="msg"></router-view>
   </div>
 </template>
 
 <script>
+
 export default {
-  name: 'app'
+  name: 'app',
+  data () {
+    return {
+      msg: 'Welcome to your Vue.js powered Spring Boot App'
+    }
+  }
 }
 </script>
 

frontend/src/components/Hello.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="hello">
     <img src="./../assets/spring-boot-vuejs-logo.png">
-    <h1>{{ msg }}</h1>
+    <h1>{{ hellomsg }}</h1>
     <h2>See the sources here: </h2>
     <ul>
       <li><a href="https://github.com/jonashackt/spring-boot-vuejs" target="_blank">github.com/jonashackt/spring-boot-vuejs</a></li>
@@ -21,12 +21,7 @@
 <script>
 export default {
   name: 'hello',
-
-  data () {
-    return {
-      msg: 'Welcome to your Vue.js powered Spring Boot App'
-    }
-  }
+  props: { hellomsg: { type: String, required: true } }
 }
 
 </script>

frontend/src/components/User.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="service">
+  <div class="user">
     <h1>Create User</h1>
 
     <h3>Just some database interaction...</h3>
@@ -23,7 +23,7 @@
   import {AXIOS} from './http-common'
 
   export default {
-    name: 'service',
+    name: 'user',
 
     data () {
       return {

frontend/src/router/index.js

@@ -1,11 +1,11 @@
 import Vue from 'vue'
-import Router from 'vue-router'
+import VueRouter from 'vue-router'
 import Hello from '@/components/Hello'
 import Service from '@/components/Service'
 import Bootstrap from '@/components/Bootstrap'
 import User from '@/components/User'
 
-Vue.use(Router)
+Vue.use(VueRouter)
 
 export default new Router({
   routes: [

frontend/test/unit/.eslintrc

@@ -1,9 +1,7 @@
 {
   "env": {
-    "mocha": true
+    "jest": true
   },
   "globals": {
-    "expect": true,
-    "sinon": true
   }
 }

frontend/test/unit/jest.conf.js

@@ -19,7 +19,6 @@ module.exports = {
   ],
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   setupFiles: ['<rootDir>/test/unit/setup'],
-  mapCoverage: true,
   coverageDirectory: '<rootDir>/test/unit/coverage',
   collectCoverageFrom: [
     'src/**/*.{js,vue}',

frontend/test/unit/specs/App.spec.js

@@ -0,0 +1,17 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueRouter from 'vue-router'
+import App from '@/App';
+
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+const router = new VueRouter()
+
+describe('App component should', () => {
+  it('render without crashing', () => {
+    const wrapper = shallowMount(App, {
+      localVue,
+      router
+    });
+    expect(wrapper.find('hello')).toBeDefined();
+  });
+});

frontend/test/unit/specs/components/Hello.test.js

@@ -0,0 +1,10 @@
+import { shallowMount } from '@vue/test-utils';
+import Hello from '@/components/Hello'
+
+describe('Hello.vue', () => {
+  it('should render correct hello message', () => {
+    const wrapper = shallowMount(Hello, { propsData: { hellomsg: 'Welcome to your Jest powered Vue.js App' } });
+    const contentH1 = wrapper.find('h1');
+    expect(contentH1.text()).toEqual('Welcome to your Jest powered Vue.js App');
+  })
+})

frontend/test/unit/specs/components/User.test.js

@@ -0,0 +1,10 @@
+import { shallowMount } from '@vue/test-utils';
+import User from '@/components/User'
+
+describe('User.vue', () => {
+  it('should render Create User Button', () => {
+    const wrapper = shallowMount(User);
+    const contentButton = wrapper.find('button');
+    expect(contentButton.text()).toEqual('Create User');
+  })
+})