[Improvement] Dialog: optimize style without content (#1233)

packages/dialog/dialog.vue

@@ -2,12 +2,12 @@
   <transition name="van-dialog-bounce">
     <div v-show="value" :class="[b(), className]">
       <div v-if="title" v-text="title" :class="b('header')" />
-      <div :class="b('content')" class="van-hairline">
+      <div :class="b('content')" v-if="message || $slots.default">
         <slot>
-          <div v-if="message" v-html="message" :class="b('message', { withtitle: title })" />
+          <div v-if="message" v-html="message" :class="b('message', { 'has-title': title })" />
         </slot>
       </div>
-      <div :class="b('footer', { 'buttons': showCancelButton && showConfirmButton })">
+      <div class="van-hairline--top" :class="b('footer', { 'buttons': showCancelButton && showConfirmButton })">
         <van-button
           v-show="showCancelButton"
           :loading="loading.cancel"

packages/dialog/test/__snapshots__/demo.spec.js.snap

@@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
       <!----><span class="van-button__text">高级用法</span></button>
     <div class="van-dialog" style="display:none;">
       <!---->
-      <div class="van-hairline van-dialog__content">
+      <div class="van-dialog__content">
         <div placeholder="请输入用户名" class="van-cell van-hairline van-field">
           <!---->
           <div class="van-cell__title"><span>用户名</span>
@@ -45,7 +45,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
       </div>
-      <div class="van-dialog__footer van-dialog__footer--buttons">
+      <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons">
         <button class="van-button van-button--default van-button--large van-dialog__cancel">
           <!----><span class="van-button__text">
         取消

packages/dialog/test/index.spec.js

@@ -0,0 +1,63 @@
+import Vue from 'vue';
+import Dialog from '..';
+import DialogVue from '../dialog';
+import { mount } from '@vue/test-utils';
+import { later, transitionStub } from '../../../test/utils';
+
+transitionStub();
+
+test('Dialog function call', async() => {
+  Dialog.close();
+  Dialog.alert('1');
+
+  const callback = jest.fn();
+  const dialog = document.querySelector('.van-dialog');
+
+  await later();
+  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.mock.calls[0][0]).toEqual('cancel');
+  Dialog.confirm().then(callback);
+  document.querySelector('.van-dialog__confirm').click();
+
+  await later();
+  expect(callback.mock.calls[1][0]).toEqual('confirm');
+});
+
+test('before close', () => {
+  const wrapper = mount(DialogVue, {
+    propsData: {
+      beforeClose: (action, done) => done(false)
+    }
+  });
+
+  const cancel = wrapper.find('.van-dialog__cancel');
+
+  cancel.trigger('click');
+  expect(wrapper.emitted('cancel')).toBeFalsy();
+
+  wrapper.setProps({
+    beforeClose: (action, done) => done()
+  });
+  cancel.trigger('click');
+  expect(wrapper.emitted('cancel')).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(DialogVue.name)).toBeTruthy();
+});

packages/vant-css/src/dialog.css

@@ -17,17 +17,11 @@
     text-align: center;
   }
 
-  &__content {
-    &::after {
-      border-bottom-width: 1px;
-    }
-  }
-
   &__message {
     line-height: 1.5;
     padding: 15px 20px;
 
-    &--withtitle {
+    &--has-title {
       color: $gray-dark;
       font-size: 14px;
     }
@@ -46,6 +40,10 @@
     }
   }
 
+  &__header + &__footer {
+    margin-top: 15px;
+  }
+
   .van-button {
     border: 0;
   }

test/utils.js

@@ -40,7 +40,7 @@ export function triggerDrag(el, x = 0, y = 0) {
 
 // promisify setTimeout
 export function later(delay) {
-  return new Promise(function(resolve) {
+  return new Promise(resolve => {
     setTimeout(resolve, delay);
   });
 }