test(Popover): update test cases

src/popover/demo/index.vue

@@ -93,7 +93,6 @@
     <van-popover
       v-model:show="show.customContent"
       placement="top-start"
-      style="margin-left: 16px;"
       @select="onSelect"
     >
       <van-grid

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

@@ -1,29 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders demo correctly 1`] = `
+exports[`should render demo and match snapshot 1`] = `
-<div>
+<div><span class="van-popover__wrapper"><!--teleport start--><!--teleport end--><button type="button" class="van-button van-button--primary van-button--normal"><div class="van-button__content"><!----><span class="van-button__text">浅色风格</span>
-  <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></button></span><span class="van-popover__wrapper"><!--teleport start--><!--teleport end--><button type="button" class="van-button van-button--primary van-button--normal"><div class="van-button__content"><!----><span class="van-button__text">深色风格</span>
-        </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>
-  <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+  <div class="van-cell van-cell--clickable van-field" role="button" tabindex="0">
-    <div class="van-cell__title van-field__label"><span>选择弹出位置</span></div>
+    <!---->
-    <div class="van-cell__value van-field__value">
+    <div class="van-cell__title van-field__label"><span>选择弹出位置</span>
-      <div class="van-field__body"><input type="text" name="picker" readonly="readonly" class="van-field__control"></div>
+      <!---->
-    </div><i class="van-icon van-icon-arrow van-cell__right-icon">
-      <!----></i>
     </div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body"><input type="text" name="picker" class="van-field__control" readonly="">
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
 </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><span class="van-popover__wrapper"><!--teleport start--><!--teleport end--><button type="button" class="van-button van-button--primary van-button--normal"><div class="van-button__content"><!----><span class="van-button__text">展示图标</span>
-          展示图标
+  <!---->
-        </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></button></span><span class="van-popover__wrapper"><!--teleport start--><!--teleport end--><button type="button" class="van-button van-button--primary van-button--normal"><div class="van-button__content"><!----><span class="van-button__text">禁用选项</span>
-          禁用选项
+<!---->
-        </span></div></button></span></div>
+</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">
+<div><span class="van-popover__wrapper"><!--teleport start--><!--teleport end--><button type="button" class="van-button van-button--primary van-button--normal"><div class="van-button__content"><!----><span class="van-button__text">自定义内容</span>
-          自定义内容
+  <!---->
-        </span></div></button></span></div>
+</div></button></span></div>
-</div>
 `;

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

@@ -2,29 +2,47 @@
 
 exports[`should allow to custom the className of action 1`] = `
 <div class="van-popover__action foo">
+  <!---->
   <div class="van-popover__action-text van-hairline--bottom">Option</div>
 </div>
 `;
 
-exports[`should locate to reference element when showed 1`] = `<!---->`;
+exports[`should locate to reference element when showed 1`] = `
+<!---->
+<transition-stub>
+  <!---->
+</transition-stub>
+`;
 
 exports[`should locate to reference element when showed 2`] = `
-<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2006;" data-popper-placement="bottom">
+<!---->
+<transition-stub>
+  <div style="z-index: 2005; position: absolute; left: 0px; top: 8px; margin: 0px;" class="van-popup van-popover van-popover--light" data-popper-placement="bottom">
     <div class="van-popover__arrow"></div>
     <div class="van-popover__content"></div>
-</div>
+    <!---->
+  </div>
+</transition-stub>
 `;
 
 exports[`should locate to reference element when showed 3`] = `
-<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2006; display: none;" data-popper-placement="bottom">
+<!---->
+<transition-stub>
+  <div style="z-index: 2005; display: none;" class="van-popup van-popover van-popover--light">
     <div class="van-popover__arrow"></div>
     <div class="van-popover__content"></div>
-</div>
+    <!---->
+  </div>
+</transition-stub>
 `;
 
 exports[`should watch placement prop and update location 1`] = `
-<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="z-index: 2007; position: absolute; left: 0px; top: -8px; margin: 0px;" data-popper-placement="top">
+<!---->
+<transition-stub>
+  <div style="z-index: 2006; position: absolute; left: 0px; top: -8px; margin: 0px;" class="van-popup van-popover van-popover--light" data-popper-placement="top">
     <div class="van-popover__arrow"></div>
     <div class="van-popover__content"></div>
-</div>
+    <!---->
+  </div>
+</transition-stub>
 `;

