Add validation for date strings passed to GlCountdownwinh-countdown-component

2 files changed, 23 insertions, 6 deletions

diff --git a/app/assets/javascripts/vue_shared/components/gl_countdown.vue b/app/assets/javascripts/vue_shared/components/gl_countdown.vue
index bc42d4611b3..9327a2a4a6c 100644
--- a/app/assets/javascripts/vue_shared/components/gl_countdown.vue
+++ b/app/assets/javascripts/vue_shared/components/gl_countdown.vue
@@ -6,9 +6,12 @@ import { calculateRemainingMilliseconds, formatTime } from '~/lib/utils/datetime
  */
 export default {
   props: {
-    endDate: {
+    endDateString: {
       type: String,
       required: true,
+      validator(value) {
+        return !Number.isNaN(new Date(value).getTime());
+      },
     },
   },
 
@@ -21,7 +24,7 @@ export default {
 
   mounted() {
     const updateRemainingTime = () => {
-      const remainingMilliseconds = calculateRemainingMilliseconds(this.endDate);
+      const remainingMilliseconds = calculateRemainingMilliseconds(this.endDateString);
       this.remainingTime = formatTime(remainingMilliseconds);
     };
 
@@ -38,8 +41,8 @@ export default {
 <template>
   <time
     v-gl-tooltip
-    :datetime="endDate"
-    :title="endDate"
+    :datetime="endDateString"
+    :title="endDateString"
   >
     {{ remainingTime }}
   </time>
diff --git a/spec/javascripts/vue_shared/components/gl_countdown_spec.js b/spec/javascripts/vue_shared/components/gl_countdown_spec.js
index 9f729c68f0a..929ffe219f4 100644
--- a/spec/javascripts/vue_shared/components/gl_countdown_spec.js
+++ b/spec/javascripts/vue_shared/components/gl_countdown_spec.js
@@ -20,7 +20,7 @@ describe('GlCountdown', () => {
   describe('when there is time remaining', () => {
     beforeEach(done => {
       vm = mountComponent(Component, {
-        endDate: '2000-01-01T01:02:03Z',
+        endDateString: '2000-01-01T01:02:03Z',
       });
 
       Vue.nextTick()
@@ -48,7 +48,7 @@ describe('GlCountdown', () => {
   describe('when there is no time remaining', () => {
     beforeEach(done => {
       vm = mountComponent(Component, {
-        endDate: '1900-01-01T00:00:00Z',
+        endDateString: '1900-01-01T00:00:00Z',
       });
 
       Vue.nextTick()
@@ -60,4 +60,18 @@ describe('GlCountdown', () => {
       expect(vm.$el).toContainText('00:00:00');
     });
   });
+
+  describe('when an invalid date is passed', () => {
+    it('throws a validation error', () => {
+      spyOn(Vue.config, 'warnHandler').and.stub();
+      vm = mountComponent(Component, {
+        endDateString: 'this is invalid',
+      });
+
+      expect(Vue.config.warnHandler).toHaveBeenCalledTimes(1);
+      const [errorMessage] = Vue.config.warnHandler.calls.argsFor(0);
+
+      expect(errorMessage).toMatch(/^Invalid prop: .* "endDateString"/);
+    });
+  });
 });