1 files changed, 54 insertions, 12 deletions

diff --git a/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js b/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
index 802da47d6cd..15f5759752d 100644
--- a/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
+++ b/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
@@ -26,6 +26,7 @@ const projects = [
     avatarUrl: null,
   },
 ];
+const groupNamespace = 'gitlab-org';
 
 const defaultMocks = {
   $apollo: {
@@ -46,7 +47,7 @@ describe('ProjectsDropdownFilter component', () => {
       mocks: { ...defaultMocks },
       propsData: {
         groupId: 1,
-        groupNamespace: 'gitlab-org',
+        groupNamespace,
         ...props,
       },
       stubs: {
@@ -93,34 +94,50 @@ describe('ProjectsDropdownFilter component', () => {
   const findSelectedButtonAvatarItemAtIndex = (index) =>
     findSelectedDropdownAtIndex(index).find('img.gl-avatar');
 
-  describe('queryParams are applied when fetching data', () => {
+  describe('when fetching data', () => {
+    const mockQueryParams = {
+      first: 50,
+      includeSubgroups: true,
+    };
+
+    const mockVariables = {
+      groupFullPath: groupNamespace,
+      ...mockQueryParams,
+    };
+
     beforeEach(() => {
       createComponent({
         props: {
-          queryParams: {
-            first: 50,
-            includeSubgroups: true,
-          },
+          queryParams: mockQueryParams,
         },
       });
+
+      spyQuery.mockClear();
     });
 
-    it('applies the correct queryParams when making an api call', async () => {
+    it('should apply the correct queryParams when making an API call', async () => {
       findDropdown().vm.$emit('search', 'gitlab');
 
+      await waitForPromises();
+
       expect(spyQuery).toHaveBeenCalledTimes(1);
 
-      await nextTick();
-      expect(spyQuery).toHaveBeenCalledWith({
+      expect(spyQuery).toHaveBeenLastCalledWith({
         query: getProjects,
         variables: {
           search: 'gitlab',
-          groupFullPath: wrapper.vm.groupNamespace,
-          first: 50,
-          includeSubgroups: true,
+          ...mockVariables,
         },
       });
     });
+
+    it('should not make an API call when search query is below minimum search length', async () => {
+      findDropdown().vm.$emit('search', 'hi');
+
+      await waitForPromises();
+
+      expect(spyQuery).toHaveBeenCalledTimes(0);
+    });
   });
 
   describe('highlighted items', () => {
@@ -230,6 +247,31 @@ describe('ProjectsDropdownFilter component', () => {
     });
   });
 
+  describe('with an array of projects passed to `defaultProjects` and a search term', () => {
+    const { name: searchQuery } = projects[2];
+
+    beforeEach(async () => {
+      createComponent({
+        mountFn: mountExtended,
+        props: {
+          defaultProjects: [projects[0], projects[1]],
+          multiSelect: true,
+        },
+      });
+
+      await waitForPromises();
+
+      findDropdown().vm.$emit('search', searchQuery);
+    });
+
+    it('should add search result to selected projects when selected', async () => {
+      await selectDropdownItemAtIndex([0, 1, 2]);
+
+      expect(findSelectedDropdownItems()).toHaveLength(3);
+      expect(findDropdownButton().text()).toBe('3 projects selected');
+    });
+  });
+
   describe('when multiSelect is false', () => {
     const blockDefaultProps = { multiSelect: false };
     beforeEach(() => {