我有这样一个组件:
<template>
<q-select
clearable
:disable='disable'
emit-value
:error='error'
error-message='Invalid Equipment Number'
fill-input
hide-dropdown-icon
hide-selected
hint='Minimum 4 characters to trigger autocompletion'
input-debounce='100'
:label='label'
:loading='loading'
map-options
:model-value='mValue'
:options='options'
outlined
:readonly='readonly'
use-input
@clear='onClear'
@filter='filterFn'
@input-value='setValue'
>
<template v-slot:no-option>
<q-item>
<q-item-section class='text-grey'>No results</q-item-section>
</q-item>
</template>
</q-select>
</template>
<script lang="ts">
import EquipmentApi from 'modules/Config/models/Equipment/EquipmentApi'
import { IEquipment } from 'modules/Config/models/Equipment/EquipmentInterface'
import { defineComponent } from 'vue'
export default defineComponent({
name: 'MyEquipment',
props: {
value: {
required: false,
type: Number
},
label: {
required: false,
default: 'Equipment',
type: String
},
readonly: {
type: Boolean,
required: false
},
disable: {
type: Boolean,
required: false
},
error: {
type: Boolean,
default: false,
required: false
},
},
emits: {
fill(equipment: IEquipment) {
return equipment
},
'update:value'(val: number) {
return val
}
},
data() {
return {
mValue: null as number|null,
options: [] as number[],
loading: false
}
},
computed: {
isEquipment() {
return (this.mValue)?.toString().length === 8
}
},
watch: {
value(val) {
this.mValue = parseInt(val)
}
},
methods: {
filterFn(val: any, update: any, abort:any) {
if (val.length < 4) {
abort()
return
}
update(() => {
this.loading = true
EquipmentApi.filter(val).then((response: { data: number[] }) => {
this.options = response.data
this.loading = false
})
})
},
setValue(val: string|number) {
this.mValue = parseInt(val)
this.$emit('update:value', this.mValue)
},
onClear() {
this.mValue = null
},
},
})
</script>
我在使用该组件时,需要在输入文本中输入至少4个字符,该组件会根据这4个字符显示下拉选项,如下所示:
但是我无法使用 vitest 单元测试来复制行为。这是我写的单元测试:
import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-vitest'
import { mount } from '@vue/test-utils'
import EquipmentField from 'src/modules/Application/components/Form/EquipmentField.vue'
import { describe, expect, it } from 'vitest'
function sleep(milliseconds) {
return new Promise((resolve) => {
setTimeout(resolve, milliseconds)
})
}
installQuasarPlugin()
let wrapper = null
describe('Equipment field unit test', async () => {
beforeEach(() => {
wrapper = mount(EquipmentField)
})
it('should have a list of equipment code after we fill the input, and the list\'s first row has text in it', async () => {
wrapper.find('input').setValue('1234')
sleep(2000)
console.log(document.querySelectorAll('[role=option]').length) // length = 0. It means the dropdown is not created
})
})
我发现在实际使用中,会调用 filterFn 函数并填充选项。但不是在单元测试中。 那么如何在vitest单元测试中触发filterFn函数呢?目标是使下拉菜单出现。因为我确定下拉菜单没有出现在我的单元测试中。