才第三天就被自己雷

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

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 天會維持都有影片可以看。(不可能)