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
|
import { mount } from '@vue/test-utils';
import TokenedInput from '~/ide/components/shared/tokened_input.vue';
const TEST_PLACEHOLDER = 'Searching in test';
const TEST_TOKENS = [
{ label: 'lorem', id: 1 },
{ label: 'ipsum', id: 2 },
{ label: 'dolar', id: 3 },
];
const TEST_VALUE = 'lorem';
function getTokenElements(wrapper) {
return wrapper.findAll('.filtered-search-token button');
}
describe('IDE shared/TokenedInput', () => {
let wrapper;
const createComponent = (props = {}) => {
wrapper = mount(TokenedInput, {
propsData: {
tokens: TEST_TOKENS,
placeholder: TEST_PLACEHOLDER,
value: TEST_VALUE,
...props,
},
attachTo: document.body,
});
};
afterEach(() => {
wrapper.destroy();
});
it('renders tokens', () => {
createComponent();
const renderedTokens = getTokenElements(wrapper).wrappers.map((w) => w.text());
expect(renderedTokens).toEqual(TEST_TOKENS.map((x) => x.label));
});
it('renders input', () => {
createComponent();
expect(wrapper.find('input').element).toBeInstanceOf(HTMLInputElement);
expect(wrapper.find('input').element).toHaveValue(TEST_VALUE);
});
it('renders placeholder, when tokens are empty', () => {
createComponent({ tokens: [] });
expect(wrapper.find('input').attributes('placeholder')).toBe(TEST_PLACEHOLDER);
});
it('triggers "removeToken" on token click', async () => {
createComponent();
await getTokenElements(wrapper).at(0).trigger('click');
expect(wrapper.emitted('removeToken')[0]).toStrictEqual([TEST_TOKENS[0]]);
});
it('removes token on backspace when value is empty', async () => {
createComponent({ value: '' });
expect(wrapper.emitted('removeToken')).toBeUndefined();
await wrapper.find('input').trigger('keyup.delete');
await wrapper.find('input').trigger('keyup.delete');
expect(wrapper.emitted('removeToken')[0]).toStrictEqual([TEST_TOKENS[TEST_TOKENS.length - 1]]);
});
it('does not trigger "removeToken" on backspaces when value is not empty', async () => {
createComponent({ value: 'SOMETHING' });
await wrapper.find('input').trigger('keyup.delete');
await wrapper.find('input').trigger('keyup.delete');
expect(wrapper.emitted('removeToken')).toBeUndefined();
});
it('does not trigger "removeToken" on backspaces when tokens are empty', async () => {
createComponent({ value: '', tokens: [] });
await wrapper.find('input').trigger('keyup.delete');
await wrapper.find('input').trigger('keyup.delete');
expect(wrapper.emitted('removeToken')).toBeUndefined();
});
it('triggers "focus" on input focus', async () => {
createComponent();
await wrapper.find('input').trigger('focus');
expect(wrapper.emitted('focus')).toHaveLength(1);
});
it('triggers "blur" on input blur', async () => {
createComponent();
await wrapper.find('input').trigger('blur');
expect(wrapper.emitted('blur')).toHaveLength(1);
});
it('triggers "input" with value on input change', async () => {
createComponent();
await wrapper.find('input').setValue('something-else');
expect(wrapper.emitted('input')[0]).toStrictEqual(['something-else']);
});
});
|
