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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
import {
GlDaterangePicker,
GlFilteredSearchSuggestion,
GlFilteredSearchSuggestionList,
GlFilteredSearchToken,
} from '@gitlab/ui';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import DaterangeToken from '~/vue_shared/components/filtered_search_bar/tokens/daterange_token.vue';
import { OPERATORS_IS } from '~/vue_shared/components/filtered_search_bar/constants';
const CUSTOM_DATE = 'custom-date';
describe('DaterangeToken', () => {
let wrapper;
const defaultProps = {
active: true,
value: {
data: '',
},
config: {
operators: OPERATORS_IS,
options: [
{
value: 'last_week',
title: 'Last week',
},
{
value: 'last_month',
title: 'Last month',
},
],
},
};
function createComponent(props = {}) {
return mountExtended(DaterangeToken, {
propsData: { ...defaultProps, ...props },
stubs: {
Portal: true,
},
provide: {
portalName: 'fake target',
alignSuggestions: function fakeAlignSuggestions() {},
suggestionsListClass: () => 'custom-class',
termsAsTokens: () => false,
},
});
}
const findGlFilteredSearchToken = () => wrapper.findComponent(GlFilteredSearchToken);
const findDateRangePicker = () => wrapper.findComponent(GlDaterangePicker);
const findAllSuggestions = () => wrapper.findAllComponents(GlFilteredSearchSuggestion);
const selectSuggestion = (suggestion) =>
wrapper.findComponent(GlFilteredSearchSuggestionList).vm.$emit('suggestion', suggestion);
beforeEach(() => {
wrapper = createComponent();
});
it('renders a filtered search token', () => {
expect(findGlFilteredSearchToken().exists()).toBe(true);
});
it('remove the options from the token config', () => {
expect(findGlFilteredSearchToken().props('config').options).toBeUndefined();
});
it('does not set the token as view-only', () => {
expect(findGlFilteredSearchToken().props('viewOnly')).toBe(false);
});
it('does not show the date picker by default', () => {
expect(findDateRangePicker().exists()).toBe(false);
});
it('does not re-activate the token', async () => {
await wrapper.setProps({ active: false });
expect(findGlFilteredSearchToken().props('active')).toBe(false);
});
it('does not override the value', async () => {
await wrapper.setProps({ value: { data: 'value' } });
expect(findGlFilteredSearchToken().props('value')).toEqual({ data: 'value' });
});
it('renders a list of suggestions as specified by the config', () => {
const suggestions = findAllSuggestions();
expect(suggestions.exists()).toBe(true);
expect(suggestions).toHaveLength(defaultProps.config.options.length + 1);
[...defaultProps.config.options, { value: CUSTOM_DATE, title: 'Custom' }].forEach(
(option, i) => {
expect(suggestions.at(i).props('value')).toBe(option.value);
expect(suggestions.at(i).text()).toBe(option.title);
},
);
});
it('sets the dataSegmentInputAttributes', () => {
expect(findGlFilteredSearchToken().props('dataSegmentInputAttributes')).toEqual({
id: 'time_range_data_segment_input',
});
});
describe('when a default option is selected', () => {
const option = defaultProps.config.options[0].value;
beforeEach(async () => {
await selectSuggestion(option);
});
it('does not show the date picker if default option is selected', () => {
expect(findDateRangePicker().exists()).toBe(false);
});
it('sets the value', () => {
expect(findGlFilteredSearchToken().emitted().select).toEqual([[option]]);
expect(findGlFilteredSearchToken().emitted().complete).toEqual([[option]]);
});
});
describe('when custom-date option is selected', () => {
beforeEach(async () => {
await selectSuggestion(CUSTOM_DATE);
});
it('sets the token as view-only', () => {
expect(findGlFilteredSearchToken().props('viewOnly')).toBe(true);
});
it('shows the date picker', () => {
expect(findDateRangePicker().exists()).toBe(true);
const today = new Date();
expect(findDateRangePicker().props('defaultStartDate')).toEqual(today);
expect(findDateRangePicker().props('startOpened')).toBe(true);
});
it('re-activate the token while the date picker is open', async () => {
await wrapper.setProps({ active: false });
expect(findGlFilteredSearchToken().props('active')).toBe(true);
});
it('overrides the value', async () => {
await wrapper.setProps({ value: { data: 'value' } });
expect(findGlFilteredSearchToken().props('value')).toEqual({ data: '' });
});
it('sets the dataSegmentInputAttributes', () => {
expect(findGlFilteredSearchToken().props('dataSegmentInputAttributes')).toEqual({
id: 'time_range_data_segment_input',
placeholder: 'YYYY-MM-DD - YYYY-MM-DD',
style: 'padding-left: 23px;',
});
});
it('sets the date range and hides the picker upon selection', async () => {
await findDateRangePicker().vm.$emit('input', {
startDate: new Date('October 13, 2014 11:13:00'),
endDate: new Date('October 13, 2014 11:13:00'),
});
expect(findGlFilteredSearchToken().emitted().complete).toEqual([
[CUSTOM_DATE],
[`"2014-10-13 - 2014-10-13"`],
]);
expect(findGlFilteredSearchToken().emitted().select).toEqual([
[CUSTOM_DATE],
[`"2014-10-13 - 2014-10-13"`],
]);
expect(findDateRangePicker().exists()).toBe(false);
});
});
});
|
