iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
5
Modern Web

Vue 怎麼寫測試系列 第 3

Day 3. 上吧,第一支測試!

才第三天就被自己雷

屁話說完了,來看今天要做什麼。

94裝

npm install -g vue-cli
vue init webpack first-test

cd first-test
npm install

npm run dev

荼毒立死

<template>
  <div>
    <h1>My To Do List</h1>

    <ul>
      <li v-for="item in listItems">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'list',
  data () {
    return {
      listItems: ['幫結衣穿內褲', '穿結衣的內褲', '幫結衣曬四角褲'],
    }
  }
}
</script>

測試

import List from '@/components/List';
import Vue from 'vue';

describe('List.vue', () => {

  it('sholud display items', () => {
      // 警察大人,就是這裡。
  })
})

套上 vue-test-utils

想要測一個 vue method,我們可以這樣測

it('should add item to list on click', () => {
    
    // mount component
    wrapper = mount(List)
    
    // 做一點 mock
    wrapper.vm.newItem = 'mos'
    
    // 手動觸發事件
    const button = wrapper.find('button');
    button.trigger('click');

    // 檢查結果對不對
    expect(wrapper.vm.items).toContain('mos')
  })

請跟我一起偷懶用的影片君

拍影片才發現沒有比較快,反而阻力很多
但這種阻力會幫助我進步,所以接下來 27 天會維持都有影片可以看。(不可能)


上一篇
Day 2. 你看,我心中的惡魔已經那麼大了。
下一篇
Day 4. 只要你目標明確,關注細節,執行力強,那你就得加班了
系列文
Vue 怎麼寫測試30

尚未有邦友留言

立即登入留言