mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
test(SwipeCell): update test cases
This commit is contained in:
chenjiahan
parent
013bcd1418
commit
eb47a3948d
@ -113,7 +113,7 @@ export default {
|
||||
| --- | --- | --- | --- |
|
||||
| text | 按钮文字 | _string_ | - |
|
||||
| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` |
|
||||
| color | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - |
|
||||
| color | 按钮颜色，支持传入 `linear-gradient` 渐变色 | _string_ | - |
|
||||
| icon `v2.4.4` | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
|
||||
| disabled | 是否禁用按钮 | _boolean_ | `false` | - |
|
||||
| loading | 是否显示为加载状态 | _boolean_ | `false` | - |
|
||||
|
||||
@ -1,63 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`auto calc width 1`] = `
|
||||
<div class="van-swipe-cell">
|
||||
<div class="van-swipe-cell__wrapper" style="transform: translate3d(50px, 0, 0); transition-duration: .6s;">
|
||||
<div class="van-swipe-cell__left">Left</div>
|
||||
<div class="van-swipe-cell__right">Right</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`drag and show left part 1`] = `
|
||||
<div class="van-swipe-cell">
|
||||
<div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition-duration: .6s;">
|
||||
<div class="van-swipe-cell__left">Left</div>
|
||||
<div class="van-swipe-cell__right">Right</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`drag and show left part 2`] = `
|
||||
<div class="van-swipe-cell">
|
||||
<div class="van-swipe-cell__wrapper" style="transform: translate3d(100px, 0, 0); transition-duration: .6s;">
|
||||
<div class="van-swipe-cell__left">Left</div>
|
||||
<div class="van-swipe-cell__right">Right</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`drag and show left part 3`] = `
|
||||
<div class="van-swipe-cell">
|
||||
<div class="van-swipe-cell__wrapper" style="transform: translate3d(100px, 0, 0); transition-duration: .6s;">
|
||||
<div class="van-swipe-cell__left">Left</div>
|
||||
<div class="van-swipe-cell__right">Right</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`drag and show left part 4`] = `
|
||||
<div class="van-swipe-cell">
|
||||
<div class="van-swipe-cell__wrapper" style="transform: translate3d(100px, 0, 0); transition-duration: .6s;">
|
||||
<div class="van-swipe-cell__left">Left</div>
|
||||
<div class="van-swipe-cell__right">Right</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`drag and show right part 1`] = `
|
||||
<div class="van-swipe-cell">
|
||||
<div class="van-swipe-cell__wrapper" style="transform: translate3d(-100px, 0, 0); transition-duration: .6s;">
|
||||
<div class="van-swipe-cell__left">Left</div>
|
||||
<div class="van-swipe-cell__right">Right</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render one side 1`] = `
|
||||
<div class="van-swipe-cell">
|
||||
<div class="van-swipe-cell__wrapper" style="transform: translate3d(50px, 0, 0); transition-duration: .6s;">
|
||||
<div class="van-swipe-cell__left">Left</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,192 +0,0 @@
|
||||
import SwipeCell from '..';
|
||||
import {
|
||||
mount,
|
||||
triggerDrag,
|
||||
later,
|
||||
mockGetBoundingClientRect,
|
||||
} from '../../../test';
|
||||
|
||||
const THRESHOLD = 0.15;
|
||||
const defaultProps = {
|
||||
props: {
|
||||
leftWidth: 100,
|
||||
rightWidth: 100,
|
||||
},
|
||||
slots: {
|
||||
left: () => 'Left',
|
||||
right: () => 'Right',
|
||||
},
|
||||
};
|
||||
|
||||
test('drag and show left part', () => {
|
||||
const wrapper = mount(SwipeCell, defaultProps);
|
||||
|
||||
triggerDrag(wrapper, 10, 0);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
triggerDrag(wrapper, 50, 0);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
triggerDrag(wrapper, 500, 0);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
triggerDrag(wrapper, 0, 100);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('drag and show right part', () => {
|
||||
const wrapper = mount(SwipeCell, defaultProps);
|
||||
|
||||
triggerDrag(wrapper, -50, 0);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('before-close prop', () => {
|
||||
let position;
|
||||
let instance;
|
||||
|
||||
const wrapper = mount(SwipeCell, {
|
||||
...defaultProps,
|
||||
props: {
|
||||
...defaultProps.props,
|
||||
beforeClose(params) {
|
||||
({ position } = params);
|
||||
({ instance } = params);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.trigger('click');
|
||||
expect(position).toEqual(undefined);
|
||||
|
||||
wrapper.vm.open('left');
|
||||
wrapper.trigger('click');
|
||||
expect(position).toEqual('cell');
|
||||
|
||||
wrapper.find('.van-swipe-cell__left').trigger('click');
|
||||
expect(position).toEqual('left');
|
||||
|
||||
wrapper.find('.van-swipe-cell__right').trigger('click');
|
||||
expect(position).toEqual('right');
|
||||
|
||||
instance.close();
|
||||
expect(wrapper.vm.offset).toEqual(0);
|
||||
|
||||
instance.open('left');
|
||||
wrapper.setData({ beforeClose: null });
|
||||
wrapper.trigger('click');
|
||||
expect(wrapper.vm.offset).toEqual(0);
|
||||
});
|
||||
|
||||
test('name prop', (done) => {
|
||||
const wrapper = mount(SwipeCell, {
|
||||
...defaultProps,
|
||||
props: {
|
||||
...defaultProps.props,
|
||||
name: 'test',
|
||||
onClose(position, instance, detail) {
|
||||
expect(detail.name).toEqual('test');
|
||||
done();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.open('left');
|
||||
wrapper.trigger('click');
|
||||
});
|
||||
|
||||
test('should reset after drag', () => {
|
||||
const wrapper = mount(SwipeCell, defaultProps);
|
||||
|
||||
triggerDrag(wrapper, defaultProps.leftWidth * THRESHOLD - 1, 0);
|
||||
expect(wrapper.vm.offset).toEqual(0);
|
||||
});
|
||||
|
||||
test('disabled prop', () => {
|
||||
const wrapper = mount(SwipeCell, {
|
||||
props: {
|
||||
...defaultProps.props,
|
||||
disabled: true,
|
||||
},
|
||||
});
|
||||
|
||||
triggerDrag(wrapper, 50, 0);
|
||||
expect(wrapper.vm.offset).toEqual(0);
|
||||
});
|
||||
|
||||
test('auto calc width', async () => {
|
||||
const restoreMock = mockGetBoundingClientRect({
|
||||
width: 50,
|
||||
});
|
||||
|
||||
const wrapper = mount(SwipeCell, {
|
||||
slots: defaultProps.scopedSlots,
|
||||
});
|
||||
|
||||
await later();
|
||||
triggerDrag(wrapper, 100, 0);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
restoreMock();
|
||||
});
|
||||
|
||||
test('render one side', async () => {
|
||||
const restoreMock = mockGetBoundingClientRect({
|
||||
width: 50,
|
||||
});
|
||||
|
||||
const wrapper = mount(SwipeCell, {
|
||||
slots: {
|
||||
left: defaultProps.scopedSlots.left,
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
triggerDrag(wrapper, 100, 0);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
restoreMock();
|
||||
});
|
||||
|
||||
test('trigger open event when open left side', () => {
|
||||
const wrapper = mount(SwipeCell, defaultProps);
|
||||
|
||||
triggerDrag(wrapper, 50, 0);
|
||||
expect(wrapper.emitted('open')[0][0]).toEqual({
|
||||
name: '',
|
||||
detail: '',
|
||||
position: 'left',
|
||||
});
|
||||
});
|
||||
|
||||
test('trigger open event when open right side', () => {
|
||||
const wrapper = mount(SwipeCell, defaultProps);
|
||||
|
||||
triggerDrag(wrapper, -50, 0);
|
||||
expect(wrapper.emitted('open')[0][0]).toEqual({
|
||||
name: '',
|
||||
detail: '',
|
||||
position: 'right',
|
||||
});
|
||||
});
|
||||
|
||||
test('trigger close event when closed', () => {
|
||||
const wrapper = mount(SwipeCell, defaultProps);
|
||||
|
||||
wrapper.vm.open('left');
|
||||
wrapper.vm.close();
|
||||
|
||||
expect(wrapper.emitted('close')[0][0]).toEqual({
|
||||
name: '',
|
||||
position: undefined,
|
||||
});
|
||||
});
|
||||
|
||||
test('should not trigger close event again when already closed', () => {
|
||||
const wrapper = mount(SwipeCell, defaultProps);
|
||||
|
||||
wrapper.vm.open('left');
|
||||
wrapper.vm.close();
|
||||
wrapper.vm.close();
|
||||
expect(wrapper.emitted('close').length).toEqual(1);
|
||||
});
|
||||
195
src/swipe-cell/test/index.spec.js
Normal file
195
src/swipe-cell/test/index.spec.js
Normal file
@ -0,0 +1,195 @@
|
||||
import SwipeCell from '..';
|
||||
import {
|
||||
mount,
|
||||
triggerDrag,
|
||||
later,
|
||||
mockGetBoundingClientRect,
|
||||
} from '../../../test';
|
||||
|
||||
const defaultProps = {
|
||||
props: {
|
||||
leftWidth: 100,
|
||||
rightWidth: 100,
|
||||
},
|
||||
slots: {
|
||||
left: () => 'Left',
|
||||
right: () => 'Right',
|
||||
},
|
||||
};
|
||||
|
||||
test('should allow to drag to show left part', async () => {
|
||||
const wrapper = mount(SwipeCell, defaultProps);
|
||||
|
||||
triggerDrag(wrapper, 100, 0);
|
||||
await later();
|
||||
|
||||
const track = wrapper.find('.van-swipe-cell__wrapper').element;
|
||||
expect(track.style.transform).toEqual('translate3d(100px, 0, 0)');
|
||||
});
|
||||
|
||||
test('should allow to drag to show right part', async () => {
|
||||
const wrapper = mount(SwipeCell, defaultProps);
|
||||
|
||||
triggerDrag(wrapper, -100, 0);
|
||||
await later();
|
||||
|
||||
const track = wrapper.find('.van-swipe-cell__wrapper').element;
|
||||
expect(track.style.transform).toEqual('translate3d(-100px, 0, 0)');
|
||||
});
|
||||
|
||||
test('should call beforeClose before closing', () => {
|
||||
let position;
|
||||
|
||||
const wrapper = mount(SwipeCell, {
|
||||
...defaultProps,
|
||||
props: {
|
||||
...defaultProps.props,
|
||||
beforeClose(params) {
|
||||
({ position } = params);
|
||||
},
|
||||
},
|
||||
});
|
||||
const track = wrapper.find('.van-swipe-cell__wrapper').element;
|
||||
|
||||
wrapper.trigger('click');
|
||||
expect(position).toEqual(undefined);
|
||||
|
||||
wrapper.vm.open('left');
|
||||
wrapper.trigger('click');
|
||||
expect(position).toEqual('cell');
|
||||
|
||||
wrapper.find('.van-swipe-cell__left').trigger('click');
|
||||
expect(position).toEqual('left');
|
||||
|
||||
wrapper.find('.van-swipe-cell__right').trigger('click');
|
||||
expect(position).toEqual('right');
|
||||
|
||||
wrapper.vm.close();
|
||||
expect(track.style.transform).toEqual('translate3d(0px, 0, 0)');
|
||||
});
|
||||
|
||||
test('should close swipe cell after clicked', async () => {
|
||||
const wrapper = mount(SwipeCell, defaultProps);
|
||||
|
||||
wrapper.vm.open('left');
|
||||
await later();
|
||||
|
||||
const track = wrapper.find('.van-swipe-cell__wrapper').element;
|
||||
expect(track.style.transform).toEqual('translate3d(100px, 0, 0)');
|
||||
|
||||
await wrapper.trigger('click');
|
||||
expect(track.style.transform).toEqual('translate3d(0px, 0, 0)');
|
||||
});
|
||||
|
||||
test('should emit open event with name when using name prop', () => {
|
||||
const wrapper = mount(SwipeCell, {
|
||||
...defaultProps,
|
||||
props: {
|
||||
...defaultProps.props,
|
||||
name: 'test',
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.open('left');
|
||||
expect(wrapper.emitted('open')[0]).toEqual([
|
||||
{ name: 'test', position: 'left' },
|
||||
]);
|
||||
});
|
||||
|
||||
test('should emit close event with name when using name prop', () => {
|
||||
const wrapper = mount(SwipeCell, {
|
||||
...defaultProps,
|
||||
props: {
|
||||
...defaultProps.props,
|
||||
name: 'test',
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.open('left');
|
||||
wrapper.vm.close();
|
||||
expect(wrapper.emitted('close')[0]).toEqual([{ name: 'test' }]);
|
||||
});
|
||||
|
||||
test('should reset transform after short draging', async () => {
|
||||
const wrapper = mount(SwipeCell, defaultProps);
|
||||
|
||||
triggerDrag(wrapper, 5, 0);
|
||||
await later();
|
||||
|
||||
const track = wrapper.find('.van-swipe-cell__wrapper').element;
|
||||
expect(track.style.transform).toEqual('translate3d(0px, 0, 0)');
|
||||
});
|
||||
|
||||
test('should not allow to drag when using disabled prop', async () => {
|
||||
const wrapper = mount(SwipeCell, {
|
||||
props: {
|
||||
...defaultProps.props,
|
||||
disabled: true,
|
||||
},
|
||||
});
|
||||
|
||||
triggerDrag(wrapper, 50, 0);
|
||||
await later();
|
||||
|
||||
const track = wrapper.find('.van-swipe-cell__wrapper').element;
|
||||
expect(track.style.transform).toEqual('translate3d(0px, 0, 0)');
|
||||
});
|
||||
|
||||
test('should auto calc width', async () => {
|
||||
const restoreMock = mockGetBoundingClientRect({
|
||||
width: 50,
|
||||
});
|
||||
|
||||
const wrapper = mount(SwipeCell, {
|
||||
slots: defaultProps.slots,
|
||||
});
|
||||
|
||||
triggerDrag(wrapper, 100, 0);
|
||||
await later();
|
||||
|
||||
const track = wrapper.find('.van-swipe-cell__wrapper').element;
|
||||
expect(track.style.transform).toEqual('translate3d(50px, 0, 0)');
|
||||
restoreMock();
|
||||
});
|
||||
|
||||
test('should emit open event when opening left side', () => {
|
||||
const wrapper = mount(SwipeCell, defaultProps);
|
||||
|
||||
triggerDrag(wrapper, 50, 0);
|
||||
expect(wrapper.emitted('open')[0][0]).toEqual({
|
||||
name: '',
|
||||
position: 'left',
|
||||
});
|
||||
});
|
||||
|
||||
test('should emit open event when opening right side', () => {
|
||||
const wrapper = mount(SwipeCell, defaultProps);
|
||||
|
||||
triggerDrag(wrapper, -50, 0);
|
||||
expect(wrapper.emitted('open')[0][0]).toEqual({
|
||||
name: '',
|
||||
position: 'right',
|
||||
});
|
||||
});
|
||||
|
||||
test('should emit close event after closed', () => {
|
||||
const wrapper = mount(SwipeCell, defaultProps);
|
||||
|
||||
wrapper.vm.open('left');
|
||||
wrapper.vm.close();
|
||||
|
||||
expect(wrapper.emitted('close')[0][0]).toEqual({
|
||||
name: '',
|
||||
});
|
||||
});
|
||||
|
||||
test('should not trigger close event again if already closed', () => {
|
||||
const wrapper = mount(SwipeCell, defaultProps);
|
||||
|
||||
wrapper.vm.open('left');
|
||||
wrapper.vm.close();
|
||||
expect(wrapper.emitted('close').length).toEqual(1);
|
||||
|
||||
wrapper.vm.close();
|
||||
expect(wrapper.emitted('close').length).toEqual(1);
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user