LabelsSelect DropdownSearchInput Component

2 files changed, 66 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue
new file mode 100644
index 00000000000..ae633460c95
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue
@@ -0,0 +1,27 @@
+<script>
+export default {};
+</script>
+
+<template>
+  <div class="dropdown-input">
+    <input
+      autocomplete="off"
+      class="dropdown-input-field"
+      type="search"
+      :placeholder="__('Search')"
+    />
+    <i
+      aria-hidden="true"
+      class="fa fa-search dropdown-input-search"
+      data-hidden="true"
+    >
+    </i>
+    <i
+      aria-hidden="true"
+      class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
+      data-hidden="true"
+      role="button"
+    >
+    </i>
+  </div>
+</template>
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js
new file mode 100644
index 00000000000..69e11d966c2
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js
@@ -0,0 +1,39 @@
+import Vue from 'vue';
+
+import dropdownSearchInputComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue';
+
+import mountComponent from '../../../../helpers/vue_mount_component_helper';
+
+const createComponent = () => {
+  const Component = Vue.extend(dropdownSearchInputComponent);
+
+  return mountComponent(Component);
+};
+
+describe('DropdownSearchInputComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('template', () => {
+    it('renders input element with type `search`', () => {
+      const inputEl = vm.$el.querySelector('input.dropdown-input-field');
+      expect(inputEl).not.toBeNull();
+      expect(inputEl.getAttribute('type')).toBe('search');
+    });
+
+    it('renders search icon element', () => {
+      expect(vm.$el.querySelector('.fa-search.dropdown-input-search')).not.toBeNull();
+    });
+
+    it('renders clear search icon element', () => {
+      expect(vm.$el.querySelector('.fa-times.dropdown-input-clear.js-dropdown-input-clear')).not.toBeNull();
+    });
+  });
+});