feat: migrate SwipeCell component

2020-07-12 15:07:32 +08:00
parent ccf2c7da31
commit 8c4c51fea1
10 changed files with 1068 additions and 10 deletions
@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div>
+      <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"><button class="van-button van-button--primary van-button--normal van-button--square">
+              <div class="van-button__content"><span class="van-button__text">选择</span></div>
+            </button></div>
+          <div class="van-cell van-cell--borderless">
+            <div class="van-cell__title"><span>单元格</span></div>
+            <div class="van-cell__value"><span>内容</span></div>
+          </div>
+          <div class="van-swipe-cell__right"><button class="van-button van-button--danger van-button--normal van-button--square">
+              <div class="van-button__content"><span class="van-button__text">删除</span></div>
+            </button> <button class="van-button van-button--primary van-button--normal van-button--square">
+              <div class="van-button__content"><span class="van-button__text">收藏</span></div>
+            </button></div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div class="van-swipe-cell">
+        <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition-duration: .6s;">
+          <div class="van-card">
+            <div class="van-card__header"><a class="van-card__thumb">
+                <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
+                  <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+                      <!----></i></div>
+                </div>
+              </a>
+              <div class="van-card__content">
+                <div>
+                  <div class="van-card__title van-multi-ellipsis--l2">商品标题</div>
+                  <div class="van-card__desc van-ellipsis">描述信息</div>
+                </div>
+                <div class="van-card__bottom">
+                  <div class="van-card__price">
+                    <div><span class="van-card__price-currency">¥</span><span class="van-card__price-integer">2</span>.<span class="van-card__price-decimal">00</span></div>
+                  </div>
+                  <div class="van-card__num">x2</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="van-swipe-cell__right"><button class="delete-button van-button van-button--danger van-button--normal van-button--square">
+              <div class="van-button__content"><span class="van-button__text">删除</span></div>
+            </button></div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <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"><button class="van-button van-button--primary van-button--normal van-button--square">
+              <div class="van-button__content"><span class="van-button__text">选择</span></div>
+            </button></div>
+          <div class="van-cell van-cell--borderless">
+            <div class="van-cell__title"><span>单元格</span></div>
+            <div class="van-cell__value"><span>内容</span></div>
+          </div>
+          <div class="van-swipe-cell__right"><button class="van-button van-button--danger van-button--normal van-button--square">
+              <div class="van-button__content"><span class="van-button__text">删除</span></div>
+            </button></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
@@ -0,0 +1,63 @@
+// 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>
+`;
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
@@ -0,0 +1,229 @@
+import SwipeCell from '..';
+import {
+  mount,
+  triggerDrag,
+  later,
+  mockGetBoundingClientRect,
+} from '../../../test';
+
+const THRESHOLD = 0.15;
+const defaultProps = {
+  propsData: {
+    leftWidth: 100,
+    rightWidth: 100,
+  },
+  scopedSlots: {
+    left: () => 'Left',
+    right: () => 'Right',
+  },
+};
+
+test('drag and show left part', () => {
+  const wrapper = mount(SwipeCell, defaultProps);
+
+  triggerDrag(wrapper, 10, 0);
+  expect(wrapper).toMatchSnapshot();
+
+  triggerDrag(wrapper, 50, 0);
+  expect(wrapper).toMatchSnapshot();
+
+  triggerDrag(wrapper, 500, 0);
+  expect(wrapper).toMatchSnapshot();
+
+  triggerDrag(wrapper, 0, 100);
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('drag and show right part', () => {
+  const wrapper = mount(SwipeCell, defaultProps);
+
+  triggerDrag(wrapper, -50, 0);
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('on-close prop', () => {
+  let position;
+  let instance;
+
+  const wrapper = mount(SwipeCell, {
+    ...defaultProps,
+    propsData: {
+      ...defaultProps.propsData,
+      onClose(pos, ins) {
+        position = pos;
+        instance = ins;
+      },
+    },
+  });
+
+  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(instance.offset).toEqual(0);
+
+  instance.open('left');
+  wrapper.setData({ onClose: null });
+  wrapper.trigger('click');
+  expect(wrapper.vm.offset).toEqual(0);
+});
+
+test('before-close prop', () => {
+  let position;
+  let instance;
+
+  const wrapper = mount(SwipeCell, {
+    ...defaultProps,
+    propsData: {
+      ...defaultProps.propsData,
+      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,
+    propsData: {
+      ...defaultProps.propsData,
+      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, {
+    propsData: {
+      ...defaultProps.propsData,
+      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, {
+    scopedSlots: defaultProps.scopedSlots,
+  });
+
+  await later();
+  triggerDrag(wrapper, 100, 0);
+  expect(wrapper).toMatchSnapshot();
+
+  restoreMock();
+});
+
+test('render one side', async () => {
+  const restoreMock = mockGetBoundingClientRect({
+    width: 50,
+  });
+
+  const wrapper = mount(SwipeCell, {
+    scopedSlots: {
+      left: defaultProps.scopedSlots.left,
+    },
+  });
+
+  await later();
+  triggerDrag(wrapper, 100, 0);
+  expect(wrapper).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);
+});