insertion of ClickMeButton inside Hello.vue

Author: Pierre Trollé

src/components/Hello.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="hello">
+    <click-me-button></click-me-button>
     <div class="counter">{{ counter }}</div>
     <h1>{{ msg }}</h1>
     <h2>Essential Links</h2>
@@ -22,14 +23,18 @@
 </template>
 
 <script>
+  import ClickMeButton from '../components/ClickMeButton'
 export default {
-  name: 'hello',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App',
-      counter: 0
+    name: 'hello',
+    components: {
+      ClickMeButton
+    },
+    data () {
+      return {
+        msg: 'Welcome to Your Vue.js App',
+        counter: 0
+      }
     }
-  }
 }
 </script>
 

test/unit/specs/Hello.spec.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import ClickMeButton from '@/components/ClickMeButton'
 import Hello from '@/components/Hello'
 
 describe('Hello.vue', () => {
@@ -54,4 +55,9 @@ describe('Hello.vue', () => {
   it('should check the name of my vue', () => {
     expect(vm.$options.name).to.equal('hello')
   })
+
+  it('should include a clickMeButton', () => {
+    const clickMeButton = vm.$options.components.ClickMeButton
+    expect(clickMeButton).to.contain(ClickMeButton)
+  })
 })