iT邦幫忙

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

Vue 怎麼寫測試系列 第 28

Day 28. 實作一個電商網站 - 結帳頁

前言

結帳頁我們要分三天做

  1. 基本的輸入
  2. 串上金流
  3. 重構

正文

第一步的構想很簡單

  1. 要能顯示購物車的產品
  2. 要有能輸入收件人的地方
  3. 要顯示結帳的金額

首先先簡單來做
新增一個 pages/checkout.vue

https://ithelp.ithome.com.tw/upload/images/20180114/20104476CcCPFar6aD.png

然後做完後把測試 refactor 一下
https://ithelp.ithome.com.tw/upload/images/20180114/20104476TTuBCKmWtu.png

這邊在 22~25 天的時候我們都用過了, 我們從簡介紹
想看詳細,去pull github來看 https://github.com/MOSapeizer/vue-ecommerce

唯一我們沒有介紹過的
是如何 stub methods,

譬如說, 按下 submit button要 call setOrder 的 method
我們只想測試 function 有被 call, 但不想要 function 裡面的實作
我們就會把 method stub 起來

用 jest 就可以做到, 簡單吧

it('要能送出使用者資訊', () => {

  // 這邊去 stub 一個 method
  let setOrder = jest.fn()
  wrapper.setMethods({ setOrder })
  
  expectTo.submit('#sendForm')
  expect(setOrder).toBeCalled()
})

這邊順便介紹
要做 stub
我們也可以用 sinon 這個 library

使用方法,先裝裝裝

// command line
npm i -D sinon

// in spec file
import sinon from 'sinon'
it('要能送出使用者資訊', () => {


  // 這邊去 stub 一個 method
  let setOrder = sinon.stub()
  wrapper.setMethods({ setOrder })
  
  expectTo.submit('#sendForm')
  
  // 如果 stub method 有被使用 called 會被設成 ture
  expect(setOrder.called).toBe(true)
})

喜歡哪個用哪個


上一篇
Day 27. 今天陳綺貞演唱會隔天,你懂的
下一篇
Day 29. 實作一個電商網站 - 金流
系列文
Vue 怎麼寫測試30

尚未有邦友留言

立即登入留言