Dialog: remove v-model, add append-to-body

test/unit/specs/dialog.spec.js

@@ -10,7 +10,7 @@ describe('Dialog', () => {
     vm = createVue({
       template: `
         <div>
-          <el-dialog :title="title" v-model="visible"></el-dialog>
+          <el-dialog :title="title" :visible="visible"></el-dialog>
         </div>
       `,
 
@@ -34,7 +34,7 @@ describe('Dialog', () => {
     vm = createVue({
       template: `
         <div>
-          <el-dialog :title="title" v-model="visible">
+          <el-dialog :title="title" :visible="visible">
             <span>这是一段信息</span>
             <span slot="footer" class="dialog-footer">
               <el-button @click.native="dialogVisible = false">取消</el-button>
@@ -61,11 +61,33 @@ describe('Dialog', () => {
     }, 100);
   });
 
+  it('append to body', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-dialog :title="title" append-to-body :visible="visible"></el-dialog>
+        </div>
+      `,
+
+      data() {
+        return {
+          title: 'dialog test',
+          visible: true
+        };
+      }
+    }, true);
+    const dialog = vm.$children[0];
+    setTimeout(() => {
+      expect(dialog.$el.parentNode).to.equal(document.body);
+      done();
+    }, 10);
+  });
+
   it('open and close', done => {
     vm = createVue({
       template: `
         <div>
-          <el-dialog :title="title" v-model="visible">
+          <el-dialog :title="title" :visible.sync="visible">
             <span>这是一段信息</span>
           </el-dialog>
         </div>
@@ -83,11 +105,11 @@ describe('Dialog', () => {
     vm.visible = true;
     setTimeout(() => {
       expect(dialog.$el.style.display).to.not.equal('none');
-      document.querySelector('.v-modal').click();
+      vm.visible = false;
       setTimeout(() => {
-        expect(vm.visible).to.equal(false);
+        expect(dialog.$el.style.display).to.equal('none');
         done();
-      }, 50);
+      }, 400);
     }, 50);
   });
 
@@ -96,7 +118,7 @@ describe('Dialog', () => {
       return createVue(Object.assign({
         template: `
           <div>
-            <el-dialog ${ props } :title="title" v-model="visible">
+            <el-dialog ${ props } :title="title" :visible="visible">
               <span>这是一段信息</span>
             </el-dialog>
           </div>
@@ -111,14 +133,14 @@ describe('Dialog', () => {
       }, options), true);
     };
 
-    it('size', () => {
-      vm = getDialogVm('size="full"');
-      expect(vm.$el.querySelector('.el-dialog').classList.contains('el-dialog--full')).to.true;
+    it('fullscreen', () => {
+      vm = getDialogVm('fullscreen');
+      expect(vm.$el.querySelector('.el-dialog').classList.contains('is-fullscreen')).to.true;
     });
 
     it('top', () => {
       vm = getDialogVm('top="100px"');
-      expect(vm.$el.querySelector('.el-dialog').style.top).to.equal('100px');
+      expect(vm.$el.querySelector('.el-dialog').style.marginTop).to.equal('100px');
     });
 
     it('custom-class', () => {
@@ -127,7 +149,7 @@ describe('Dialog', () => {
     });
   });
 
-  it('callbacks', done => {
+  it('events', done => {
     vm = createVue({
       template: `
         <div>
@@ -135,7 +157,7 @@ describe('Dialog', () => {
             @open="handleOpen"
             @close="handleClose"
             :title="title"
-            v-model="visible">
+            :visible.sync="visible">
             <span>这是一段信息</span>
           </el-dialog>
         </div>
@@ -159,11 +181,10 @@ describe('Dialog', () => {
         };
       }
     }, true);
-    const dialog = vm.$children[0];
-    dialog.open();
+    vm.visible = true;
     setTimeout(() => {
       expect(vm.state).to.equal('open');
-      dialog.close();
+      vm.visible = false;
       setTimeout(() => {
         expect(vm.state).to.equal('closed');
         done();