HelloWorld.vue

ButtonComponent.spec.js

import Vue from 'vue'
import ButtonComponent from '@/components/ButtonComponent'

describe('ButtonComponent.vue', () => {
    let vm

    // Khoi tao bien moi khi chay test case
    beforeEach(() => {
        const Constructor = Vue.extend(ButtonComponent)
        vm = new Constructor().$mount()
    })

    // Kiem tra text o moi button
    it('should have to correct button text', () => {
        expect(vm.$data.text.increment_text)
        .to.equal('Click to increment counter')
        expect(vm.$data.text.decrement_text)
        .to.equal('Click to decrement counter')
    })

    // Kiem tra emit event khi click vao button
    it('should emit event when click button', () => {
        // Tao spy cho vm.$emit
        sinon.spy(vm, '$emit')

        // Click button increment
        vm.$refs.incrementButton.click()
        // Assertion
        expect(vm.$emit).to.have.been.calledWith('incrementButtonHasBeenClicked')
        
        // Click button decrement
        vm.$refs.decrementButton.click()
        // Assertion
        expect(vm.$emit).to.have.been.calledWith('decrementButtonHasBeenClicked')
    })

})

ButtonComponent.vue

<template>
    <div>
        <button ref="incrementButton" class="increment-button" @click="onIncrementButtonClick()">{{ text.increment_text }}</button>
        <button ref="decrementButton" class="decrement-button" @click="onDecrementButtonClick()">{{ text.increment_text }}</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            text: {
                increment_text: "Click to increment counter",
                decrement_text: "Click to decrement counter",
            }
        }
    },
    methods: {
        onIncrementButtonClick() {
            this.$emit('incrementButtonHasBeenClicked')
        },
        onDecrementButtonClick() {
            this.$emit('decrementButtonHasBeenClicked')
        },
    }
}
</script>

HelloWorld.spec.js

import Vue from 'vue'
import HelloWorld from '@/components/HelloWorld'
import ButtonComponent from '@/components/ButtonComponent'

describe('HelloWorld.vue', () => {
    let vm

    // Khoi tao bien moi khi chay test case
    beforeEach(() => {
        const Constructor = Vue.extend(HelloWorld)
        vm = new Constructor().$mount()
    })

    // Kiem tra noi dung the h1
    it('should render correct contents', () => {
        expect(vm.$el.querySelector('h1').textContent)
        .to.equal('Welcome to my first TDD :)')
    })

    // Kiem tra bien count = 0
    it('should has correct init counter variable', () => {
        expect(vm.$data.count).to.equal(0)
    })

    // Kiem tra HelloWorld component co child component
    it('should has child ButtonComponent', () => {
        expect(vm.$options.components.ButtonComponent).to.contain(ButtonComponent)
    })

    // Kiem tra ham increment
    it('should increment count', () => {
        vm.increment()
        expect(vm.$data.count).to.equal(1)
    })

    // Kiem tra ham decrement
    it('should decrement count', () => {
        vm.decrement()
        expect(vm.$data.count).to.equal(-1)
    })

    // Kiem tra khi click vao button increment
    it('should increment count when click increment button', () => {
        vm.$el.querySelector('.increment-button').click()
        expect(vm.$data.count).to.equal(1)
    })

    // Kiem tra khi click vao button decrement
    it('should decrement count when click decrement button', () => {
        vm.$el.querySelector('.decrement-button').click()
        expect(vm.$data.count).to.equal(-1)
    })

})

HelloWorld.vue

<template>
  <div>
      <h1>{{ msg }}</h1>
      <h2>{{ count }}</h2>
      <button-component 
          @incrementButtonHasBeenClicked="increment()" 
          @decrementButtonHasBeenClicked="decrement()" 
      />
  </div>
</template>

<script>
import ButtonComponent from './ButtonComponent.vue'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to my first TDD :)',
      count: 0
    }
  },
  components: { ButtonComponent },
  methods: {
    increment() {
        this.count++
    },
    decrement() {
        this.count--
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>