From 6aa8d3effd22c85eea0a8f2ae3ab435e3d122954 Mon Sep 17 00:00:00 2001 From: tjz <415800467@qq.com> Date: Sat, 16 Jun 2018 22:57:11 +0800 Subject: [PATCH] test: add list test & update spin --- components/_util/props-util.js | 2 +- .../__snapshots__/empty.test.js.snap | 3 + components/list/__tests__/empty.test.js | 13 +++++ components/list/__tests__/loading.test.js | 55 +++++++++++++++++++ components/list/demo/test.vue | 8 +++ components/list/index.jsx | 8 +-- components/spin/Spin.jsx | 15 ++++- .../__snapshots__/index.test.js.snap | 2 +- components/spin/index.en-US.md | 2 +- components/spin/index.zh-CN.md | 2 +- site/dev.js | 2 +- 11 files changed, 101 insertions(+), 11 deletions(-) create mode 100644 components/list/__tests__/__snapshots__/empty.test.js.snap create mode 100644 components/list/__tests__/empty.test.js create mode 100644 components/list/__tests__/loading.test.js create mode 100644 components/list/demo/test.vue diff --git a/components/_util/props-util.js b/components/_util/props-util.js index 0a1cf7d6b..a16c3059b 100644 --- a/components/_util/props-util.js +++ b/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 => { diff --git a/components/list/__tests__/__snapshots__/empty.test.js.snap b/components/list/__tests__/__snapshots__/empty.test.js.snap new file mode 100644 index 000000000..c2c5b6d91 --- /dev/null +++ b/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`] = `
No data
`; diff --git a/components/list/__tests__/empty.test.js b/components/list/__tests__/empty.test.js new file mode 100644 index 000000000..24da421ad --- /dev/null +++ b/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 } /> + }, + }) + expect(wrapper.html()).toMatchSnapshot() + }) +}) diff --git a/components/list/__tests__/loading.test.js b/components/list/__tests__/loading.test.js new file mode 100644 index 000000000..718447f67 --- /dev/null +++ b/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 } /> + }, + }) + expect(wrapper.findAll('.ant-list-empty-text')).toHaveLength(0) + }) + + it('renders object loading', () => { + const loading = { + spinning: true, + } + const wrapper = mount( + { + render () { + return } + /> + }, + }) + expect(wrapper.findAll('.ant-spin-spinning')).toHaveLength(1) + }) + + it('renders object loading with indicator', () => { + const wrapper = mount( + { + render () { + return , + }} + dataSource={[1]} + renderItem={() => } + /> + }, + } + + ) + expect(wrapper.findAll('.anticon-loading')).toHaveLength(1) + }) +}) diff --git a/components/list/demo/test.vue b/components/list/demo/test.vue new file mode 100644 index 000000000..922a207af --- /dev/null +++ b/components/list/demo/test.vue @@ -0,0 +1,8 @@ + diff --git a/components/list/index.jsx b/components/list/index.jsx index 7e0c04f14..11848bdf0 100644 --- a/components/list/index.jsx +++ b/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 ? ( {childrenList} ) : childrenList - } else if (!children && !isLoading) { + } else if (!children.length && !isLoading) { childrenContent = ( ({ 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 || ( diff --git a/components/spin/__tests__/__snapshots__/index.test.js.snap b/components/spin/__tests__/__snapshots__/index.test.js.snap index a5e06e950..e332c7ba0 100644 --- a/components/spin/__tests__/__snapshots__/index.test.js.snap +++ b/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 -
+
`; diff --git a/components/spin/index.en-US.md b/components/spin/index.en-US.md index b8cd0f985..a306599cf 100644 --- a/components/spin/index.en-US.md +++ b/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 | - | diff --git a/components/spin/index.zh-CN.md b/components/spin/index.zh-CN.md index ed0ec4072..7d88996bb 100644 --- a/components/spin/index.zh-CN.md +++ b/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 | - | diff --git a/site/dev.js b/site/dev.js index 36ff263d6..56cfa6a0b 100644 --- a/site/dev.js +++ b/site/dev.js @@ -10,7 +10,7 @@ import Api from './components/api' import './components' import demoBox from './components/demoBox' import demoContainer from './components/demoContainer' -import Test from '../components/list/demo/index' +import Test from '../components/list/demo/test' Vue.use(VueClipboard) Vue.use(VueRouter)