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
bootstrap-vue · Aug 14, 2017 · 8dc90bb · 8dc90bb
1 parent 8a52b93
commit 8dc90bb
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 25 deletions.
diff --git a/docs/components/alert/README.md b/docs/components/alert/README.md
@@ -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>

diff --git a/lib/components/alert.vue b/lib/components/alert.vue
@@ -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);
             }
         }

diff --git a/tests/components/alert.spec.js b/tests/components/alert.spec.js
@@ -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');
+    });
+});
diff --git a/tests/fixtures/alert/demo.html b/tests/fixtures/alert/demo.html
@@ -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"
     >