github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

test: add table selectionbox test

pull/165/head
tjz 2018-06-01 21:25:16 +08:00
parent e410dd4a90
commit 6b47fae034
5 changed files with 250 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/checkbox/Checkbox.jsx
View File

@ -15,6 +15,7 @@ export default {
isGroup: Boolean,
value: [String, Number, Boolean],
name: String,
id: String,
indeterminate: Boolean,
type: PropTypes.string.def('checkbox'),
autoFocus: Boolean,
@ -113,6 +114,7 @@ export default {
checkboxClass, name, $slots, sChecked,
onFocus,
onBlur,
id,
} = this
const {
prefixCls,
@ -136,7 +138,7 @@ export default {
<span class={checkboxClass}>
<input name={name} type='checkbox' disabled={disabled}
class={`${prefixCls}-input`} checked={sChecked}
onChange={onChange} ref='input'
onChange={onChange} ref='input' id={id}
onFocus={onFocus}
onBlur={onBlur}
/>

5
components/radio/Radio.jsx
View File

@ -13,6 +13,7 @@ export default {
isGroup: Boolean,
value: PropTypes.any,
name: String,
id: String,
},
model: {
prop: 'checked',
@ -87,13 +88,13 @@ export default {
},
},
render () {
const { classes, checkboxClass, disabled, prefixCls, stateChecked, handleChange, name, $slots } = this
const { id, classes, checkboxClass, disabled, prefixCls, stateChecked, handleChange, name, $slots } = this
return (
<label class={classes}>
<span class={checkboxClass}>
<input name={name} type='radio' disabled={disabled}
class={`${prefixCls}-input`} checked={stateChecked}
onChange={handleChange}
onChange={handleChange} id={id}
/>
<span class={`${prefixCls}-inner`} />
</span>

145
components/table/__tests__/SelectionBox.test.js Normal file
View File

@ -0,0 +1,145 @@
import Vue from 'vue'
import { mount } from '@vue/test-utils'
import createStore from '../createStore'
import SelectionBox from '../SelectionBox'
const getDefaultStore = (selectedRowKeys) => {
return createStore({
selectedRowKeys: selectedRowKeys || [],
selectionDirty: false,
})
}
describe('SelectionBox', () => {
it('unchecked by selectedRowKeys ', () => {
const wrapper = mount(SelectionBox, {
propsData: {
store: getDefaultStore(),
rowIndex: '1',
disabled: false,
onChange: () => {},
defaultSelection: [],
},
listeners: {
change: () => {},
},
sync: false,
})
expect(wrapper.vm.$data).toEqual({ checked: false })
})
it('checked by selectedRowKeys ', () => {
const wrapper = mount(SelectionBox, {
propsData: {
store: getDefaultStore(['1']),
rowIndex: '1',
disabled: false,
onChange: () => {},
defaultSelection: [],
},
listeners: {
change: () => {},
},
sync: false,
})
expect(wrapper.vm.$data).toEqual({ checked: true })
})
it('checked by defaultSelection', () => {
const wrapper = mount(SelectionBox, {
propsData: {
store: getDefaultStore(),
rowIndex: '1',
disabled: false,
onChange: () => {},
defaultSelection: ['1'],
},
listeners: {
change: () => {},
},
sync: false,
})
expect(wrapper.vm.$data).toEqual({ checked: true })
})
it('checked when store change', () => {
const store = getDefaultStore()
const wrapper = mount(SelectionBox, {
propsData: {
store: store,
rowIndex: '1',
disabled: false,
defaultSelection: [],
},
listeners: {
change: () => {},
},
sync: false,
})
store.setState({
selectedRowKeys: ['1'],
selectionDirty: true,
})
expect(wrapper.vm.$data).toEqual({ checked: true })
})
it('passes props to Checkbox', (done) => {
const checkboxProps = {
name: 'testName',
id: 'testId',
}
const wrapper = mount(SelectionBox, {
propsData: {
store: getDefaultStore(),
rowIndex: '1',
disabled: false,
defaultSelection: ['1'],
...checkboxProps,
},
listeners: {
change: () => {},
},
sync: false,
})
Vue.nextTick(() => {
wrapper.findAll({ name: 'ACheckbox' }).wrappers.forEach((box) => {
expect(box.props().name).toEqual(checkboxProps.name)
expect(box.props().id).toEqual(checkboxProps.id)
})
done()
})
})
it('passes props to Radios', (done) => {
const radioProps = {
name: 'testName',
id: 'testId',
}
const wrapper = mount(SelectionBox, {
propsData: {
store: getDefaultStore(),
rowIndex: '1',
disabled: false,
defaultSelection: ['1'],
type: 'radio',
...radioProps,
},
listeners: {
change: () => {},
},
sync: false,
})
Vue.nextTick(() => {
wrapper.findAll({ name: 'ARadio' }).wrappers.forEach((radio) => {
expect(radio.props().name).toEqual(radioProps.name)
expect(radio.props().id).toEqual(radioProps.id)
})
done()
})
})
})

179
components/table/__tests__/Table.filter.test.js
View File

@ -1,5 +1,5 @@
import Vue from 'vue'
import { mount, render } from '@vue/test-utils'
import { mount } from '@vue/test-utils'
import Table from '..'
function $$ (className) {
@ -266,90 +266,107 @@ describe('Table.filter', () => {
}, 1000)
})
// it('works with JSX in controlled mode', () => {
// const { Column } = Table
it('works with JSX in controlled mode', (done) => {
const { Column } = Table
// const App = {
// data () {
// return {
// filters: {},
// }
// },
// methods: {
// handleChange (pagination, filters) {
// this.setState({ filters })
// },
// },
// render () {
// return (
// <Table dataSource={data} onChange={this.handleChange}>
// <Column
// title='name'
// dataIndex='name'
// key='name'
// filters={[
// { text: 'Jack', value: 'Jack' },
// { text: 'Lucy', value: 'Lucy' },
// ]}
// filteredValue={this.state.filters.name}
// onFilter={filterFn}
// />
// </Table>
// )
// },
// }
const App = {
data () {
return {
filters: {},
}
},
methods: {
handleChange (pagination, filters) {
this.filters = filters
},
},
render () {
return (
<Table dataSource={data} onChange={this.handleChange}>
<Column
title='name'
dataIndex='name'
key='name'
filters={[
{ text: 'Jack', value: 'Jack' },
{ text: 'Lucy', value: 'Lucy' },
]}
filteredValue={this.filters.name}
onFilter={filterFn}
/>
</Table>
)
},
}
// const wrapper = mount(App)
// const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent())
const wrapper = mount(App, { sync: false })
const dropdownWrapper = mount({
render () {
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
},
}, { sync: false, attachToDocument: true })
// dropdownWrapper.find('MenuItem').at(0).trigger('click')
// dropdownWrapper.find('.confirm').trigger('click')
// wrapper.update()
// expect(renderedNames(wrapper)).toEqual(['Jack'])
new Promise((reslove) => {
Vue.nextTick(() => {
dropdownWrapper.find({ name: 'MenuItem' }).trigger('click')
dropdownWrapper.find('.confirm').trigger('click')
reslove()
})
}).then(() => {
expect(renderedNames(wrapper)).toEqual(['Jack'])
dropdownWrapper.find('.clear').trigger('click')
setTimeout(() => {
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry'])
Promise.resolve()
}, 0)
}).finally(() => {
done()
})
})
// dropdownWrapper.find('.clear').trigger('click')
// wrapper.update()
// expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry'])
// })
// it('works with grouping columns in controlled mode', () => {
// const columns = [
// {
// title: 'group',
// key: 'group',
// children: [
// {
// title: 'Name',
// dataIndex: 'name',
// key: 'name',
// filters: [
// { text: 'Jack', value: 'Jack' },
// { text: 'Lucy', value: 'Lucy' },
// ],
// onFilter: filterFn,
// filteredValue: ['Jack'],
// },
// {
// title: 'Age',
// dataIndex: 'age',
// key: 'age',
// },
// ],
// },
// ]
// const testData = [
// { key: 0, name: 'Jack', age: 11 },
// { key: 1, name: 'Lucy', age: 20 },
// { key: 2, name: 'Tom', age: 21 },
// { key: 3, name: 'Jerry', age: 22 },
// ]
// const wrapper = mount(Table, {
// columns,
// dataSource: testData,
// })
// expect(renderedNames(wrapper)).toEqual(['Jack'])
// })
it('works with grouping columns in controlled mode', (done) => {
const columns = [
{
title: 'group',
key: 'group',
children: [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
filters: [
{ text: 'Jack', value: 'Jack' },
{ text: 'Lucy', value: 'Lucy' },
],
onFilter: filterFn,
filteredValue: ['Jack'],
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
],
},
]
const testData = [
{ key: 0, name: 'Jack', age: 11 },
{ key: 1, name: 'Lucy', age: 20 },
{ key: 2, name: 'Tom', age: 21 },
{ key: 3, name: 'Jerry', age: 22 },
]
const wrapper = mount(Table, {
propsData: {
columns,
dataSource: testData,
},
sync: false,
})
Vue.nextTick(() => {
expect(renderedNames(wrapper)).toEqual(['Jack'])
done()
})
})
// it('confirm filter when dropdown hidden', (done) => {
// const handleChange = jest.fn()

1
components/table/interface.js
View File

@ -173,6 +173,7 @@ export const SelectionBoxProps = {
rowIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
name: PropTypes.string,
disabled: PropTypes.bool,
id: PropTypes.string,
// onChange: React.ChangeEventHandler<HTMLInputElement>;
}