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

* test(space): add test case

* test(space): branch cover

src/space/src/Space.tsx

@@ -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>,

src/space/tests/Space.spec.tsx

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

src/space/tests/__snapshots__/Space.spec.tsx.snap

@@ -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>"`;