DRY message/index.js and add unit tests

src/components/message/index.js

@@ -4,8 +4,11 @@ const prefixCls = 'ivu-message';
 const iconPrefixCls = 'ivu-icon';
 const prefixKey = 'ivu_message_key_';
 
-let defaultDuration = 1.5;
-let top;
+const defaults = {
+    top: 24,
+    duration: 1.5
+};
+
 let messageInstance;
 let name = 1;
 
@@ -21,14 +24,14 @@ function getMessageInstance () {
     messageInstance = messageInstance || Notification.newInstance({
         prefixCls: prefixCls,
         styles: {
-            top: `${top}px`
+            top: `${defaults.top}px`
         }
     });
 
     return messageInstance;
 }
 
-function notice (content = '', duration = defaultDuration, type, onClose = function () {}, closable = false) {
+function notice (content = '', duration = defaults.duration, type, onClose = function () {}, closable = false) {
     const iconType = iconTypes[type];
 
     // if loading
@@ -66,56 +69,34 @@ export default {
     name: 'Message',
 
     info (options) {
-        const type = typeof options;
-        if (type === 'string') {
-            options = {
-                content: options
-            };
-        }
-        return notice(options.content, options.duration, 'info', options.onClose, options.closable);
+        return this.message('info', options);
     },
     success (options) {
-        const type = typeof options;
-        if (type === 'string') {
-            options = {
-                content: options
-            };
-        }
-        return notice(options.content, options.duration, 'success', options.onClose, options.closable);
+        return this.message('success', options);
     },
     warning (options) {
-        const type = typeof options;
-        if (type === 'string') {
-            options = {
-                content: options
-            };
-        }
-        return notice(options.content, options.duration, 'warning', options.onClose, options.closable);
+        return this.message('warning', options);
     },
     error (options) {
-        const type = typeof options;
-        if (type === 'string') {
-            options = {
-                content: options
-            };
-        }
-        return notice(options.content, options.duration, 'error', options.onClose, options.closable);
+        return this.message('error', options);
     },
     loading (options) {
-        const type = typeof options;
-        if (type === 'string') {
+        return this.message('loading', options);
+    },
+    message(type, options){
+        if (typeof options === 'string') {
             options = {
                 content: options
             };
         }
-        return notice(options.content, options.duration, 'loading', options.onClose, options.closable);
+        return notice(options.content, options.duration, type, options.onClose, options.closable);
     },
     config (options) {
-        if (options.top) {
-            top = options.top;
+        if (options.top || options.top === 0) {
+            defaults.top = options.top;
         }
-        if (options.duration) {
-            defaultDuration = options.duration;
+        if (options.duration || options.duration === 0) {
+            defaults.duration = options.duration;
         }
     },
     destroy () {

test/unit/specs/message.spec.js

@@ -0,0 +1,64 @@
+import {createVue, destroyVM, waitForIt} from '../util';
+
+describe('Message.vue', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('should open a info message by default', done => {
+    vm = createVue({render: () => {}});
+    const testMessage = 'Hello world!';
+    let messageContainer = null;
+    vm.$Message.info({
+      content: testMessage,
+      duration: 200 // too long so we can test
+    });
+
+    const selector = '.ivu-message-notice-content-text .ivu-message-info';
+    const checkMessageOpens = () => (messageContainer = document.querySelector(selector));
+
+    waitForIt(checkMessageOpens, function() {
+      expect(messageContainer.textContent.trim()).to.equal(testMessage);
+      messageContainer.parentElement.removeChild(messageContainer);
+      done();
+    });
+  });
+
+  it('should open specific messages of different types', function(done) {
+    vm = createVue({render: () => {}});
+    const testMessage = type => `Hello world! this is a ${type} message`;
+    const tests = ['info', 'success', 'warning', 'error', 'loading'].reduce((tests, type) => {
+      return tests.concat({
+        type: type,
+        message: testMessage(type),
+        class: 'ivu-message-' + type
+      });
+    }, []);
+    let domElements = [];
+
+    for (const {type, message} of tests) {
+      vm.$Message[type]({
+        content: message,
+        duration: 10 // long so we can test
+      });
+    }
+
+    const checkAllMessageOpens = () => {
+      domElements = document.querySelectorAll('.ivu-message-custom-content');
+      return domElements.length == tests.length && domElements;
+    };
+
+    waitForIt(checkAllMessageOpens, function() {
+      const verify = {};
+      domElements.forEach(el => {
+        const message = el.textContent.trim();
+        const test = tests.find(test => test.message == message);
+        verify[test.type] = true;
+        expect(el.classList.contains(test.class)).to.equal(true);
+      });
+      expect(Object.keys(verify).length).to.equal(tests.length);
+      done();
+    });
+  });
+});