1 files changed, 133 insertions, 0 deletions
diff --git a/spec/frontend/ide/components/shared/tokened_input_spec.js b/spec/frontend/ide/components/shared/tokened_input_spec.js
new file mode 100644
index 00000000000..e687216bd06
--- /dev/null
+++ b/spec/frontend/ide/components/shared/tokened_input_spec.js
@@ -0,0 +1,133 @@
+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');
+  });
+});