Permalink
Browse files

fix(alert): Emit dismiss-count-down at 0 seconds (#839)

* docs(alert): Updated example

* fix(alert): Emit dismiss-count-down at 0 seconds

Alert never emitted a `dismiss-count-down` event at zero seconds.

This fix remedies that

* update demo.html

* alert: dismiss-countdown test
  • Loading branch information...
tmorehouse committed Aug 14, 2017
1 parent 8a52b93 commit 8dc90bb628d91a284858cea65c8e40d694b2463b
Showing with 60 additions and 25 deletions.
  1. +27 −18 docs/components/alert/README.md
  2. +10 −6 lib/components/alert.vue
  3. +21 −1 tests/components/alert.spec.js
  4. +2 −0 tests/fixtures/alert/demo.html
@@ -5,42 +5,51 @@
```html
<template>
<div>
<b-alert show>
Default Alert
</b-alert>
<b-alert show>Default Alert</b-alert>
<b-alert variant="success" show>
Success Alert
</b-alert>
<b-alert variant="success" show>Success Alert</b-alert>
<b-alert variant="danger" dismissible :show="showDismissibleAlert" @dismissed="showDismissibleAlert=false">
Dismissible Alert!
<b-alert variant="danger"
dismissible
:show="showDismissibleAlert"
@dismissed="showDismissibleAlert=false">
Dismissible Alert!
</b-alert>
<b-alert :show="dismissCountDown" variant="warning" @dismiss-count-down="countDownChanged">
This alert will dismiss after {{dismissCountDown}} seconds...
<b-alert :show="dismissCountDown"
variant="warning"
@dismiss-count-down="countDownChanged">
<p>This alert will dismiss after {{dismissCountDown}} seconds...</p>
<b-progress variant="warning"
:max="dismissSecs"
:value="dismissCountDown"
height="4px">
</b-progress>
</b-alert>
<b-btn @click="showAlert" variant="info" class="m-1">Show alert with count-down timer</b-btn>
<b-btn @click="showAlert" variant="info" class="m-1">
Show alert with count-down timer
</b-btn>
<b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
</b-btn>
</div>
</template>
<script>
export default {
data: {
dismissCountDown: null,
dismissSecs: 10,
dismissCountDown: 0,
showDismissibleAlert: false
},
methods: {
countDownChanged(dismissCountDown) {
this.dismissCountDown = dismissCountDown
},
showAlert() {
this.dismissCountDown = 5
}
this.dismissCountDown = dismissCountDown;
},
showAlert() {
this.dismissCountDown = this.dismissSecs;
}
}
}
</script>
@@ -76,6 +76,9 @@
mounted() {
this.showChanged();
},
destroyed() {
this.clearCounter();
},
methods: {
dismiss() {
this.dismissed = true;
@@ -85,6 +88,7 @@
clearCounter() {
if (this.countDownTimerId) {
clearInterval(this.countDownTimerId);
this.countDownTimerId = null;
}
},
showChanged() {
@@ -100,17 +104,17 @@
// Hide dismiss button for auto-dismissing
this.localDismissible = false;
let dismissCountDown = this.show;
this.$emit('dismiss-count-down', dismissCountDown);
// Start counter
this.clearCounter();
let dismissCountDown = this.show;
this.$emit('dismiss-count-down', dismissCountDown);
this.countDownTimerId = setInterval(() => {
if (dismissCountDown < 2) {
return this.dismiss();
}
dismissCountDown--;
this.$emit('dismiss-count-down', dismissCountDown);
if (dismissCountDown < 1) {
this.dismiss();
this.clearCounter();
}
}, 1000);
}
}
@@ -35,4 +35,24 @@ describe('alert', async () => {
await nextTick();
expect($el.textContent).not.toContain('Success Alert');
});
});
it('emits dismiss-count-down event', async () => {
const {app: {$refs, $el}} = window;
const alert = $refs.counter_alert;
const spy = jest.fn()
// Default is hidden
expect($el.textContent).not.toContain('This alert will dismiss after');
// Make visible by changing visible state
const dismissTime = 5;
alert.$on('dismiss-count-down', spy);
await setData(app, 'dismissCountDown', dismissTime);
await nextTick();
// Emits a dismiss-count-down` event
expect(spy).toHaveBeenCalledWith(dismissTime);
await nextTick();
expect($el.textContent).toContain('This alert will dismiss after');
});
});
@@ -14,6 +14,7 @@
</b-alert>
<b-alert variant="danger"
ref="dismiss_alert"
dismissible
:show="showDismissibleAlert"
@dismissed="showDismissibleAlert=false"
@@ -22,6 +23,7 @@
</b-alert>
<b-alert :show="dismissCountDown"
ref="counter_alert"
variant="warning"
@dismiss-count-down="countDownChanged"
>

0 comments on commit 8dc90bb

Please sign in to comment.