From befdafe11325304d9d71192c419827e9db14f3c3 Mon Sep 17 00:00:00 2001
From: ChangJoo Park <changjoo.park@partner.so>
Date: Wed, 8 Mar 2017 10:29:58 +0900
Subject: [PATCH] =?UTF-8?q?Hello=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Hello.vue      | 24 ++++++++++++++----------
 test/unit/specs/Hello.spec.js | 32 +++++++++++++++++++++++++++++---
 2 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/src/components/Hello.vue b/src/components/Hello.vue
index fc4cdf9..ce61f48 100644
--- a/src/components/Hello.vue
+++ b/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)
     }
   }
diff --git a/test/unit/specs/Hello.spec.js b/test/unit/specs/Hello.spec.js
index 85c9d0e..496db9c 100644
--- a/test/unit/specs/Hello.spec.js
+++ b/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)
   })
 })