Collapse点击事件测试

来源：7-9 为 Collapse 添加测试用例

Sam15888

2023-10-26

张老师你视频中说点击事件通不过测试是jsdom21.1.0版本的问题，但是我已经加了attachTo了还是不能响应到display：none;
而且奇怪的是console.log(firstHeader.html())打印的dom也没有这个属性，你视频里面是有display属性的

import { describe, test, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Collapse from './Collapse.vue'
import Item from './CollapseItem.vue'
describe('Collapse.vue', () => {
  test('basic collapse', async () => {
    const wrapper = mount(
      () => (
        <Collapse modelValue={['a']}>
          <Item name="a" title="title A">
            content A
          </Item>
          <Item name="b" title="title B">
            content B
          </Item>
          <Item name="c" title="title C" disabled>
            content C
          </Item>
        </Collapse>
      ),
      {
        global: {
          stubs: ['Icon'],
        },
        attachTo: document.body,
      },
    )
    const headers = wrapper.findAll('.gs-collapse-item__header')
    const contents = wrapper.findAll('.gs-collapse-item__wrapper')

    // item数量
    expect(headers.length).toBe(3)
    expect(contents.length).toBe(3)

    // titleText
    const firstHeader = headers[0]
    expect(firstHeader.text()).toBe('title A')

    // contentText
    const firstContent = contents[0]
    const secondContent = contents[1]
    expect(firstContent.isVisible()).toBeTruthy()
    expect(secondContent.isVisible()).toBeFalsy()
    expect(firstContent.text()).toBe('content A')

    // event
    await firstHeader.trigger('click')
    console.log(firstContent.html())
    expect(firstContent.isVisible()).toBeFalsy()
  })
})

写回答

2回答

张轩

2023-10-27

同学你好

能否提供一下你的代码库（git），我在本地帮你调试看一下。

Sam15888

可以直接把我贴的代码全部替换Collapse.vue文件代码，再改GS名字->VK就可以了。

2023-11-01

共1条回复

Sam15888

提问者

2023-10-26

// 刚看了是我的Collapse组件实现和课程不一样，我用的computed实现props双向绑定的

// 但是还是不知道具体原因，我代码没问题

<template>
  <div class="gs-collapse">
    <slot />
  </div>
</template>
<script setup lang="ts">
import { provide, computed } from 'vue'
import type { NameType, CollapseProps, CollapseEmits } from './types'
import { collapseContextKey } from './types'
defineOptions({
  name: 'GSCollapse',
})
const props = defineProps<CollapseProps>()
const emits = defineEmits<CollapseEmits>()
const activeNames = computed({
  get() {
    return props.modelValue
  },
  set(newValue) {
    console.log('触发!')
    emits('update:modelValue', newValue)
  },
})

if (props.accordion && activeNames.value.length > 1) {
  console.warn('accordion mode should only have one active item')
}
const handleItemClick = (item: NameType) => {
  const _activeName = [...activeNames.value]
  if (props.accordion) {
    activeNames.value = [_activeName[0] === item ? '' : item]
  } else {
    const index = _activeName.indexOf(item)
    if (index > -1) {
      // 存在，完成对应的删除
      _activeName.splice(index, 1)
    } else {
      // 不存在，删除
      _activeName.push(item)
    }
    activeNames.value = _activeName
    emits('change', activeNames.value)
  }
}
provide(collapseContextKey, {
  activeNames,
  handleItemClick,
})
</script>
<style lang="scss" scoped></style>

进阶必学，打造媲美ElementPlus的组件库

Vue3.3 + TS4 ，自主打造媲美 ElementPlus 的组件库

481 学习 · 219 问题

查看课程

相似问题

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

回答 3

关于触发事件

回答 1

代码飘红和测试不通过

回答 1

如何写hover测试用例？

回答 2

打开慕课网App查看更多内容