test(SwipeCell): update test cases

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` | - |

src/swipe-cell/test/__snapshots__/index.legacy.js.snap

@@ -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>
-`;

src/swipe-cell/test/index.legacy.js

@@ -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);
-});

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);
+});