debian-mirror-gitlab/spec/frontend/ide/components/shared/tokened_input_spec.js

130 lines
3.4 KiB
JavaScript
Raw Normal View History

2022-04-04 11:22:00 +05:30
import Vue, { nextTick } from 'vue';
2020-05-24 23:13:21 +05:30
import mountComponent from 'helpers/vue_mount_component_helper';
2020-01-01 13:55:28 +05:30
import TokenedInput from '~/ide/components/shared/tokened_input.vue';
2018-11-18 11:00:15 +05:30
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(vm) {
return Array.from(vm.$el.querySelectorAll('.filtered-search-token button'));
}
function createBackspaceEvent() {
const e = new Event('keyup');
e.keyCode = 8;
e.which = e.keyCode;
e.altKey = false;
e.ctrlKey = true;
e.shiftKey = false;
e.metaKey = false;
return e;
}
describe('IDE shared/TokenedInput', () => {
const Component = Vue.extend(TokenedInput);
let vm;
beforeEach(() => {
vm = mountComponent(Component, {
tokens: TEST_TOKENS,
placeholder: TEST_PLACEHOLDER,
value: TEST_VALUE,
});
2020-05-24 23:13:21 +05:30
jest.spyOn(vm, '$emit').mockImplementation(() => {});
2018-11-18 11:00:15 +05:30
});
afterEach(() => {
vm.$destroy();
});
it('renders tokens', () => {
2021-03-08 18:12:59 +05:30
const renderedTokens = getTokenElements(vm).map((x) => x.textContent.trim());
2018-11-18 11:00:15 +05:30
2021-03-08 18:12:59 +05:30
expect(renderedTokens).toEqual(TEST_TOKENS.map((x) => x.label));
2018-11-18 11:00:15 +05:30
});
it('renders input', () => {
expect(vm.$refs.input).toBeTruthy();
expect(vm.$refs.input).toHaveValue(TEST_VALUE);
});
2022-04-04 11:22:00 +05:30
it('renders placeholder, when tokens are empty', async () => {
2018-11-18 11:00:15 +05:30
vm.tokens = [];
2022-04-04 11:22:00 +05:30
await nextTick();
expect(vm.$refs.input).toHaveAttr('placeholder', TEST_PLACEHOLDER);
2018-11-18 11:00:15 +05:30
});
it('triggers "removeToken" on token click', () => {
getTokenElements(vm)[0].click();
expect(vm.$emit).toHaveBeenCalledWith('removeToken', TEST_TOKENS[0]);
});
it('when input triggers backspace event, it calls "onBackspace"', () => {
2020-05-24 23:13:21 +05:30
jest.spyOn(vm, 'onBackspace').mockImplementation(() => {});
2018-11-18 11:00:15 +05:30
vm.$refs.input.dispatchEvent(createBackspaceEvent());
vm.$refs.input.dispatchEvent(createBackspaceEvent());
expect(vm.onBackspace).toHaveBeenCalledTimes(2);
});
it('triggers "removeToken" on backspaces when value is empty', () => {
vm.value = '';
vm.onBackspace();
2018-12-13 13:39:08 +05:30
2018-11-18 11:00:15 +05:30
expect(vm.$emit).not.toHaveBeenCalled();
expect(vm.backspaceCount).toEqual(1);
vm.onBackspace();
2018-12-13 13:39:08 +05:30
2018-11-18 11:00:15 +05:30
expect(vm.$emit).toHaveBeenCalledWith('removeToken', TEST_TOKENS[TEST_TOKENS.length - 1]);
expect(vm.backspaceCount).toEqual(0);
});
it('does not trigger "removeToken" on backspaces when value is not empty', () => {
vm.onBackspace();
vm.onBackspace();
expect(vm.backspaceCount).toEqual(0);
expect(vm.$emit).not.toHaveBeenCalled();
});
it('does not trigger "removeToken" on backspaces when tokens are empty', () => {
vm.tokens = [];
vm.onBackspace();
vm.onBackspace();
expect(vm.backspaceCount).toEqual(0);
expect(vm.$emit).not.toHaveBeenCalled();
});
it('triggers "focus" on input focus', () => {
vm.$refs.input.dispatchEvent(new Event('focus'));
expect(vm.$emit).toHaveBeenCalledWith('focus');
});
it('triggers "blur" on input blur', () => {
vm.$refs.input.dispatchEvent(new Event('blur'));
expect(vm.$emit).toHaveBeenCalledWith('blur');
});
it('triggers "input" with value on input change', () => {
vm.$refs.input.value = 'something-else';
vm.$refs.input.dispatchEvent(new Event('input'));
expect(vm.$emit).toHaveBeenCalledWith('input', 'something-else');
});
});