test: add progress & rate & slider & spin & table test

tangjinzhou · tangjinzhou · commit ed9de47851a0 · 2018-06-06T10:48:15.000+08:00
diff --git a/components/progress/__tests__/index.test.js 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
@@ -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
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Slider should show tooltip when hovering slider handler 1`] = `
+<div>
+  <div class="ant-tooltip  ant-tooltip-placement-top" style="left: -999px; top: -1003px;">
+    <div class="ant-tooltip-content">
+      <div class="ant-tooltip-arrow"></div>
+      <div class="ant-tooltip-inner">30</div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider should show tooltip when hovering slider handler 2`] = `
+<div>
+  <div class="ant-tooltip  ant-tooltip-placement-top" style="display: none; left: -999px; top: -1003px;">
+    <div class="ant-tooltip-content">
+      <div class="ant-tooltip-arrow"></div>
+      <div class="ant-tooltip-inner">30</div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/slider/__tests__/index.test.js 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
@@ -91,7 +91,6 @@ export default {
       [`${prefixCls}-spinning`]: stateSpinning,
       [`${prefixCls}-show-text`]: !!tip || notCssAnimationSupported,
     }
-
     const spinIndicator = $slots.indicator ? $slots.indicator : (
       <span class={`${prefixCls}-dot`}>
         <i />
diff --git a/components/spin/__tests__/__snapshots__/index.test.js.snap 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 <Spin>xx</Spin> 1`] = `
+<span tag="div" class="ant-spin-nested-loading" style="background: red;"><div><div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div>
+</div>
+<div class="ant-spin-container ant-spin-blur">
+  <div>content</div>
+</div>
+</span>
+`;
+
+exports[`Spin should render custom indicator when it's set 1`] = `
+<div class="ant-spin ant-spin-spinning">
+  <div class="custom-indicator"></div>
+</div>
+`;
diff --git a/components/spin/__tests__/index.test.js 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 <Spin>xx</Spin>', () => {
+    const wrapper = mount({
+      render () {
+        return (
+          <Spin style={{ background: 'red' }}>
+            <div>content</div>
+          </Spin>
+        )
+      },
+    })
+    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 = <div className='custom-indicator' />
+    const wrapper = mount(
+      {
+        render () {
+          return (
+            <Spin><div slot='indicator' class='custom-indicator' /></Spin>
+          )
+        },
+      })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})
diff --git 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
@@ -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,27 +200,20 @@ 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({
       render () {
         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
diff --git a/components/table/__tests__/Table.sorter.test.js b/components/table/__tests__/Table.sorter.test.js
diff --git a/tests/utils.js b/tests/utils.js

Original file line number	Diff line number	Diff line change
`@@ -91,7 +91,6 @@ export default {`
`91`	`91`	[`${prefixCls}-spinning`]: stateSpinning,
`92`	`92`	[`${prefixCls}-show-text`]: !!tip \|\| notCssAnimationSupported,
`93`	`93`	`}`
`94`		`-`
`95`	`94`	`const spinIndicator = $slots.indicator ? $slots.indicator : (`
`96`	`95`	<span class={`${prefixCls}-dot`}>
`97`	`96`	`<i />`