test(Popover): add test cases

2020-11-20 14:26:41 +08:00
parent 1999195c46
commit 99b52726b6
4 changed files with 167 additions and 80 deletions
@@ -1,2 +1,120 @@
-// import Popover from '..';
-// import { mount } from '../../../test';
+import Popover from '..';
+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);
+});