為了實際測試一次 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)
}
打完收工。