refactor(messagebox):finish refactor messagebox component #479

packages/element3/packages/message-box/__tests__/MessageBox.spec.js

@@ -1,3 +1,87 @@
-describe('MessageBox.vue', () => {
-  test('todo', () => {})
+// import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import messageBox from '../src/MessageBox.js'
+const sleep = (time = 0) => new Promise((resolve) => setTimeout(resolve, time))
+const selector = '.el-message-box__wrapper'
+describe('MessageBox.js', () => {
+  afterEach(() => {
+    const el = document.querySelector('.el-message-box__wrapper')
+    if (!el) return
+    if (el.parentNode) {
+      el.parentNode.removeChild(el)
+    }
+    messageBox.close()
+  })
+  test('alert', async () => {
+    messageBox.alert({
+      title: '消息',
+      message: '这是一段内容'
+    })
+    const msgbox = document.querySelector(selector)
+    expect(
+      msgbox.querySelector('.el-message-box__title span').textContent
+    ).toEqual('消息')
+    expect(
+      msgbox.querySelector('.el-message-box__message').querySelector('p')
+        .textContent
+    ).toEqual('这是一段内容')
+  })
+  test('messageBox of message is html', async () => {
+    let instanceProprety = ''
+    const callback = jest.fn((action, instance) => {
+      instanceProprety = instance
+    })
+    const { instance } = messageBox.alert(
+      `<strong>这是 <i>HTML</i> 片段</strong>`,
+      `html片段`,
+      {
+        dangerouslyUseHTMLString: true,
+        callback
+      }
+    )
+    expect(instance.proxy.message).toBe(
+      '<strong>这是 <i>HTML</i> 片段</strong>'
+    )
+    expect(
+      document.querySelector('.el-message-box__message').textContent
+    ).toContain('HTML')
+    expect(instance.proxy.title).toBe('html片段')
+    expect(instance.proxy.dangerouslyUseHTMLString).toBeTruthy()
+    instance.proxy.closeHandle()
+    await nextTick()
+    expect(instanceProprety.message).toBeTruthy()
+    expect(callback).toHaveBeenCalled()
+  })
+  test('confirm', async () => {
+    messageBox.confirm({
+      type: 'warning',
+      title: '消息',
+      message: '这是一段内容'
+    })
+    const msgbox = document.querySelector(selector)
+    const calsslist = msgbox.querySelector('.el-message-box__status').classList
+    expect(calsslist.length).toEqual(2)
+    expect(calsslist.contains('el-icon-warning')).toBeTruthy()
+  })
+  test('kind of prompt', async () => {
+    let v = ''
+    const callback = jest.fn(({ value }) => {
+      v = value
+    })
+    const instance = messageBox.prompt('请输入邮箱', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      confirmButtonClass: 'mmm',
+      inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
+      inputErrorMessage: '邮箱格式不正确'
+    })
+    instance.then(callback)
+    await nextTick()
+    const btn = document.querySelector('.mmm')
+    instance.instance.proxy.inputValue = '[email protected]'
+    await btn.click()
+    await sleep()
+    expect(callback).toHaveBeenCalled()
+    expect(v).toBeTruthy()
+  })
 })

packages/element3/packages/message-box/__tests__/MessageBoxvue.spec.js

@@ -0,0 +1,279 @@
+import { mount } from '@vue/test-utils'
+import { nextTick, h, ref } from 'vue'
+import MessageBox from '../src/MessageBox.vue'
+describe('MessageBox.vue', () => {
+  describe('proprety', () => {
+    it('proprety title', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          title: 'chushihua'
+        }
+      })
+      expect(warpper.find('.el-message-box__title').text()).toBe('chushihua')
+    })
+    it('proprety center', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          center: true
+        }
+      })
+      expect(warpper.find('.el-message-box--center').exists()).toBeTruthy()
+    })
+    it('proprety customClass', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          customClass: 'customClass'
+        }
+      })
+      expect(warpper.find('.customClass').exists()).toBeTruthy()
+    })
+    it('proprety iconClass', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          iconClass: 'iconClass'
+        }
+      })
+      expect(warpper.vm.icon).toBe('iconClass')
+    })
+    it('iconclass with center', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          iconClass: 'iconClass',
+          center: true,
+          title: 'title'
+        }
+      })
+      expect(warpper.find('.iconClass').exists()).toBeTruthy()
+    })
+    it('proprety type', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          title: 'title',
+          center: true
+        }
+      })
+
+      expect(warpper.find('.el-icon-info').exists()).toBeTruthy()
+    })
+    it('showClose', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          title: '12',
+          showClose: false
+        }
+      })
+      expect(warpper.find('.el-message-box__headerbtn').exists()).toBeFalsy()
+    })
+    it('showClose toBeTruthy', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          title: '12'
+        }
+      })
+      expect(warpper.find('.el-message-box__headerbtn').exists()).toBeTruthy()
+    })
+    it('proprety beforeClose', async () => {
+      let object = {}
+      const warpper = mount(MessageBox, {
+        props: {
+          title: '12',
+          beforeClose: (action, instance, done) => {
+            object.action = action
+            object.instance = instance
+            object.done = done
+          }
+        }
+      })
+      await warpper.find('.el-message-box__headerbtn').trigger('click')
+      expect(warpper.componentVM).toEqual(object.instance)
+      expect(object.action).toBe('cancel')
+    })
+    it('review messageBox when value was done', async () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          title: '12',
+          beforeClose: (action, instance, done) => {
+            done()
+          }
+        }
+      })
+      await warpper.find('.el-message-box__headerbtn').trigger('click')
+      expect(warpper.find('.el-message-box__headerbtn').isVisible()).toBeFalsy()
+      expect(warpper.find('.v-modal').exists()).toBeFalsy()
+    })
+    it('showClose lockScroll', () => {
+      document.body.classList.remove('el-popup-parent--hidden')
+      mount(MessageBox, {
+        props: {
+          title: '12',
+          lockScroll: false
+        },
+        attachTo: document.getElementById('body')
+      })
+      expect(document.body.className).not.toBe('el-popup-parent--hidden')
+    })
+    it('meesage of normal', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          message: '333'
+        }
+      })
+      expect(warpper.find('.el-message-box__message > p').text()).toBe('333')
+    })
+    it('meesage is VNode', () => {
+      const warpper = mount(MessageBox, {
+        slots: {
+          default: h('p', null, [
+            h('span', null, '内容可以是 '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ])
+        }
+      })
+
+      expect(warpper.find('.el-message-box__message > p').text()).toBe(
+        `内容可以是 VNode`
+      )
+    })
+    it('dangerouslyUseHTMLString', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          dangerouslyUseHTMLString: true,
+          message: '<div class="mmm">444</div>'
+        }
+      })
+      expect(warpper.find('.mmm').exists()).toBeTruthy()
+    })
+    it('showInput', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          showInput: true
+        }
+      })
+      expect(warpper.find('.el-message-box__input').isVisible()).toBeTruthy()
+    })
+    it('inputValue inputPlaceholder', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          showInput: true,
+          inputValue: '444',
+          inputPlaceholder: '555'
+        }
+      })
+      expect(warpper.find('.el-input__inner').element.value).toEqual('444')
+      expect(
+        warpper.find('.el-input__inner').attributes('placeholder')
+      ).toEqual('555')
+    })
+
+    it('cancelButtonText, showCancelButton', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          cancelButtonText: 'cancel',
+          showCancelButton: true,
+          cancelButtonClass: '4444'
+        }
+      })
+      expect(warpper.findAll('.el-message-box__btns button')[0].text()).toEqual(
+        'cancel'
+      )
+      expect(
+        warpper.findAll('.el-message-box__btns button')[0].isVisible()
+      ).toBeTruthy()
+      expect(
+        warpper.findAll('.el-button--primary')[0].element.classList
+      ).toContain('4444')
+    })
+
+    it('confirmButtonClass showConfirmButton, confirmButtonText', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          confirmButtonText: 'cancel',
+          showConfirmButton: true,
+          confirmButtonClass: '4444'
+        }
+      })
+      expect(
+        warpper.findAll('.el-button--primary')[1].element.classList
+      ).toContain('4444')
+      expect(warpper.findAll('.el-message-box__btns button')[1].text()).toEqual(
+        'cancel'
+      )
+      expect(
+        warpper.findAll('.el-message-box__btns button')[1].isVisible()
+      ).toBeTruthy()
+    })
+
+    it('proprety callback', async () => {
+      let object = ref(null)
+      const warpper = mount(MessageBox, {
+        props: {
+          title: '12',
+          callback(action) {
+            object.value = action
+          }
+        }
+      })
+      await warpper.find('.el-message-box__headerbtn').trigger('click')
+      await nextTick()
+      expect(object.value).toBe('cancel')
+    })
+    it('validate', async () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          title: '12',
+          category: 'prompt',
+          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
+          confirmButtonText: '确定',
+          cancelButtonText: '取消'
+        }
+      })
+      await warpper.findComponent({ ref: 'input' }).setValue('2323')
+      await nextTick()
+      expect(warpper.componentVM.editorErrorMessage).toBe('输入的数据不合法!')
+    })
+  })
+  describe('test modal closeOnClickModal', () => {
+    it('open modal', async () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          modal: true,
+          closeOnClickModal: true
+        }
+      })
+      await nextTick()
+      expect(warpper.find('.v-modal').exists()).toBeTruthy()
+
+      await warpper.find('.v-modal').trigger('click')
+      await nextTick()
+      expect(warpper.find('.v-moda').exists()).toBeFalsy()
+    })
+    it('open modal', async () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          modal: true,
+          closeOnClickModal: true
+        }
+      })
+      await nextTick()
+      expect(warpper.find('.v-modal').exists()).toBeTruthy()
+
+      await warpper.find('.v-modal').trigger('keyup', { keyCode: 'Escape' })
+      await nextTick()
+      expect(warpper.find('.v-moda').exists()).toBeFalsy()
+    })
+    it('open modal', async () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          modal: true,
+          closeOnClickModal: true
+        }
+      })
+      await nextTick()
+      expect(warpper.find('.v-modal').exists()).toBeTruthy()
+
+      await warpper.find('.v-modal').trigger('hashchange')
+      await nextTick()
+      expect(warpper.find('.v-moda').exists()).toBeFalsy()
+    })
+  })
+})

packages/element3/packages/message-box/__tests__/Prop.spec.js

@@ -0,0 +1,10 @@
+import props from '../src/prop/prop'
+describe('porps', () => {
+  test('type', () => {
+    expect(props.type.validator('success')).toBeTruthy()
+    expect(props.type.validator()).toBeFalsy()
+  })
+  test('category', () => {
+    expect(props.category.validator('alert')).toBeTruthy()
+  })
+})