From 7cb2d0e336955091b1ab6f5e18fc5a3bdf694e28 Mon Sep 17 00:00:00 2001
From: Kairui Guo <wxsms@foxmail.com>
Date: Sat, 18 Nov 2017 13:18:54 +0800
Subject: [PATCH] Notification (#112)

* [Notification] add component

* Notification docs enhance.

* enhance notification tests
---
 docs/pages/components/Notification.md      | 191 +++++++++++++
 docs/router/routes.js                      |   5 +
 src/services/index.js                      |   1 +
 src/services/notification/Notification.vue | 123 +++++++++
 src/services/notification/constants.js     |  13 +
 src/services/notification/notification.js  |  66 +++++
 test/unit/specs/Notification.spec.js       | 300 +++++++++++++++++++++
 7 files changed, 699 insertions(+)
 create mode 100644 docs/pages/components/Notification.md
 create mode 100644 src/services/notification/Notification.vue
 create mode 100644 src/services/notification/constants.js
 create mode 100644 src/services/notification/notification.js
 create mode 100644 test/unit/specs/Notification.spec.js

diff --git a/docs/pages/components/Notification.md b/docs/pages/components/Notification.md
new file mode 100644
index 000000000..738c68907
--- /dev/null
+++ b/docs/pages/components/Notification.md
@@ -0,0 +1,191 @@
+# Notification
+
+> Displays a global notification message at a corner of the page.
+
+## Example
+
+Click on the button below to show a notification. By default, it is dismissible with a close button, and will dismiss automatically after 5000ms (both are configurable).
+
+```html
+<template>
+  <section>
+    <btn @click="notify" type="primary">Default Notification</btn>
+    <btn @click="notify2" type="primary">No Auto-dismiss Notification</btn>
+  </section>
+</template>
+<script>
+  export default {
+    methods: {
+      // example with callback
+      notify () {
+        this.$notify({
+          title: 'Title',
+          content: 'This is a notify message.'
+        }, () => {
+          // callback after dismissed
+          console.log('dismissed')
+        })
+      },
+      // example with Promise
+      notify2 () {
+        this.$notify({
+          title: 'Title',
+          content: 'This notification will not dismiss automatically.',
+          duration: 0
+        }).then(() => {
+          // resolve after dismissed
+          console.log('dismissed')
+        })
+      }
+    }
+  }
+</script>
+<!-- notification-example.vue -->
+```
+
+## Types
+
+There're 4 optional types of notification: `info` / `success` / `warning` / `danger`.
+
+Notification with specific type will has a default icon on the left, you can also change or remove the icon by `icon` option.
+
+```html
+<template>
+  <section>
+    <btn @click="info" type="info">Info</btn>
+    <btn @click="success" type="success">Success</btn>
+    <btn @click="warning" type="warning">Warning</btn>
+    <btn @click="danger" type="danger">Danger</btn>
+  </section>
+</template>
+<script>
+  export default {
+    methods: {
+      info () {
+        this.$notify({
+          type: 'info',
+          title: 'Heads up!',
+          content: 'This alert needs your attention, but it\'s not super important.'
+        })
+      },
+      success () {
+        this.$notify({
+          type: 'success',
+          title: 'Well done!',
+          content: 'You successfully read this important alert message.'
+        })
+      },
+      warning () {
+        this.$notify({
+          type: 'warning',
+          title: 'Warning!',
+          content: 'Better check yourself, you\'re not looking too good.'
+        })
+      },
+      danger () {
+        this.$notify({
+          type: 'danger',
+          title: 'Oh snap!',
+          content: 'Change a few things up and try submitting again.'
+        })
+      }
+    }
+  }
+</script>
+<!-- notification-types.vue -->
+```
+
+## Placements
+
+Notifications can be placed on any corner on a page.
+
+The `position` prop defines which corner a notification will slide in. It can be `top-right` (default), `top-left`, `bottom-right` or `bottom-left`.
+
+```html
+<template>
+  <section>
+    <btn @click="notify('top-right')" type="primary">Top Right (Default)</btn>
+    <btn @click="notify('bottom-right')" type="primary">Bottom Right</btn>
+    <btn @click="notify('bottom-left')" type="primary">Bottom Left</btn>
+    <btn @click="notify('top-left')" type="primary">Top Left</btn>
+  </section>
+</template>
+<script>
+  export default {
+    methods: {
+      notify (placement) {
+        this.$notify({
+          placement, // equal to `placement: placement` in ES6
+          title: 'Title',
+          content: `This is a notify msg at ${placement}.`
+        })
+      }
+    }
+  }
+</script>
+<!-- notification-placements.vue -->
+```
+
+## Dismissible
+
+By default a notification is dismissible with a close button, you can hide it by setting `dismissible` to `false`.
+
+```html
+<template>
+  <btn @click="notify" type="primary">Notification Without Dismiss Button</btn>
+</template>
+<script>
+  export default {
+    methods: {
+      notify () {
+        this.$notify({
+          title: 'Title',
+          content: 'This is a notification without dismiss btn.',
+          dismissible: false
+        })
+      }
+    }
+  }
+</script>
+<!-- notification-without-dismiss-btn.vue -->
+```
+
+## Global Method
+
+`$notify(options, callback)` global method for `Vue.prototype` will be added **if uiv is installed**.
+
+Note that the dismissed callback is optional.
+
+The method will return a `Promise` object that resolve while the notification is dismissed (if supported by browser or with es6 promise polyfill).
+
+## Import Individually
+
+If you prefer importing `Notification` individually:
+
+```javascript
+import { Notification } from 'uiv'
+```
+
+The corresponding method is `Notification.notify`, with same parameters as above.
+
+# API Reference
+
+## [Notification.vue](https://github.com/wxsms/uiv/tree/master/src/services/notification/Notification.vue)
+
+These props are used as `options` in the methods above.
+
+### Props
+
+Name           | Type       | Default   | Required | Description
+----------     | ---------- | --------  | -------- | -----------------------
+`title`        | String     |           |          | The notification title.
+`content`      | String     |           |          | The notification content.
+`type`         | String     |           |          | Support: `info` / `success` / `warning` / `danger`.
+`duration`     | Number     | 5000      |          | Dismiss after milliseconds, use 0 to prevent self-closing.
+`dismissible`  | Boolean    | true      |          | Show dismiss button.
+`placement`    | String     | top-right |          | Support: `top-right` / `top-left` / `bottom-right` / `bottom-left`.
+`icon`         | String     |           |          | Custom icon class, use an empty string to disable icon.
+
+## [notification.js](https://github.com/wxsms/uiv/tree/master/src/services/notification/notification.js)
+
+This file has no props.
diff --git a/docs/router/routes.js b/docs/router/routes.js
index 6821379fd..17ba9c85d 100644
--- a/docs/router/routes.js
+++ b/docs/router/routes.js
@@ -71,6 +71,11 @@ const routes = [
     meta: {type: 'component', label: 'Modal'},
     component: () => import('./../pages/components/Modal.md')
   },
+  {
+    path: '/notification',
+    meta: {type: 'component', label: 'Notification'},
+    component: () => import('./../pages/components/Notification.md')
+  },
   {
     path: '/pagination',
     meta: {type: 'component', label: 'Pagination'},
diff --git a/src/services/index.js b/src/services/index.js
index 35f83776b..4edec0403 100644
--- a/src/services/index.js
+++ b/src/services/index.js
@@ -1 +1,2 @@
 export {default as MessageBox} from './messagebox/messageBox.js'
+export {default as Notification} from './notification/notification.js'
diff --git a/src/services/notification/Notification.vue b/src/services/notification/Notification.vue
new file mode 100644
index 000000000..ea6b49ab8
--- /dev/null
+++ b/src/services/notification/Notification.vue
@@ -0,0 +1,123 @@
+<template>
+  <alert
+    class="fade"
+    :style="styles"
+    :type="type"
+    :duration="duration"
+    :dismissible="dismissible"
+    @dismissed="onDismissed">
+    <div class="media" style="margin: 0">
+      <div class="media-left" v-if="icons">
+        <span :class="icons" style="font-size: 1.5em"></span>
+      </div>
+      <div class="media-body">
+        <h4 class="media-heading">{{title}}</h4>
+        <div>{{content}}</div>
+      </div>
+    </div>
+  </alert>
+</template>
+
+<script>
+  import {addClass, removeClass} from '@src/utils/domUtils'
+  import {isString} from '@src/utils/objectUtils'
+  import Alert from '@src/components/alert/Alert.vue'
+  import {TYPES, PLACEMENTS} from './constants'
+
+  const IN_CLASS = 'in'
+  const ICON = 'glyphicon'
+  const OFFSET = 15
+  const WIDTH = 300
+  const TRANSITION_DURATION = 300
+
+  const getTotalHeightOfQueue = (queue, lastIndex = queue.length) => {
+    let totalHeight = OFFSET
+    for (let i = 0; i < lastIndex; i++) {
+      totalHeight += queue[i].height + OFFSET
+    }
+    return totalHeight
+  }
+
+  export default {
+    components: {Alert},
+    props: {
+      title: String,
+      content: String,
+      duration: {
+        type: Number,
+        default: 5000
+      },
+      dismissible: {
+        type: Boolean,
+        default: true
+      },
+      type: String,
+      placement: String,
+      icon: String,
+      cb: {
+        type: Function,
+        required: true
+      },
+      queue: {
+        type: Array,
+        required: true
+      }
+    },
+    data () {
+      return {
+        height: 0,
+        top: 0,
+        horizontal: this.placement === PLACEMENTS.TOP_LEFT || this.placement === PLACEMENTS.BOTTOM_LEFT ? 'left' : 'right',
+        vertical: this.placement === PLACEMENTS.TOP_LEFT || this.placement === PLACEMENTS.TOP_RIGHT ? 'top' : 'bottom'
+      }
+    },
+    created () {
+      // get prev notifications total height in the queue
+      this.top = getTotalHeightOfQueue(this.queue)
+    },
+    mounted () {
+      const el = this.$el
+      el.style[this.vertical] = this.top + 'px'
+      this.$nextTick(() => {
+        el.style[this.horizontal] = `-${WIDTH}px`
+        this.height = el.offsetHeight
+        el.style[this.horizontal] = `${OFFSET}px`
+        addClass(el, IN_CLASS)
+      })
+    },
+    computed: {
+      styles () {
+        let queue = this.queue
+        let thisIndex = queue.indexOf(this)
+        return {
+          position: 'fixed',
+          [this.vertical]: `${getTotalHeightOfQueue(queue, thisIndex)}px`,
+          width: `${WIDTH}px`,
+          transition: `all ${TRANSITION_DURATION / 1000}s ease-in-out`
+        }
+      },
+      icons () {
+        if (isString(this.icon)) {
+          return this.icon
+        }
+        switch (this.type) {
+          case TYPES.INFO:
+          case TYPES.WARNING:
+            return `${ICON} ${ICON}-info-sign`
+          case TYPES.SUCCESS:
+            return `${ICON} ${ICON}-ok-sign`
+          case TYPES.DANGER:
+            return `${ICON} ${ICON}-remove-sign`
+          default:
+            return null
+        }
+      }
+    },
+    methods: {
+      onDismissed () {
+        removeClass(this.$el, IN_CLASS)
+        setTimeout(this.cb, TRANSITION_DURATION)
+      }
+    }
+  }
+</script>
diff --git a/src/services/notification/constants.js b/src/services/notification/constants.js
new file mode 100644
index 000000000..f01568b66
--- /dev/null
+++ b/src/services/notification/constants.js
@@ -0,0 +1,13 @@
+export const TYPES = {
+  SUCCESS: 'success',
+  INFO: 'info',
+  DANGER: 'danger',
+  WARNING: 'warning'
+}
+
+export const PLACEMENTS = {
+  TOP_LEFT: 'top-left',
+  TOP_RIGHT: 'top-right',
+  BOTTOM_LEFT: 'bottom-left',
+  BOTTOM_RIGHT: 'bottom-right'
+}
diff --git a/src/services/notification/notification.js b/src/services/notification/notification.js
new file mode 100644
index 000000000..3c8012690
--- /dev/null
+++ b/src/services/notification/notification.js
@@ -0,0 +1,66 @@
+import {removeFromDom} from '@src/utils/domUtils'
+import {spliceIfExist} from '@src/utils/arrayUtils'
+import {isFunction, isExist} from '@src/utils/objectUtils'
+import Notification from './Notification.vue'
+import {PLACEMENTS} from './constants'
+import Vue from 'vue'
+
+const queues = {
+  [PLACEMENTS.TOP_LEFT]: [],
+  [PLACEMENTS.TOP_RIGHT]: [],
+  [PLACEMENTS.BOTTOM_LEFT]: [],
+  [PLACEMENTS.BOTTOM_RIGHT]: []
+}
+
+const body = document.body
+
+const destroy = (queue, instance) => {
+  // console.log('destroyNotification')
+  removeFromDom(instance.$el)
+  instance.$destroy()
+  spliceIfExist(queue, instance)
+}
+
+const init = (options, cb, resolve = null, reject = null) => {
+  const placement = options.placement
+  const queue = queues[placement]
+  // check if placement is valid
+  if (!isExist(queue)) {
+    return
+  }
+  const Constructor = Vue.extend(Notification)
+  let instance = new Constructor({
+    propsData: {
+      queue,
+      placement,
+      ...options,
+      cb (msg) {
+        destroy(queue, instance)
+        if (isFunction(cb)) {
+          cb(msg)
+        } else if (resolve && reject) {
+          resolve(msg)
+        }
+      }
+    }
+  })
+  instance.$mount()
+  body.appendChild(instance.$el)
+  queue.push(instance)
+}
+
+const notify = (options = {}, cb) => {
+  // set default placement as top-right
+  if (!isExist(options.placement)) {
+    options.placement = PLACEMENTS.TOP_RIGHT
+  }
+  if (isExist(window.Promise)) {
+    return new Promise((resolve, reject) => {
+      init(options, cb, resolve, reject)
+    })
+  } else {
+    init(options, cb)
+  }
+}
+
+export default {notify}
diff --git a/test/unit/specs/Notification.spec.js b/test/unit/specs/Notification.spec.js
new file mode 100644
index 000000000..26f4b1428
--- /dev/null
+++ b/test/unit/specs/Notification.spec.js
@@ -0,0 +1,300 @@
+import Vue from 'vue'
+import $ from 'jquery'
+import Notification from '@src/services/notification/notification'
+import NotificationDoc from '@docs/pages/components/Notification.md'
+import utils from '../utils'
+
+const OFFSET = '15px'
+
+describe('Notification', () => {
+  let vm
+  let $el
+  let spy
+  let savedLog
+
+  beforeEach(() => {
+    savedLog = console.log
+    console.log = function () {
+      return true
+    }
+    const Constructor = Vue.extend(NotificationDoc)
+    vm = new Constructor().$mount()
+    $el = $(vm.$el)
+    spy = sinon.spy(console, 'log')
+  })
+
+  afterEach(() => {
+    console.log.restore()
+    console.log = savedLog
+    vm.$destroy()
+    $el.remove()
+    $('.alert').remove()
+  })
+
+  it('should be able to use notification', async () => {
+    const _vm = vm.$refs['notification-example']
+    await vm.$nextTick()
+    const trigger = _vm.$el.querySelectorAll('.btn')[0]
+    trigger.click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    const alert = document.querySelector('.alert')
+    expect(alert).to.exist
+    expect(alert.className).to.contain('alert-info')
+    expect(alert.className).to.contain('alert-dismissible')
+    expect(alert.className).to.contain('fade')
+    expect(alert.className).to.contain('in')
+    expect(alert.querySelector('.media-heading').textContent).to.equal('Title')
+    expect(alert.querySelector('.media-body > div').textContent).to.equal('This is a notify message.')
+    alert.querySelector('button.close').click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    expect(document.querySelector('.alert')).not.exist
+    sinon.assert.calledWith(spy, 'dismissed')
+  })
+
+  it('should be able to use no auto-dismiss notification', async () => {
+    const _vm = vm.$refs['notification-example']
+    await vm.$nextTick()
+    const trigger = _vm.$el.querySelectorAll('.btn')[1]
+    trigger.click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    const alert = document.querySelector('.alert')
+    expect(alert).to.exist
+    expect(alert.className).to.contain('alert-info')
+    expect(alert.className).to.contain('alert-dismissible')
+    expect(alert.className).to.contain('fade')
+    expect(alert.className).to.contain('in')
+    expect(alert.querySelector('.media-heading').textContent).to.equal('Title')
+    expect(alert.querySelector('.media-body > div').textContent).to.equal('This notification will not dismiss automatically.')
+    await utils.sleep(5200)
+    expect(document.querySelector('.alert')).to.exist
+    alert.querySelector('button.close').click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    expect(document.querySelector('.alert')).not.exist
+    sinon.assert.calledWith(spy, 'dismissed')
+  }).timeout(5000 + 2000)
+
+  it('should be able to use `type=info` notification', async () => {
+    const _vm = vm.$refs['notification-types']
+    await vm.$nextTick()
+    const trigger = _vm.$el.querySelectorAll('.btn')[0]
+    trigger.click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    const alert = document.querySelector('.alert')
+    expect(alert).to.exist
+    expect(alert.className).to.contain('alert-info')
+    expect(alert.querySelectorAll('.media-left > .glyphicon').length).to.equal(1)
+    expect(alert.querySelectorAll('.media-left > .glyphicon-info-sign')).to.exist
+    alert.querySelector('button.close').click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    expect(document.querySelector('.alert')).not.exist
+  })
+
+  it('should be able to use `type=success` notification', async () => {
+    const _vm = vm.$refs['notification-types']
+    await vm.$nextTick()
+    const trigger = _vm.$el.querySelectorAll('.btn')[1]
+    trigger.click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    const alert = document.querySelector('.alert')
+    expect(alert).to.exist
+    expect(alert.className).to.contain('alert-success')
+    expect(alert.querySelectorAll('.media-left > .glyphicon').length).to.equal(1)
+    expect(alert.querySelectorAll('.media-left > .glyphicon-ok-sign')).to.exist
+    alert.querySelector('button.close').click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    expect(document.querySelector('.alert')).not.exist
+  })
+
+  it('should be able to use `type=warning` notification', async () => {
+    const _vm = vm.$refs['notification-types']
+    await vm.$nextTick()
+    const trigger = _vm.$el.querySelectorAll('.btn')[2]
+    trigger.click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    const alert = document.querySelector('.alert')
+    expect(alert).to.exist
+    expect(alert.className).to.contain('alert-warning')
+    expect(alert.querySelectorAll('.media-left > .glyphicon').length).to.equal(1)
+    expect(alert.querySelectorAll('.media-left > .glyphicon-info-sign')).to.exist
+    alert.querySelector('button.close').click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    expect(document.querySelector('.alert')).not.exist
+  })
+
+  it('should be able to use `type=danger` notification', async () => {
+    const _vm = vm.$refs['notification-types']
+    await vm.$nextTick()
+    const trigger = _vm.$el.querySelectorAll('.btn')[3]
+    trigger.click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    const alert = document.querySelector('.alert')
+    expect(alert).to.exist
+    expect(alert.className).to.contain('alert-danger')
+    expect(alert.querySelectorAll('.media-left > .glyphicon').length).to.equal(1)
+    expect(alert.querySelectorAll('.media-left > .glyphicon-remove-sign')).to.exist
+    alert.querySelector('button.close').click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    expect(document.querySelector('.alert')).not.exist
+  })
+
+  it('should be able to use `placement=top-right` notification', async () => {
+    const _vm = vm.$refs['notification-placements']
+    await vm.$nextTick()
+    const trigger = _vm.$el.querySelectorAll('.btn')[0]
+    trigger.click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    const alert = document.querySelector('.alert')
+    expect(alert).to.exist
+    expect(alert.style.top).to.equal(OFFSET)
+    expect(alert.style.right).to.equal(OFFSET)
+    expect(alert.style.bottom).to.equal('')
+    expect(alert.style.left).to.equal('')
+    alert.querySelector('button.close').click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    expect(document.querySelector('.alert')).not.exist
+  })
+
+  it('should be able to use `placement=bottom-right` notification', async () => {
+    const _vm = vm.$refs['notification-placements']
+    await vm.$nextTick()
+    const trigger = _vm.$el.querySelectorAll('.btn')[1]
+    trigger.click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    const alert = document.querySelector('.alert')
+    expect(alert).to.exist
+    expect(alert.style.top).to.equal('')
+    expect(alert.style.right).to.equal(OFFSET)
+    expect(alert.style.bottom).to.equal(OFFSET)
+    expect(alert.style.left).to.equal('')
+    alert.querySelector('button.close').click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    expect(document.querySelector('.alert')).not.exist
+  })
+
+  it('should be able to use `placement=bottom-left` notification', async () => {
+    const _vm = vm.$refs['notification-placements']
+    await vm.$nextTick()
+    const trigger = _vm.$el.querySelectorAll('.btn')[2]
+    trigger.click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    const alert = document.querySelector('.alert')
+    expect(alert).to.exist
+    expect(alert.style.top).to.equal('')
+    expect(alert.style.right).to.equal('')
+    expect(alert.style.bottom).to.equal(OFFSET)
+    expect(alert.style.left).to.equal(OFFSET)
+    alert.querySelector('button.close').click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    expect(document.querySelector('.alert')).not.exist
+  })
+
+  it('should be able to use `placement=top-left` notification', async () => {
+    const _vm = vm.$refs['notification-placements']
+    await vm.$nextTick()
+    const trigger = _vm.$el.querySelectorAll('.btn')[3]
+    trigger.click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    const alert = document.querySelector('.alert')
+    expect(alert).to.exist
+    expect(alert.style.top).to.equal(OFFSET)
+    expect(alert.style.right).to.equal('')
+    expect(alert.style.bottom).to.equal('')
+    expect(alert.style.left).to.equal(OFFSET)
+    alert.querySelector('button.close').click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    expect(document.querySelector('.alert')).not.exist
+  })
+
+  it('should be able to use `dismissible=false` notification', async () => {
+    const _vm = vm.$refs['notification-without-dismiss-btn']
+    await vm.$nextTick()
+    const trigger = _vm.$el.querySelectorAll('.btn')[0]
+    trigger.click()
+    await vm.$nextTick()
+    trigger.click()
+    await utils.sleep(utils.transitionDuration)
+    await vm.$nextTick()
+    const alert = document.querySelectorAll('.alert')
+    expect(alert.length).to.equal(2)
+    expect(alert[0].querySelector('button.close')).not.exist
+    expect(alert[1].querySelector('button.close')).not.exist
+    await utils.sleep(5200)
+    await vm.$nextTick()
+    expect(document.querySelector('.alert')).not.exist
+  }).timeout(5000 + 2000)
+
+  it('should be able to use without options and callback', async () => {
+    Notification.notify(undefined)
+    await utils.sleep(utils.transitionDuration)
+    const alert = document.querySelector('.alert')
+    expect(alert).to.exist
+    alert.querySelector('button.close').click()
+    await utils.sleep(utils.transitionDuration)
+    expect(document.querySelector('.alert')).not.exist
+  })
+
+  it('should be able to use without Promise', async () => {
+    // mute Promise
+    const savedPromise = window.Promise
+    window.Promise = null
+    // alert
+    Notification.notify({title: 'test'})
+    // restore Promise
+    window.Promise = savedPromise
+    await utils.sleep(utils.transitionDuration)
+    const alert = document.querySelector('.alert')
+    expect(alert).to.exist
+    alert.querySelector('button.close').click()
+    await utils.sleep(utils.transitionDuration)
+    expect(document.querySelector('.alert')).not.exist
+  })
+
+  it('should be able to avoid invalid placement', async () => {
+    Notification.notify({placement: 'top-bottom'}) // invalid
+    await utils.sleep(utils.transitionDuration)
+    expect(document.querySelector('.alert')).not.exist
+  })
+
+  it('should be able to use custom icon', async () => {
+    Notification.notify({title: 'test', icon: 'fa fa-check'})
+    await utils.sleep(utils.transitionDuration)
+    const alert = document.querySelector('.alert')
+    expect(alert).to.exist
+    expect(alert.querySelectorAll('.media-left > .fa').length).to.equal(1)
+    expect(alert.querySelectorAll('.media-left > .fa-check')).to.exist
+    alert.querySelector('button.close').click()
+    await utils.sleep(utils.transitionDuration)
+    expect(document.querySelector('.alert')).not.exist
+  })
+
+  it('should be able to disable icon with types', async () => {
+    Notification.notify({title: 'test', icon: '', type: 'danger'})
+    await utils.sleep(utils.transitionDuration)
+    const alert = document.querySelector('.alert')
+    expect(alert).to.exist
+    expect(alert.querySelector('.media-left')).not.exist
+    alert.querySelector('button.close').click()
+    await utils.sleep(utils.transitionDuration)
+    expect(document.querySelector('.alert')).not.exist
+  })
+})