1 files changed, 85 insertions, 8 deletions
diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index 454777fa912..ce2c6c43c0f 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import Dashboard from '~/monitoring/components/dashboard.vue';
+import { timeWindows } from '~/monitoring/constants';
 import axios from '~/lib/utils/axios_utils';
 import { metricsGroupsAPIResponse, mockApiEndpoint, environmentData } from './mock_data';
 
@@ -50,7 +51,7 @@ describe('Dashboard', () => {
     it('shows a getting started empty state when no metrics are present', () => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
-        propsData,
+        propsData: { ...propsData, showTimeWindowDropdown: false },
       });
 
       expect(component.$el.querySelector('.prometheus-graphs')).toBe(null);
@@ -66,7 +67,7 @@ describe('Dashboard', () => {
     it('shows up a loading state', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
-        propsData: { ...propsData, hasMetrics: true },
+        propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: false },
       });
 
       Vue.nextTick(() => {
@@ -78,7 +79,12 @@ describe('Dashboard', () => {
     it('hides the legend when showLegend is false', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
-        propsData: { ...propsData, hasMetrics: true, showLegend: false },
+        propsData: {
+          ...propsData,
+          hasMetrics: true,
+          showLegend: false,
+          showTimeWindowDropdown: false,
+        },
       });
 
       setTimeout(() => {
@@ -92,7 +98,12 @@ describe('Dashboard', () => {
     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 },
+        propsData: {
+          ...propsData,
+          hasMetrics: true,
+          showPanels: false,
+          showTimeWindowDropdown: false,
+        },
       });
 
       setTimeout(() => {
@@ -106,7 +117,12 @@ describe('Dashboard', () => {
     it('renders the environments dropdown with a number of environments', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
-        propsData: { ...propsData, hasMetrics: true, showPanels: false },
+        propsData: {
+          ...propsData,
+          hasMetrics: true,
+          showPanels: false,
+          showTimeWindowDropdown: false,
+        },
       });
 
       component.store.storeEnvironmentsData(environmentData);
@@ -124,7 +140,12 @@ describe('Dashboard', () => {
     it('hides the environments dropdown list when there is no environments', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
-        propsData: { ...propsData, hasMetrics: true, showPanels: false },
+        propsData: {
+          ...propsData,
+          hasMetrics: true,
+          showPanels: false,
+          showTimeWindowDropdown: false,
+        },
       });
 
       component.store.storeEnvironmentsData([]);
@@ -142,7 +163,12 @@ describe('Dashboard', () => {
     it('renders the environments dropdown with a single is-active element', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
-        propsData: { ...propsData, hasMetrics: true, showPanels: false },
+        propsData: {
+          ...propsData,
+          hasMetrics: true,
+          showPanels: false,
+          showTimeWindowDropdown: false,
+        },
       });
 
       component.store.storeEnvironmentsData(environmentData);
@@ -166,6 +192,7 @@ describe('Dashboard', () => {
           hasMetrics: true,
           showPanels: false,
           environmentsEndpoint: '',
+          showTimeWindowDropdown: false,
         },
       });
 
@@ -176,6 +203,51 @@ describe('Dashboard', () => {
         done();
       });
     });
+
+    it('does not show the time window dropdown when the feature flag is not set', done => {
+      const component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: {
+          ...propsData,
+          hasMetrics: true,
+          showPanels: false,
+          showTimeWindowDropdown: false,
+        },
+      });
+
+      setTimeout(() => {
+        const timeWindowDropdown = component.$el.querySelector('.js-time-window-dropdown');
+
+        expect(timeWindowDropdown).toBeNull();
+
+        done();
+      });
+    });
+
+    it('renders the time window dropdown with a set of options', done => {
+      const component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: {
+          ...propsData,
+          hasMetrics: true,
+          showPanels: false,
+          showTimeWindowDropdown: true,
+        },
+      });
+      const numberOfTimeWindows = Object.keys(timeWindows).length;
+
+      setTimeout(() => {
+        const timeWindowDropdown = component.$el.querySelector('.js-time-window-dropdown');
+        const timeWindowDropdownEls = component.$el.querySelectorAll(
+          '.js-time-window-dropdown .dropdown-item',
+        );
+
+        expect(timeWindowDropdown).not.toBeNull();
+        expect(timeWindowDropdownEls.length).toEqual(numberOfTimeWindows);
+
+        done();
+      });
+    });
   });
 
   describe('when the window resizes', () => {
@@ -191,7 +263,12 @@ describe('Dashboard', () => {
     it('sets elWidth to page width when the sidebar is resized', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
-        propsData: { ...propsData, hasMetrics: true, showPanels: false },
+        propsData: {
+          ...propsData,
+          hasMetrics: true,
+          showPanels: false,
+          showTimeWindowDropdown: false,
+        },
       });
 
       expect(component.elWidth).toEqual(0);