我无法确定如何测试发生在“已安装”生命周期钩子中的API调用。使用Moxios测试Vue中的API调用
我有一个文件组件负责显示一些关于“所有者”的信息。
这正是我想要的/在浏览器中的期望。
<template>
<div>
<h3>Owner Information</h3>
<table class="table table-striped table-condensed">
<thead>
<th>Name</th>
<th>Address</th>
<th>Social Security Number</th>
<th>Ownership Percentage</th>
</thead>
<tbody>
<tr :data-owner-id="owner.id" v-for="owner in owners">
<td>{{ owner.name }}</td>
<td>{{ owner.address }}</td>
<td>{{ owner.censored_ssn }}</td>
<td>{{ owner.ownership_percentage }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
principal_id: '',
owners: []
}
},
mounted() {
const el = document.querySelector('#owner-information');
this.principal_id = el.dataset.principal;
var self = this;
axios.get(`/principals/${this.principal_id}.json`).then(response => {
response.data.owners.map((owner) => {
owner.score = '';
owner.link = '';
owner.last_pull_date = '';
self.owners.push(owner);
});
});
.catch(e => {
console.log(e);
});
}
}
</script>
为了测试,我使用了Karma,Jasmine和Avoriaz。
这是一个失败的测试:
import { mount } from 'avoriaz'
import OwnerInformation from '../../app/javascript/packs/OwnerInformation.vue'
describe('OwnerInformation',() => {
let component
beforeAll(() => {
const element = document.createElement('div')
element.setAttribute('id', 'owner-information')
element.setAttribute('data-principal', '84033')
document.body.appendChild(element)
component = mount(OwnerInformation)
component.vm.$mount('#owner-information')
})
it('retrieves owner information from the API',() => {
expect(component.data().owners.length).toBe(1)
})
})
上述预计1,但得到0
所以,现在我想,我需要存根/模拟出以某种方式我的API请求。快速谷歌搜索引导我moxios。所以我用纱线安装它,最终拿出来。我不是100%确定将moxios.stubRequest放在哪里,但已尝试将它放在beforeAll(),beforeEach()和“it”中。
```
import moxios from moxios
import { mount } from 'avoriaz'
import OwnerInformation from '../../app/javascript/packs/OwnerInformation.vue'
describe('OwnerInformation',() => {
let component
beforeAll(() => {
const element = document.createElement('div')
element.setAttribute('id', 'owner-information')
element.setAttribute('data-principal', '12345')
document.body.appendChild(element)
component = mount(OwnerInformation)
component.vm.$mount('#owner-information')
})
beforeEach(() => {
moxios.install()
})
afterEach(() => {
moxios.uninstall()
})
it('retrieves owner information from the API',() => {
moxios.stubRequest('/principals/12345', {
status: 200,
response: {
id: 1, owners: [
{ name: 'Test Owner', address: '123 Test St.', ssn: '123-12-1234', ownership_percentage: 100
}
]
}
})
expect(component.data().owners.length).toBe(1)
})
看起来请求没有被实际存根。为了排除故障,我在axios.get()调用(它已成功注销)之前放置了一个console.log语句,并且还放了一个console.log来注销响应,但是这个从来没有出现,这让我认为axios请求不起作用,不会被moxios“拦截”。
...
console.log('CALLING API...')
axios.get(`/principals/${this.principal_id}.json`).then(response => {
console.log('***********************')
...
当我运行测试我确实看到了404,但我不确定为什么:
01 08 2017 12:49:43.483:WARN [web-server]: 404: /principals/12345.json
对我来说,最有意义的在beforeAll()
顶部存根出的要求,但是这也行不通。
我该如何安排这一点,以便moxios将API请求存根并返回以便我的测试通过?