Commit 6df29dd9 authored by Robert Hunt's avatar Robert Hunt Committed by Mark Florian

The time_ago_tooltip now supports sprintf

Passing a string with a %{timeAgo} placeholder will generate the text
and replace %{timeAgo} with the timeago text

Updated snapshot tests
parent 0f1ea152
<script>
import { GlTooltipDirective } from '@gitlab/ui';
import timeagoMixin from '../mixins/timeago';
import '../../lib/utils/datetime_utility';
......@@ -28,6 +29,11 @@ export default {
default: '',
},
},
computed: {
timeAgo() {
return this.timeFormatted(this.time);
},
},
};
</script>
<template>
......@@ -35,7 +41,7 @@ export default {
v-gl-tooltip.viewport="{ placement: tooltipPlacement }"
:class="cssClass"
:title="tooltipTitle(time)"
v-text="timeFormatted(time)"
:datetime="time"
><slot :timeAgo="timeAgo">{{ timeAgo }}</slot></time
>
</time>
</template>
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`GeoReplicableTimeAgo template when dateString exists TimeAgo sets innerHTML as 09-23-1994 1`] = `"<time title=\\"Sep 23, 1994 12:00am GMT+0000\\" class=\\"\\">25 years ago</time>"`;
exports[`GeoReplicableTimeAgo template when dateString exists TimeAgo sets innerHTML as 09-23-1994 1`] = `"<time title=\\"Sep 23, 1994 12:00am GMT+0000\\" datetime=\\"09-23-1994\\" class=\\"\\">25 years ago</time>"`;
exports[`GeoReplicableTimeAgo template when dateString is null DefaultText sets innerHTML as props.defaultText 1`] = `"<span>Default Text</span>"`;
import { shallowMount } from '@vue/test-utils';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import { formatDate, getTimeago } from '~/lib/utils/datetime_utility';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
describe('Time ago with tooltip component', () => {
let vm;
const buildVm = (propsData = {}) => {
const buildVm = (propsData = {}, scopedSlots = {}) => {
vm = shallowMount(TimeAgoTooltip, {
propsData,
scopedSlots,
});
};
const timestamp = '2017-05-08T14:57:39.781Z';
const timeAgoTimestamp = getTimeago().format(timestamp);
afterEach(() => {
vm.destroy();
......@@ -20,10 +23,9 @@ describe('Time ago with tooltip component', () => {
buildVm({
time: timestamp,
});
const timeago = getTimeago();
expect(vm.attributes('title')).toEqual(formatDate(timestamp));
expect(vm.text()).toEqual(timeago.format(timestamp));
expect(vm.text()).toEqual(timeAgoTimestamp);
});
it('should render provided html class', () => {
......@@ -34,4 +36,16 @@ describe('Time ago with tooltip component', () => {
expect(vm.classes()).toContain('foo');
});
it('should render with the datetime attribute', () => {
buildVm({ time: timestamp });
expect(vm.attributes('datetime')).toEqual(timestamp);
});
it('should render provided scope content with the correct timeAgo string', () => {
buildVm({ time: timestamp }, { default: `<span>The time is {{ props.timeAgo }}</span>` });
expect(vm.text()).toEqual(`The time is ${timeAgoTimestamp}`);
});
});
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