[Alert] Default type change to info.

Author: wxsms

docs/pages/components/Alert.md

@@ -15,29 +15,21 @@ Wrap any text or HTML in `<alert>` and use one of the four alert types (`success
 <!-- Live demo -->
 ```
 
-## Dismissible Alerts
-
-* Use `dismissible` to allow user to dismiss alerts.
-* Use `duration` to auto dismiss alerts after milliseconds.
-* These 2 props can be used in combinations.
+## Dismissible
 
+Use `dismissible` to allow user to dismiss alerts.
 
 ```html
 <template>
   <section>
-    <alert type="warning" v-if="show1" :dismissible="true" @dismissed="show1 = false" id="alert-test"><b>Warning!</b> Better check yourself, you're not looking too good.</alert>
-    <alert v-for="(item, index) in alerts"
-           :dismissible="item.dismissible"
-           :type="item.type"
-           :duration="item.duration"
-           :key="item.key"
-           @dismissed="alerts.splice(index, 1)">
-      <span v-if="item.duration">This alert <b>will dismiss after {{item.duration}}ms</b>.</span>
-      <span v-else>This alert <b>will not dismiss over time</b>.</span>
+    <alert type="warning" v-if="show1" :dismissible="true" @dismissed="show1 = false" id="alert-test">
+      <b>Warning!</b> Better check yourself, you're not looking too good.
+    </alert>
+    <alert v-for="(item, index) in alerts" :dismissible="true" :key="item.key" @dismissed="alerts.splice(index, 1)">
+      <b>Heads up!</b> This alert needs your attention, but it's not super important.
     </alert>
     <hr/>
-    <button type="button" class="btn btn-default" id="add-alert-1" @click="addAlert(false)">Add Alert (Dismiss After 2000ms)</button>
-    <button type="button" class="btn btn-default" id="add-alert-2" @click="addAlert(true)">Add Alert (Dismissible)</button>
+    <button type="button" class="btn btn-primary" id="add-alert-1" @click="addDismissibleAlert()">Add Dismissible Alert</button>
   </section>
 </template>
 
@@ -46,18 +38,46 @@ Wrap any text or HTML in `<alert>` and use one of the four alert types (`success
     data () {
       return {
         show1: true,
-        alerts: [],
+        alerts: []
+      }
+    },
+    methods: {
+      addDismissibleAlert () {
+        this.alerts.push({key: new Date().getTime()})
+      }
+    }
+  }
+</script>
+
+<!-- Live demo -->
+```
+
+## Auto Dismissing
+
+Use `duration` in milliseconds to auto dismiss alert.
+
+```html
+<template>
+  <section>
+    <alert v-for="(item, index) in alerts2" :duration="duration" :key="item.key" @dismissed="alerts2.splice(index, 1)">
+      This alert <b>will dismiss after {{duration}}ms</b>.
+    </alert>
+    <hr/>
+    <button type="button" class="btn btn-primary" id="add-alert-2" @click="addAutoDismissAlert()">Add Auto Dismiss Alert</button>
+  </section>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        alerts2: [],
         duration: 2000
       }
     },
     methods: {
-      addAlert (dismissible) {
-        this.alerts.push({
-          type: 'success', 
-          dismissible: dismissible, 
-          duration: dismissible ? 0 : this.duration, 
-          key: new Date().getTime()
-        })
+      addAutoDismissAlert () {
+        this.alerts2.push({key: new Date().getTime()})
       }
     }
   }
