change message component data to props & add test

components/message/__test__/index.test.js

@@ -0,0 +1,80 @@
+import message from '..'
+import MessageBox from '../message-box'
+import Message from '../message'
+import { creatComponentVm, creatVueVm, simulateEvent, nextTick, renderVmString } from 'util.js'
+const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout))
+
+describe('message', () => {
+  afterEach(() => {
+    message.destroy()
+  })
+
+  if('message-box should has prefixCls class', () => {
+    const vm = creatComponentVm(MessageBox, {
+      prefixCls: 'test-message-box'
+    })
+    expect(vm.$el.classList.contains('test-message-box')).toBeTruthy()
+  })
+
+  if('should has prefixCls class', () => {
+    const vm = creatComponentVm(Message, {
+      prefixCls: 'test-message'
+    })
+    expect(vm.$el.classList.contains('test-message-notice')).toBeTruthy()
+    expect(vm.$el.classList.contains('test-message-notice-content')).toBeTruthy()
+  })
+
+  if('should has type class', () => {
+    const vm = creatComponentVm(Message, {
+      type: 'success'
+    })
+    expect(vm.$el.classList.contains('ant-message-success')).toBeTruthy()
+  })
+
+  it('should be able to config top', () => {
+    message.config({
+      top: 100,
+    })
+    message.info('whatever')
+    expect(document.querySelectorAll('.ant-message')[0].style.top).toBe('100px')
+  })
+
+  it('should be able to config getContainer', () => {
+    message.config({
+      getContainer: () => {
+        const div = document.createElement('div')
+        div.className = 'custom-container'
+        document.body.appendChild(div)
+        return div
+      }
+    })
+    message.info('whatever')
+    expect(document.querySelectorAll('.custom-container').length).toBe(1)
+  })
+
+  it('should be able to hide manually', async () => {
+    const hide1 = message.info('whatever', 0)
+    const hide2 = message.info('whatever', 0)
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(2)
+    await delay(100)
+    hide1()
+    setTimeout(() => {
+      expect(document.querySelectorAll('.ant-message-notice').length).toBe(1)
+    }, 200)
+    await delay(100)
+    hide2()
+    setTimeout(() => {
+      expect(document.querySelectorAll('.ant-message-notice').length).toBe(0)
+    }, 200)
+  })
+
+  it('should be able to destroy globally', () => {
+    message.info('whatever', 0)
+    message.info('whatever', 0)
+    expect(document.querySelectorAll('.ant-message').length).toBe(1)
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(2)
+    message.destroy()
+    expect(document.querySelectorAll('.ant-message').length).toBe(0)
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0)
+  })
+})

components/message/index.js

@@ -16,9 +16,9 @@ let getContainer
 
 function getBoxEl () {
   boxInstance = boxInstance || new MessageBoxConstructor({
-    data: {
+    propsData: {
       prefixCls,
-      styles: { top: defaultTop }
+      styles: { top: `${defaultTop}px` }
     }
   })
   boxInstance.vm = boxInstance.$mount()
@@ -43,7 +43,7 @@ function notice (content, duration, type, onClose) {
   }
   let id = `${prefixCls}${seed++}`
   let messageInstance = new MessageConstructor({
-    data: options
+    propsData: options
   })
   messageInstance.id = id
   messageInstance.vm = messageInstance.$mount()

components/message/message-box.vue

@@ -5,10 +5,14 @@
 <script>
 export default {
   name: 'messageBox',
-  data () {
-    return {
-      prefixCls: 'ant-message-box',
-      styles: {}
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-message-box'
+    },
+    styles: {
+      type: Object,
+      default: {}
     }
   }
 }

components/message/message.vue

@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import AtuTransition from '@/transition'
-import Icon from '@/icon'
+import AtuTransition from '../transition'
+import Icon from '../icon'
 const IconTypes = {
   info: 'info-circle',
   success: 'check-circle',
@@ -24,24 +24,40 @@ const IconTypes = {
 
 export default {
   name: 'message',
+  props: {
+    content: {
+      type: String,
+      default: ''
+    },
+    duration: {
+      type: Number,
+      default: 3
+    },
+    onClose: {
+      type: Function
+    },
+    prefixCls: {
+      type: String,
+      default: 'ant-message'
+    },
+    type: {
+      type: String,
+      default: 'info'
+    }
+  },
   data () {
     return {
-      prefixCls: 'ant-message',
       visible: false,
-      content: '',
-      duration: 3,
-      type: 'info',
-      onClose: null,
       closed: false,
       timer: null
     }
   },
   computed: {
-    iconType () {
-      return IconTypes[this.type]
-    },
     durationMS () {
       return this.duration * 1000
+    },
+    iconType () {
+      return IconTypes[this.type]
     }
   },
   components: {

tests/util.js

@@ -14,7 +14,7 @@ export const creatComponentVm = (component, propsData) => {
 
 /**
  * 模仿事件，多用于测试组件的点击等事件。
- * @param {HTMLDOM} dom 原生dom 例如 vm.$el 
+ * @param {HTMLDOM} dom 原生dom 例如 vm.$el
  * @param {*} event 需要模仿的事件
  */
 export const simulateEvent = (dom, event) => {
@@ -53,7 +53,7 @@ export const creatVueVm = (options) => {
 /**
  * Vue 提供的 nextTick 方法
  * 一些依赖 DOM 更新结果的断言必须在nextTick中执行
- * @param {*} callback 
+ * @param {*} callback
  */
 export const nextTick = (callback) => {
   Vue.nextTick(() => {