populate environments dropdown, add tests

2 files changed, 82 insertions, 4 deletions

diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index eba6dcf47c5..997163c7602 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import Dashboard from '~/monitoring/components/dashboard.vue';
 import axios from '~/lib/utils/axios_utils';
-import { metricsGroupsAPIResponse, mockApiEndpoint } from './mock_data';
+import { metricsGroupsAPIResponse, mockApiEndpoint, environmentData } from './mock_data';
 
 describe('Dashboard', () => {
   let DashboardComponent;
@@ -20,6 +20,8 @@ describe('Dashboard', () => {
     emptyLoadingSvgPath: '/path/to/loading.svg',
     emptyNoDataSvgPath: '/path/to/no-data.svg',
     emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg',
+    environmentsEndpoint: '/root/hello-prometheus/environments/35',
+    currentEnvironmentName: 'production',
   };
 
   beforeEach(() => {
@@ -50,7 +52,7 @@ describe('Dashboard', () => {
       mock.restore();
     });
 
-    it('shows up a loading state', (done) => {
+    it('shows up a loading state', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData, hasMetrics: true },
@@ -62,7 +64,7 @@ describe('Dashboard', () => {
       });
     });
 
-    it('hides the legend when showLegend is false', (done) => {
+    it('hides the legend when showLegend is false', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData, hasMetrics: true, showLegend: false },
@@ -76,7 +78,7 @@ describe('Dashboard', () => {
       });
     });
 
-    it('hides the group panels when showPanels is false', (done) => {
+    it('hides the group panels when showPanels is false', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData, hasMetrics: true, showPanels: false },
@@ -89,5 +91,40 @@ describe('Dashboard', () => {
         done();
       });
     });
+
+    it('renders the dropdown with a number of environments', done => {
+      const component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: { ...propsData, hasMetrics: true, showPanels: false },
+      });
+
+      component.store.storeEnvironmentsData(environmentData);
+
+      setTimeout(() => {
+        const dropdownMenuEnvironments = component.$el.querySelectorAll('.dropdown-menu ul li a');
+        expect(dropdownMenuEnvironments.length).toEqual(component.store.environmentsData.length);
+        done();
+      });
+    });
+
+    it('renders the dropdown with a single is-active element', done => {
+      const component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: { ...propsData, hasMetrics: true, showPanels: false },
+      });
+
+      component.store.storeEnvironmentsData(environmentData);
+
+      setTimeout(() => {
+        const dropdownIsActiveElement = component.$el.querySelectorAll(
+          '.dropdown-menu ul li a.is-active',
+        );
+        expect(dropdownIsActiveElement.length).toEqual(1);
+        expect(dropdownIsActiveElement[0].textContent.trim()).toEqual(
+          component.currentEnvironmentName,
+        );
+        done();
+      });
+    });
   });
 });
diff --git a/spec/javascripts/monitoring/mock_data.js b/spec/javascripts/monitoring/mock_data.js
index 799d03f6b57..10808315372 100644
--- a/spec/javascripts/monitoring/mock_data.js
+++ b/spec/javascripts/monitoring/mock_data.js
@@ -6542,3 +6542,44 @@ export function convertDatesMultipleSeries(multipleSeries) {
   });
   return convertedMultiple;
 }
+
+export const environmentData = [
+  {
+    name: 'production',
+    size: 1,
+    latest: {
+      id: 34,
+      name: 'production',
+      state: 'available',
+      external_url: 'http://root-autodevops-deploy.my-fake-domain.com',
+      environment_type: null,
+      stop_action: false,
+      metrics_path: '/root/hello-prometheus/environments/34/metrics',
+      environment_path: '/root/hello-prometheus/environments/34',
+      stop_path: '/root/hello-prometheus/environments/34/stop',
+      terminal_path: '/root/hello-prometheus/environments/34/terminal',
+      folder_path: '/root/hello-prometheus/environments/folders/production',
+      created_at: '2018-06-29T16:53:38.301Z',
+      updated_at: '2018-06-29T16:57:09.825Z',
+    },
+  },
+  {
+    name: 'review',
+    size: 1,
+    latest: {
+      id: 35,
+      name: 'review/noop-branch',
+      state: 'available',
+      external_url: 'http://root-autodevops-deploy-review-noop-branc-die93w.my-fake-domain.com',
+      environment_type: 'review',
+      stop_action: true,
+      metrics_path: '/root/hello-prometheus/environments/35/metrics',
+      environment_path: '/root/hello-prometheus/environments/35',
+      stop_path: '/root/hello-prometheus/environments/35/stop',
+      terminal_path: '/root/hello-prometheus/environments/35/terminal',
+      folder_path: '/root/hello-prometheus/environments/folders/review',
+      created_at: '2018-07-03T18:39:41.702Z',
+      updated_at: '2018-07-03T18:44:54.010Z',
+    },
+  },
+];