Add reusable project_selector component

This commit adds a resuable UI component that allows a user to search
for a project name, shows the search results, and allows the user to
select one or more projects.  This component communicates with its
parent using props and events.

This component was originally created for use in the EE-specific
"Operations Dashboard" page, but it is applicable for CE use cases as
well, and so was added as a CE shared component.

In addition, some logic was extracted from the frequent_items_list_item
component into shared filters to avoid logic duplication.

1 files changed, 39 insertions, 10 deletions

diff --git a/spec/javascripts/frequent_items/components/frequent_items_list_item_spec.js b/spec/javascripts/frequent_items/components/frequent_items_list_item_spec.js
index 7deed985219..92554bd9a69 100644
--- a/spec/javascripts/frequent_items/components/frequent_items_list_item_spec.js
+++ b/spec/javascripts/frequent_items/components/frequent_items_list_item_spec.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import frequentItemsListItemComponent from '~/frequent_items/components/frequent_items_list_item.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { trimText } from 'spec/helpers/vue_component_helper';
 import { mockProject } from '../mock_data'; // can also use 'mockGroup', but not useful to test here
 
 const createComponent = () => {
@@ -40,30 +41,58 @@ describe('FrequentItemsListItemComponent', () => {
     });
 
     describe('highlightedItemName', () => {
-      it('should enclose part of project name in <b> & </b> which matches with `matcher` prop', () => {
+      it('should enclose part of project name in <b> & </b> which matches with `matcher` prop', done => {
         vm.matcher = 'lab';
 
-        expect(vm.highlightedItemName).toContain('<b>Lab</b>');
+        vm.$nextTick()
+          .then(() => {
+            expect(vm.$el.querySelector('.js-frequent-items-item-title').innerHTML).toContain(
+              '<b>L</b><b>a</b><b>b</b>',
+            );
+          })
+          .then(done)
+          .catch(done.fail);
       });
 
-      it('should return project name as it is if `matcher` is not available', () => {
+      it('should return project name as it is if `matcher` is not available', done => {
         vm.matcher = null;
 
-        expect(vm.highlightedItemName).toBe(mockProject.name);
+        vm.$nextTick()
+          .then(() => {
+            expect(vm.$el.querySelector('.js-frequent-items-item-title').innerHTML).toBe(
+              mockProject.name,
+            );
+          })
+          .then(done)
+          .catch(done.fail);
       });
     });
 
     describe('truncatedNamespace', () => {
-      it('should truncate project name from namespace string', () => {
+      it('should truncate project name from namespace string', done => {
         vm.namespace = 'platform / nokia-3310';
 
-        expect(vm.truncatedNamespace).toBe('platform');
+        vm.$nextTick()
+          .then(() => {
+            expect(
+              trimText(vm.$el.querySelector('.js-frequent-items-item-namespace').innerHTML),
+            ).toBe('platform');
+          })
+          .then(done)
+          .catch(done.fail);
       });
 
-      it('should truncate namespace string from the middle if it includes more than two groups in path', () => {
+      it('should truncate namespace string from the middle if it includes more than two groups in path', done => {
         vm.namespace = 'platform / hardware / broadcom / Wifi Group / Mobile Chipset / nokia-3310';
 
-        expect(vm.truncatedNamespace).toBe('platform / ... / Mobile Chipset');
+        vm.$nextTick()
+          .then(() => {
+            expect(
+              trimText(vm.$el.querySelector('.js-frequent-items-item-namespace').innerHTML),
+            ).toBe('platform / ... / Mobile Chipset');
+          })
+          .then(done)
+          .catch(done.fail);
       });
     });
   });
@@ -74,8 +103,8 @@ describe('FrequentItemsListItemComponent', () => {
       expect(vm.$el.querySelectorAll('a').length).toBe(1);
       expect(vm.$el.querySelectorAll('.frequent-items-item-avatar-container').length).toBe(1);
       expect(vm.$el.querySelectorAll('.frequent-items-item-metadata-container').length).toBe(1);
-      expect(vm.$el.querySelectorAll('.frequent-items-item-title').length).toBe(1);
-      expect(vm.$el.querySelectorAll('.frequent-items-item-namespace').length).toBe(1);
+      expect(vm.$el.querySelectorAll('.js-frequent-items-item-title').length).toBe(1);
+      expect(vm.$el.querySelectorAll('.js-frequent-items-item-namespace').length).toBe(1);
     });
   });
 });