test(Dialog): update test cases

2021-01-02 21:42:26 +08:00
parent 101b416fa2
commit 711ffd9d30
5 changed files with 218 additions and 199 deletions
@@ -0,0 +1,131 @@
+import Dialog from '../Dialog';
+import { mount } from '../../../test';
+
+test('should allow to intercept closing action with before-close prop', async () => {
+  const wrapper = mount(Dialog, {
+    props: {
+      show: true,
+      showCancelButton: true,
+      beforeClose: (action) => action === 'cancel',
+    },
+  });
+
+  const confirm = wrapper.find('.van-dialog__confirm');
+  confirm.trigger('click');
+  expect(wrapper.emitted('update:show')).toBeFalsy();
+
+  const cancel = wrapper.find('.van-dialog__cancel');
+  cancel.trigger('click');
+  expect(wrapper.emitted('update:show')).toBeTruthy();
+});
+
+test('should change confirm button color when using confirm-button-color prop', () => {
+  const wrapper = mount(Dialog, {
+    props: {
+      show: true,
+      confirmButtonColor: 'red',
+    },
+  });
+  const confirmButton = wrapper.find('.van-dialog__confirm');
+  expect(confirmButton.element.style.color).toEqual('red');
+});
+
+test('should change cancel button color when using cancel-button-color prop', () => {
+  const wrapper = mount(Dialog, {
+    props: {
+      show: true,
+      showCancelButton: true,
+      cancelButtonColor: 'red',
+    },
+  });
+  const cancelButton = wrapper.find('.van-dialog__cancel');
+  expect(cancelButton.element.style.color).toEqual('red');
+});
+
+test('should render button text correctly', () => {
+  const wrapper = mount(Dialog, {
+    props: {
+      show: true,
+      showCancelButton: true,
+      cancelButtonText: 'Custom Cancel',
+      confirmButtonText: 'Custom Confirm',
+    },
+  });
+  expect(wrapper.find('.van-dialog__footer').html()).toMatchSnapshot();
+});
+
+test('should render default slot correctly', () => {
+  const wrapper = mount(Dialog, {
+    props: {
+      show: true,
+    },
+    slots: {
+      default: () => 'Custom Message',
+    },
+  });
+  expect(wrapper.find('.van-dialog__content').html()).toMatchSnapshot();
+});
+
+test('should render title slot correctly', () => {
+  const wrapper = mount(Dialog, {
+    props: {
+      show: true,
+    },
+    slots: {
+      title: () => 'Custom Title',
+    },
+  });
+  expect(wrapper.find('.van-dialog__header').html()).toMatchSnapshot();
+});
+
+test('should render message as html when using allow-html prop', async () => {
+  const wrapper = mount(Dialog, {
+    props: {
+      show: true,
+      message: '<span class="foo">text</span>',
+      allowHtml: false,
+    },
+  });
+
+  expect(wrapper.find('.foo').exists()).toBeFalsy();
+
+  await wrapper.setProps({ allowHtml: true });
+  expect(wrapper.find('.foo').exists()).toBeTruthy();
+});
+
+test('should emit open event when show prop is set to true', async () => {
+  const onOpen = jest.fn();
+  const wrapper = mount(Dialog, {
+    props: {
+      onOpen,
+    },
+  });
+
+  await wrapper.setProps({ show: true });
+  expect(onOpen).toHaveBeenCalledTimes(1);
+});
+
+test('should emit close event when show prop is set to false', async () => {
+  const onClose = jest.fn();
+  const wrapper = mount(Dialog, {
+    props: {
+      show: true,
+      onClose,
+    },
+  });
+
+  await wrapper.setProps({ show: false });
+  expect(onClose).toHaveBeenCalledTimes(1);
+});
+
+test('should update width when using width prop', async () => {
+  const wrapper = mount(Dialog, {
+    props: {
+      show: true,
+      width: 200,
+    },
+  });
+
+  const dialog = wrapper.find('.van-dialog').element;
+  expect(dialog.style.width).toEqual('200px');
+});