為了實際測試一次 api request
我有新增一個 json-server 整合到開發模式
只要簡單的跑

npm run dev

就會跟著 webpack 一起運作了

git 傳送門 https://github.com/MOSapeizer/vue-reddit

當然也可以單獨跑來玩玩看

npm run fake-api

連上 http://localhost:3000/ 就可以看到

今天的文章稍微複雜一點，因為用了很多工具
前端最爽的地方就在有很多新的工具可以用
但最痛的地方也在有很多新的工具得要用

一樣我們先寫測試
新增一個假文章的資料結構

it('發文的區塊要可以發表文章', (done) => {
    let newPost = {title: 'the title4.', author: '黑人', content: 'this is my message'}
})

然後假設依序輸入進 input

    input('#author', newPost.author)
    input('#title', newPost.title)
    input('#content', newPost.content)

這邊我一樣寫了一個 helper function

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

然後按下新增文章的按鈕後
我們希望這邊會發一個 request 給 json-server
然後我們回傳 server 認證過的資料回去

    click('#sendPost')

    moxios.wait(function () {
    
      // 這邊是跟前面文章不同的用法，更偷懶
      // 會攔截 moxios 最近的一個 request, 然後回傳我們設定的 response
      let request = moxios.requests.mostRecent()

      request.respondWith({
        status: 200,
        // 這邊回傳我們假資料，當然我們寫測試基本是期待實作會接受這個作法
        response: {
          id: 4,
          title: 'the title4.',
          author: '黑人',
          content: 'this is my message',
          thumbnail: '',
          show: false
        }
      }).then(function () {

        see('title4', '.post:last-child')
        see('黑人', '.post:last-child')
        
        // 由於是做非同步，我們要明確的跟 jest 說測試到這邊才算結束
        // 不然這個測試區塊跑完，測試就直接跟說過了，不會等非同步的處理
        done()
      })
    })

測試到這邊算粗略寫完了

至於實作，就簡單多了
就是單純的綁到 v-model

<input placeholder="作者" id="author" name="author" v-model="form.author" />
<input placeholder="標題" id="title" name="title" v-model="form.title" />
<textarea placeholder="文章" rows="4" id="content" name="content" v-model="form.content" ></textarea>
<button id="sendPost" type="submit"> 新增文章 </button>e

然後因為有 webpack, 這邊還可以用 async await
超爽

async addPost () {
    let response = await axios.post('http://localhost:3000/posts', this.form)
    this.posts.push(response.data)
}

打完收工。