Add latest changes from gitlab-org/gitlab@master

3 files changed, 139 insertions, 16 deletions

diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js
index 007429a3d02..195abae3783 100644
--- a/spec/frontend/monitoring/components/dashboard_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_spec.js
@@ -28,6 +28,15 @@ describe('Dashboard', () => {
   let wrapper;
   let mock;
 
+  const findEnvironmentsDropdown = () => wrapper.find({ ref: 'monitorEnvironmentsDropdown' });
+  const findAllEnvironmentsDropdownItems = () => findEnvironmentsDropdown().findAll(GlDropdownItem);
+  const setSearchTerm = searchTerm => {
+    wrapper.vm.$store.commit(
+      `monitoringDashboard/${types.SET_ENVIRONMENTS_SEARCH_TERM}`,
+      searchTerm,
+    );
+  };
+
   const createShallowWrapper = (props = {}, options = {}) => {
     wrapper = shallowMount(Dashboard, {
       localVue,
@@ -52,9 +61,6 @@ describe('Dashboard', () => {
     });
   };
 
-  const findEnvironmentsDropdown = () => wrapper.find({ ref: 'monitorEnvironmentsDropdown' });
-  const findAllEnvironmentsDropdownItems = () => findEnvironmentsDropdown().findAll(GlDropdownItem);
-
   beforeEach(() => {
     store = createStore();
     mock = new MockAdapter(axios);
@@ -155,12 +161,9 @@ describe('Dashboard', () => {
       wrapper.vm
         .$nextTick()
         .then(() => {
-          const environmentDropdownItems = findAllEnvironmentsDropdownItems();
+          expect(findAllEnvironmentsDropdownItems().length).toEqual(environmentData.length);
 
-          expect(wrapper.vm.environments.length).toEqual(environmentData.length);
-          expect(environmentDropdownItems.length).toEqual(wrapper.vm.environments.length);
-
-          environmentDropdownItems.wrappers.forEach((itemWrapper, index) => {
+          findAllEnvironmentsDropdownItems().wrappers.forEach((itemWrapper, index) => {
             const anchorEl = itemWrapper.find('a');
             if (anchorEl.exists() && environmentData[index].metrics_path) {
               const href = anchorEl.attributes('href');
@@ -248,6 +251,70 @@ describe('Dashboard', () => {
     });
   });
 
+  describe('searchable environments dropdown', () => {
+    beforeEach(() => {
+      createMountedWrapper(
+        { hasMetrics: true },
+        {
+          attachToDocument: true,
+          stubs: ['graph-group', 'panel-type'],
+          provide: {
+            glFeatures: { searchableEnvironmentsDropdown: true },
+          },
+        },
+      );
+
+      setupComponentStore(wrapper);
+
+      return wrapper.vm.$nextTick();
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('renders a search input', () => {
+      expect(wrapper.find({ ref: 'monitorEnvironmentsDropdownSearch' }).exists()).toBe(true);
+    });
+
+    it('renders dropdown items', () => {
+      findAllEnvironmentsDropdownItems().wrappers.forEach((itemWrapper, index) => {
+        const anchorEl = itemWrapper.find('a');
+        if (anchorEl.exists()) {
+          expect(anchorEl.text()).toBe(environmentData[index].name);
+        }
+      });
+    });
+
+    it('filters rendered dropdown items', () => {
+      const searchTerm = 'production';
+      const resultEnvs = environmentData.filter(({ name }) => name.indexOf(searchTerm) !== -1);
+      setSearchTerm(searchTerm);
+
+      return wrapper.vm.$nextTick(() => {
+        expect(findAllEnvironmentsDropdownItems().length).toEqual(resultEnvs.length);
+      });
+    });
+
+    it('does not filter dropdown items if search term is empty string', () => {
+      const searchTerm = '';
+      setSearchTerm(searchTerm);
+
+      return wrapper.vm.$nextTick(() => {
+        expect(findAllEnvironmentsDropdownItems().length).toEqual(environmentData.length);
+      });
+    });
+
+    it("shows error message if search term doesn't match", () => {
+      const searchTerm = 'does-not-exist';
+      setSearchTerm(searchTerm);
+
+      return wrapper.vm.$nextTick(() => {
+        expect(wrapper.find({ ref: 'monitorEnvironmentsDropdownMsg' }).isVisible()).toBe(true);
+      });
+    });
+  });
+
   describe('drag and drop function', () => {
     const findDraggables = () => wrapper.findAll(VueDraggable);
     const findEnabledDraggables = () => findDraggables().filter(f => !f.attributes('disabled'));
diff --git a/spec/frontend/monitoring/mock_data.js b/spec/frontend/monitoring/mock_data.js
index 094554f525c..ada3e44f0a4 100644
--- a/spec/frontend/monitoring/mock_data.js
+++ b/spec/frontend/monitoring/mock_data.js
@@ -331,6 +331,14 @@ export const mockedQueryResultPayloadCoresTotal = {
   ],
 };
 
+const extraEnvironmentData = new Array(15).fill(null).map((_, idx) => ({
+  id: 136 + idx,
+  name: `no-deployment/noop-branch-${idx}`,
+  state: 'available',
+  created_at: '2018-07-04T18:39:41.702Z',
+  updated_at: '2018-07-04T18:44:54.010Z',
+}));
+
 export const environmentData = [
   {
     id: 34,
@@ -368,14 +376,7 @@ export const environmentData = [
       id: 128,
     },
   },
-  {
-    id: 36,
-    name: 'no-deployment/noop-branch',
-    state: 'available',
-    created_at: '2018-07-04T18:39:41.702Z',
-    updated_at: '2018-07-04T18:44:54.010Z',
-  },
-];
+].concat(extraEnvironmentData);
 
 export const metricsDashboardResponse = {
   dashboard: {
diff --git a/spec/frontend/monitoring/store/getters_spec.js b/spec/frontend/monitoring/store/getters_spec.js
index 097a5ca7f7c..263050b462f 100644
--- a/spec/frontend/monitoring/store/getters_spec.js
+++ b/spec/frontend/monitoring/store/getters_spec.js
@@ -3,6 +3,7 @@ import mutations from '~/monitoring/stores/mutations';
 import * as types from '~/monitoring/stores/mutation_types';
 import { metricStates } from '~/monitoring/constants';
 import {
+  environmentData,
   metricsDashboardPayload,
   mockedEmptyResult,
   mockedQueryResultPayload,
@@ -214,4 +215,58 @@ describe('Monitoring store Getters', () => {
       });
     });
   });
+
+  describe('filteredEnvironments', () => {
+    let state;
+    const setupState = (initState = {}) => {
+      state = {
+        ...state,
+        ...initState,
+      };
+    };
+
+    beforeAll(() => {
+      setupState({
+        environments: environmentData,
+      });
+    });
+
+    afterAll(() => {
+      state = null;
+    });
+
+    [
+      {
+        input: '',
+        output: 17,
+      },
+      {
+        input: '     ',
+        output: 17,
+      },
+      {
+        input: null,
+        output: 17,
+      },
+      {
+        input: 'does-not-exist',
+        output: 0,
+      },
+      {
+        input: 'noop-branch-',
+        output: 15,
+      },
+      {
+        input: 'noop-branch-9',
+        output: 1,
+      },
+    ].forEach(({ input, output }) => {
+      it(`filteredEnvironments returns ${output} items for ${input}`, () => {
+        setupState({
+          environmentsSearchTerm: input,
+        });
+        expect(getters.filteredEnvironments(state).length).toBe(output);
+      });
+    });
+  });
 });