test(Dialog): update test cases

src/dialog/test/__snapshots__/index.legacy.js.snap

@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`allow-html prop 1`] = `<div class="van-dialog__message">&lt;span&gt;text&lt;/span&gt;</div>`;
-
-exports[`button color 1`] = `
-<div role="dialog" class="van-dialog" name="van-dialog-bounce">
-  <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;">
-      <div class="van-button__content"><span class="van-button__text">取消</span></div>
-    </button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" style="color: red;">
-      <div class="van-button__content"><span class="van-button__text">确认</span></div>
-    </button></div>
-</div>
-`;
-
-exports[`button text 1`] = `
-<div role="dialog" class="van-dialog" name="van-dialog-bounce">
-  <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel">
-      <div class="van-button__content"><span class="van-button__text">Custom cancel</span></div>
-    </button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
-      <div class="van-button__content"><span class="van-button__text">Custom confirm</span></div>
-    </button></div>
-</div>
-`;
-
-exports[`default slot 1`] = `
-<div role="dialog" class="van-dialog" name="van-dialog-bounce">
-  <div class="van-dialog__content">Custom Message</div>
-  <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm">
-      <div class="van-button__content"><span class="van-button__text">确认</span></div>
-    </button></div>
-</div>
-`;
-
-exports[`title slot 1`] = `
-<div role="dialog" class="van-dialog" name="van-dialog-bounce">
-  <div class="van-dialog__header van-dialog__header--isolated">Custom Title</div>
-  <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm">
-      <div class="van-button__content"><span class="van-button__text">确认</span></div>
-    </button></div>
-</div>
-`;

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

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render button text correctly 1`] = `
+<div class="van-hairline--top van-dialog__footer">
+  <button type="button"
+          class="van-button van-button--default van-button--large van-dialog__cancel"
+  >
+    <div class="van-button__content">
+      <span class="van-button__text">
+        Custom Cancel
+      </span>
+    </div>
+  </button>
+  <button type="button"
+          class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"
+  >
+    <div class="van-button__content">
+      <span class="van-button__text">
+        Custom Confirm
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`should render default slot correctly 1`] = `
+<div class="van-dialog__content">
+  Custom Message
+</div>
+`;
+
+exports[`should render title slot correctly 1`] = `
+<div class="van-dialog__header van-dialog__header--isolated">
+  Custom Title
+</div>
+`;

src/dialog/test/funciton-call.spec.js

@@ -0,0 +1,51 @@
+import { createApp } from 'vue';
+import { later } from '../../../test';
+import Dialog from '..';
+import DialogComponent from '../Dialog';
+
+test('should update default options when calling setDefaultOptions method', () => {
+  Dialog.setDefaultOptions({ lockScroll: false });
+  expect(Dialog.currentOptions.lockScroll).toBeFalsy();
+  Dialog.resetDefaultOptions();
+  expect(Dialog.currentOptions.lockScroll).toBeTruthy();
+});
+
+test('should expose Dialog component', () => {
+  expect(Dialog.Component).toEqual(DialogComponent);
+});
+
+test('should register component to app', () => {
+  const app = createApp();
+  app.use(Dialog);
+  expect(app.component(DialogComponent.name)).toBeTruthy();
+});
+
+test('should render dialog after calling Dialog', async () => {
+  const wrapper = document.createElement('div');
+  Dialog.alert({
+    message: '1',
+    teleport: wrapper,
+  });
+
+  await later();
+  const dialog = wrapper.querySelector('.van-dialog');
+  expect(dialog).toBeTruthy();
+});
+
+test('should close dialog after calling Dialog.call', async () => {
+  const wrapper = document.createElement('div');
+  Dialog.alert({
+    message: '1',
+    teleport: wrapper,
+  });
+
+  await later();
+  const dialog = wrapper.querySelector('.van-dialog');
+  expect(dialog.style.display).toEqual('');
+
+  Dialog.close();
+  await later();
+  expect(dialog.className.split(' ')).toContain(
+    'van-dialog-bounce-leave-active'
+  );
+});

src/dialog/test/index.legacy.js

