test(Popover): add test cases

src/popover/index.js

@@ -13,6 +13,7 @@ import Popup from '../popup';
 
 // add Object.assign polyfill for popper.js
 // see: https://popper.js.org/docs/v2/browser-support/
+/* istanbul ignore if */
 if (!Object.assign) {
   Object.assign = extendsHelper;
 }
@@ -59,19 +60,12 @@ export default createComponent({
   },
 
   watch: {
+    value: 'updateLocation',
     placement: 'updateLocation',
-
-    value(value) {
-      if (value) {
-        this.updateLocation();
-      }
-    },
   },
 
   mounted() {
-    if (this.value) {
+    this.updateLocation();
-      this.updateLocation();
-    }
   },
 
   beforeDestroy() {
@@ -161,6 +155,7 @@ export default createComponent({
       this.$emit('open');
     },
 
+    /* istanbul ignore next */
     onOpened() {
       this.$emit('opened');
     },
@@ -169,6 +164,7 @@ export default createComponent({
       this.$emit('close');
     },
 
+    /* istanbul ignore next */
     onClosed() {
       this.$emit('closed');
     },

src/popover/test/__snapshots__/demo.spec.js.snap

@@ -2,57 +2,28 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div>
+  <div><span class="van-popover__wrapper" style="margin-left: 16px;"><button class="van-button van-button--primary van-button--normal"><div class="van-button__content"><span class="van-button__text">
-    <div class="van-row">
+          浅色风格
-      <div class="van-col van-col--8">span: 8</div>
+        </span></div></button></span> <span class="van-popover__wrapper" style="margin-left: 16px;"><button class="van-button van-button--primary van-button--normal"><div class="van-button__content"><span class="van-button__text">
-      <div class="van-col van-col--8">span: 8</div>
+          深色风格
-      <div class="van-col van-col--8">span: 8</div>
+        </span>
-    </div>
+</div></button></span></div>
-    <div class="van-row">
+<div>
-      <div class="van-col van-col--4">span: 4</div>
+  <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
-      <div class="van-col van-col--10 van-col--offset-4">
+    <div class="van-cell__title van-field__label"><span>选择弹出位置</span></div>
-        offset: 4, span: 10
+    <div class="van-cell__value van-field__value">
-      </div>
+      <div class="van-field__body"><input type="text" name="picker" readonly="readonly" class="van-field__control"></div>
-    </div>
+    </div><i class="van-icon van-icon-arrow van-cell__right-icon">
-    <div class="van-row">
+      <!----></i>
-      <div class="van-col van-col--12 van-col--offset-12">
-        offset: 12, span: 12
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-row">
-      <div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">span: 8</div>
-      <div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">span: 8</div>
-      <div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">span: 8</div>
-    </div>
-  </div>
-  <div>
-    <div class="van-row van-row--flex">
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-    </div>
-    <div class="van-row van-row--flex van-row--justify-center">
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-    </div>
-    <div class="van-row van-row--flex van-row--justify-end">
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-    </div>
-    <div class="van-row van-row--flex van-row--justify-space-between">
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-    </div>
-    <div class="van-row van-row--flex van-row--justify-space-around">
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-    </div>
   </div>
 </div>
+<div><span class="van-popover__wrapper" style="margin-left: 16px;"><button class="van-button van-button--primary van-button--normal"><div class="van-button__content"><span class="van-button__text">
+          展示图标
+        </span></div></button></span> <span class="van-popover__wrapper" style="margin-left: 16px;"><button class="van-button van-button--primary van-button--normal"><div class="van-button__content"><span class="van-button__text">
+          禁用选项
+        </span></div></button></span></div>
+<div><span class="van-popover__wrapper" style="margin-left: 16px;"><button class="van-button van-button--primary van-button--normal"><div class="van-button__content"><span class="van-button__text">
+          自定义内容
+        </span></div></button></span></div>
+</div>
 `;

src/popover/test/__snapshots__/index.spec.js.snap

@@ -1,22 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`gutter prop 1`] = `
+exports[`should locate to reference element when showed 1`] = `<!---->`;
-<div class="van-row">
+
-  <div class="van-col van-col--24">24</div>
+exports[`should locate to reference element when showed 2`] = `
-  <div class="van-col van-col--12" style="padding-right: 12px;">12</div>
+<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2005;" data-popper-placement="bottom">
-  <div class="van-col van-col--12" style="padding-left: 12px;">12</div>
+  <div class="van-popover__arrow"></div>
-  <div class="van-col van-col--8" style="padding-right: 16px;">8</div>
+  <div class="van-popover__content"></div>
-  <div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">8</div>
+</div>
-  <div class="van-col van-col--8" style="padding-left: 16px;">8</div>
+`;
-  <div class="van-col van-col--6" style="padding-right: 18px;">6</div>
+
-  <div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
+exports[`should locate to reference element when showed 3`] = `
-  <div class="van-col van-col--6" style="padding-left: 12px; padding-right: 6px;">6</div>
+<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2005; display: none;" data-popper-placement="bottom">
-  <div class="van-col van-col--6" style="padding-left: 18px;">6</div>
+  <div class="van-popover__arrow"></div>
-  <div class="van-col van-col--7" style="padding-right: 18px;">7</div>
+  <div class="van-popover__content"></div>
-  <div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
+</div>
-  <div class="van-col van-col--5" style="padding-left: 12px; padding-right: 6px;">5</div>
+`;
-  <div class="van-col van-col--4" style="padding-left: 18px;">4</div>
+
-  <div class="van-col van-col--3" style="padding-right: 12px;">3</div>
+exports[`should watch placement prop and update location 1`] = `
-  <div class="van-col van-col--2" style="padding-left: 12px;">2</div>
+<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="z-index: 2006; position: absolute; left: 0px; top: -8px; margin: 0px;" data-popper-placement="top">
+  <div class="van-popover__arrow"></div>
+  <div class="van-popover__content"></div>
 </div>
 `;

src/popover/test/index.spec.js

@@ -1,2 +1,120 @@
-// import Popover from '..';
+import Popover from '..';
-// import { mount } from '../../../test';
+import { later, mount, trigger } from '../../../test';
+
+const baseActions = [
+  { text: 'Option 1' },
+  { text: 'Option 2' },
+  { text: 'Option 3' },
+];
+
+test('should emit select event when clicking the action', () => {
+  const wrapper = mount(Popover, {
+    propsData: {
+      value: true,
+      actions: baseActions,
+    },
+  });
+
+  wrapper.find('.van-popover__action').trigger('click');
+  expect(wrapper.emitted('select')[0]).toEqual([baseActions[0], 0]);
+});
+
+test('should not emit select event when the action is disabled', () => {
+  const wrapper = mount(Popover, {
+    propsData: {
+      value: true,
+      actions: [{ text: 'Option', disabled: true }],
+    },
+  });
+
+  wrapper.find('.van-popover__action').trigger('click');
+  expect(wrapper.emitted('select')).toBeFalsy();
+});
+
+test('should close popover when clicking the action', () => {
+  const wrapper = mount(Popover, {
+    propsData: {
+      value: true,
+      actions: baseActions,
+    },
+  });
+
+  wrapper.find('.van-popover__action').trigger('click');
+  expect(wrapper.emitted('input')[0][0]).toEqual(false);
+
+  wrapper.setProps({ closeOnClickAction: false });
+  wrapper.find('.van-popover__action').trigger('click');
+  expect(wrapper.emitted('input').length).toEqual(1);
+});
+
+test('should not init popper.js instance before showed', async () => {
+  const wrapper = mount(Popover);
+  expect(wrapper.vm.popper).toBeFalsy();
+  wrapper.destroy();
+});
+
+test('should destroy popper.js instance when unmouted', async () => {
+  const wrapper = mount(Popover, {
+    propsData: {
+      value: true,
+    },
+  });
+
+  await later();
+  expect(wrapper.vm.popper).toBeTruthy();
+  wrapper.destroy();
+  expect(wrapper.vm.popper).toEqual(null);
+});
+
+test('should locate to reference element when showed', async () => {
+  const root = document.createElement('div');
+  const wrapper = mount(Popover, {
+    propsData: {
+      getContainer: () => root,
+    },
+  });
+
+  expect(root.innerHTML).toMatchSnapshot();
+
+  wrapper.setProps({ value: true });
+  await later();
+  expect(root.innerHTML).toMatchSnapshot();
+
+  wrapper.setProps({ value: false });
+  expect(root.innerHTML).toMatchSnapshot();
+});
+
+test('should watch placement prop and update location', async () => {
+  const root = document.createElement('div');
+  const wrapper = mount(Popover, {
+    propsData: {
+      value: true,
+      getContainer: () => root,
+    },
+  });
+
+  wrapper.setProps({
+    placement: 'top',
+  });
+
+  await later();
+  expect(root.innerHTML).toMatchSnapshot();
+});
+
+test('should close popover when touch outside content', async () => {
+  const root = document.createElement('div');
+  const wrapper = mount(Popover, {
+    propsData: {
+      value: true,
+      getContainer: () => root,
+    },
+  });
+
+  const popover = root.querySelector('.van-popover');
+  trigger(popover, 'touchstart');
+  expect(wrapper.emitted('input')).toBeFalsy();
+
+  document.body.appendChild(root);
+  trigger(document.body, 'touchstart');
+  expect(wrapper.emitted('input')[0][0]).toEqual(false);
+});