Skip to content

Transfer Test Utils #189

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 21 commits into from
Closed

Transfer Test Utils #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
749936f
fix: 穿梭框进度更改
ForeseeBear Dec 18, 2021
bd70234
Merge branch 'dev' of github.com:DevCloudFE/vue-devui into transfer
ForeseeBear Dec 21, 2021
8fb5144
feat: 穿梭框新增拖拽排序功能
ForeseeBear Dec 21, 2021
08380b9
Merge branch 'dev' of github.com:DevCloudFE/vue-devui into transfer
ForeseeBear Dec 25, 2021
4b86958
fix: 解决ExtractPropTypes、PropType引用不正确
ForeseeBear Dec 25, 2021
358e337
feat: 穿梭框全选增加半选中效果
ForeseeBear Dec 25, 2021
c3cd1ea
Merge branch 'dev' of github.com:DevCloudFE/vue-devui into transfer
ForeseeBear Jan 5, 2022
60f48b0
Merge branch 'dev' of github.com:DevCloudFE/vue-devui into transfer
ForeseeBear Jan 6, 2022
67e60f6
Merge branch 'dev' of github.com:DevCloudFE/vue-devui into transfer
ForeseeBear Jan 9, 2022
919da58
Merge branch 'dev' of github.com:DevCloudFE/vue-devui into transfer
ForeseeBear Jan 10, 2022
d3c4fbd
feat: 穿梭框增加tooltip
ForeseeBear Jan 10, 2022
b0945ff
docs: 进度更改
ForeseeBear Jan 10, 2022
b3da1f9
Merge branch 'dev' of github.com:DevCloudFE/vue-devui into transfer
ForeseeBear Jan 14, 2022
57faff5
Merge branch 'dev' of github.com:DevCloudFE/vue-devui into transfer
ForeseeBear Jan 27, 2022
65fcec6
test: 穿梭框基本用法、拖拽排序单元测试
ForeseeBear Jan 27, 2022
065e874
feat: 穿梭框自定义单元测试
ForeseeBear Jan 31, 2022
393e419
Merge branch 'dev' of github.com:DevCloudFE/vue-devui into transfer
ForeseeBear Jan 31, 2022
acd0cca
Merge branch 'dev' of github.com:DevCloudFE/vue-devui into transfer
ForeseeBear Feb 7, 2022
e0b631c
Merge branch 'dev' of github.com:DevCloudFE/vue-devui into transfer
ForeseeBear Feb 15, 2022
3ca1eda
Merge branch 'dev' of github.com:DevCloudFE/vue-devui into transfer
ForeseeBear Feb 22, 2022
430b4f5
docs: 文档更改
ForeseeBear Feb 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
290 changes: 268 additions & 22 deletions packages/devui-vue/devui/transfer/__tests__/transfer.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { mount } from '@vue/test-utils';
import { ref, nextTick } from 'vue'
import { ref, reactive, watch, nextTick } from 'vue'
import DCheckbox from '../../checkbox/src/checkbox';
import DCheckboxGroup from '../../checkbox/src/checkbox-group'
import DTooltip from '../../tooltip/src/tooltip';
import DButton from '../../button/src/button';
import DTransfer from '../src/transfer'

