Always display environment selector

On the metrics dashboard, always display the environment selector,
even if there is no data to display for that environment. This allows
the user to switch to the metrics dashboard of another environment.

1 files changed, 37 insertions, 9 deletions

diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index f4166987aed..cf72cce1781 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -62,16 +62,34 @@ describe('Dashboard', () => {
   });
 
   describe('no metrics are available yet', () => {
-    it('shows a getting started empty state when no metrics are present', () => {
+    beforeEach(() => {
       component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData },
         store,
       });
+    });
 
+    it('shows a getting started empty state when no metrics are present', () => {
       expect(component.$el.querySelector('.prometheus-graphs')).toBe(null);
       expect(component.emptyState).toEqual('gettingStarted');
     });
+
+    it('shows the environment selector', () => {
+      expect(component.$el.querySelector('.js-environments-dropdown')).toBeTruthy();
+    });
+  });
+
+  describe('no data found', () => {
+    it('shows the environment selector dropdown', () => {
+      component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: { ...propsData, showEmptyState: true },
+        store,
+      });
+
+      expect(component.$el.querySelector('.js-environments-dropdown')).toBeTruthy();
+    });
   });
 
   describe('requests information to the server', () => {
@@ -150,14 +168,24 @@ describe('Dashboard', () => {
         singleGroupResponse,
       );
 
-      setTimeout(() => {
-        const dropdownMenuEnvironments = component.$el.querySelectorAll(
-          '.js-environments-dropdown .dropdown-item',
-        );
+      Vue.nextTick()
+        .then(() => {
+          const dropdownMenuEnvironments = component.$el.querySelectorAll(
+            '.js-environments-dropdown .dropdown-item',
+          );
 
-        expect(dropdownMenuEnvironments.length).toEqual(component.environments.length);
-        done();
-      });
+          expect(component.environments.length).toEqual(environmentData.length);
+          expect(dropdownMenuEnvironments.length).toEqual(component.environments.length);
+
+          Array.from(dropdownMenuEnvironments).forEach((value, index) => {
+            if (environmentData[index].metrics_path) {
+              expect(value).toHaveAttr('href', environmentData[index].metrics_path);
+            }
+          });
+
+          done();
+        })
+        .catch(done.fail);
     });
 
     it('hides the environments dropdown list when there is no environments', done => {
@@ -212,7 +240,7 @@ describe('Dashboard', () => {
       Vue.nextTick()
         .then(() => {
           const dropdownItems = component.$el.querySelectorAll(
-            '.js-environments-dropdown .dropdown-item[active="true"]',
+            '.js-environments-dropdown .dropdown-item.is-active',
           );
 
           expect(dropdownItems.length).toEqual(1);