From eb47a3948d2dfa7d8a02761f8c0429a7b96b305b Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Thu, 7 Jan 2021 19:22:43 +0800 Subject: [PATCH] test(SwipeCell): update test cases --- src/action-bar/README.zh-CN.md | 2 +- .../test/__snapshots__/index.legacy.js.snap | 63 ------ src/swipe-cell/test/index.legacy.js | 192 ----------------- src/swipe-cell/test/index.spec.js | 195 ++++++++++++++++++ 4 files changed, 196 insertions(+), 256 deletions(-) delete mode 100644 src/swipe-cell/test/__snapshots__/index.legacy.js.snap delete mode 100644 src/swipe-cell/test/index.legacy.js create mode 100644 src/swipe-cell/test/index.spec.js diff --git a/src/action-bar/README.zh-CN.md b/src/action-bar/README.zh-CN.md index e43359530..28d5ad844 100644 --- a/src/action-bar/README.zh-CN.md +++ b/src/action-bar/README.zh-CN.md @@ -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` | - | diff --git a/src/swipe-cell/test/__snapshots__/index.legacy.js.snap b/src/swipe-cell/test/__snapshots__/index.legacy.js.snap deleted file mode 100644 index def90a113..000000000 --- a/src/swipe-cell/test/__snapshots__/index.legacy.js.snap +++ /dev/null @@ -1,63 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`auto calc width 1`] = ` -
-
-
Left
-
Right
-
-
-`; - -exports[`drag and show left part 1`] = ` -
-
-
Left
-
Right
-
-
-`; - -exports[`drag and show left part 2`] = ` -
-
-
Left
-
Right
-
-
-`; - -exports[`drag and show left part 3`] = ` -
-
-
Left
-
Right
-
-
-`; - -exports[`drag and show left part 4`] = ` -
-
-
Left
-
Right
-
-
-`; - -exports[`drag and show right part 1`] = ` -
-
-
Left
-
Right
-
-
-`; - -exports[`render one side 1`] = ` -
-
-
Left
-
-
-`; diff --git a/src/swipe-cell/test/index.legacy.js b/src/swipe-cell/test/index.legacy.js deleted file mode 100644 index 4e4fe6fca..000000000 --- a/src/swipe-cell/test/index.legacy.js +++ /dev/null @@ -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); -}); diff --git a/src/swipe-cell/test/index.spec.js b/src/swipe-cell/test/index.spec.js new file mode 100644 index 000000000..e3401e714 --- /dev/null +++ b/src/swipe-cell/test/index.spec.js @@ -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); +});