可以发一期Select或者Dropdown组件的测试吗老师

来源：13-6 Switch 开发总结

78264609

2024-11-20

老师，可以出一期Switch组件的测试吗，不知道是不是因为内部使用了之前封装的Tooltip组件，测试的时候Tooltip组件的插槽部分一直不被mount，拿不到，dropdown那里也没法测，老师，怎么解决呢

import { describe, expect, test } from 'vitest'
import { mount } from '@vue/test-utils'
import Select from '@/components//Select/Select.vue'
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import { Transition } from 'vue'
import { nextTick } from 'node:process'

describe('test::dl-switch', () => {
    describe('basic', () => {
        test('1.options', async () => {
            const selectOptions = [
                { label: 'option1', value: '1' },
                { label: 'option2', value: '2' },
                { label: 'option3', value: '3' },
                { label: 'option4', value: '4' },
            ]

            const wrapper = mount(Select, {
                props: {
                    options: selectOptions,
                    modelValue: '',
                },
                global: {
                    stubs: {
                        Icon: true,
                        Tooltip: Tooltip, //这里去掉和加上结果是一样的
                    },
                },
                attachTo: document.body,
            })

            await wrapper.trigger('click')
            await nextTick(() => {})
            console.log(wrapper.html())
            // const menu = wrapper.find('.dk-select__menu')
            // expect(menu.exists()).toBeTruthy()
        })
    })
})

<div class="dk-select">
  <div class="dk-tooltip dk-tooltip-light">
    <div class="dk-tooltip__trigger">
      <div class="dk-input dk-input--text is-suffix">
        <!-- input -->
        <!-- slots.prepend -->
        <!--v-if-->
        <div class="dk-input__wrapper">
          <!-- slots.prefix -->
          <!--v-if--><input class="dk-input__inner dk-select__tooltip-trigger" type="text" readonly="" autocomplete="off"><!-- slots.suffix --><span class="dk-input__suffix"><span class="dk-select__icon"><icon-stub icon="angle-down" border="false" fixedwidth="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" bounce="false" shake="false" beat="false" fade="false" beatfade="false" spinpulse="false" spinreverse="false" class="dk-select__angle-down is-active"></icon-stub></span>
          <!--v-if-->
          <!--v-if--></span>
        </div><!-- slots.append -->
        <!--v-if-->
      </div>
    </div>
    <transition-stub name="fade" appear="false" persisted="false" css="true">
      <!--v-if--> //这里应该在我click之后mount dk-select__menu的，但是没有
    </transition-stub>
  </div>
</div>

我之前还打印了wrapper.emitted()，我发现触发了select的visible-chage事件，但是下面这里就是没有

    <transition-stub name="fade" appear="false" persisted="false" css="true">
      <!--v-if--> 
    </transition-stub>

写回答

3回答

张轩

2024-11-25

同学你好

分享我写的的 Dropdown 成功的测试用例，你可以作为开始，在里面再进行修改：

import { mount, type VueWrapper } from '@vue/test-utils'
import { describe, expect, test, vi, afterEach } from 'vitest'
import { beforeEach } from 'vitest'
import Button from '../../src/components/Button/button.vue'
import Dropdown from '../../src/components/Dropdown/Dropdown.vue'

describe('test::dk-dropdown', () => {
    let wrapper: VueWrapper

beforeEach(() => {
    vi.useFakeTimers()
    const menuOptions = [
        {
        label: 'option1',
        key: 1,
        disabled: true,
        },
        {
        label: 'option2',
        key: 2,
        }
    ]

wrapper = mount(
    () => (
    <div>
    <div class='outer-btn'></div>
        <Dropdown
        menuOptions={menuOptions}
        trigger='click'>
        <Button>click</Button>
        </Dropdown>
    </div>
    ),
    {
        attachTo: document.body,
        global: {
            stubs: {
                Icon: true,
                transition: false,
                Transition: false
            }
        }
    }
)
})

    test('dropdown menu should visible when click', async () => {
        const btn = wrapper.get('.dk-button')
        expect(wrapper.find('.dk-dropdown__menu').exists()).toBeFalsy()
        await btn.trigger('click')
        await vi.runAllTimers()
        expect(wrapper.find('.dk-dropdown__menu').exists()).toBeTruthy()
        // 测试菜单选项
        const options = wrapper.findAll('.dk-dropdown__option')
        expect(options).toHaveLength(2)
        expect(options[0].text()).toBe('option1')
        expect(options[0].classes()).toContain('is-disabled')
    })

    // 清理
    afterEach(() => {
        wrapper.unmount()
    })
})

注意我添加了一些 stubs，让 transition 可以运行，亲测是可以通过测试的，格式有点乱，慕课网粘贴过来就这样，你自己调整一下

78264609

好的，谢谢老师

2024-11-25

共1条回复

张轩

2024-11-24

同学你好

抱歉刚看到回复，之前不知道为什么没有提醒。

刚看了你的 Switch 测试用例，并没有使用Tooltip 啊，并且测试用例都是通过的，是不是代码没有更新呢？

78264609

张轩