Commit 3788b9c0 authored by Clement Ho's avatar Clement Ho

Merge branch 'winh-countdown-component' into 'master'

Add reusable component for counting down

See merge request gitlab-org/gitlab-ce!22499
parents 507fe190 6bf2cb91
......@@ -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);
};
<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>
......@@ -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);
});
});
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"/);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment