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:
汪磊 2021-08-09 23:57:08 +08:00 committed by GitHub
parent a4e0aafb51
commit 7d1040d3b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 14 deletions

View File

@ -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 () {

View File

@ -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 () {

View File

@ -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)
})