前言

結帳頁我們要分三天做

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

正文

第一步的構想很簡單

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

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

然後做完後把測試 refactor 一下

這邊在 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)
})

喜歡哪個用哪個