finish countdown component

Author: remul

.babelrc

@@ -1,4 +1,9 @@
 {
+  "plugins": [
+    ["transform-runtime", {
+      "regenerator": true
+    }]
+  ],
   "presets": [
     ["env", { "modules": false }],
     "stage-3"

package-lock.json

@@ -12,6 +12,7 @@
     "watch": "mocha-webpack --webpack-config webpack.config.js --watch --require test/setup.js test/**/*.spec.js"
   },
   "dependencies": {
+    "@babel/runtime": "^7.7.2",
     "axios": "^0.19.0",
     "moment": "^2.24.0",
     "moxios": "^0.4.0",
@@ -23,9 +24,11 @@
     "not ie <= 8"
   ],
   "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.6.2",
     "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-stage-3": "^6.24.1",
     "cross-env": "^5.0.5",

package.json

@@ -20,7 +20,7 @@
             expiredText: { default: 'Now Expired' }
         },
         data () {
-            return { now: new Date() };
+            return { now: new Date(), interval: null };
         },
 
         computed: {
@@ -36,10 +36,14 @@
             }
         },
         created () {
-            let interval = setInterval(() => {
+            this.interval = setInterval(() => {
                 this.now = new Date();
             }, 1000);
-            this.$on('finished', () => clearInterval(interval));
+            this.$on('finished', () => clearInterval(this.interval));
+        },
+
+        destroyed() {
+            clearInterval(this.interval);
         }
     }
 </script>

src/components/Countdown.vue

@@ -26,52 +26,52 @@ describe('Countdown', () => {
     see('10 Seconds');
   });
 
-  it('reduces the countdown every second', (done) => {
+  it('reduces the countdown every second', async () => {
     see('10 Seconds');
 
     clock.tick(1000);
 
-    assertOnNextTick(() => {
-      see('9 Seconds');
-    }, done);
+    await wrapper.vm.$nextTick();
+
+    see('9 Seconds');
   });
 
-  it('shows an expired message when the countdown has completed', (done) => {
+  it('shows an expired message when the countdown has completed', async () => {
     clock.tick(10000);
 
-    assertOnNextTick(() => {
-      see('Now Expired');
-    }, done);
+    await wrapper.vm.$nextTick();
+
+    see('Now Expired');
   });
 
-  it('shows a custom expired message when the countdown has completed', (done) => {
+  it('shows a custom expired message when the countdown has completed', async () => {
     wrapper.setProps({expiredText: 'Contest is over.'});
 
     clock.tick(10000);
 
-    assertOnNextTick(() => {
-      see('Contest is over.');
-    }, done);
+    await wrapper.vm.$nextTick();
+
+    see('Contest is over.');
   });
 
-  it('broadcasts when the countdown is finished', (done) => {
+  it('broadcasts when the countdown is finished', async () => {
     clock.tick(10000);
 
-    assertOnNextTick(() => {
-      expect(wrapper.emitted().finished).toBeTruthy();
-    }, done);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().finished).toBeTruthy();
   });
 
-  it('clears the interval once completed', (done) => {
+  it('clears the interval once completed', async () => {
     clock.tick(10000);
 
     expect(wrapper.vm.now.getSeconds()).toBe(10);
 
-    assertOnNextTick(() => {
-      clock.tick(5000);
+    await wrapper.vm.$nextTick();
+
+    clock.tick(5000);
 
-      expect(wrapper.vm.now.getSeconds()).toBe(10);
-    }, done);
+    expect(wrapper.vm.now.getSeconds()).toBe(10);
   });
 
   // Helper Functions
@@ -92,16 +92,4 @@ describe('Countdown', () => {
   let click = selector => {
     wrapper.find(selector).trigger('click');
   };
-
-  let assertOnNextTick = (callback, done) => {
-    wrapper.vm.$nextTick(() => {
-      try {
-        callback();
-
-        done();
-      } catch (e) {
-        done(e);
-      }
-    });
-  };
 });