feat: ActionSheet component

2020-07-06 16:31:59 +08:00
parent 2539a548b6
commit aa09ba0fd9
12 changed files with 1090 additions and 11 deletions
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>基础用法</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>展示取消按钮</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>展示描述信息</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+  </div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>选项状态</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+  </div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>自定义面板</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+  </div>
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+</div>
+`;
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`callback events 1`] = `
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--loading">
+    <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+  </button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button>
+  <div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
+</div>
+`;
+
+exports[`close-icon prop 1`] = `
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
+      <!----></i></div>
+</div>
+`;
+
+exports[`color option 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
+
+exports[`description prop 1`] = `
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__description">This is a description</div><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
+</div>
+`;
+
+exports[`disable lazy-render 1`] = `
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
+  <div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
+</div>
+`;
+
+exports[`render title and default slot 1`] = `
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
+      <!----></i></div>
+  <div class="van-action-sheet__content">Default</div>
+</div>
+`;
+
+exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>`;
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
@@ -0,0 +1,186 @@
+import { mount, later } from '../../../test';
+import ActionSheet from '..';
+
+test('callback events', () => {
+  const callback = jest.fn();
+  const onInput = jest.fn();
+  const onCancel = jest.fn();
+  const onSelect = jest.fn();
+
+  const actions = [
+    { name: 'Option', callback },
+    { name: 'Option', disabled: true },
+    { name: 'Option', loading: true },
+    { name: 'Option', subname: 'Subname' },
+  ];
+
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      actions,
+      cancelText: 'Cancel',
+    },
+    context: {
+      on: {
+        input: onInput,
+        cancel: onCancel,
+        select: onSelect,
+      },
+    },
+  });
+
+  const options = wrapper.findAll('.van-action-sheet__item');
+  options.at(0).trigger('click');
+  options.at(1).trigger('click');
+  wrapper.find('.van-action-sheet__cancel').trigger('click');
+
+  expect(callback).toHaveBeenCalled();
+  expect(onCancel).toHaveBeenCalled();
+  expect(onInput).toHaveBeenCalledWith(false);
+  expect(onSelect).toHaveBeenCalledWith(actions[0], 0);
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('click overlay and close', async () => {
+  const onInput = jest.fn();
+  const onClickOverlay = jest.fn();
+  const div = document.createElement('div');
+
+  mount({
+    template: `
+      <div>
+        <action-sheet
+          :value="true"
+          :get-container="getContainer"
+          @input="onInput"
+          @click-overlay="onClickOverlay"
+        />
+      </div>
+    `,
+    components: {
+      ActionSheet,
+    },
+    data() {
+      return {
+        getContainer: () => div,
+      };
+    },
+    methods: {
+      onInput,
+      onClickOverlay,
+    },
+  });
+
+  await later();
+
+  div.querySelector('.van-overlay').click();
+  expect(onInput).toHaveBeenCalledWith(false);
+  expect(onClickOverlay).toHaveBeenCalledTimes(1);
+});
+
+test('disable lazy-render', () => {
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      lazyRender: false,
+      actions: [{ name: 'Option' }, { name: 'Option' }],
+      cancelText: 'Cancel',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render title and default slot', () => {
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      title: 'Title',
+    },
+    scopedSlots: {
+      default() {
+        return 'Default';
+      },
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('get container', () => {
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      getContainer: 'body',
+    },
+  });
+
+  expect(wrapper.vm.$el.parentNode).toEqual(document.body);
+});
+
+test('close-on-click-action prop', () => {
+  const onInput = jest.fn();
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      actions: [{ name: 'Option' }],
+      closeOnClickAction: true,
+    },
+    context: {
+      on: {
+        input: onInput,
+      },
+    },
+  });
+
+  const option = wrapper.find('.van-action-sheet__item');
+  option.trigger('click');
+
+  expect(onInput).toHaveBeenCalledWith(false);
+});
+
+test('round prop', () => {
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      round: true,
+      actions: [{ name: 'Option' }],
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('color option', () => {
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      actions: [{ name: 'Option', color: 'red' }],
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('description prop', () => {
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      description: 'This is a description',
+      actions: [{ name: 'Option' }],
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('close-icon prop', () => {
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      title: 'Title',
+      closeIcon: 'cross',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});