LabelsSelect DropdownHeader Component

2 files changed, 57 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue
new file mode 100644
index 00000000000..7664acdf19c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue
@@ -0,0 +1,21 @@
+<script>
+export default {};
+</script>
+
+<template>
+  <div class="dropdown-title">
+    <span>{{ __('Assign labels') }}</span>
+    <button
+      type="button"
+      class="dropdown-title-button dropdown-menu-close"
+      :aria-label="__('Close')"
+    >
+      <i
+        aria-hidden="true"
+        class="fa fa-times dropdown-menu-close-icon"
+        data-hidden="true"
+      >
+      </i>
+    </button>
+  </div>
+</template>
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js
new file mode 100644
index 00000000000..325fa47c957
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js
@@ -0,0 +1,36 @@
+import Vue from 'vue';
+
+import dropdownHeaderComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_header.vue';
+
+import mountComponent from '../../../../helpers/vue_mount_component_helper';
+
+const createComponent = () => {
+  const Component = Vue.extend(dropdownHeaderComponent);
+
+  return mountComponent(Component);
+};
+
+describe('DropdownHeaderComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('template', () => {
+    it('renders header text element', () => {
+      const headerEl = vm.$el.querySelector('.dropdown-title span');
+      expect(headerEl.innerText.trim()).toBe('Assign labels');
+    });
+
+    it('renders `Close` button element', () => {
+      const closeBtnEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-close');
+      expect(closeBtnEl).not.toBeNull();
+      expect(closeBtnEl.querySelector('.fa-times.dropdown-menu-close-icon')).not.toBeNull();
+    });
+  });
+});