1 files changed, 78 insertions, 15 deletions

diff --git a/spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js b/spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js
index 340143a6b53..3b37da5bcd6 100644
--- a/spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js
+++ b/spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js
@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils';
 import DateTimePicker from '~/monitoring/components/date_time_picker/date_time_picker.vue';
-import { timeWindows } from '~/monitoring/constants';
+import { defaultTimeWindows } from '~/monitoring/components/date_time_picker/date_time_picker_lib';
 
-const timeWindowsCount = Object.keys(timeWindows).length;
+const timeWindowsCount = Object.entries(defaultTimeWindows).length;
 const start = '2019-10-10T07:00:00.000Z';
 const end = '2019-10-13T07:00:00.000Z';
 const selectedTimeWindowText = `3 days`;
@@ -13,6 +13,7 @@ describe('DateTimePicker', () => {
   const dropdownToggle = () => dateTimePicker.find('.dropdown-toggle');
   const dropdownMenu = () => dateTimePicker.find('.dropdown-menu');
   const applyButtonElement = () => dateTimePicker.find('button.btn-success').element;
+  const findQuickRangeItems = () => dateTimePicker.findAll('.dropdown-item');
   const cancelButtonElement = () => dateTimePicker.find('button.btn-secondary').element;
   const fillInputAndBlur = (input, val) => {
     dateTimePicker.find(input).setValue(val);
@@ -25,7 +26,6 @@ describe('DateTimePicker', () => {
   const createComponent = props => {
     dateTimePicker = mount(DateTimePicker, {
       propsData: {
-        timeWindows,
         start,
         end,
         ...props,
@@ -52,16 +52,6 @@ describe('DateTimePicker', () => {
     });
   });
 
-  it('renders dropdown without a selectedTimeWindow set', done => {
-    createComponent({
-      selectedTimeWindow: {},
-    });
-    dateTimePicker.vm.$nextTick(() => {
-      expect(dateTimePicker.findAll('input').length).toBe(2);
-      done();
-    });
-  });
-
   it('renders inputs with h/m/s truncated if its all 0s', done => {
     createComponent({
       start: '2019-10-10T00:00:00.000Z',
@@ -74,11 +64,11 @@ describe('DateTimePicker', () => {
     });
   });
 
-  it(`renders dropdown with ${timeWindowsCount} items in quick range`, done => {
+  it(`renders dropdown with ${timeWindowsCount} (default) items in quick range`, done => {
     createComponent();
     dropdownToggle().trigger('click');
     dateTimePicker.vm.$nextTick(() => {
-      expect(dateTimePicker.findAll('.dropdown-item').length).toBe(timeWindowsCount);
+      expect(findQuickRangeItems().length).toBe(timeWindowsCount);
       done();
     });
   });
@@ -167,4 +157,77 @@ describe('DateTimePicker', () => {
       });
     });
   });
+
+  describe('when using non-default time windows', () => {
+    const otherTimeWindows = {
+      oneMinute: {
+        label: '1 minute',
+        seconds: 60,
+      },
+      twoMinutes: {
+        label: '2 minutes',
+        seconds: 60 * 2,
+        default: true,
+      },
+      fiveMinutes: {
+        label: '5 minutes',
+        seconds: 60 * 5,
+      },
+    };
+
+    it('renders dropdown with a label in the quick range', done => {
+      createComponent({
+        // 2 minutes range
+        start: '2020-01-21T15:00:00.000Z',
+        end: '2020-01-21T15:02:00.000Z',
+        timeWindows: otherTimeWindows,
+      });
+      dropdownToggle().trigger('click');
+      dateTimePicker.vm.$nextTick(() => {
+        expect(dropdownToggle().text()).toBe('2 minutes');
+
+        done();
+      });
+    });
+
+    it('renders dropdown with quick range items', done => {
+      createComponent({
+        // 2 minutes range
+        start: '2020-01-21T15:00:00.000Z',
+        end: '2020-01-21T15:02:00.000Z',
+        timeWindows: otherTimeWindows,
+      });
+      dropdownToggle().trigger('click');
+      dateTimePicker.vm.$nextTick(() => {
+        const items = findQuickRangeItems();
+
+        expect(items.length).toBe(Object.keys(otherTimeWindows).length);
+        expect(items.at(0).text()).toBe('1 minute');
+        expect(items.at(0).is('.active')).toBe(false);
+
+        expect(items.at(1).text()).toBe('2 minutes');
+        expect(items.at(1).is('.active')).toBe(true);
+
+        expect(items.at(2).text()).toBe('5 minutes');
+        expect(items.at(2).is('.active')).toBe(false);
+
+        done();
+      });
+    });
+
+    it('renders dropdown with a label not in the quick range', done => {
+      createComponent({
+        // 10 minutes range
+        start: '2020-01-21T15:00:00.000Z',
+        end: '2020-01-21T15:10:00.000Z',
+        timeWindows: otherTimeWindows,
+      });
+      dropdownToggle().trigger('click');
+      dateTimePicker.vm.$nextTick(() => {
+        expect(dropdownToggle().text()).toBe('2020-01-21 15:00:00 to 2020-01-21 15:10:00');
+
+        done();
+      });
+    });
+  });
 });