mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-21 04:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(space): add test case (#1006)

Browse Source 
* test(space): add test case

* test(space): branch cover
This commit is contained in:
kalykun 2021-08-29 23:09:04 +08:00 committed by GitHub
parent 074a3936ac
commit ed43daf9c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 81 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/space/src/Space.tsx
View File

@ -24,7 +24,12 @@ type Align =
| 'flex-end'
| 'flex-start'
type Justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between'
export type Justify =
| 'start'
| 'end'
| 'center'
| 'space-around'
| 'space-between'
const spaceProps = {
...(useTheme.props as ThemeProps<SpaceTheme>),
align: String as PropType<Align>,

44
src/space/tests/Space.spec.tsx
View File

@ -1,6 +1,7 @@
import { mount, VueWrapper } from '@vue/test-utils'
import { h, Fragment, createCommentVNode } from 'vue'
import { NSpace } from '../index'
import type { Justify } from '../src/Space'
const getChildrenNode = (wrapper: VueWrapper<any>): any[] => {
return (
@ -46,6 +47,26 @@ describe('n-space', () => {
expect(wrapper.html()).toMatchSnapshot()
})
it('render space array size', async () => {
const wrapper = mount({
render () {
return (
<NSpace size={[20, 30]}>
{{
default: () => [<div>1</div>, <div>2</div>]
}}
</NSpace>
)
}
})
const childNodes = getChildrenNode(wrapper)
expect(childNodes[0].attributes('style')).toContain('margin-right: 20px;')
await wrapper.setProps({ vertical: true })
expect(childNodes[0].attributes('style')).toContain('margin-bottom: 30px;')
})
it('render vertical space', () => {
const wrapper = mount({
render () {
@ -62,6 +83,16 @@ describe('n-space', () => {
expect(wrapper.html()).toMatchSnapshot()
})
it('should work with `inline` prop', () => {
const wrapper = mount(NSpace, {
props: {
inline: true
}
})
expect(wrapper.attributes('style')).toContain('display: inline-flex;')
})
it('should render with invalidElement', () => {
const wrapper = mount({
render () {
@ -86,7 +117,13 @@ describe('n-space', () => {
})
it('render justify space', () => {
const justifyList = ['start', 'end'] as Array<'start' | 'end'>
const justifyList: Justify[] = [
'start',
'end',
'center',
'space-around',
'space-between'
]
justifyList.forEach((pos) => {
const wrapper = mount({
render () {
@ -99,8 +136,11 @@ describe('n-space', () => {
)
}
})
expect(wrapper.attributes('style')).toContain(
`justify-content: flex-${pos};`
`justify-content: ${
['start', 'end'].includes(pos) ? 'flex-' + pos + ';' : pos
}`
)
expect(wrapper.html()).toMatchSnapshot()
})

33
src/space/tests/__snapshots__/Space.spec.tsx.snap
View File

@ -30,6 +30,39 @@ exports[`n-space render justify space 2`] = `
</div>"
`;
exports[`n-space render justify space 3`] = `
"<div role=\\"none\\" class=\\"n-space\\" style=\\"display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;\\">
<div role=\\"none\\" style=\\"max-width: 100%; margin-right: 12px; padding-top: 4px; padding-bottom: 4px;\\">
<div>1</div>
</div>
<div role=\\"none\\" style=\\"max-width: 100%; padding-top: 4px; padding-bottom: 4px;\\">
<div>2</div>
</div>
</div>"
`;
exports[`n-space render justify space 4`] = `
"<div role=\\"none\\" class=\\"n-space\\" style=\\"display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;\\">
<div role=\\"none\\" style=\\"max-width: 100%; margin-right: 6px; margin-left: 6px; padding-top: 4px; padding-bottom: 4px;\\">
<div>1</div>
</div>
<div role=\\"none\\" style=\\"max-width: 100%; margin-right: 6px; margin-left: 6px; padding-top: 4px; padding-bottom: 4px;\\">
<div>2</div>
</div>
</div>"
`;
exports[`n-space render justify space 5`] = `
"<div role=\\"none\\" class=\\"n-space\\" style=\\"display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; margin-top: -4px; margin-bottom: -4px;\\">
<div role=\\"none\\" style=\\"max-width: 100%; margin-right: 6px; padding-top: 4px; padding-bottom: 4px;\\">
<div>1</div>
</div>
<div role=\\"none\\" style=\\"max-width: 100%; margin-left: 6px; padding-top: 4px; padding-bottom: 4px;\\">
<div>2</div>
</div>
</div>"
`;
exports[`n-space render space number size 1`] = `"<div role=\\"none\\" class=\\"n-space\\" style=\\"display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; margin-top: -10px; margin-bottom: -10px;\\"></div>"`;
exports[`n-space render space string size 1`] = `"<div role=\\"none\\" class=\\"n-space\\" style=\\"display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; margin-top: -6px; margin-bottom: -6px;\\"></div>"`;