diff options
author | Clement Ho <clemmakesapps@gmail.com> | 2018-10-25 21:50:45 +0000 |
---|---|---|
committer | Clement Ho <clemmakesapps@gmail.com> | 2018-10-25 21:50:45 +0000 |
commit | 3788b9c0e607199b930bdc0589a2ec9885adcf4f (patch) | |
tree | 0196e3cb9d306cdb4a70a4d3f7c5242cbf898408 | |
parent | 507fe190310e69eb7a794d706df16c78eb3778f5 (diff) | |
parent | 6bf2cb91bb5fa893746e905528467462e044e5ec (diff) | |
download | gitlab-ce-3788b9c0e607199b930bdc0589a2ec9885adcf4f.tar.gz |
Merge branch 'winh-countdown-component' into 'master'
Add reusable component for counting down
See merge request gitlab-org/gitlab-ce!22499
-rw-r--r-- | app/assets/javascripts/lib/utils/datetime_utility.js | 12 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/gl_countdown.vue | 49 | ||||
-rw-r--r-- | spec/javascripts/lib/utils/datetime_utility_spec.js (renamed from spec/javascripts/datetime_utility_spec.js) | 18 | ||||
-rw-r--r-- | spec/javascripts/vue_shared/components/gl_countdown_spec.js | 77 |
4 files changed, 156 insertions, 0 deletions
diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js index 1bdf98d0c97..46740308f17 100644 --- a/app/assets/javascripts/lib/utils/datetime_utility.js +++ b/app/assets/javascripts/lib/utils/datetime_utility.js @@ -473,3 +473,15 @@ export const stringifyTime = timeObject => { */ export const abbreviateTime = timeStr => timeStr.split(' ').filter(unitStr => unitStr.charAt(0) !== '0')[0]; + +/** + * Calculates the milliseconds between now and a given date string. + * The result cannot become negative. + * + * @param endDate date string that the time difference is calculated for + * @return {number} number of milliseconds remaining until the given date + */ +export const calculateRemainingMilliseconds = endDate => { + const remainingMilliseconds = new Date(endDate).getTime() - Date.now(); + return Math.max(remainingMilliseconds, 0); +}; diff --git a/app/assets/javascripts/vue_shared/components/gl_countdown.vue b/app/assets/javascripts/vue_shared/components/gl_countdown.vue new file mode 100644 index 00000000000..9327a2a4a6c --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/gl_countdown.vue @@ -0,0 +1,49 @@ +<script> +import { calculateRemainingMilliseconds, formatTime } from '~/lib/utils/datetime_utility'; + +/** + * Counts down to a given end date. + */ +export default { + props: { + endDateString: { + type: String, + required: true, + validator(value) { + return !Number.isNaN(new Date(value).getTime()); + }, + }, + }, + + data() { + return { + remainingTime: formatTime(0), + countdownUpdateIntervalId: null, + }; + }, + + mounted() { + const updateRemainingTime = () => { + const remainingMilliseconds = calculateRemainingMilliseconds(this.endDateString); + this.remainingTime = formatTime(remainingMilliseconds); + }; + + updateRemainingTime(); + this.countdownUpdateIntervalId = window.setInterval(updateRemainingTime, 1000); + }, + + beforeDestroy() { + window.clearInterval(this.countdownUpdateIntervalId); + }, +}; +</script> + +<template> + <time + v-gl-tooltip + :datetime="endDateString" + :title="endDateString" + > + {{ remainingTime }} + </time> +</template> diff --git a/spec/javascripts/datetime_utility_spec.js b/spec/javascripts/lib/utils/datetime_utility_spec.js index 2821f4d6793..de6b96aab57 100644 --- a/spec/javascripts/datetime_utility_spec.js +++ b/spec/javascripts/lib/utils/datetime_utility_spec.js @@ -352,3 +352,21 @@ describe('prettyTime methods', () => { }); }); }); + +describe('calculateRemainingMilliseconds', () => { + beforeEach(() => { + spyOn(Date, 'now').and.callFake(() => new Date('2063-04-04T00:42:00Z').getTime()); + }); + + it('calculates the remaining time for a given end date', () => { + const milliseconds = datetimeUtility.calculateRemainingMilliseconds('2063-04-04T01:44:03Z'); + + expect(milliseconds).toBe(3723000); + }); + + it('returns 0 if the end date has passed', () => { + const milliseconds = datetimeUtility.calculateRemainingMilliseconds('2063-04-03T00:00:00Z'); + + expect(milliseconds).toBe(0); + }); +}); diff --git a/spec/javascripts/vue_shared/components/gl_countdown_spec.js b/spec/javascripts/vue_shared/components/gl_countdown_spec.js new file mode 100644 index 00000000000..929ffe219f4 --- /dev/null +++ b/spec/javascripts/vue_shared/components/gl_countdown_spec.js @@ -0,0 +1,77 @@ +import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import Vue from 'vue'; +import GlCountdown from '~/vue_shared/components/gl_countdown.vue'; + +describe('GlCountdown', () => { + const Component = Vue.extend(GlCountdown); + let vm; + let now = '2000-01-01T00:00:00Z'; + + beforeEach(() => { + spyOn(Date, 'now').and.callFake(() => new Date(now).getTime()); + jasmine.clock().install(); + }); + + afterEach(() => { + vm.$destroy(); + jasmine.clock().uninstall(); + }); + + describe('when there is time remaining', () => { + beforeEach(done => { + vm = mountComponent(Component, { + endDateString: '2000-01-01T01:02:03Z', + }); + + Vue.nextTick() + .then(done) + .catch(done.fail); + }); + + it('displays remaining time', () => { + expect(vm.$el).toContainText('01:02:03'); + }); + + it('updates remaining time', done => { + now = '2000-01-01T00:00:01Z'; + jasmine.clock().tick(1000); + + Vue.nextTick() + .then(() => { + expect(vm.$el).toContainText('01:02:02'); + done(); + }) + .catch(done.fail); + }); + }); + + describe('when there is no time remaining', () => { + beforeEach(done => { + vm = mountComponent(Component, { + endDateString: '1900-01-01T00:00:00Z', + }); + + Vue.nextTick() + .then(done) + .catch(done.fail); + }); + + it('displays 00:00:00', () => { + 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"/); + }); + }); +}); |