test: add list test & update spin

Author: tangjinzhou

components/_util/props-util.js

@@ -196,7 +196,7 @@ export function isEmptyElement (ele) {
 }
 
 export function filterEmpty (children = []) {
-  return children.filter(c => c.tag || c.text.trim() !== '')
+  return children.filter(c => c.tag || (c.text && c.text.trim() !== ''))
 }
 const initDefaultProps = (propTypes, defaultProps) => {
   Object.keys(defaultProps).forEach(k => {

components/list/__tests__/__snapshots__/empty.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`List renders empty list 1`] = `<div class="ant-list ant-list-split"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-list-empty-text">No data</div></div></span></div>`;

components/list/__tests__/empty.test.js

@@ -0,0 +1,13 @@
+import { mount } from '@vue/test-utils'
+import List from '..'
+
+describe('List', () => {
+  it('renders empty list', () => {
+    const wrapper = mount({
+      render () {
+        return <List dataSource={[]} renderItem={() => <List.Item />} />
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

components/list/__tests__/loading.test.js

@@ -0,0 +1,55 @@
+import { mount } from '@vue/test-utils'
+import { asyncExpect } from '@/tests/utils'
+import List from '..'
+import Icon from '../../icon'
+
+describe('List', () => {
+  it('renders empty loading', () => {
+    const loading = {
+      spinning: true,
+    }
+    const wrapper = mount(
+      {
+        render () {
+          return <List loading={loading} dataSource={[]} renderItem={() => <List.Item />} />
+        },
+      })
+    expect(wrapper.findAll('.ant-list-empty-text')).toHaveLength(0)
+  })
+
+  it('renders object loading', () => {
+    const loading = {
+      spinning: true,
+    }
+    const wrapper = mount(
+      {
+        render () {
+          return <List
+            loading={loading}
+            dataSource={[1]}
+            renderItem={() => <List.Item />}
+          />
+        },
+      })
+    expect(wrapper.findAll('.ant-spin-spinning')).toHaveLength(1)
+  })
+
+  it('renders object loading with indicator', () => {
+    const wrapper = mount(
+      {
+        render () {
+          return <List
+            loading={{
+              spinning: true,
+              indicator: <Icon type='loading' style={{ fontSize: '24px' }} spin />,
+            }}
+            dataSource={[1]}
+            renderItem={() => <List.Item />}
+          />
+        },
+      }
+
+    )
+    expect(wrapper.findAll('.anticon-loading')).toHaveLength(1)
+  })
+})

components/list/demo/test.vue

@@ -0,0 +1,8 @@
+<script>
+import List from '..'
+export default {
+  render () {
+    return <List dataSource={[]} renderItem={() => <List.Item />} />
+  },
+}
+</script>

components/list/index.jsx

@@ -10,7 +10,7 @@ import Pagination from '../pagination'
 import { Row } from '../grid'
 
 import Item from './Item'
-import { initDefaultProps, getComponentFromProp } from '../_util/props-util'
+import { initDefaultProps, getComponentFromProp, filterEmpty } from '../_util/props-util'
 import { cloneElement } from '../_util/vnode'
 
 export { ListItemProps, ListItemMetaProps } from './Item'
@@ -38,7 +38,7 @@ export const ListProps = () => ({
   extra: PropTypes.any,
   grid: PropTypes.shape(ListGridType).loose,
   itemLayout: PropTypes.string,
-  loading: PropTypes.oneOfType([PropTypes.bool, SpinProps()]),
+  loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   loadMore: PropTypes.any,
   pagination: PropTypes.any,
   prefixCls: PropTypes.string,
@@ -139,7 +139,7 @@ export default {
     const loadMore = getComponentFromProp(this, 'loadMore')
     const footer = getComponentFromProp(this, 'footer')
     const header = getComponentFromProp(this, 'header')
-    const children = $slots.default || []
+    const children = filterEmpty($slots.default || [])
     let loadingProp = loading
     if (typeof loadingProp === 'boolean') {
       loadingProp = {
@@ -220,7 +220,7 @@ export default {
       childrenContent = grid ? (
         <Row gutter={grid.gutter}>{childrenList}</Row>
       ) : childrenList
-    } else if (!children && !isLoading) {
+    } else if (!children.length && !isLoading) {
       childrenContent = (
         <LocaleReceiver
           componentName='Table'

components/spin/Spin.jsx

@@ -2,8 +2,9 @@
 import PropTypes from '../_util/vue-types'
 import BaseMixin from '../_util/BaseMixin'
 import isCssAnimationSupported from '../_util/isCssAnimationSupported'
-import { filterEmpty, initDefaultProps } from '../_util/props-util'
+import { filterEmpty, initDefaultProps, isValidElement, getComponentFromProp } from '../_util/props-util'
 import getTransitionProps from '../_util/getTransitionProps'
+import { cloneElement } from '../_util/vnode'
 
 export const SpinProps = () => ({
   prefixCls: PropTypes.string,
@@ -12,6 +13,7 @@ export const SpinProps = () => ({
   wrapperClassName: PropTypes.string,
   tip: PropTypes.string,
   delay: PropTypes.number,
+  indicator: PropTypes.any,
 })
 
 export default {
@@ -91,7 +93,16 @@ export default {
       [`${prefixCls}-spinning`]: stateSpinning,
       [`${prefixCls}-show-text`]: !!tip || notCssAnimationSupported,
     }
-    const spinIndicator = $slots.indicator ? $slots.indicator : (
+    let indicator = getComponentFromProp(this, 'indicator')
+    if (Array.isArray(indicator)) {
+      indicator = filterEmpty(indicator)
+      indicator = indicator.length === 1 ? indicator[0] : indicator
+    }
+    let spinIndicator = null
+    if (isValidElement(indicator)) {
+      spinIndicator = cloneElement(indicator, { class: `${prefixCls}-dot` })
+    }
+    spinIndicator = spinIndicator || (
       <span class={`${prefixCls}-dot`}>
         <i />
         <i />

components/spin/__tests__/__snapshots__/index.test.js.snap

@@ -11,6 +11,6 @@ exports[`Spin should only affect the spin element when set style to a nested <Sp
 
 exports[`Spin should render custom indicator when it's set 1`] = `
 <div class="ant-spin ant-spin-spinning">
-  <div class="custom-indicator"></div>
+  <div class="custom-indicator ant-spin-dot"></div>
 </div>
 `;

components/spin/index.en-US.md

@@ -4,7 +4,7 @@
 | Property | Description | Type | Default Value |
 | -------- | ----------- | ---- | ------------- |
 | delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - |
-| indicator | vue node of the spinning indicator | slot | - |
+| indicator | vue node of the spinning indicator | vNode \|slot | - |
 | size | size of Spin, options: `small`, `default` and `large` | string | `default` |
 | spinning | whether Spin is spinning | boolean | true |
 | tip | customize description content when Spin has children | string | - |

components/spin/index.zh-CN.md

@@ -4,7 +4,7 @@
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - |
-| indicator | 加载指示符 | slot方式 | - |
+| indicator | 加载指示符 | vNode \| slot | - |
 | size | 组件大小，可选值为 `small` `default` `large` | string | 'default' |
 | spinning | 是否旋转 | boolean | true |
 | tip | 当作为包裹元素时，可以自定义描述文案 | string | - |