如何使用 vitest 对包含 q-select 的组件进行单元测试?我想检查是否出现下拉列表

问题描述 投票:0回答:0

我有这样一个组件:

<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函数呢?目标是使下拉菜单出现。因为我确定下拉菜单没有出现在我的单元测试中。

vue.js unit-testing vuejs3 quasar vitest
© www.soinside.com 2019 - 2024. All rights reserved.