iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 21
1
Modern Web

Vue 怎麼寫測試系列 第 21

Day 21. 實作一個電商網站 - 單一方案的產品選擇

前言

繼續前一天的實作,要開發一塊選產品的區塊
目前的基本測試是這樣

  1. 有產品名稱
  2. 有產品方案可以選
  3. 選擇產品顯示價錢
  4. 按加入購物車按鈕會加入購物車

產品方案因為滿多種類的,看產品基本需求要哪些
我們當然不想要讓消費者因為選擇障礙而放棄購買,要保持選項簡單,最好不要超過 2個

譬如有些產品需求相對簡單,就只需要一個 select 的選擇區塊
https://ithelp.ithome.com.tw/upload/images/20180106/20104476zyRw6ihYoq.png

還有這種比較麻煩的,有多個方案能選
https://ithelp.ithome.com.tw/upload/images/20180106/20104476raijPp1AA4.png

正文

我們先從第一種開始寫測試
由於測試的方法跟前面的重複性質太高了,直接挑重點看

這次的測試
我盡量保持一個 describe 資料各自獨立
也就是說 Vue 的 data property 會比較簡單
至於原因,單純是覺得這樣滿好閱讀的
方式就像是下面這樣

describe('產品資訊區塊', () => {

    describe('產品資訊區塊', () => {

        beforeEach(() => {

          // 這塊 describe 只用到這個 property
          model = {
            information: '<img id="testImage" src="sample.jpg" alt="">'
          }

          ...
        })
    })
    
    describe('產品選擇區塊', () => {
        beforeEach(() => {
        
          // 這塊 describe 會用到這些 properties
          model = {
            title: '產品模組標題',
            products: [
              {id: 1, title: '產品方案', price: 350},
              {id: 2, title: '產品方案2', price: 450},
            ]
          }
          
          ...
        })
    })
})

資料設定就只影響某個 describe 區塊
然後要測試的粗略項目都測一側,就會有美美的 output
https://ithelp.ithome.com.tw/upload/images/20180108/20104476eOK0J3If8g.png

另外我要強調一件事,這不算認真的在做 unit testing
我寫測試的目的在明確目標

譬如說像是這個

it('選擇產品後,要顯示對應的價錢', () => {

    // Vue-test-utils 並沒有提供更好的方法:
    // 要追蹤這個 issue 請到 https://github.com/vuejs/vue-test-utils/issues/260
    wrapper.setData({
        selectedProductId: 2
    })

    // 我比較想用的方法
    // const $productOptions = `${cartPanel} select option`
    // wrapper.findAll($productOptions).at(1).trigger('click')

    const $productPrice = `${cartPanel} .price`
    expectTo.contain($productPrice)
    expectTo.see(model.products[1].price, $productPrice)
})

但老實說,像是 v-model 這種官方功能,為他寫測試真的是浪費生命
所以我寫完多少有點後悔,再加上他並沒有很好的輔助工具在切換 select 裡的 option

OK, anyway 至少我們的第一種方案的測試算是基本完成了
多方案的我們放到隔天來看吧。


上一篇
Day 20. 實作一個電商網站 - 產品頁
下一篇
Day 22. 實作一個電商網站 - 多方案的產品選擇
系列文
Vue 怎麼寫測試30

尚未有邦友留言

立即登入留言