const SOURCE_DATA = [
Expand Down Expand Up @@ -244,6 +246,271 @@ describe('d-transfer', () => {

})

it('d-transfer customTransfer work', async () => {
const leftData = [
{
key: '1',
value: 'Mark',
age: 11,
disabled: false,
},
{
key: '2',
value: 'Jacob',
age: 12,
disabled: false,
},
{
key: '3',
value: 'Danni',
age: 13,
disabled: false,
},
{
key: '4',
value: 'green',
age: 14,
disabled: false,
},
{
key: '5',
value: 'po',
age: 15,
disabled: false,
},
{
key: '6',
value: 'Book',
age: 16,
disabled: false,
}
]
const rightData = [
{
key: '21',
value: 'john',
age: 17,
disabled: false,
},
{
key: '22',
value: 'Joke',
age: 28,
disabled: false,
},
{
key: '23',
value: 'Echo',
age: 18,
disabled: false,
}
]
const leftOptions = reactive({
allChecked: false,
filterData: leftData,
checkedValues: [],
disabled: true,
});

const rightOptions = reactive({
allChecked: false,
filterData: rightData,
checkedValues: [],
disabled: true
})
const wrapper = mount({
components: {
DTransfer,
DCheckbox,
DCheckboxGroup,
DButton,
},
template: `
<d-transfer>
<template #left-header>
<div class="custom-transfer__header">Customize Source Header</div>
</template>
<template #left-body>
<div class="custom-transfer__body">
<div class="custom-transfer__body__list custom-transfer__body__header">
<DCheckbox
class="custom-transfer__body__list__checkout"
v-model="leftOptions.allChecked"
@change="changeAllSource(leftOptions)"
></DCheckbox>
<div class="custom-transfer__body__list__part">Id</div>
<div class="custom-transfer__body__list__part">Name</div>
<div class="custom-transfer__body__list__part">Age</div>
</div>
<DCheckboxGroup v-model="leftOptions.checkedValues">
<div class="custom-transfer__body__list" v-for="(item, idx) in leftOptions.filterData">
<DCheckbox
class="devui-transfer__panel__body__list__item"
:value="item.value"
:disabled="item.disabled"
:key="idx">
</DCheckbox>
<div class="custom-transfer__body__list__part">{{item.key}}</div>
<div class="custom-transfer__body__list__part">{{item.value}}</div>
<div class="custom-transfer__body__list__part">{{item.age}}</div>
</div>
</DCheckboxGroup>
</div>
</template>
<template #operation>
<div class="custom-transfer__operation">
<div class="custom-transfer__operation__group">
<DButton :disabled="leftOptions.disabled" @Click="updateRightFilterData" >Left</DButton>
<DButton style="margin-top: 12px;" :disabled="rightOptions.disabled" @click="updateLeftFilterData">Right</DButton>
</div>
</div>
</template>
<template #right-header>
<div class="custom-transfer__header">Customize Target Header</div>
</template>
<template #right-body>
<div class="custom-transfer__body">
<div class="custom-transfer__body__list custom-transfer__body__header">
<DCheckbox
class="custom-transfer__body__list__checkout"
v-model="rightOptions.allChecked"
@change="changeAllSource(rightOptions)"
></DCheckbox>
<div class="custom-transfer__body__list__part">Id</div>
<div class="custom-transfer__body__list__part">Name</div>
<div class="custom-transfer__body__list__part">Age</div>
</div>
<DCheckboxGroup v-model="rightOptions.checkedValues">
<div class="custom-transfer__body__list" v-for="(item, idx) in rightOptions.filterData">
<DCheckbox
class="devui-transfer__panel__body__list__item"
:value="item.value"
:disabled="item.disabled"
:key="idx">
</DCheckbox>
<div class="custom-transfer__body__list__part">{{item.key}}</div>
<div class="custom-transfer__body__list__part">{{item.value}}</div>
<div class="custom-transfer__body__list__part">{{item.age}}</div>
</div>
</DCheckboxGroup>
</div>
</template>
</d-transfer>
`,
setup() {
watch(
() => leftOptions.checkedValues,
(nVal) => {
rightOptions.disabled = nVal.length !== 0 ? false : true
leftOptions.allChecked = isEqual(nVal, leftOptions.filterData)
},
{
deep: true
}
)

watch(
() => rightOptions.checkedValues,
(nVal) => {
leftOptions.disabled = nVal.length !== 0 ? false : true
rightOptions.allChecked = isEqual(nVal, rightOptions.filterData)
},
{
deep: true
}
)

const isEqual = (source, target) => {
return target.length !== 0 && source.length === target.length
}

const changeAllSource = (source) => {
if (source.allChecked) {
source.checkedValues = source.filterData.map(item => item.value)
} else {
source.checkedValues = []
}
}

const updateRightFilterData = () => {
rightOptions.filterData = rightOptions.filterData.filter(item => {
const hasItem = rightOptions.checkedValues.includes(item.value)
if (hasItem) {
leftOptions.filterData.push(item)
}
return !hasItem
})
rightOptions.checkedValues = []
}

const updateLeftFilterData = () => {
leftOptions.filterData = leftOptions.filterData.filter(item => {
const hasItem = leftOptions.checkedValues.includes(item.value)
if (hasItem) {
rightOptions.filterData.push(item)
}
return !hasItem
})
leftOptions.checkedValues = []
}
return {
leftOptions,
rightOptions,
changeAllSource,
updateRightFilterData,
updateLeftFilterData
}
}
})

/**
* 测试自定义穿梭框 start
*/
const sourceWrapper = wrapper.find('.devui-transfer-source')
const tragetWrapper = wrapper.find('.devui-transfer-target')
const leftHeader = sourceWrapper.find('.custom-transfer__header')
const rightHeader = tragetWrapper.find('.custom-transfer__header')
expect(leftHeader.text()).toBe('Customize Source Header')
expect(rightHeader.text()).toBe('Customize Target Header')

const buttons = wrapper.findAllComponents({ name: 'DButton' })
expect(buttons[0].props().disabled).toBe(true)
expect(buttons[1].props().disabled).toBe(true)
const leftLabel = sourceWrapper.findAll('.devui-checkbox-group label')
expect(leftLabel.length).toBe(6)
expect(tragetWrapper.findAll('.devui-checkbox-group label').length).toBe(3)
leftLabel[0].trigger('click')
await nextTick()
leftLabel[1].trigger('click')
await nextTick()
expect(buttons[1].props().disabled).toBe(false)
wrapper.findAll('.devui-btn')[1].trigger('click')
await nextTick()
expect(sourceWrapper.findAll('.devui-checkbox-group label').length).toBe(4)
expect(tragetWrapper.findAll('.devui-checkbox-group label').length).toBe(5)

const rightLabel = tragetWrapper.findAll('.devui-checkbox-group label')
rightLabel[0].trigger('click')
await nextTick()
rightLabel[1].trigger('click')
await nextTick()
rightLabel[2].trigger('click')
await nextTick()
rightLabel[3].trigger('click')
await nextTick()
rightLabel[4].trigger('click')
await nextTick()
expect(tragetWrapper.findAll('.active').length).toBe(4)
expect(buttons[0].props().disabled).toBe(false)
wrapper.findAll('.devui-btn')[0].trigger('click')
await nextTick()
expect(sourceWrapper.findAll('.devui-checkbox-group label').length).toBe(9)
expect(tragetWrapper.findAll('.devui-checkbox-group label').length).toBe(0)
/**
* 测试自定义穿梭框 end
*/
})

// it('d-transfer tooltips work', async () => {
// const sourceOption = ref(SOURCE_DATA)
// const targetOption = ref(TARGET_DATA)
Expand Down Expand Up @@ -343,27 +610,6 @@ describe('d-transfer', () => {
})


// /**
// * 测试穿梭框拖拽排序 start
// */
// const startDragItemIndex = sourceOption.value.findIndex(item => item.value === '成都')
// const startDropItemIndex = sourceOption.value.findIndex(item => item.value === '上海')
// const dragItemValue = sourceOption.value[startDragItemIndex]
// const dropItemValue = sourceOption.value[startDropItemIndex]
// const dataSort = (target, dragItem, dropItem) => {
// const startIndex = target.findIndex(item => item.key === dragItem.key)
// const endIndex = target.findIndex(item => item.key === dropItem.key)
// target.splice(endIndex, 1, dragItem)
// target.splice(startIndex, 1, dropItem)
// }
// dataSort(sourceOption.value, dragItemValue, dropItemValue)
// await nextTick()
// const endDragItemIndex = sourceOption.value.findIndex(item => item.value === '成都')
// const endDropItemIndex = sourceOption.value.findIndex(item => item.value === '上海')
// // 4 1 // 1 4
// /**
// * 测试穿梭框拖拽排序 end
// */
/**
* 测试穿梭框拖拽排序 start
*/
Expand Down
10 changes: 6 additions & 4 deletions packages/devui-vue/docs/components/transfer/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -509,9 +509,11 @@ d-transfer 参数
| sourceOption | `Array` | [] | 可选参数，穿梭框源数据 | [基本用法](#基本用法) |
| targetOption | `Array` | [] | 可选参数，穿梭框目标数据 | [基本用法](#基本用法) |
| titles | `Array` | [] | 可选参数，穿梭框标题 | [基本用法](#基本用法) |
| height | `Array` | 320px | 可选参数，穿梭框高度 | [基本用法](#基本用法) |
| isSearch | `Array` | true | 可选参数，是否可以搜索 | [基本用法](#基本用法) |
| disabled | `Array` | false | 可选参数 穿梭框禁止使用 | [基本用法](#基本用法) |
| height | `String` | 320px | 可选参数，穿梭框高度 | [基本用法](#基本用法) |
| isSearch | `Boolean` | true | 可选参数，是否可以搜索 | [基本用法](#基本用法) |
| disabled | `Boolean` | false | 可选参数 穿梭框禁止使用 | [基本用法](#基本用法) |
| isSourceDroppable | `Boolean` | false | 可选参数，源是否可以拖拽 | [拖拽排序](#拖拽排序) |
| isTargetDroppable | `Boolean` | false | 可选参数，目标是否可以拖拽 | [拖拽排序](#拖拽排序) |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

api统一用中划线分隔的烤串命名方式吧
@ForeseeBear

| beforeTransfer | `(sourceOption, targetOption) => boolean \| Promise<boolean>` |- | 可选参数 穿梭框禁止使用 | [基本用法](#基本用法) |

d-transfer 事件
Expand All @@ -522,7 +524,7 @@ d-transfer 事件
| searching | `EventEmitter<{direction, keyword}>` | 当搜索时触发，返回目标穿梭框和搜索文字，不设置此事件则会使用默认方法； | [基本用法](#基本用法) |
| transferring | `EventEmitter<TransferDirection>` | 当穿梭时触发，返回目标穿梭框，不设置此事件则会使用默认方法； | [基本用法](#基本用法) |
| afterTransfer | `EventEmitter<TransferDirection>` | 当穿梭完成后，返回目标穿梭框，不设置transferEvent才会触发； | [基本用法](#基本用法) |
| onDragEnd | `(direction: string, dragItem: TransferItem, dropItem: TransferItem) => void` | 节点结束拖拽的回调； | [基本用法](#基本用法) |
| onDragEnd | `(direction: string, dragItem: TransferItem, dropItem: TransferItem) => void` | 节点结束拖拽的回调； | [拖拽排序](#拖拽排序) |


d-transfer.Item
Expand Down