133 lines
3.4 KiB
JavaScript
133 lines
3.4 KiB
JavaScript
import Vue from 'vue';
|
|
import mountComponent from 'helpers/vue_mount_component_helper';
|
|
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(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,
|
|
});
|
|
|
|
jest.spyOn(vm, '$emit').mockImplementation(() => {});
|
|
});
|
|
|
|
afterEach(() => {
|
|
vm.$destroy();
|
|
});
|
|
|
|
it('renders tokens', () => {
|
|
const renderedTokens = getTokenElements(vm).map((x) => x.textContent.trim());
|
|
|
|
expect(renderedTokens).toEqual(TEST_TOKENS.map((x) => x.label));
|
|
});
|
|
|
|
it('renders input', () => {
|
|
expect(vm.$refs.input).toBeTruthy();
|
|
expect(vm.$refs.input).toHaveValue(TEST_VALUE);
|
|
});
|
|
|
|
it('renders placeholder, when tokens are empty', (done) => {
|
|
vm.tokens = [];
|
|
|
|
vm.$nextTick()
|
|
.then(() => {
|
|
expect(vm.$refs.input).toHaveAttr('placeholder', TEST_PLACEHOLDER);
|
|
})
|
|
.then(done)
|
|
.catch(done.fail);
|
|
});
|
|
|
|
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"', () => {
|
|
jest.spyOn(vm, 'onBackspace').mockImplementation(() => {});
|
|
|
|
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();
|
|
|
|
expect(vm.$emit).not.toHaveBeenCalled();
|
|
expect(vm.backspaceCount).toEqual(1);
|
|
|
|
vm.onBackspace();
|
|
|
|
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');
|
|
});
|
|
});
|