@@ -1,158 +0,0 @@
-import Vue from 'vue';
-import Dialog from '..';
-import DialogComponent from '../Dialog';
-import { mount, later, trigger } from '../../../test';
-
-test('Dialog function call', async () => {
-  Dialog.close();
-  Dialog.alert({
-    message: '1',
-    showCancelButton: true,
-  });
-
-  await later();
-
-  const callback = jest.fn();
-  const dialog = document.querySelector('.van-dialog');
-
-  expect(dialog.style.display).toEqual('');
-  Dialog.close();
-
-  await later();
-  expect(dialog.style.display).toEqual('none');
-  Dialog.confirm().catch(callback);
-  document.querySelector('.van-dialog__cancel').click();
-
-  await later();
-  expect(callback).toHaveBeenCalledWith('cancel');
-  Dialog.confirm().then(callback);
-  document.querySelector('.van-dialog__confirm').click();
-
-  await later();
-  expect(callback).toHaveBeenNthCalledWith(2, 'confirm');
-});
-
-test('before close', () => {
-  const wrapper = mount(DialogComponent, {
-    props: {
-      value: true,
-      showCancelButton: true,
-      closeOnClickOverlay: true,
-      beforeClose: (action, done) => done(false),
-    },
-  });
-
-  const cancel = wrapper.find('.van-dialog__cancel');
-
-  cancel.trigger('click');
-  expect(wrapper.emitted('input')).toBeFalsy();
-
-  wrapper.setProps({
-    beforeClose: (action, done) => {
-      if (action === 'cancel') {
-        done();
-      }
-    },
-  });
-
-  const overlay = document.querySelector('.van-overlay');
-  trigger(overlay, 'click');
-  expect(wrapper.emitted('input')).toBeFalsy();
-
-  cancel.trigger('click');
-  expect(wrapper.emitted('input')[0]).toBeTruthy();
-});
-
-test('set default options', () => {
-  Dialog.setDefaultOptions({ lockScroll: false });
-  expect(Dialog.currentOptions.lockScroll).toBeFalsy();
-  Dialog.resetDefaultOptions();
-  expect(Dialog.currentOptions.lockScroll).toBeTruthy();
-});
-
-test('register component', () => {
-  Vue.use(Dialog);
-  expect(Vue.component(DialogComponent.name)).toBeTruthy();
-});
-
-test('button color', () => {
-  const wrapper = mount(DialogComponent, {
-    props: {
-      value: true,
-      showCancelButton: true,
-      cancelButtonColor: 'white',
-      confirmButtonColor: 'red',
-    },
-  });
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('button text', () => {
-  const wrapper = mount(DialogComponent, {
-    props: {
-      value: true,
-      showCancelButton: true,
-      cancelButtonText: 'Custom cancel',
-      confirmButtonText: 'Custom confirm',
-    },
-  });
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('dialog component', () => {
-  expect(Dialog.Component).toEqual(DialogComponent);
-});
-
-test('default slot', () => {
-  const wrapper = mount(DialogComponent, {
-    props: {
-      value: true,
-    },
-    slots: {
-      default: () => 'Custom Message',
-    },
-  });
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('title slot', () => {
-  const wrapper = mount(DialogComponent, {
-    props: {
-      value: true,
-    },
-    slots: {
-      title: () => 'Custom Title',
-    },
-  });
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('allow-html prop', () => {
-  const wrapper = mount(DialogComponent, {
-    props: {
-      value: true,
-      message: '<span>text</span>',
-      allowHtml: false,
-    },
-  });
-  expect(wrapper.find('.van-dialog__message')).toMatchSnapshot();
-});
-
-test('open & close event', () => {
-  const wrapper = mount(DialogComponent);
-  wrapper.vm.value = true;
-  expect(wrapper.emitted('open')).toBeTruthy();
-  wrapper.vm.value = false;
-  expect(wrapper.emitted('close')).toBeTruthy();
-});
-
-test('width prop', () => {
-  const wrapper = mount(DialogComponent, {
-    props: {
-      value: true,
-      width: 200,
-    },
-  });
-
-  expect(wrapper.element.style.width).toEqual('200px');
-});

src/dialog/test/index.spec.js

@@ -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');
+});