我的測試原則

基本上就是幫自己訂目標
首先我會列幾個適中的目標直接實作
然後想想這個目標有沒有漏洞的可能後
再補上幾個修補漏洞的測試

正文

OK來開始吧，身為一個產品頁
我想要有幾個要點

1. 要有產品資訊
2. 產品能加入購物車的區塊

第一點超簡單

it('要有產品資訊', () => {
    contain(".information")

    const information = '<img id="testImage" src="sample.jpg" alt="">'
    wrapper.setData({ information })

    see(information, '.information')
})

至於第二點比較複雜，我們放在明天一起看
這邊先提幾個測試的目標

1. 產品名稱
2. 產品方案
3. 產品價錢
4. 加入購物車的按鈕

光是第二點產品方案的話，就有很多可以玩了

有些產品相對簡單，只需要一個 select 的選擇區塊

還有這種比較麻煩的，多個方案能選

至於我們需要在這個地方就實作一個購物車嗎？
這邊可能直覺會想用 vuex, 然後會想
是不是需要開一個 api 回應你

我只能提醒你，不要想太多
會讓你分心的都先 mock 起來
然後先讓基本測試過
再去考慮你心中的大餅
有些專案都是死在大餅畫太大
然後bug太多
加上重構困難，開始慢慢妥協讓自己的專案變成巨獸

murmur

跑 nuxt 真的滿爽的
npm run dev 開下去不只幫你 hot-reload vue 的修改
連設定檔有更新也會 reload

順便補上前個專案做的 helper function 還有 bootstrap
能重用的地方我我們就重用

let input = (selector, value) => {
    wrapper.find(selector).element.value = value
  }

  let click = (selector) => {
    wrapper.find(selector).trigger('click')
  }

  let contain = (selector) => {
    expect(wrapper.contains(selector)).toBe(true)
  }

  let notContain = (selector) => {
    expect(wrapper.contains(selector)).toBe(false)
  }

  let picture = (name, selector) => {
    let wrap = selector ? wrapper.find(selector) : wrapper

    expect(wrap.element.src).toContain(name)
  }

  let name = (name) => {
    expect(wrapper.name()).toEqual(name)
  }

  let see = (content, selector) => {
    let wrap = selector ? wrapper.find(selector) : wrapper

    expect(wrap.html()).toContain(content)
  }

  let cannotSee = (content, selector) => {
    let wrap = selector ? wrapper.find(selector) : wrapper

    expect(wrap.html()).not.toContain(content)
  }

  css: [
    'bootstrap/dist/css/bootstrap.min.css'
  ],