src/popover/test/index.spec.js

@@ -7,14 +7,16 @@ const baseActions = [
   { text: 'Option 3' },
 ];
 
-test('should emit select event when clicking the action', () => {
+test('should emit select event when clicking the action', async () => {
   const wrapper = mount(Popover, {
     propsData: {
-      value: true,
+      show: true,
+      teleport: null,
       actions: baseActions,
     },
   });
 
+  await later();
   wrapper.find('.van-popover__action').trigger('click');
   expect(wrapper.emitted('select')[0]).toEqual([baseActions[0], 0]);
 });
@@ -22,7 +24,8 @@ test('should emit select event when clicking the action', () => {
 test('should not emit select event when the action is disabled', () => {
   const wrapper = mount(Popover, {
     propsData: {
-      value: true,
+      show: true,
+      teleport: null,
       actions: [{ text: 'Option', disabled: true }],
     },
   });
@@ -31,26 +34,28 @@ test('should not emit select event when the action is disabled', () => {
   expect(wrapper.emitted('select')).toBeFalsy();
 });
 
-test('should close popover when clicking the action', () => {
+test('should close popover when clicking the action', async () => {
   const wrapper = mount(Popover, {
     propsData: {
-      value: true,
+      show: true,
+      teleport: null,
       actions: baseActions,
     },
   });
 
   wrapper.find('.van-popover__action').trigger('click');
-  expect(wrapper.emitted('input')[0][0]).toEqual(false);
+  expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
 
-  wrapper.setProps({ closeOnClickAction: false });
+  await wrapper.setProps({ closeOnClickAction: false });
   wrapper.find('.van-popover__action').trigger('click');
-  expect(wrapper.emitted('input').length).toEqual(1);
+  expect(wrapper.emitted('update:show').length).toEqual(1);
 });
 
 test('should allow to custom the className of action', () => {
   const wrapper = mount(Popover, {
     propsData: {
-      value: true,
+      show: true,
+      teleport: null,
       actions: [{ text: 'Option', className: 'foo' }],
     },
   });
@@ -58,40 +63,21 @@ test('should allow to custom the className of action', () => {
   expect(wrapper.find('.van-popover__action').html()).toMatchSnapshot();
 });
 
-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,
+      teleport: root,
     },
   });
 
   expect(root.innerHTML).toMatchSnapshot();
 
-  wrapper.setProps({ value: true });
+  await wrapper.setProps({ show: true });
   await later();
   expect(root.innerHTML).toMatchSnapshot();
 
-  wrapper.setProps({ value: false });
+  await wrapper.setProps({ show: false });
   expect(root.innerHTML).toMatchSnapshot();
 });
 
@@ -99,12 +85,12 @@ test('should watch placement prop and update location', async () => {
   const root = document.createElement('div');
   const wrapper = mount(Popover, {
     propsData: {
-      value: true,
+      show: true,
-      getContainer: () => root,
+      teleport: root,
     },
   });
 
-  wrapper.setProps({
+  await wrapper.setProps({
     placement: 'top',
   });
 
@@ -116,16 +102,16 @@ test('should close popover when touch outside content', async () => {
   const root = document.createElement('div');
   const wrapper = mount(Popover, {
     propsData: {
-      value: true,
+      show: true,
-      getContainer: () => root,
+      teleport: root,
     },
   });
 
   const popover = root.querySelector('.van-popover');
   trigger(popover, 'touchstart');
-  expect(wrapper.emitted('input')).toBeFalsy();
+  expect(wrapper.emitted('update:show')).toBeFalsy();
 
   document.body.appendChild(root);
   trigger(document.body, 'touchstart');
-  expect(wrapper.emitted('input')[0][0]).toEqual(false);
+  expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
 });