Benjy Cui
8 years ago
committed by
偏右
偏右
10 changed files with 506 additions and 102 deletions
@ -0,0 +1,143 @@ |
|||
exports[`Transfer should render correctly 1`] = ` |
|||
<div |
|||
class="ant-transfer"> |
|||
<div |
|||
class="ant-transfer-list"> |
|||
<div |
|||
class="ant-transfer-list-header"> |
|||
<label |
|||
class="ant-checkbox-wrapper"> |
|||
<span |
|||
class="ant-checkbox ant-checkbox-checked ant-checkbox-checked-1"> |
|||
<span |
|||
class="ant-checkbox-inner" /> |
|||
<input |
|||
checked="" |
|||
class="ant-checkbox-input" |
|||
type="checkbox" /> |
|||
</span> |
|||
</label> |
|||
<span |
|||
class="ant-transfer-list-header-selected"> |
|||
<span> |
|||
1/2 |
|||
</span> |
|||
<span |
|||
class="ant-transfer-list-header-title" /> |
|||
</span> |
|||
</div> |
|||
<div |
|||
class="ant-transfer-list-body"> |
|||
<ul |
|||
class="ant-transfer-list-content"> |
|||
<li |
|||
class="ant-transfer-list-content-item"> |
|||
<label |
|||
class="ant-checkbox-wrapper"> |
|||
<span |
|||
class="ant-checkbox ant-checkbox-checked ant-checkbox-checked-1"> |
|||
<span |
|||
class="ant-checkbox-inner" /> |
|||
<input |
|||
checked="" |
|||
class="ant-checkbox-input" |
|||
type="checkbox" /> |
|||
</span> |
|||
</label> |
|||
<span /> |
|||
</li> |
|||
<li |
|||
class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled"> |
|||
<label |
|||
class="ant-checkbox-wrapper"> |
|||
<span |
|||
class="ant-checkbox ant-checkbox-disabled"> |
|||
<span |
|||
class="ant-checkbox-inner" /> |
|||
<input |
|||
class="ant-checkbox-input" |
|||
disabled="" |
|||
type="checkbox" /> |
|||
</span> |
|||
</label> |
|||
<span /> |
|||
</li> |
|||
</ul> |
|||
<div |
|||
class="ant-transfer-list-body-not-found"> |
|||
Not Found |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="ant-transfer-operation"> |
|||
<button |
|||
class="ant-btn ant-btn-primary ant-btn-sm" |
|||
disabled="" |
|||
type="button"> |
|||
<span> |
|||
<i |
|||
class="anticon anticon-left" /> |
|||
</span> |
|||
</button> |
|||
<button |
|||
class="ant-btn ant-btn-primary ant-btn-sm" |
|||
type="button"> |
|||
<span> |
|||
<i |
|||
class="anticon anticon-right" /> |
|||
</span> |
|||
</button> |
|||
</div> |
|||
<div |
|||
class="ant-transfer-list"> |
|||
<div |
|||
class="ant-transfer-list-header"> |
|||
<label |
|||
class="ant-checkbox-wrapper"> |
|||
<span |
|||
class="ant-checkbox"> |
|||
<span |
|||
class="ant-checkbox-inner" /> |
|||
<input |
|||
class="ant-checkbox-input" |
|||
type="checkbox" /> |
|||
</span> |
|||
</label> |
|||
<span |
|||
class="ant-transfer-list-header-selected"> |
|||
<span> |
|||
1 |
|||
</span> |
|||
<span |
|||
class="ant-transfer-list-header-title" /> |
|||
</span> |
|||
</div> |
|||
<div |
|||
class="ant-transfer-list-body"> |
|||
<ul |
|||
class="ant-transfer-list-content"> |
|||
<li |
|||
class="ant-transfer-list-content-item"> |
|||
<label |
|||
class="ant-checkbox-wrapper"> |
|||
<span |
|||
class="ant-checkbox"> |
|||
<span |
|||
class="ant-checkbox-inner" /> |
|||
<input |
|||
class="ant-checkbox-input" |
|||
type="checkbox" /> |
|||
</span> |
|||
</label> |
|||
<span /> |
|||
</li> |
|||
</ul> |
|||
<div |
|||
class="ant-transfer-list-body-not-found"> |
|||
Not Found |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
`; |
|||
@ -0,0 +1,84 @@ |
|||
exports[`List should render correctly 1`] = ` |
|||
<div |
|||
class="ant-transfer-list"> |
|||
<div |
|||
class="ant-transfer-list-header"> |
|||
<label |
|||
class="ant-checkbox-wrapper"> |
|||
<span |
|||
class="ant-checkbox-indeterminate ant-checkbox"> |
|||
<span |
|||
class="ant-checkbox-inner" /> |
|||
<input |
|||
class="ant-checkbox-input" |
|||
type="checkbox" /> |
|||
</span> |
|||
</label> |
|||
<span |
|||
class="ant-transfer-list-header-selected"> |
|||
<span> |
|||
1/3 |
|||
</span> |
|||
<span |
|||
class="ant-transfer-list-header-title" /> |
|||
</span> |
|||
</div> |
|||
<div |
|||
class="ant-transfer-list-body"> |
|||
<ul |
|||
class="ant-transfer-list-content"> |
|||
<li |
|||
class="ant-transfer-list-content-item"> |
|||
<label |
|||
class="ant-checkbox-wrapper"> |
|||
<span |
|||
class="ant-checkbox ant-checkbox-checked ant-checkbox-checked-1"> |
|||
<span |
|||
class="ant-checkbox-inner" /> |
|||
<input |
|||
checked="" |
|||
class="ant-checkbox-input" |
|||
type="checkbox" /> |
|||
</span> |
|||
</label> |
|||
<span /> |
|||
</li> |
|||
<li |
|||
class="ant-transfer-list-content-item"> |
|||
<label |
|||
class="ant-checkbox-wrapper"> |
|||
<span |
|||
class="ant-checkbox"> |
|||
<span |
|||
class="ant-checkbox-inner" /> |
|||
<input |
|||
class="ant-checkbox-input" |
|||
type="checkbox" /> |
|||
</span> |
|||
</label> |
|||
<span /> |
|||
</li> |
|||
<li |
|||
class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled"> |
|||
<label |
|||
class="ant-checkbox-wrapper"> |
|||
<span |
|||
class="ant-checkbox ant-checkbox-disabled"> |
|||
<span |
|||
class="ant-checkbox-inner" /> |
|||
<input |
|||
class="ant-checkbox-input" |
|||
disabled="" |
|||
type="checkbox" /> |
|||
</span> |
|||
</label> |
|||
<span /> |
|||
</li> |
|||
</ul> |
|||
<div |
|||
class="ant-transfer-list-body-not-found"> |
|||
Not Found |
|||
</div> |
|||
</div> |
|||
</div> |
|||
`; |
|||
@ -0,0 +1,85 @@ |
|||
import React from 'react'; |
|||
import { render, mount } from 'enzyme'; |
|||
import { renderToJson } from 'enzyme-to-json'; |
|||
import Transfer from '..'; |
|||
import TransferList from '../list'; |
|||
import TransferOperation from '../operation'; |
|||
import TransferSearch from '../search'; |
|||
import TransferItem from '../item'; |
|||
import Button from '../../button'; |
|||
import Checkbox from '../../checkbox'; |
|||
|
|||
const listCommonProps = { |
|||
dataSource: [{ |
|||
key: 'a', |
|||
title: 'a', |
|||
}, { |
|||
key: 'b', |
|||
title: 'b', |
|||
}, { |
|||
key: 'c', |
|||
title: 'c', |
|||
disabled: true, |
|||
}], |
|||
selectedKeys: ['a'], |
|||
targetKeys: ['b'], |
|||
lazy: false, |
|||
}; |
|||
|
|||
describe('Transfer', () => { |
|||
it('should render correctly', () => { |
|||
const wrapper = render(<Transfer {...listCommonProps} />); |
|||
expect(renderToJson(wrapper)).toMatchSnapshot(); |
|||
}); |
|||
|
|||
it('should move selected keys to corresponding list', () => { |
|||
const handleChange = jest.fn(); |
|||
const wrapper = mount(<Transfer {...listCommonProps} onChange={handleChange} />); |
|||
wrapper.find(TransferOperation).find(Button).at(1).simulate('click'); // move selected keys to right list
|
|||
expect(handleChange).toHaveBeenCalledWith(['a', 'b'], 'right', ['a']); |
|||
}); |
|||
|
|||
it('should uncheck checkbox when click on checked item', () => { |
|||
const handleSelectChange = jest.fn(); |
|||
const wrapper = mount(<Transfer {...listCommonProps} onSelectChange={handleSelectChange} />); |
|||
wrapper.find(TransferItem).filterWhere(n => n.prop('item').key === 'a').simulate('click'); |
|||
expect(handleSelectChange).toHaveBeenLastCalledWith([], []); |
|||
}); |
|||
|
|||
it('should check checkbox when click on unchecked item', () => { |
|||
const handleSelectChange = jest.fn(); |
|||
const wrapper = mount(<Transfer {...listCommonProps} onSelectChange={handleSelectChange} />); |
|||
wrapper.find(TransferItem).filterWhere(n => n.prop('item').key === 'b').simulate('click'); |
|||
expect(handleSelectChange).toHaveBeenLastCalledWith(['a'], ['b']); |
|||
}); |
|||
|
|||
it('should not check checkbox when click on disabled item', () => { |
|||
const handleSelectChange = jest.fn(); |
|||
const wrapper = mount(<Transfer {...listCommonProps} onSelectChange={handleSelectChange} />); |
|||
wrapper.find(TransferItem).filterWhere(n => n.prop('item').key === 'c').simulate('click'); |
|||
expect(handleSelectChange).not.toHaveBeenCalled(); |
|||
}); |
|||
|
|||
it('should check all item when click on check all', () => { |
|||
const handleSelectChange = jest.fn(); |
|||
const wrapper = mount(<Transfer {...listCommonProps} onSelectChange={handleSelectChange} />); |
|||
wrapper.find('.ant-transfer-list-header input[type="checkbox"]') |
|||
.filterWhere(n => !n.prop('checked')).simulate('change'); |
|||
expect(handleSelectChange).toHaveBeenCalledWith(['a'], ['b']); |
|||
}); |
|||
|
|||
it('should uncheck all item when click on uncheck all', () => { |
|||
const handleSelectChange = jest.fn(); |
|||
const wrapper = mount(<Transfer {...listCommonProps} onSelectChange={handleSelectChange} />); |
|||
wrapper.find('.ant-transfer-list-header input[type="checkbox"]') |
|||
.filterWhere(n => n.prop('checked')).simulate('change'); |
|||
expect(handleSelectChange).toHaveBeenCalledWith([], []); |
|||
}); |
|||
|
|||
it('should call `filterOption` when use input in search box', () => { |
|||
const filterOption = (inputValue, option) => inputValue === option.title; |
|||
const wrapper = mount(<Transfer {...listCommonProps} showSearch filterOption={filterOption} />); |
|||
wrapper.find(TransferSearch).at(0).find('input').simulate('change', { target: { value: 'a' } }); |
|||
expect(wrapper.find(TransferList).at(0).find(TransferItem).find(Checkbox)).toHaveLength(1); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,35 @@ |
|||
import React from 'react'; |
|||
import { render, mount } from 'enzyme'; |
|||
import { renderToJson } from 'enzyme-to-json'; |
|||
import List from '../list'; |
|||
import Checkbox from '../../checkbox'; |
|||
|
|||
const listCommonProps = { |
|||
prefixCls: 'ant-transfer-list', |
|||
dataSource: [{ |
|||
key: 'a', |
|||
title: 'a', |
|||
}, { |
|||
key: 'b', |
|||
title: 'b', |
|||
}, { |
|||
key: 'c', |
|||
title: 'c', |
|||
disabled: true, |
|||
}], |
|||
checkedKeys: ['a'], |
|||
lazy: false, |
|||
}; |
|||
|
|||
describe('List', () => { |
|||
it('should render correctly', () => { |
|||
const wrapper = render(<List {...listCommonProps} />); |
|||
expect(renderToJson(wrapper)).toMatchSnapshot(); |
|||
}); |
|||
|
|||
it('should check top Checkbox while all available items are checked', () => { |
|||
const wrapper = mount(<List {...listCommonProps} checkedKeys={['a', 'b']} />); |
|||
expect(wrapper.find('.ant-transfer-list-header').find(Checkbox).prop('checked')) |
|||
.toBeTruthy(); |
|||
}); |
|||
}); |
|||
Loading…
Reference in new issue