Hello 컴포넌트 테스트 추가

src/components/Hello.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="hello">
-    <img src="../assets/logo.png">
-    <button type="button" id="myButton" data-loading-text="jquery with bootstrap" class="btn bg-maroon btn-flat margin" autocomplete="off" @click="clickBtn">
-          button of adminLTE of bootstrap
-    </button>
+    <img class="logo" src="../assets/logo.png">
+    <button
+      id="myButton"
+      class="btn bg-maroon btn-flat margin"
+      @click="clickBtn"
+      :disabled="loading"
+      ><template v-if="loading">{{msgBye}}</template><template v-else>{{msgHello}}</template></button>
   </div>
 </template>
 
@@ -12,15 +15,16 @@ export default {
   name: 'hello',
   data () {
     return {
-      msg: 'Welcome to Your Vue.js App'
+      msgHello: 'Hello',
+      msgBye: 'Bye',
+      loading: false
     }
   },
   methods: {
-    clickBtn (event) {
-      $(event.target).button('loading')
-
-      setTimeout(function () {
-        $(event.target).button('reset')
+    clickBtn () {
+      this.loading = !this.loading
+      setTimeout(() => {
+        this.loading = !this.loading
       }, 1000)
     }
   }

test/unit/specs/Hello.spec.js

@@ -2,10 +2,36 @@ import Vue from 'vue'
 import Hello from 'src/components/Hello'
 
 describe('Hello.vue', () => {
-  it('should render correct contents', () => {
+  it('최초 #myButton의 문자열은 msgHello와 같다', () => {
     const Constructor = Vue.extend(Hello)
     const vm = new Constructor().$mount()
-    expect(vm.$el.querySelector('.hello h1').textContent)
-      .to.equal('Welcome to Your Vue.js App')
+    const msgHello = vm.msgHello
+    expect(vm.$el.querySelector('#myButton').textContent)
+      .to.equal(msgHello)
+  })
+
+  it('#myButton을 클릭하면 msgBye를 출력하고 1초 후 msgHello 로 변경한다', () => {
+    const Constructor = Vue.extend(Hello)
+    const vm = new Constructor().$mount()
+    const msgBye = vm.msgBye
+    const myButton = vm.$el.querySelector('#myButton')
+    myButton.click()
+    vm.$nextTick(() => {
+      expect(myButton.textContent).to.equal(msgBye)
+    })
+    setTimeout(() => {
+      expect(myButton.textContent).to.equal(msgHello)
+    }, 1000)
+  })
+
+  it('clickBtn 메소드는 발생 후 1초후 원래 값으로 되돌아와야한다', () => {
+    const Constructor = Vue.extend(Hello)
+    const vm = new Constructor().$mount()
+    expect(vm.loading).to.equal(false)
+    vm.clickBtn()
+    expect(vm.loading).to.equal(true)
+    setTimeout(() => {
+      expect(vm.loading).to.equal(false)
+    }, 1000)
   })
 })