@@ -119,7 +139,7 @@ Wrap any text or HTML in `<alert>` and use one of the four alert types (`success
     <tr>
       <td nowrap="nowrap"><code>type</code></td>
       <td>String</td>
-      <td>success</td>
+      <td>info</td>
       <td></td>
       <td>Alert type (success, info, warning, danger).</td>
     </tr>
@@ -172,19 +192,18 @@ Wrap any text or HTML in `<alert>` and use one of the four alert types (`success
     data () {
       return {
         alerts: [],
+        alerts2: [],
         show1: true,
         show2: true,
         duration: 2000
       }
     },
     methods: {
-      addAlert (dismissible) {
-        this.alerts.push({
-          type: 'success', 
-          dismissible: dismissible, 
-          duration: dismissible ? 0 : this.duration, 
-          key: new Date().getTime()
-        })
+      addDismissibleAlert () {
+        this.alerts.push({key: new Date().getTime()})
+      },
+      addAutoDismissAlert () {
+        this.alerts2.push({key: new Date().getTime()})
       }
     }
   }

package.json

@@ -94,6 +94,7 @@
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
     "inject-loader": "^2.0.1",
+    "jquery": "^3.2.1",
     "karma": "^1.4.1",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",

src/components/alert/Alert.vue

@@ -20,7 +20,7 @@
       },
       type: {
         type: String,
-        'default': 'success'
+        'default': 'info'
       }
     },
     data () {

test/unit/index.js

@@ -1,3 +1,4 @@
+import 'es6-promise/auto'
 import Vue from 'vue'
 import * as uiv from '@src/components/index.js'
 

test/unit/specs/Alert.spec.js

@@ -1,27 +1,31 @@
 import Vue from 'vue'
+import $ from 'jquery'
 import Alert from '@src/components/alert/Alert.vue'
 import AlertDoc from '@docs/pages/components/Alert.md'
 import utils from './../utils'
 
+const DEFAULT_ALERT_CLASS = 'alert-info'
+
 describe('Alert', () => {
-  let app
+  let vm
+  let $el
 
   beforeEach(() => {
-    app = new Vue({
-      template: '<alert-doc ref="doc"/>',
-      components: {AlertDoc}
-    })
+    let Constructor = Vue.extend(AlertDoc)
+    vm = new Constructor().$mount()
+    $el = $(vm.$el)
   })
 
   afterEach(() => {
-    try {
-      app.$destroy()
-    } catch (err) {
-      // Silent
-    }
+    vm.$destroy()
+    $el = null
   })
 
-  it('Should be able to add alert with no type', (done) => {
+  const getDefaultAlertLength = () => {
+    return $el.find(`.${DEFAULT_ALERT_CLASS}`).length
+  }
+
+  it('Should be able to add alert with no type', () => {
     let res = Vue.compile('<alert>{{ msg }}</alert>')
     let vm = new Vue({
       data () {
@@ -34,62 +38,41 @@ describe('Alert', () => {
       staticRenderFns: res.staticRenderFns
     })
     vm.$mount()
-    vm.$nextTick(() => {
-      expect(vm.$el.className).to.equal('alert alert-success')
-      vm.$destroy()
-      done()
-    })
+    let $el = $(vm.$el)
+    expect($el.hasClass('alert')).to.be.true
+    expect($el.hasClass(DEFAULT_ALERT_CLASS)).to.be.true
+    vm.$destroy()
   })
 
-  it('Alert can be closed', (done) => {
-    let vm = app.$mount().$refs.doc
-    vm.$nextTick(() => {
-      let alertInfo = vm.$el.querySelector('#alert-test')
-      expect(alertInfo).to.exist
-      let closedBtn = alertInfo.querySelector('button.close')
-      utils.triggerEvent(closedBtn, 'click')
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('#alert-test')).not.exist
-        done()
-      })
-    })
+  it('Should be able to dismiss alerts', async () => {
+    let alert = $el.find('#alert-test')
+    expect(alert.length).to.equal(1)
+    let closedBtn = alert.find('button.close')
+    closedBtn.click()
+    await vm.$nextTick()
+    expect($el.find('#alert-test').length).to.equal(0)
   })
 
-  it('Can add a Alert', (done) => {
-    let vm = app.$mount().$refs.doc
-    vm.$nextTick(() => {
-      let alertSuccess = vm.$el.querySelectorAll('.alert-success')
-      let alertSuccessLengthBefore = alertSuccess.length
-      let addAlertBtn = vm.$el.querySelector('#add-alert-2')
-      utils.triggerEvent(addAlertBtn, 'click')
-      vm.$nextTick(() => {
-        alertSuccess = vm.$el.querySelectorAll('.alert-success')
-        let alertSuccessLengthAfter = alertSuccess.length
-        expect(alertSuccessLengthAfter).to.equal(alertSuccessLengthBefore + 1)
-        done()
-      })
-    })
+  it('Should be able to add dismissible alerts', async () => {
+    let before = getDefaultAlertLength()
+    let addAlertBtn = $el.find('#add-alert-1')
+    addAlertBtn.click()
+    await vm.$nextTick()
+    let after = getDefaultAlertLength()
+    expect(after).to.equal(before + 1)
   })
 
-  it('Can add a Alert had duration', (done) => {
-    let vm = app.$mount().$refs.doc
+  it('Should be able to add auto dismiss alerts', async () => {
     vm.duration = 1000
-    vm.$nextTick(() => {
-      let alertSuccess = vm.$el.querySelectorAll('.alert-success')
-      let alertSuccessLengthBefore = alertSuccess.length
-      let addAlertBtn = vm.$el.querySelector('#add-alert-1')
-      utils.triggerEvent(addAlertBtn, 'click')
-      vm.$nextTick(() => {
-        alertSuccess = vm.$el.querySelectorAll('.alert-success')
-        let alertSuccessLengthAfter = alertSuccess.length
-        expect(alertSuccessLengthAfter).to.equal(alertSuccessLengthBefore + 1)
-        setTimeout(() => {
-          alertSuccess = vm.$el.querySelectorAll('.alert-success')
-          alertSuccessLengthAfter = alertSuccess.length
-          expect(alertSuccessLengthAfter).to.equal(alertSuccessLengthBefore)
-          done()
-        }, 1200)
-      })
-    })
+    await vm.$nextTick()
+    let before = getDefaultAlertLength()
+    let addAlertBtn = $el.find('#add-alert-2')
+    addAlertBtn.click()
+    await vm.$nextTick()
+    let after = getDefaultAlertLength()
+    expect(after).to.equal(before + 1)
+    await utils.sleep(vm.duration + 200)
+    let _after = getDefaultAlertLength()
+    expect(_after).to.equal(before)
   })
 })

test/unit/utils.js

@@ -22,5 +22,10 @@ export default {
       ? elm.dispatchEvent(evt)
       : elm.fireEvent('on' + name, evt)
     return elm
+  },
+  sleep (time) {
+    return new Promise(resolve => {
+      setTimeout(resolve, time)
+    })
   }
 }

yarn.lock

@@ -3614,6 +3614,10 @@ joi@^6.7.x:
     moment "2.x.x"
     topo "1.x.x"
 
+jquery@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
+
 js-base64@^2.1.9:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.3.2.tgz#a79a923666372b580f8e27f51845c6f7e8fbfbaf"