1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
import { shallowMount } from '@vue/test-utils';
import { GlTruncate } from '@gitlab/ui';
import timezoneMock from 'timezone-mock';
import { getTimeago } from '~/lib/utils/datetime_utility';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import { DATE_ONLY_FORMAT } from '~/lib/utils/datetime/locale_dateformat';
describe('Time ago with tooltip component', () => {
let vm;
const timestamp = '2017-05-08T14:57:39.781Z';
const timeAgoTimestamp = getTimeago().format(timestamp);
const defaultProps = {
time: timestamp,
};
const buildVm = (props = {}, scopedSlots = {}) => {
vm = shallowMount(TimeAgoTooltip, {
propsData: {
...defaultProps,
...props,
},
scopedSlots,
});
};
afterEach(() => {
timezoneMock.unregister();
});
it('should render timeago with a bootstrap tooltip', () => {
buildVm();
expect(vm.attributes('title')).toEqual('May 8, 2017 at 2:57:39 PM GMT');
expect(vm.text()).toEqual(timeAgoTimestamp);
});
it('should render truncated value with gl-truncate as true', () => {
buildVm({
enableTruncation: true,
});
expect(vm.findComponent(GlTruncate).exists()).toBe(true);
});
it('should render provided html class', () => {
buildVm({
cssClass: 'foo',
});
expect(vm.classes()).toContain('foo');
});
it('should render with the datetime attribute', () => {
buildVm();
expect(vm.attributes('datetime')).toEqual(timestamp);
});
it('should render with the timestamp provided as Date', () => {
buildVm({ time: new Date(timestamp) });
expect(vm.text()).toEqual(timeAgoTimestamp);
});
it('should render provided scope content with the correct timeAgo string', () => {
buildVm(null, { default: `<span>The time is {{ props.timeAgo }}</span>` });
expect(vm.text()).toEqual(`The time is ${timeAgoTimestamp}`);
});
describe('with User Setting timeDisplayRelative: false', () => {
beforeEach(() => {
window.gon = { time_display_relative: false };
});
it('should render with the correct absolute datetime in the default format', () => {
buildVm();
expect(vm.text()).toEqual('May 8, 2017, 2:57 PM');
});
it('should render with the correct absolute datetime in the requested dateTimeFormat', () => {
buildVm({ dateTimeFormat: DATE_ONLY_FORMAT });
expect(vm.text()).toEqual('May 8, 2017');
});
});
describe('number based timestamps', () => {
// Store a date object before we mock the TZ
const date = new Date();
describe('with default TZ', () => {
beforeEach(() => {
buildVm({ time: date.getTime() });
});
it('handled correctly', () => {
expect(vm.text()).toEqual(getTimeago().format(date.getTime()));
});
});
describe.each`
timezone | offset
${'US/Pacific'} | ${420}
${'US/Eastern'} | ${240}
${'Brazil/East'} | ${180}
${'UTC'} | ${-0}
${'Europe/London'} | ${-60}
`('with different client vs server TZ', ({ timezone, offset }) => {
let tzDate;
beforeEach(() => {
timezoneMock.register(timezone);
// Date object with mocked TZ
tzDate = new Date();
buildVm({ time: date.getTime() });
});
it('the date object should have correct timezones', () => {
expect(tzDate.getTimezoneOffset()).toBe(offset);
});
it('timeago should handled the date correctly', () => {
// getTime() should always handle the TZ, which allows for us to validate the date objects represent
// the same date and time regardless of the TZ.
expect(vm.text()).toEqual(getTimeago().format(date.getTime()));
expect(vm.text()).toEqual(getTimeago().format(tzDate.getTime()));
});
});
});
});
|
