text: import { createVue, destroyVM, waitImmediate } from '../util';
  
  describe('Dialog', () => {
    let vm;
    afterEach(() => {
      destroyVM(vm);
    });
  
    it('create', done => {
      vm = createVue({
        template: `
          <div>
            <el-dialog :title="title" :visible="visible"></el-dialog>
          </div>
        `,
  
        data() {
          return {
            title: 'dialog test',
            visible: true
          };
        }
      }, true);
      const dialog = vm.$children[0];
      setTimeout(() => {
        expect(document.querySelector('.v-modal')).to.exist;
        expect(vm.$el.querySelector('.el-dialog__title').textContent).to.equal('dialog test');
        expect(dialog.$el.style.display).to.not.equal('none');
        done();
      }, 10);
    });
  
    it('render correct content', done => {
      vm = createVue({
        template: `
          <div>
            <el-dialog :title="title" :visible="visible">
              <span>这是一段信息</span>
              <span slot="footer" class="dialog-footer">
                <tm-button @click.native="dialogVisible = false">取消</tm-button>
                <tm-button type="primary" @click.native="dialogVisible = false">确定</tm-button>
              </span>
            </el-dialog>
          </div>
        `,
  
        data() {
          return {
            title: 'dialog test',
            visible: true
          };
        }
      }, true);
      setTimeout(() => {
        const footerBtns = vm.$el.querySelectorAll('.el-dialog__footer .tm-button');
        expect(vm.$el.querySelector('.el-dialog__body span').textContent).to.equal('这是一段信息');
        expect(footerBtns.length).to.equal(2);
        expect(footerBtns[0].querySelector('span').textContent).to.equal('取消');
        expect(footerBtns[1].querySelector('span').textContent).to.equal('确定');
        done();
      }, 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" :visible.sync="visible">
              <span>这是一段信息</span>
            </el-dialog>
          </div>
        `,
  
        data() {
          return {
            title: 'dialog test',
            visible: false
          };
        }
      }, true);
      const dialogTm = vm.$children[0].$el;
      expect(getComputedStyle(dialogTm).display).to.equal('none');
      vm.visible = true;
      setTimeout(() => {
        expect(getComputedStyle(dialogTm).display).to.not.equal('none');
        vm.visible = false;
        setTimeout(() => {
          expect(getComputedStyle(dialogTm).display).to.equal('none');
          done();
        }, 400);
      }, 50);
    });
  
    describe('props', () => {
      const getDialogVm = (props, options) => {
        return createVue(Object.assign({
          template: `
            <div>
              <el-dialog ${ props } :title="title" :visible="visible">
                <span>这是一段信息</span>
              </el-dialog>
            </div>
          `,
  
          data() {
            return {
              title: 'dialog test',
              visible: true
            };
          }
        }, options), true);
      };
  
      it('fullscreen', () => {
        vm = getDialogVm('fullscreen width="40%"');
        const dialogTm = vm.$el.querySelector('.el-dialog');
        expect(dialogTm.classList.contains('is-fullscreen')).to.true;
        expect(dialogTm.style.width).to.be.empty;
      });
  
      it('top', () => {
        vm = getDialogVm('top="100px"');
        expect(vm.$el.querySelector('.el-dialog').style.marginTop).to.equal('100px');
      });
  
      it('custom-class', () => {
        vm = getDialogVm('custom-class="my-dialog"');
        expect(vm.$el.querySelector('.el-dialog').classList.contains('my-dialog')).to.true;
      });
    });
  
    it('events', done => {
      vm = createVue({
        template: `
          <div>
            <el-dialog
              @open="handleOpen"
              @opened="handleOpened"
              @close="handleClose"
              @closed="handleClosed"
              :title="title"
              :visible.sync="visible">
              <span>这是一段信息</span>
            </el-dialog>
          </div>
        `,
  
        methods: {
          handleOpen() {
            this.state = 'open';
          },
  
          handleOpened() {
            this.animationState = 'opened';
          },
  
          handleClose() {
            this.state = 'close';
          },
  
          handleClosed() {
            this.animationState = 'closed';
          }
        },
  
        data() {
          return {
            state: '',
            animationState: '',
            title: 'dialog test',
            visible: false
          };
        }
      }, true);
      vm.visible = true;
      setTimeout(() => {
        expect(vm.state).to.equal('open');
        expect(vm.animationState).to.equal('opened');
        vm.visible = false;
        setTimeout(() => {
          expect(vm.state).to.equal('close');
          expect(vm.animationState).to.equal('closed');
          done();
        }, 400);
      }, 400);
    });
    it('click dialog to close', done => {
      vm = createVue({
        template: `
          <div>
            <el-dialog :title="title" :visible.sync="visible">
              <span>这是一段信息</span>
            </el-dialog>
          </div>
        `,
  
        data() {
          return {
            title: 'dialog test',
            visible: true
          };
        }
      }, true);
      const dialog = vm.$children[0];
      setTimeout(() => {
        dialog.$el.click();
        setTimeout(() => {
          expect(vm.visible).to.be.false;
          done();
        }, 400);
      }, 50);
    });
    it('click header btn', done => {
      vm = createVue({
        template: `
          <div>
            <el-dialog :title="title" :visible.sync="visible">
              <span>这是一段信息</span>
            </el-dialog>
          </div>
        `,
  
        data() {
          return {
            title: 'dialog test',
            visible: true
          };
        }
      }, true);
      const dialog = vm.$children[0];
      setTimeout(() => {
        dialog.$el.querySelector('.el-dialog__headerbtn').click();
        setTimeout(() => {
          expect(vm.visible).to.be.false;
          done();
        }, 500);
      }, 50);
    });
    it('before close', done => {
      const spy = sinon.spy();
      vm = createVue({
        template: `
          <div>
            <el-dialog :title="title" :visible="visible" :before-close="beforeClose"></el-dialog>
          </div>
        `,
  
        data() {
          return {
            title: 'dialog test',
            visible: true
          };
        },
        methods: {
          beforeClose(done) {
            spy();
            done();
          }
        }
      }, true);
      const dialog = vm.$children[0];
      setTimeout(() => {
        dialog.$el.click();
        setTimeout(() => {
          expect(spy.called).to.be.true;
          done();
        }, 500);
      }, 10);
    });
  
    it('destroyOnClose', async() => {
      vm = createVue({
        template: `
          <div>
            <el-dialog :title="title" :visible.sync="visible" destroy-on-close>
              <input />
            </el-dialog>
          </div>
        `,
  
        data() {
          return {
            title: 'dialog test',
            visible: true
          };
        }
      }, true);
      const dialog = vm.$children[0];
      await waitImmediate();
      dialog.$el.querySelector('input').value = '123';
      dialog.$el.click();
      await waitImmediate();
      vm.visible = true;
      await waitImmediate();
      expect(dialog.$el.querySelector('input').value).to.be.equal('');
    });
  });
  