mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-06 12:17:13 +08:00
test(menu): fix menu render-icon test cases (#733)
* test(NMenu): fix menu render-icon test cases * docs(menu): simplify advanced usage of render-icon * docs(menu): update render-icon demos Co-authored-by: 07akioni <07akioni2@gmail.com> * docs(menu): update render-icon demos Co-authored-by: 07akioni <07akioni2@gmail.com> Co-authored-by: 07akioni <07akioni2@gmail.com>
This commit is contained in:
parent
a4e0aafb51
commit
7d1040d3b6
@ -120,8 +120,10 @@ export default defineComponent({
|
||||
return option.label
|
||||
},
|
||||
renderMenuIcon (option) {
|
||||
if (option.key === 'beverage') return true
|
||||
if (option.key === 'food') return null // falsy
|
||||
// return render placeholder for indent
|
||||
if (option.key === 'sheep-man') return h(() => null)
|
||||
// return falsy, don't render icon placeholder
|
||||
if (option.key === 'food') return null
|
||||
return h(NIcon, null, { default: () => h(BookmarkOutline) })
|
||||
},
|
||||
expandIcon () {
|
||||
|
@ -120,8 +120,10 @@ export default defineComponent({
|
||||
return option.label
|
||||
},
|
||||
renderMenuIcon (option) {
|
||||
if (option.key === 'sheep-man') return true
|
||||
if (option.key === 'food') return null // falsy
|
||||
// 渲染图标占位符以保持缩进
|
||||
if (option.key === 'sheep-man') return h(() => null)
|
||||
// 返回 falsy 值,不再渲染图标及占位符
|
||||
if (option.key === 'food') return null
|
||||
return h(NIcon, null, { default: () => h(BookmarkOutline) })
|
||||
},
|
||||
expandIcon () {
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { HappyOutline } from '@vicons/ionicons5'
|
||||
import { h } from 'vue'
|
||||
import { h, Comment } from 'vue'
|
||||
import { sleep } from 'seemly'
|
||||
import { NMenu } from '../index'
|
||||
import { NIcon } from '../../icon'
|
||||
@ -39,10 +39,6 @@ describe('n-menu', () => {
|
||||
|
||||
it('should work with `render-icon` props', async () => {
|
||||
const options = [
|
||||
{
|
||||
label: 'yeh',
|
||||
key: 'yeh'
|
||||
},
|
||||
{
|
||||
label: 'fantasy',
|
||||
key: 'fantasy'
|
||||
@ -57,10 +53,12 @@ describe('n-menu', () => {
|
||||
}
|
||||
]
|
||||
function renderMenuIcon (option: any): any {
|
||||
if (option.key === 'fantasy') return true // render indent
|
||||
if (option.key === 'mojito') return true // render indent
|
||||
if (option.key === 'initialj') return null // don't render
|
||||
return h(NIcon, null, { default: () => h(HappyOutline) }) // render this
|
||||
// return comment vnode, render placeholder for indent
|
||||
if (option.key === 'mojito') return h(Comment)
|
||||
// return falsy, don't render icon placeholder
|
||||
if (option.key === 'initialj') return null
|
||||
// otherwise, render returns vnode
|
||||
return h(NIcon, null, { default: () => h(HappyOutline) })
|
||||
}
|
||||
const wrapper = mount(NMenu, {
|
||||
props: {
|
||||
@ -68,7 +66,7 @@ describe('n-menu', () => {
|
||||
renderIcon: renderMenuIcon
|
||||
}
|
||||
})
|
||||
expect(wrapper.findAll('.n-menu-item-content__icon').length).toBe(3)
|
||||
expect(wrapper.findAll('.n-menu-item-content__icon').length).toBe(2)
|
||||
expect(wrapper.findAll('.n-icon').length).toBe(1)
|
||||
})
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user