mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-06 12:17:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #540 from amadeus711/test-optimization-empty-test

Browse Source 
feat(empty): optimization empty test
This commit is contained in:
XieZongChen 2021-07-18 03:57:21 -05:00 committed by GitHub
commit d3f05164fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/empty/tests/Empty.spec.ts
View File

@ -1,9 +1,5 @@
import { mount } from '@vue/test-utils'
import { nextTick } from 'vue'
import { NEmpty } from '../index'
import commonThemeVars from '../styles/_common'
const descriptionSelector = '.n-empty__description'
describe('n-empty', () => {
it('should work with import on demand', () => {
@ -13,52 +9,54 @@ describe('n-empty', () => {
it('should work with slots', () => {
const wrapper = mount(NEmpty, {
slots: {
default: () => "There's nothing there.",
extra: () => 'There.'
default: () => 'test-description',
icon: () => 'test-icon',
extra: () => 'test-extra'
}
})
expect(wrapper.html()).toContain("There's nothing there.")
expect(wrapper.html()).toContain('There.')
expect(wrapper.html()).toMatchSnapshot()
expect(wrapper.find('.n-empty__description').exists()).toBe(true)
expect(wrapper.find('.n-empty__description').text()).toBe(
'test-description'
)
expect(wrapper.find('.n-empty__icon').exists()).toBe(true)
expect(wrapper.find('.n-empty__icon').text()).toBe('test-icon')
expect(wrapper.find('.n-empty__extra').exists()).toBe(true)
expect(wrapper.find('.n-empty__extra').text()).toBe('test-extra')
})
it('should render a description', () => {
const description = 'nothing'
it('should work with `description` prop', () => {
const wrapper = mount(NEmpty, {
props: {
description
description: 'test-description'
}
})
expect(wrapper.find(descriptionSelector).text()).toContain(description)
expect(wrapper.html()).toMatchSnapshot()
expect(wrapper.find('.n-empty__description').exists()).toBe(true)
expect(wrapper.find('.n-empty__description').text()).toContain(
'test-description'
)
})
it('should not render a description', async () => {
const wrapper = mount(NEmpty, {
props: {
showDescription: true
}
})
expect(wrapper.find(descriptionSelector).exists()).toBe(true)
await wrapper.setProps({
showDescription: false
})
await nextTick()
expect(wrapper.find(descriptionSelector).exists()).toBe(false)
expect(wrapper.html()).toMatchSnapshot()
})
it('should resize', async () => {
it('should work with `show-description` prop', async () => {
const wrapper = mount(NEmpty)
expect(wrapper.attributes('style')).toContain(
'--icon-size: ' + commonThemeVars.iconSizeMedium
)
await wrapper.setProps({
size: 'small'
})
await nextTick()
expect(wrapper.attributes('style')).toContain(
'--icon-size: ' + commonThemeVars.iconSizeSmall
)
expect(wrapper.html()).toMatchSnapshot()
expect(wrapper.find('.n-empty__description').exists()).toBe(true)
await wrapper.setProps({ showDescription: false })
expect(wrapper.find('.n-empty__description').exists()).toBe(false)
})
it('should work with `size` prop', async () => {
const wrapper = mount(NEmpty)
expect(wrapper.find('.n-empty').attributes('style')).toMatchSnapshot()
await wrapper.setProps({ size: 'small' })
expect(wrapper.find('.n-empty').attributes('style')).toMatchSnapshot()
await wrapper.setProps({ size: 'large' })
expect(wrapper.find('.n-empty').attributes('style')).toMatchSnapshot()
await wrapper.setProps({ size: 'huge' })
expect(wrapper.find('.n-empty').attributes('style')).toMatchSnapshot()
})
})

44
src/empty/tests/__snapshots__/Empty.spec.ts.snap
View File

@ -1,45 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`n-empty should not render a description 1`] = `
"<div class=\\"n-empty\\" style=\\"--icon-size: 40px; --font-size: 14px; --bezier: cubic-bezier(.4, 0, .2, 1); --text-color: rgba(194, 194, 194, 1); --icon-color: rgba(194, 194, 194, 1); --extra-text-color: rgb(51, 54, 57);\\">
<div class=\\"n-empty__icon\\"><i class=\\"n-base-icon\\"><svg viewBox=\\"0 0 28 28\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\">
<path d=\\"M26 7.5C26 11.0899 23.0899 14 19.5 14C15.9101 14 13 11.0899 13 7.5C13 3.91015 15.9101 1 19.5 1C23.0899 1 26 3.91015 26 7.5ZM16.8536 4.14645C16.6583 3.95118 16.3417 3.95118 16.1464 4.14645C15.9512 4.34171 15.9512 4.65829 16.1464 4.85355L18.7929 7.5L16.1464 10.1464C15.9512 10.3417 15.9512 10.6583 16.1464 10.8536C16.3417 11.0488 16.6583 11.0488 16.8536 10.8536L19.5 8.20711L22.1464 10.8536C22.3417 11.0488 22.6583 11.0488 22.8536 10.8536C23.0488 10.6583 23.0488 10.3417 22.8536 10.1464L20.2071 7.5L22.8536 4.85355C23.0488 4.65829 23.0488 4.34171 22.8536 4.14645C22.6583 3.95118 22.3417 3.95118 22.1464 4.14645L19.5 6.79289L16.8536 4.14645Z\\" fill=\\"currentColor\\"></path>
<path d=\\"M25 22.75V12.5991C24.5572 13.0765 24.053 13.4961 23.5 13.8454V16H17.5L17.3982 16.0068C17.0322 16.0565 16.75 16.3703 16.75 16.75C16.75 18.2688 15.5188 19.5 14 19.5C12.4812 19.5 11.25 18.2688 11.25 16.75L11.2432 16.6482C11.1935 16.2822 10.8797 16 10.5 16H4.5V7.25C4.5 6.2835 5.2835 5.5 6.25 5.5H12.2696C12.4146 4.97463 12.6153 4.47237 12.865 4H6.25C4.45507 4 3 5.45507 3 7.25V22.75C3 24.5449 4.45507 26 6.25 26H21.75C23.5449 26 25 24.5449 25 22.75ZM4.5 22.75V17.5H9.81597L9.85751 17.7041C10.2905 19.5919 11.9808 21 14 21L14.215 20.9947C16.2095 20.8953 17.842 19.4209 18.184 17.5H23.5V22.75C23.5 23.7165 22.7165 24.5 21.75 24.5H6.25C5.2835 24.5 4.5 23.7165 4.5 22.75Z\\" fill=\\"currentColor\\"></path>
</svg></i></div>
<!---->
<!---->
</div>"
`;
exports[`n-empty should work with \`size\` prop 1`] = `"--icon-size: 40px; --font-size: 14px; --bezier: cubic-bezier(.4, 0, .2, 1); --text-color: rgba(194, 194, 194, 1); --icon-color: rgba(194, 194, 194, 1); --extra-text-color: rgb(51, 54, 57);"`;
exports[`n-empty should render a description 1`] = `
"<div class=\\"n-empty\\" style=\\"--icon-size: 40px; --font-size: 14px; --bezier: cubic-bezier(.4, 0, .2, 1); --text-color: rgba(194, 194, 194, 1); --icon-color: rgba(194, 194, 194, 1); --extra-text-color: rgb(51, 54, 57);\\">
<div class=\\"n-empty__icon\\"><i class=\\"n-base-icon\\"><svg viewBox=\\"0 0 28 28\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\">
<path d=\\"M26 7.5C26 11.0899 23.0899 14 19.5 14C15.9101 14 13 11.0899 13 7.5C13 3.91015 15.9101 1 19.5 1C23.0899 1 26 3.91015 26 7.5ZM16.8536 4.14645C16.6583 3.95118 16.3417 3.95118 16.1464 4.14645C15.9512 4.34171 15.9512 4.65829 16.1464 4.85355L18.7929 7.5L16.1464 10.1464C15.9512 10.3417 15.9512 10.6583 16.1464 10.8536C16.3417 11.0488 16.6583 11.0488 16.8536 10.8536L19.5 8.20711L22.1464 10.8536C22.3417 11.0488 22.6583 11.0488 22.8536 10.8536C23.0488 10.6583 23.0488 10.3417 22.8536 10.1464L20.2071 7.5L22.8536 4.85355C23.0488 4.65829 23.0488 4.34171 22.8536 4.14645C22.6583 3.95118 22.3417 3.95118 22.1464 4.14645L19.5 6.79289L16.8536 4.14645Z\\" fill=\\"currentColor\\"></path>
<path d=\\"M25 22.75V12.5991C24.5572 13.0765 24.053 13.4961 23.5 13.8454V16H17.5L17.3982 16.0068C17.0322 16.0565 16.75 16.3703 16.75 16.75C16.75 18.2688 15.5188 19.5 14 19.5C12.4812 19.5 11.25 18.2688 11.25 16.75L11.2432 16.6482C11.1935 16.2822 10.8797 16 10.5 16H4.5V7.25C4.5 6.2835 5.2835 5.5 6.25 5.5H12.2696C12.4146 4.97463 12.6153 4.47237 12.865 4H6.25C4.45507 4 3 5.45507 3 7.25V22.75C3 24.5449 4.45507 26 6.25 26H21.75C23.5449 26 25 24.5449 25 22.75ZM4.5 22.75V17.5H9.81597L9.85751 17.7041C10.2905 19.5919 11.9808 21 14 21L14.215 20.9947C16.2095 20.8953 17.842 19.4209 18.184 17.5H23.5V22.75C23.5 23.7165 22.7165 24.5 21.75 24.5H6.25C5.2835 24.5 4.5 23.7165 4.5 22.75Z\\" fill=\\"currentColor\\"></path>
</svg></i></div>
<div class=\\"n-empty__description\\">nothing</div>
<!---->
</div>"
`;
exports[`n-empty should work with \`size\` prop 2`] = `"--icon-size: 34px; --font-size: 14px; --bezier: cubic-bezier(.4, 0, .2, 1); --text-color: rgba(194, 194, 194, 1); --icon-color: rgba(194, 194, 194, 1); --extra-text-color: rgb(51, 54, 57);"`;
exports[`n-empty should resize 1`] = `
"<div class=\\"n-empty\\" style=\\"--icon-size: 34px; --font-size: 14px; --bezier: cubic-bezier(.4, 0, .2, 1); --text-color: rgba(194, 194, 194, 1); --icon-color: rgba(194, 194, 194, 1); --extra-text-color: rgb(51, 54, 57);\\">
<div class=\\"n-empty__icon\\"><i class=\\"n-base-icon\\"><svg viewBox=\\"0 0 28 28\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\">
<path d=\\"M26 7.5C26 11.0899 23.0899 14 19.5 14C15.9101 14 13 11.0899 13 7.5C13 3.91015 15.9101 1 19.5 1C23.0899 1 26 3.91015 26 7.5ZM16.8536 4.14645C16.6583 3.95118 16.3417 3.95118 16.1464 4.14645C15.9512 4.34171 15.9512 4.65829 16.1464 4.85355L18.7929 7.5L16.1464 10.1464C15.9512 10.3417 15.9512 10.6583 16.1464 10.8536C16.3417 11.0488 16.6583 11.0488 16.8536 10.8536L19.5 8.20711L22.1464 10.8536C22.3417 11.0488 22.6583 11.0488 22.8536 10.8536C23.0488 10.6583 23.0488 10.3417 22.8536 10.1464L20.2071 7.5L22.8536 4.85355C23.0488 4.65829 23.0488 4.34171 22.8536 4.14645C22.6583 3.95118 22.3417 3.95118 22.1464 4.14645L19.5 6.79289L16.8536 4.14645Z\\" fill=\\"currentColor\\"></path>
<path d=\\"M25 22.75V12.5991C24.5572 13.0765 24.053 13.4961 23.5 13.8454V16H17.5L17.3982 16.0068C17.0322 16.0565 16.75 16.3703 16.75 16.75C16.75 18.2688 15.5188 19.5 14 19.5C12.4812 19.5 11.25 18.2688 11.25 16.75L11.2432 16.6482C11.1935 16.2822 10.8797 16 10.5 16H4.5V7.25C4.5 6.2835 5.2835 5.5 6.25 5.5H12.2696C12.4146 4.97463 12.6153 4.47237 12.865 4H6.25C4.45507 4 3 5.45507 3 7.25V22.75C3 24.5449 4.45507 26 6.25 26H21.75C23.5449 26 25 24.5449 25 22.75ZM4.5 22.75V17.5H9.81597L9.85751 17.7041C10.2905 19.5919 11.9808 21 14 21L14.215 20.9947C16.2095 20.8953 17.842 19.4209 18.184 17.5H23.5V22.75C23.5 23.7165 22.7165 24.5 21.75 24.5H6.25C5.2835 24.5 4.5 23.7165 4.5 22.75Z\\" fill=\\"currentColor\\"></path>
</svg></i></div>
<div class=\\"n-empty__description\\">No Data</div>
<!---->
</div>"
`;
exports[`n-empty should work with \`size\` prop 3`] = `"--icon-size: 46px; --font-size: 15px; --bezier: cubic-bezier(.4, 0, .2, 1); --text-color: rgba(194, 194, 194, 1); --icon-color: rgba(194, 194, 194, 1); --extra-text-color: rgb(51, 54, 57);"`;
exports[`n-empty should work with slots 1`] = `
"<div class=\\"n-empty\\" style=\\"--icon-size: 40px; --font-size: 14px; --bezier: cubic-bezier(.4, 0, .2, 1); --text-color: rgba(194, 194, 194, 1); --icon-color: rgba(194, 194, 194, 1); --extra-text-color: rgb(51, 54, 57);\\">
<div class=\\"n-empty__icon\\"><i class=\\"n-base-icon\\"><svg viewBox=\\"0 0 28 28\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\">
<path d=\\"M26 7.5C26 11.0899 23.0899 14 19.5 14C15.9101 14 13 11.0899 13 7.5C13 3.91015 15.9101 1 19.5 1C23.0899 1 26 3.91015 26 7.5ZM16.8536 4.14645C16.6583 3.95118 16.3417 3.95118 16.1464 4.14645C15.9512 4.34171 15.9512 4.65829 16.1464 4.85355L18.7929 7.5L16.1464 10.1464C15.9512 10.3417 15.9512 10.6583 16.1464 10.8536C16.3417 11.0488 16.6583 11.0488 16.8536 10.8536L19.5 8.20711L22.1464 10.8536C22.3417 11.0488 22.6583 11.0488 22.8536 10.8536C23.0488 10.6583 23.0488 10.3417 22.8536 10.1464L20.2071 7.5L22.8536 4.85355C23.0488 4.65829 23.0488 4.34171 22.8536 4.14645C22.6583 3.95118 22.3417 3.95118 22.1464 4.14645L19.5 6.79289L16.8536 4.14645Z\\" fill=\\"currentColor\\"></path>
<path d=\\"M25 22.75V12.5991C24.5572 13.0765 24.053 13.4961 23.5 13.8454V16H17.5L17.3982 16.0068C17.0322 16.0565 16.75 16.3703 16.75 16.75C16.75 18.2688 15.5188 19.5 14 19.5C12.4812 19.5 11.25 18.2688 11.25 16.75L11.2432 16.6482C11.1935 16.2822 10.8797 16 10.5 16H4.5V7.25C4.5 6.2835 5.2835 5.5 6.25 5.5H12.2696C12.4146 4.97463 12.6153 4.47237 12.865 4H6.25C4.45507 4 3 5.45507 3 7.25V22.75C3 24.5449 4.45507 26 6.25 26H21.75C23.5449 26 25 24.5449 25 22.75ZM4.5 22.75V17.5H9.81597L9.85751 17.7041C10.2905 19.5919 11.9808 21 14 21L14.215 20.9947C16.2095 20.8953 17.842 19.4209 18.184 17.5H23.5V22.75C23.5 23.7165 22.7165 24.5 21.75 24.5H6.25C5.2835 24.5 4.5 23.7165 4.5 22.75Z\\" fill=\\"currentColor\\"></path>
</svg></i></div>
<div class=\\"n-empty__description\\">There's nothing there.</div>
<div class=\\"n-empty__extra\\">There.</div>
</div>"
`;
exports[`n-empty should work with \`size\` prop 4`] = `"--icon-size: 52px; --font-size: 16px; --bezier: cubic-bezier(.4, 0, .2, 1); --text-color: rgba(194, 194, 194, 1); --icon-color: rgba(194, 194, 194, 1); --extra-text-color: rgb(51, 54, 57);"`;