Add latest changes from gitlab-org/gitlab@master

1 files changed, 75 insertions, 8 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'));