mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-07 13:48:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(menu): add menu render-label dropdown test (#404)

Browse Source
This commit is contained in:
cyn 2021-07-05 22:04:56 +08:00 committed by GitHub
parent 1593b37d10
commit b245e56b5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 170 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/menu/tests/Menu.spec.ts
View File

@ -1,7 +1,13 @@
import { mount } from '@vue/test-utils'
import { h } from 'vue'
import { h, nextTick } from 'vue'
import { NMenu } from '../index'
async function sleep (ms: number): Promise<void> {
return await new Promise((resolve) => {
setTimeout(resolve, ms)
})
}
describe('n-menu', () => {
it('should work with import on demand', () => {
mount(NMenu)
@ -32,7 +38,7 @@ describe('n-menu', () => {
}
})
})
it('should work with `render-label` props', async () => {
it('should tooltip work with `render-label` props', async () => {
const options = [
{
label: () =>
@ -78,4 +84,59 @@ describe('n-menu', () => {
expect(wrapper.find('[target="_blank"]').exists()).toBe(true)
expect(wrapper.find('[href="test2"]').exists()).toBe(true)
})
it('should dropdown work with `render-label` props', async () => {
const options = [
{
label: 'jj',
key: 'jj'
},
{
label: 'jay',
key: 'jay',
children: [
{
type: 'group',
label: 'song-group',
key: 'group',
children: [
{
label: 'fantasy',
key: 'fantasy'
},
{
label: 'mojito',
key: 'mojito'
}
]
}
]
}
]
const renderLabel = (option: any): any => {
return h(
'a',
{
class: option.key,
href: option.key,
rel: option.key
},
{ default: () => option.label }
)
}
const wrapper = mount(NMenu, {
props: {
options: options,
collapsed: true,
renderLabel: renderLabel
}
})
expect(wrapper.find('.n-submenu').exists()).toBe(true)
await wrapper.find('.n-submenu').trigger('mouseenter')
await sleep(150) // must add sleep
await nextTick(() => {
expect(document.body).toMatchSnapshot()
expect(document.querySelectorAll('a').length).toEqual(2)
expect(document.querySelectorAll('a.fantasy').length).toEqual(1)
})
})
})

107
src/menu/tests/__snapshots__/Menu.spec.ts.snap Normal file
View File

@ -0,0 +1,107 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`n-menu should dropdown work with \`render-label\` props 1`] = `
<body>
<div
class="v-binder-follower-container"
style="z-index: 2000;"
>
<div
class="v-binder-follower-content"
>
<transition-stub>
<div
class="n-dropdown-menu n-popover n-dropdown"
style="--box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05); --bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --font-size: 14px; --text-color: rgb(51, 54, 57); --color: #fff; --divider-color: rgb(239, 239, 245); --border-radius: 3px; --arrow-height: 6px; --arrow-offset: 10px; --arrow-offset-vertical: 10px; --padding: 4px 0; --space: 6px; --space-arrow: 10px; --option-height: 40px; --option-prefix-width: 16px; --option-icon-prefix-width: 40px; --option-suffix-width: 16px; --option-icon-suffix-width: 36px; --option-icon-size: 18px; --option-opacity-disabled: 0.5; --option-color-hover: rgb(243, 243, 245); --option-color-active: rgba(24, 160, 88, 0.1); --option-text-color: rgb(51, 54, 57); --option-text-color-hover: rgb(51, 54, 57); --option-text-color-active: #18a058; --option-text-color-child-active: #18a058; --prefix-color: rgb(51, 54, 57); --suffix-color: rgb(51, 54, 57); --group-header-text-color: rgb(158, 164, 170);"
>
<div
class="n-dropdown-option"
>
<div
class="n-dropdown-option-body n-dropdown-option-body--group"
>
<div
__dropdown-option="true"
class="n-dropdown-option-body__prefix"
/>
<div
__dropdown-option="true"
class="n-dropdown-option-body__label"
>
song-group
</div>
<div
__dropdown-option="true"
class="n-dropdown-option-body__suffix"
/>
</div>
</div>
<div
class="n-dropdown-option"
>
<div
class="n-dropdown-option-body"
>
<div
__dropdown-option="true"
class="n-dropdown-option-body__prefix"
/>
<div
__dropdown-option="true"
class="n-dropdown-option-body__label"
>
<a
class="fantasy"
href="fantasy"
rel="fantasy"
>
fantasy
</a>
</div>
<div
__dropdown-option="true"
class="n-dropdown-option-body__suffix"
/>
</div>
<!---->
</div>
<div
class="n-dropdown-option"
>
<div
class="n-dropdown-option-body"
>
<div
__dropdown-option="true"
class="n-dropdown-option-body__prefix"
/>
<div
__dropdown-option="true"
class="n-dropdown-option-body__label"
>
<a
class="mojito"
href="mojito"
rel="mojito"
>
mojito
</a>
</div>
<div
__dropdown-option="true"
class="n-dropdown-option-body__suffix"
/>
</div>
<!---->
</div>
</div>
</transition-stub>
</div>
</div>
</body>
`;