Merge branch 'mrincon/move-environemnts-dropdown-test-to-header-spec' into 'master'

Move env dropdown tests to header specs

See merge request gitlab-org/gitlab!37061

app/assets/javascripts/monitoring/components/dashboard_header.vue

@@ -254,16 +254,8 @@ export default {
             {{ __('Environment') }}
           </gl-dropdown-header>
           <gl-dropdown-divider />
-          <gl-search-box-by-type
-            ref="monitorEnvironmentsDropdownSearch"
-            class="m-2"
-            @input="debouncedEnvironmentsSearch"
-          />
-          <gl-loading-icon
-            v-if="environmentsLoading"
-            ref="monitorEnvironmentsDropdownLoading"
-            :inline="true"
-          />
+          <gl-search-box-by-type class="m-2" @input="debouncedEnvironmentsSearch" />
+          <gl-loading-icon v-if="environmentsLoading" :inline="true" />
           <div v-else class="flex-fill overflow-auto">
             <gl-dropdown-item
               v-for="environment in filteredEnvironments"

spec/frontend/monitoring/components/dashboard_header_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { createStore } from '~/monitoring/stores';
+import * as types from '~/monitoring/stores/mutation_types';
+import { GlDropdownItem, GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui';
 import DashboardHeader from '~/monitoring/components/dashboard_header.vue';
 import DuplicateDashboardModal from '~/monitoring/components/duplicate_dashboard_modal.vue';
 import CreateDashboardModal from '~/monitoring/components/create_dashboard_modal.vue';
-import { setupAllDashboards } from '../store_utils';
+import { setupAllDashboards, setupStoreWithDashboard, setupStoreWithData } from '../store_utils';
 import {
+  environmentData,
   dashboardGitResponse,
   selfMonitoringDashboardGitResponse,
   dashboardHeaderProps,
 } from '../mock_data';
 import { redirectTo } from '~/lib/utils/url_utility';
 
+const mockProjectPath = 'https://path/to/project';
+
 jest.mock('~/lib/utils/url_utility', () => ({
   redirectTo: jest.fn(),
   queryToObject: jest.fn(),
@@ -21,6 +26,12 @@ describe('Dashboard header', () => {
   let store;
   let wrapper;
 
+  const findEnvsDropdown = () => wrapper.find({ ref: 'monitorEnvironmentsDropdown' });
+  const findEnvsDropdownItems = () => findEnvsDropdown().findAll(GlDropdownItem);
+  const findEnvsDropdownSearch = () => findEnvsDropdown().find(GlSearchBoxByType);
+  const findEnvsDropdownSearchMsg = () => wrapper.find({ ref: 'monitorEnvironmentsDropdownMsg' });
+  const findEnvsDropdownLoadingIcon = () => findEnvsDropdown().find(GlLoadingIcon);
+
   const findActionsMenu = () => wrapper.find('[data-testid="actions-menu"]');
   const findCreateDashboardMenuItem = () =>
     findActionsMenu().find('[data-testid="action-create-dashboard"]');
@@ -29,6 +40,10 @@ describe('Dashboard header', () => {
   const findDuplicateDashboardModal = () => wrapper.find(DuplicateDashboardModal);
   const findCreateDashboardModal = () => wrapper.find('[data-testid="create-dashboard-modal"]');
 
+  const setSearchTerm = searchTerm => {
+    store.commit(`monitoringDashboard/${types.SET_ENVIRONMENTS_FILTER}`, searchTerm);
+  };
+
   const createShallowWrapper = (props = {}, options = {}) => {
     wrapper = shallowMount(DashboardHeader, {
       propsData: { ...dashboardHeaderProps, ...props },
@@ -45,6 +60,113 @@ describe('Dashboard header', () => {
     wrapper.destroy();
   });
 
+  describe('environments dropdown', () => {
+    beforeEach(() => {
+      createShallowWrapper();
+    });
+
+    it('shows the environments dropdown', () => {
+      expect(findEnvsDropdown().exists()).toBe(true);
+    });
+
+    it('renders a search input', () => {
+      expect(findEnvsDropdownSearch().exists()).toBe(true);
+    });
+
+    describe('when environments data is not loaded', () => {
+      beforeEach(() => {
+        setupStoreWithDashboard(store);
+        return wrapper.vm.$nextTick();
+      });
+
+      it('there are no environments listed', () => {
+        expect(findEnvsDropdownItems().length).toBe(0);
+      });
+    });
+
+    describe('when environments data is loaded', () => {
+      const currentDashboard = dashboardGitResponse[0].path;
+
+      beforeEach(() => {
+        setupStoreWithData(store);
+        store.state.monitoringDashboard.projectPath = mockProjectPath;
+        store.state.monitoringDashboard.currentDashboard = currentDashboard;
+
+        return wrapper.vm.$nextTick();
+      });
+
+      it('renders dropdown items with the environment name', () => {
+        const path = `${mockProjectPath}/-/metrics/${encodeURIComponent(currentDashboard)}`;
+
+        findEnvsDropdownItems().wrappers.forEach((itemWrapper, index) => {
+          const { name, id } = environmentData[index];
+          const idParam = encodeURIComponent(id);
+
+          expect(itemWrapper.text()).toBe(name);
+          expect(itemWrapper.attributes('href')).toBe(`${path}?environment=${idParam}`);
+        });
+      });
+
+      // Note: This test is not working, .active does not show the active environment
+      // https://gitlab.com/gitlab-org/gitlab/-/issues/230615
+      // eslint-disable-next-line jest/no-disabled-tests
+      it.skip('renders the environments dropdown with a single active element', () => {
+        const activeItem = findEnvsDropdownItems().wrappers.filter(itemWrapper =>
+          itemWrapper.find('.active').exists(),
+        );
+
+        expect(activeItem.length).toBe(1);
+      });
+
+      it('filters rendered dropdown items', () => {
+        const searchTerm = 'production';
+        const resultEnvs = environmentData.filter(({ name }) => name.indexOf(searchTerm) !== -1);
+        setSearchTerm(searchTerm);
+
+        return wrapper.vm.$nextTick().then(() => {
+          expect(findEnvsDropdownItems().length).toBe(resultEnvs.length);
+        });
+      });
+
+      it('does not filter dropdown items if search term is empty string', () => {
+        const searchTerm = '';
+        setSearchTerm(searchTerm);
+
+        return wrapper.vm.$nextTick(() => {
+          expect(findEnvsDropdownItems().length).toBe(environmentData.length);
+        });
+      });
+
+      it("shows error message if search term doesn't match", () => {
+        const searchTerm = 'does-not-exist';
+        setSearchTerm(searchTerm);
+
+        return wrapper.vm.$nextTick(() => {
+          expect(findEnvsDropdownSearchMsg().isVisible()).toBe(true);
+        });
+      });
+
+      it('shows loading element when environments fetch is still loading', () => {
+        store.commit(`monitoringDashboard/${types.REQUEST_ENVIRONMENTS_DATA}`);
+
+        return wrapper.vm
+          .$nextTick()
+          .then(() => {
+            expect(findEnvsDropdownLoadingIcon().exists()).toBe(true);
+          })
+          .then(() => {
+            store.commit(
+              `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
+              environmentData,
+            );
+          })
+          .then(() => {
+            expect(findEnvsDropdownLoadingIcon().exists()).toBe(false);
+          });
+      });
+    });
+  });
+
   describe('when a dashboard has been duplicated in the duplicate dashboard modal', () => {
     beforeEach(() => {
       store.state.monitoringDashboard.projectPath = 'root/sandbox';
@@ -81,7 +203,7 @@ describe('Dashboard header', () => {
     });
 
     it('is rendered if projectPath is set in store', () => {
-      store.state.monitoringDashboard.projectPath = 'https://path/to/project';
+      store.state.monitoringDashboard.projectPath = mockProjectPath;
 
       return wrapper.vm.$nextTick().then(() => {
         expect(findActionsMenu().exists()).toBe(true);
@@ -93,7 +215,7 @@ describe('Dashboard header', () => {
     });
 
     it('contains a modal', () => {
-      store.state.monitoringDashboard.projectPath = 'https://path/to/project';
+      store.state.monitoringDashboard.projectPath = mockProjectPath;
 
       return wrapper.vm.$nextTick().then(() => {
         expect(findActionsMenu().contains(CreateDashboardModal)).toBe(true);
@@ -111,7 +233,7 @@ describe('Dashboard header', () => {
       'when the selected dashboard can be duplicated',
       dashboardPath => {
         it('contains a "Create New" menu item and a "Duplicate Dashboard" menu item', () => {
-          store.state.monitoringDashboard.projectPath = 'https://path/to/project';
+          store.state.monitoringDashboard.projectPath = mockProjectPath;
           setupAllDashboards(store, dashboardPath);
 
           return wrapper.vm.$nextTick().then(() => {
@@ -131,7 +253,7 @@ describe('Dashboard header', () => {
       'when the selected dashboard cannot be duplicated',
       dashboardPath => {
         it('contains a "Create New" menu item and no "Duplicate Dashboard" menu item', () => {
-          store.state.monitoringDashboard.projectPath = 'https://path/to/project';
+          store.state.monitoringDashboard.projectPath = mockProjectPath;
           setupAllDashboards(store, dashboardPath);
 
           return wrapper.vm.$nextTick().then(() => {
@@ -144,10 +266,8 @@ describe('Dashboard header', () => {
   });
 
   describe('actions menu modals', () => {
-    const url = 'https://path/to/project';
-
     beforeEach(() => {
-      store.state.monitoringDashboard.projectPath = url;
+      store.state.monitoringDashboard.projectPath = mockProjectPath;
       setupAllDashboards(store);
 
       createShallowWrapper();
@@ -166,7 +286,7 @@ describe('Dashboard header', () => {
     });
 
     it('"Create new dashboard" modal contains correct buttons', () => {
-      expect(findCreateDashboardModal().props('projectPath')).toBe(url);
+      expect(findCreateDashboardModal().props('projectPath')).toBe(mockProjectPath);
     });
 
     it('"Duplicate Dashboard" opens up a modal', () => {

spec/frontend/monitoring/components/dashboard_spec.js

 import { shallowMount, mount } from '@vue/test-utils';
 import Tracking from '~/tracking';
 import { ESC_KEY, ESC_KEY_IE11 } from '~/lib/utils/keys';
-import { GlModal, GlDropdownItem, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
+import { GlModal, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import { objectToQuery } from '~/lib/utils/url_utility';
 import VueDraggable from 'vuedraggable';
 import MockAdapter from 'axios-mock-adapter';
@@ -29,7 +29,7 @@ import {
   setupStoreWithDataForPanelCount,
   setupStoreWithLinks,
 } from '../store_utils';
-import { environmentData, dashboardGitResponse, storeVariables } from '../mock_data';
+import { dashboardGitResponse, storeVariables } from '../mock_data';
 import {
   metricsDashboardViewModel,
   metricsDashboardPanelCount,
@@ -46,12 +46,6 @@ describe('Dashboard', () => {
   let mock;
 
   const findDashboardHeader = () => wrapper.find(DashboardHeader);
-  const findEnvironmentsDropdown = () =>
-    findDashboardHeader().find({ ref: 'monitorEnvironmentsDropdown' });
-  const findAllEnvironmentsDropdownItems = () => findEnvironmentsDropdown().findAll(GlDropdownItem);
-  const setSearchTerm = searchTerm => {
-    store.commit(`monitoringDashboard/${types.SET_ENVIRONMENTS_FILTER}`, searchTerm);
-  };
 
   const createShallowWrapper = (props = {}, options = {}) => {
     wrapper = shallowMount(Dashboard, {
@@ -90,28 +84,6 @@ describe('Dashboard', () => {
     }
   });
 
-  describe('no metrics are available yet', () => {
-    beforeEach(() => {
-      createShallowWrapper();
-    });
-
-    it('shows the environment selector', () => {
-      expect(findEnvironmentsDropdown().exists()).toBe(true);
-    });
-  });
-
-  describe('no data found', () => {
-    beforeEach(() => {
-      createShallowWrapper();
-
-      return wrapper.vm.$nextTick();
-    });
-
-    it('shows the environment selector dropdown', () => {
-      expect(findEnvironmentsDropdown().exists()).toBe(true);
-    });
-  });
-
   describe('request information to the server', () => {
     it('calls to set time range and fetch data', () => {
       createShallowWrapper({ hasMetrics: true });
@@ -149,17 +121,14 @@ describe('Dashboard', () => {
     });
 
     it('fetches the metrics data with proper time window', () => {
-      jest.spyOn(store, 'dispatch');
-
       createMountedWrapper({ hasMetrics: true });
 
-      store.commit(
-        `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
-        environmentData,
-      );
-
       return wrapper.vm.$nextTick().then(() => {
-        expect(store.dispatch).toHaveBeenCalled();
+        expect(store.dispatch).toHaveBeenCalledWith('monitoringDashboard/fetchData', undefined);
+        expect(store.dispatch).toHaveBeenCalledWith(
+          'monitoringDashboard/setTimeRange',
+          expect.objectContaining({ duration: { seconds: 28800 } }),
+        );
       });
     });
   });
@@ -500,21 +469,6 @@ describe('Dashboard', () => {
       return wrapper.vm.$nextTick();
     });
 
-    it('renders the environments dropdown with a number of environments', () => {
-      expect(findAllEnvironmentsDropdownItems().length).toEqual(environmentData.length);
-
-      findAllEnvironmentsDropdownItems().wrappers.forEach((itemWrapper, index) => {
-        const anchorEl = itemWrapper.find('a');
-        if (anchorEl.exists()) {
-          const href = anchorEl.attributes('href');
-          const currentDashboard = encodeURIComponent(dashboardGitResponse[0].path);
-          const environmentId = encodeURIComponent(environmentData[index].id);
-          const url = `${TEST_HOST}/-/metrics/${currentDashboard}?environment=${environmentId}`;
-          expect(href).toBe(url);
-        }
-      });
-    });
-
     it('it does not show loading icons in any group', () => {
       setupStoreWithData(store);
 
@@ -524,16 +478,6 @@ describe('Dashboard', () => {
         });
       });
     });
-
-    // Note: This test is not working, .active does not show the active environment
-    // eslint-disable-next-line jest/no-disabled-tests
-    it.skip('renders the environments dropdown with a single active element', () => {
-      const activeItem = findAllEnvironmentsDropdownItems().wrappers.filter(itemWrapper =>
-        itemWrapper.find('.active').exists(),
-      );
-
-      expect(activeItem.length).toBe(1);
-    });
   });
 
   describe('star dashboards', () => {
@@ -615,16 +559,6 @@ describe('Dashboard', () => {
     });
   });
 
-  it('hides the environments dropdown list when there is no environments', () => {
-    createMountedWrapper({ hasMetrics: true });
-
-    setupStoreWithDashboard(store);
-
-    return wrapper.vm.$nextTick().then(() => {
-      expect(findAllEnvironmentsDropdownItems()).toHaveLength(0);
-    });
-  });
-
   it('renders the datetimepicker dropdown', () => {
     createMountedWrapper({ hasMetrics: true });
 
@@ -811,100 +745,6 @@ describe('Dashboard', () => {
     });
   });
 
-  describe('searchable environments dropdown', () => {
-    beforeEach(() => {
-      createMountedWrapper({ hasMetrics: true }, { attachToDocument: true });
-
-      setupStoreWithData(store);
-
-      return wrapper.vm.$nextTick();
-    });
-
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
-    it('renders a search input', () => {
-      expect(
-        wrapper
-          .find(DashboardHeader)
-          .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().then(() => {
-        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(DashboardHeader)
-            .find({ ref: 'monitorEnvironmentsDropdownMsg' })
-            .isVisible(),
-        ).toBe(true);
-      });
-    });
-
-    it('shows loading element when environments fetch is still loading', () => {
-      store.commit(`monitoringDashboard/${types.REQUEST_ENVIRONMENTS_DATA}`);
-
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          expect(
-            wrapper
-              .find(DashboardHeader)
-              .find({ ref: 'monitorEnvironmentsDropdownLoading' })
-              .exists(),
-          ).toBe(true);
-        })
-        .then(() => {
-          store.commit(
-            `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
-            environmentData,
-          );
-        })
-        .then(() => {
-          expect(
-            wrapper
-              .find(DashboardHeader)
-              .find({ ref: 'monitorEnvironmentsDropdownLoading' })
-              .exists(),
-          ).toBe(false);
-        });
-    });
-  });
-
   describe('drag and drop function', () => {
     const findDraggables = () => wrapper.findAll(VueDraggable);
     const findEnabledDraggables = () => findDraggables().filter(f => !f.attributes('disabled'));