前回の続編。用途があるか不明ですが、こんな感じでできそうという話。
kntmr.hatenablog.com
filters を差し替える
例えば、こういうコンポーネントがあって、期待する値が出力されるかテストするパターン。ここでは、グローバルフィルターが設定されているものとする。
<template>
<div>
<span>{{ username | toUpper }}</span>
</div>
</template>
<script>
export default {
name: 'AvoriazTest',
props: [ 'username' ]
}
</script>
この場合は、単純に Vue.filters
で差し替える。というか、普通にテストを実行するとグローバルフィルターは参照不可のようで、何かしらのスタブは用意する必要がある模様...。ちなみにフィルター自体のテストは別途する前提。
import Vue from 'vue'
import { shallow } from 'avoriaz'
import AvoriazTest from '@/components/AvoriazTest'
Vue.filter('toUpper', (v) => 'TEST')
describe('AvoriazTest.vue', () => {
it('should render correct contents', () => {
const wrapper = shallow(AvoriazTest, { propsData: { username: 'abc' } })
expect(wrapper.find('span')[0].text()).to.equal('TEST')
})
})
methods のメソッドを差し替える
例えば、レンダリング時に data
で値を返す前に methods
に食わせるパターン。
<template>
<div>
<span>{{ changedText }}</span>
</div>
</template>
<script>
export default {
name: 'AvoriazTest',
props: [ 'username' ],
data () {
return {
changedText: this.toUpper(this.username)
}
},
methods: {
toUpper (v) {
return v.toUpperCase()
}
}
}
</script>
最初、前回のような wrapper.setMethods({ 'toUpper': stub })
でできるかと思ったんですが、これでは差し替えられず...。おそらくレンダリング時にはすでに data
の内容が計算済みのためと思われる。
というわけで、今回は shallow
または mount
でラッパーオブジェクトを生成する際に propsData
と同じように methods
を指定してスタブを差し替える。
import { shallow } from 'avoriaz'
import AvoriazTest from '@/components/AvoriazTest'
describe('AvoriazTest.vue', () => {
it('should render correct contents', () => {
const stub = (v) => 'TEST'
const wrapper = shallow(AvoriazTest, { propsData: { username: 'abc' }, methods: { toUpper: stub } })
expect(wrapper.find('span')[0].text()).to.equal('TEST')
})
})
冒頭に書いた通り、これらの用途があるのか分かりませんが、いろいろいじくりまわしていると勉強になりますね。