From f04e8865b0c3fb1e04c1d2a78247ab8f73266b24 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Wed, 6 Jun 2018 10:48:15 +0800
Subject: [PATCH] test: add progress & rate & slider & spin & table test
---
components/progress/__tests__/index.test.js | 23 ++++
components/rate/__tests__/index.test.js | 6 +
.../__snapshots__/index.test.js.snap | 23 ++++
components/slider/__tests__/index.test.js | 39 ++++++
components/spin/Spin.jsx | 1 -
.../__snapshots__/index.test.js.snap | 16 +++
components/spin/__tests__/index.test.js | 33 +++++
components/spin/index.en-US.md | 2 +-
.../table/__tests__/Table.filter.test.js | 46 +++----
.../table/__tests__/Table.pagination.test.js | 119 +++++++++---------
.../table/__tests__/Table.sorter.test.js | 21 ++--
tests/utils.js | 17 +++
12 files changed, 243 insertions(+), 103 deletions(-)
create mode 100644 components/progress/__tests__/index.test.js
create mode 100644 components/rate/__tests__/index.test.js
create mode 100644 components/slider/__tests__/__snapshots__/index.test.js.snap
create mode 100644 components/slider/__tests__/index.test.js
create mode 100644 components/spin/__tests__/__snapshots__/index.test.js.snap
create mode 100644 components/spin/__tests__/index.test.js
diff --git a/components/progress/__tests__/index.test.js b/components/progress/__tests__/index.test.js
new file mode 100644
index 000000000..ee3c76128
--- /dev/null
+++ b/components/progress/__tests__/index.test.js
@@ -0,0 +1,23 @@
+import { mount } from '@vue/test-utils'
+import { asyncExpect } from '@/tests/utils'
+import Progress from '..'
+
+describe('Progress', () => {
+ it('successPercent should decide the progress status when it exists', async () => {
+ const wrapper = mount(Progress, {
+ propsData: {
+ percent: 100,
+ successPercent: 50,
+ },
+ sync: false,
+ })
+ await asyncExpect(() => {
+ expect(wrapper.findAll('.ant-progress-status-success')).toHaveLength(0)
+ })
+
+ wrapper.setProps({ percent: 50, successPercent: 100 })
+ await asyncExpect(() => {
+ expect(wrapper.findAll('.ant-progress-status-success')).toHaveLength(1)
+ })
+ })
+})
diff --git a/components/rate/__tests__/index.test.js b/components/rate/__tests__/index.test.js
new file mode 100644
index 000000000..3c2468a5b
--- /dev/null
+++ b/components/rate/__tests__/index.test.js
@@ -0,0 +1,6 @@
+import Rate from '..'
+import focusTest from '../../../tests/shared/focusTest'
+
+describe('Rate', () => {
+ focusTest(Rate)
+})
diff --git a/components/slider/__tests__/__snapshots__/index.test.js.snap b/components/slider/__tests__/__snapshots__/index.test.js.snap
new file mode 100644
index 000000000..c557f9239
--- /dev/null
+++ b/components/slider/__tests__/__snapshots__/index.test.js.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Slider should show tooltip when hovering slider handler 1`] = `
+
+`;
+
+exports[`Slider should show tooltip when hovering slider handler 2`] = `
+
+`;
diff --git a/components/slider/__tests__/index.test.js b/components/slider/__tests__/index.test.js
new file mode 100644
index 000000000..3e403d2ba
--- /dev/null
+++ b/components/slider/__tests__/index.test.js
@@ -0,0 +1,39 @@
+import { mount } from '@vue/test-utils'
+import { asyncExpect } from '@/tests/utils'
+import Slider from '..'
+
+describe('Slider', () => {
+ it('should show tooltip when hovering slider handler', async () => {
+ const wrapper = mount(Slider, {
+ propsData: {
+ defaultValue: 30,
+ },
+ sync: false,
+ })
+ await asyncExpect(() => {
+ wrapper.findAll('.ant-slider-handle').at(0).trigger('mouseenter')
+ })
+ let dropdownWrapper = null
+ await asyncExpect(() => {
+ dropdownWrapper = mount({
+ render () {
+ return wrapper.find({ name: 'Trigger' }).vm.getComponent()
+ },
+ }, { sync: false })
+ })
+ await asyncExpect(() => {
+ expect(dropdownWrapper.html()).toMatchSnapshot()
+ wrapper.findAll('.ant-slider-handle').at(0).trigger('mouseleave')
+ })
+ await asyncExpect(() => {
+ dropdownWrapper = mount({
+ render () {
+ return wrapper.find({ name: 'Trigger' }).vm.getComponent()
+ },
+ }, { sync: false })
+ })
+ await asyncExpect(() => {
+ expect(dropdownWrapper.html()).toMatchSnapshot()
+ })
+ })
+})
diff --git a/components/spin/Spin.jsx b/components/spin/Spin.jsx
index 807e45ce5..c4682c18f 100644
--- a/components/spin/Spin.jsx
+++ b/components/spin/Spin.jsx
@@ -91,7 +91,6 @@ export default {
[`${prefixCls}-spinning`]: stateSpinning,
[`${prefixCls}-show-text`]: !!tip || notCssAnimationSupported,
}
-
const spinIndicator = $slots.indicator ? $slots.indicator : (
diff --git a/components/spin/__tests__/__snapshots__/index.test.js.snap b/components/spin/__tests__/__snapshots__/index.test.js.snap
new file mode 100644
index 000000000..a5e06e950
--- /dev/null
+++ b/components/spin/__tests__/__snapshots__/index.test.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Spin should only affect the spin element when set style to a nested xx 1`] = `
+
+
+
+`;
+
+exports[`Spin should render custom indicator when it's set 1`] = `
+
+`;
diff --git a/components/spin/__tests__/index.test.js b/components/spin/__tests__/index.test.js
new file mode 100644
index 000000000..b7b50cff5
--- /dev/null
+++ b/components/spin/__tests__/index.test.js
@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils'
+import { asyncExpect } from '@/tests/utils'
+import Spin from '..'
+
+describe('Spin', () => {
+ it('should only affect the spin element when set style to a nested xx', () => {
+ const wrapper = mount({
+ render () {
+ return (
+
+ content
+
+ )
+ },
+ })
+ expect(wrapper.html()).toMatchSnapshot()
+ // expect(wrapper.findAll('.ant-spin-nested-loading').at(0).prop('style')).toBe(null)
+ // expect(wrapper.findAll('.ant-spin').at(0).prop('style').background).toBe('red')
+ })
+
+ it('should render custom indicator when it\'s set', () => {
+ // const customIndicator =
+ const wrapper = mount(
+ {
+ render () {
+ return (
+
+ )
+ },
+ })
+ expect(wrapper.html()).toMatchSnapshot()
+ })
+})
diff --git a/components/spin/index.en-US.md b/components/spin/index.en-US.md
index c35607151..b8cd0f985 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 | React node of the spinning indicator | slot | - |
+| indicator | vue node of the spinning indicator | 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/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js
index a817a23ea..db31bc577 100644
--- a/components/table/__tests__/Table.filter.test.js
+++ b/components/table/__tests__/Table.filter.test.js
@@ -1,5 +1,6 @@
import Vue from 'vue'
import { mount } from '@vue/test-utils'
+import { asyncExpect } from '@/tests/utils'
import Table from '..'
function $$ (className) {
@@ -199,7 +200,7 @@ describe('Table.filter', () => {
})
})
- it('fires change event', (done) => {
+ it('fires change event', async () => {
const handleChange = jest.fn()
const wrapper = mount(Table, getTableOptions({}, { change: handleChange }))
const dropdownWrapper = mount({
@@ -207,19 +208,12 @@ describe('Table.filter', () => {
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
},
}, { sync: false })
- new Promise((reslove) => {
- Vue.nextTick(() => {
- dropdownWrapper.find({ name: 'MenuItem' }).trigger('click')
- dropdownWrapper.find('.confirm').trigger('click')
- reslove()
- })
- }).then(() => {
- Vue.nextTick(() => {
- expect(handleChange).toBeCalledWith({}, { name: ['boy'] }, {})
- Promise.resolve()
- })
- }).finally(() => {
- done()
+ await asyncExpect(() => {
+ dropdownWrapper.find({ name: 'MenuItem' }).trigger('click')
+ dropdownWrapper.find('.confirm').trigger('click')
+ })
+ await asyncExpect(() => {
+ expect(handleChange).toBeCalledWith({}, { name: ['boy'] }, {})
})
})
@@ -266,7 +260,7 @@ describe('Table.filter', () => {
}, 1000)
})
- it('works with JSX in controlled mode', (done) => {
+ it('works with JSX in controlled mode', async () => {
const { Column } = Table
const App = {
@@ -305,23 +299,17 @@ describe('Table.filter', () => {
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
},
}, { sync: false, attachToDocument: true })
-
- new Promise((reslove) => {
- Vue.nextTick(() => {
- dropdownWrapper.find({ name: 'MenuItem' }).trigger('click')
- dropdownWrapper.find('.confirm').trigger('click')
- reslove()
- })
- }).then(() => {
+ await asyncExpect(() => {
+ dropdownWrapper.find({ name: 'MenuItem' }).trigger('click')
+ dropdownWrapper.find('.confirm').trigger('click')
+ })
+ await asyncExpect(() => {
expect(renderedNames(wrapper)).toEqual(['Jack'])
dropdownWrapper.find('.clear').trigger('click')
- setTimeout(() => {
- expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry'])
- Promise.resolve()
- }, 0)
- }).finally(() => {
- done()
})
+ await asyncExpect(() => {
+ expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry'])
+ }, 0)
})
it('works with grouping columns in controlled mode', (done) => {
diff --git a/components/table/__tests__/Table.pagination.test.js b/components/table/__tests__/Table.pagination.test.js
index f8a99f0f5..b1eb504c5 100644
--- a/components/table/__tests__/Table.pagination.test.js
+++ b/components/table/__tests__/Table.pagination.test.js
@@ -2,6 +2,7 @@
import { mount } from '@vue/test-utils'
import Table from '..'
import Vue from 'vue'
+import { asyncExpect } from '@/tests/utils'
describe('Table.pagination', () => {
const columns = [{
@@ -47,31 +48,30 @@ describe('Table.pagination', () => {
})
})
- it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', (done) => {
+ it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', async () => {
const wrapper = mount(Table, getTableOptions({ pagination: { pageSize: 3, hideOnSinglePage: true }}))
- Vue.nextTick(() => {
+ await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
wrapper.setProps({ pagination: { pageSize: 3, hideOnSinglePage: false }})
- Vue.nextTick(() => {
- expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
- wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: true }})
- Vue.nextTick(() => {
- expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
- wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: false }})
- Vue.nextTick(() => {
- expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
- wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: true }})
- Vue.nextTick(() => {
- expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
- wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: false }})
- Vue.nextTick(() => {
- expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
- done()
- })
- })
- })
- })
- })
+ })
+ await asyncExpect(() => {
+ expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
+ wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: true }})
+ })
+ await asyncExpect(() => {
+ expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
+ wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: false }})
+ })
+ await asyncExpect(() => {
+ expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
+ wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: true }})
+ })
+ await asyncExpect(() => {
+ expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
+ wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: false }})
+ })
+ await asyncExpect(() => {
+ expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
})
})
@@ -140,36 +140,34 @@ describe('Table.pagination', () => {
// https://github.com/ant-design/ant-design/issues/4532
// https://codepen.io/afc163/pen/pWVRJV?editors=001
- it('should display pagination as prop pagination change between true and false', (done) => {
+ it('should display pagination as prop pagination change between true and false', async () => {
const wrapper = mount(Table, getTableOptions())
- Vue.nextTick(() => {
+ await asyncExpect(() => {
expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(2)
wrapper.setProps({ pagination: false })
- Vue.nextTick(() => {
- expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
- wrapper.setProps({ pagination })
- // wrapper.update()
- Vue.nextTick(() => {
- expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
- expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(2)
- wrapper.find('.ant-pagination-item-2').trigger('click')
- Vue.nextTick(() => {
- expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry'])
- wrapper.setProps({ pagination: false })
- Vue.nextTick(() => {
- expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
- wrapper.setProps({ pagination: true })
- Vue.nextTick(() => {
- expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
- expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(1) // pageSize will be 10
- expect(renderedNames(wrapper)).toHaveLength(4)
- done()
- })
- })
- })
- })
- })
+ })
+ await asyncExpect(() => {
+ expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
+ wrapper.setProps({ pagination })
+ })
+ await asyncExpect(() => {
+ expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
+ expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(2)
+ wrapper.find('.ant-pagination-item-2').trigger('click')
+ })
+ await asyncExpect(() => {
+ expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry'])
+ wrapper.setProps({ pagination: false })
+ })
+ await asyncExpect(() => {
+ expect(wrapper.findAll('.ant-pagination')).toHaveLength(0)
+ wrapper.setProps({ pagination: true })
+ })
+ await asyncExpect(() => {
+ expect(wrapper.findAll('.ant-pagination')).toHaveLength(1)
+ expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(1) // pageSize will be 10
+ expect(renderedNames(wrapper)).toHaveLength(4)
})
})
@@ -186,23 +184,22 @@ describe('Table.pagination', () => {
})
})
- it('specify the position of pagination', (done) => {
+ it('specify the position of pagination', async () => {
const wrapper = mount(Table, getTableOptions({ pagination: { position: 'top' }}))
- setTimeout(() => {
+ await asyncExpect(() => {
expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(2)
expect(wrapper.findAll('.ant-spin-container > *').at(0).findAll('.ant-pagination')).toHaveLength(1)
wrapper.setProps({ pagination: { position: 'bottom' }})
- setTimeout(() => {
- expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(2)
- expect(wrapper.findAll('.ant-spin-container > *').at(1).findAll('.ant-pagination')).toHaveLength(1)
- wrapper.setProps({ pagination: { position: 'both' }})
- setTimeout(() => {
- expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(3)
- expect(wrapper.findAll('.ant-spin-container > *').at(0).findAll('.ant-pagination')).toHaveLength(1)
- expect(wrapper.findAll('.ant-spin-container > *').at(2).findAll('.ant-pagination')).toHaveLength(1)
- done()
- })
- })
+ }, 0)
+ await asyncExpect(() => {
+ expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(2)
+ expect(wrapper.findAll('.ant-spin-container > *').at(1).findAll('.ant-pagination')).toHaveLength(1)
+ wrapper.setProps({ pagination: { position: 'both' }})
+ }, 0)
+ await asyncExpect(() => {
+ expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(3)
+ expect(wrapper.findAll('.ant-spin-container > *').at(0).findAll('.ant-pagination')).toHaveLength(1)
+ expect(wrapper.findAll('.ant-spin-container > *').at(2).findAll('.ant-pagination')).toHaveLength(1)
}, 0)
})
})
diff --git a/components/table/__tests__/Table.sorter.test.js b/components/table/__tests__/Table.sorter.test.js
index e018e0aa4..b7c85de7b 100644
--- a/components/table/__tests__/Table.sorter.test.js
+++ b/components/table/__tests__/Table.sorter.test.js
@@ -1,5 +1,6 @@
import Vue from 'vue'
import { mount } from '@vue/test-utils'
+import { asyncExpect } from '@/tests/utils'
import Table from '..'
describe('Table.sorter', () => {
@@ -71,19 +72,17 @@ describe('Table.sorter', () => {
})
})
- it('sort records', (done) => {
+ it('sort records', async () => {
const wrapper = mount(Table, getTableOptions())
- Vue.nextTick(() => {
+ await asyncExpect(() => {
wrapper.find('.ant-table-column-sorter-up').trigger('click')
- Vue.nextTick(() => {
- // expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom'])
- expect(wrapper.find('.ant-table-tbody').text()).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom'].join(''))
- wrapper.find('.ant-table-column-sorter-down').trigger('click')
- Vue.nextTick(() => {
- expect(wrapper.find('.ant-table-tbody').text()).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry'].join(''))
- done()
- })
- })
+ })
+ await asyncExpect(() => {
+ expect(wrapper.find('.ant-table-tbody').text()).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom'].join(''))
+ wrapper.find('.ant-table-column-sorter-down').trigger('click')
+ })
+ await asyncExpect(() => {
+ expect(wrapper.find('.ant-table-tbody').text()).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry'].join(''))
})
})
diff --git a/tests/utils.js b/tests/utils.js
index e1e06e28c..59b0d9121 100644
--- a/tests/utils.js
+++ b/tests/utils.js
@@ -1,5 +1,6 @@
import moment from 'moment'
import MockDate from 'mockdate'
+import Vue from 'vue'
export function setMockDate (dateString = '2017-09-18T03:30:07.795') {
MockDate.set(moment(dateString))
@@ -8,3 +9,19 @@ export function setMockDate (dateString = '2017-09-18T03:30:07.795') {
export function resetMockDate () {
MockDate.reset()
}
+
+export function asyncExpect (fn, timeout) {
+ return new Promise((resolve) => {
+ if (typeof timeout === 'number') {
+ setTimeout(() => {
+ fn()
+ resolve()
+ }, timeout)
+ } else {
+ Vue.nextTick(() => {
+ fn()
+ resolve()
+ })
+ }
+ })
+}