diff options
Diffstat (limited to 'spec/javascripts/monitoring')
| -rw-r--r-- | spec/javascripts/monitoring/components/dashboard_spec.js | 32 | ||||
| -rw-r--r-- | spec/javascripts/monitoring/utils_spec.js | 206 |
2 files changed, 219 insertions, 19 deletions
diff --git a/spec/javascripts/monitoring/components/dashboard_spec.js b/spec/javascripts/monitoring/components/dashboard_spec.js index 1b2b01d1c8c..75df2ce3103 100644 --- a/spec/javascripts/monitoring/components/dashboard_spec.js +++ b/spec/javascripts/monitoring/components/dashboard_spec.js @@ -4,7 +4,6 @@ import { GlToast } from '@gitlab/ui'; import VueDraggable from 'vuedraggable'; import MockAdapter from 'axios-mock-adapter'; import Dashboard from '~/monitoring/components/dashboard.vue'; -import { timeWindows, timeWindowsKeyNames } from '~/monitoring/constants'; import * as types from '~/monitoring/stores/mutation_types'; import { createStore } from '~/monitoring/stores'; import axios from '~/lib/utils/axios_utils'; @@ -37,6 +36,12 @@ const propsData = { validateQueryPath: '', }; +const resetSpy = spy => { + if (spy) { + spy.calls.reset(); + } +}; + export default propsData; describe('Dashboard', () => { @@ -96,10 +101,15 @@ describe('Dashboard', () => { }); describe('requests information to the server', () => { + let spy; beforeEach(() => { mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse); }); + afterEach(() => { + resetSpy(spy); + }); + it('shows up a loading state', done => { component = new DashboardComponent({ el: document.querySelector('.prometheus-graphs'), @@ -272,7 +282,7 @@ describe('Dashboard', () => { }); }); - it('renders the time window dropdown with a set of options', done => { + it('renders the datetimepicker dropdown', done => { component = new DashboardComponent({ el: document.querySelector('.prometheus-graphs'), propsData: { @@ -282,17 +292,9 @@ describe('Dashboard', () => { }, store, }); - 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); - + expect(component.$el.querySelector('.js-time-window-dropdown')).not.toBeNull(); done(); }); }); @@ -355,7 +357,7 @@ describe('Dashboard', () => { }); }); - it('defaults to the eight hours time window for non valid url parameters', done => { + it('shows an error message if invalid url parameters are passed', done => { spyOnDependency(Dashboard, 'getParameterValues').and.returnValue([ '<script>alert("XSS")</script>', ]); @@ -366,9 +368,11 @@ describe('Dashboard', () => { store, }); - Vue.nextTick(() => { - expect(component.selectedTimeWindowKey).toEqual(timeWindowsKeyNames.eightHours); + spy = spyOn(component, 'showInvalidDateError'); + component.$mount(); + component.$nextTick(() => { + expect(component.showInvalidDateError).toHaveBeenCalled(); done(); }); }); diff --git a/spec/javascripts/monitoring/utils_spec.js b/spec/javascripts/monitoring/utils_spec.js index 7030156931f..512dd2a0eb3 100644 --- a/spec/javascripts/monitoring/utils_spec.js +++ b/spec/javascripts/monitoring/utils_spec.js @@ -1,4 +1,13 @@ -import { getTimeDiff, getTimeWindow, graphDataValidatorForValues } from '~/monitoring/utils'; +import { + getTimeDiff, + getTimeWindow, + graphDataValidatorForValues, + isDateTimePickerInputValid, + truncateZerosInDateTime, + stringToISODate, + ISODateToString, + isValidDate, +} from '~/monitoring/utils'; import { timeWindows, timeWindowsKeyNames } from '~/monitoring/constants'; import { graphDataPrometheusQuery, graphDataPrometheusQueryRange } from './mock_data'; @@ -57,7 +66,7 @@ describe('getTimeWindow', () => { end: '2019-10-01T21:27:47.000Z', }, ], - expected: timeWindowsKeyNames.eightHours, + expected: null, }, { args: [ @@ -66,7 +75,7 @@ describe('getTimeWindow', () => { end: '', }, ], - expected: timeWindowsKeyNames.eightHours, + expected: null, }, { args: [ @@ -75,11 +84,11 @@ describe('getTimeWindow', () => { end: null, }, ], - expected: timeWindowsKeyNames.eightHours, + expected: null, }, { args: [{}], - expected: timeWindowsKeyNames.eightHours, + expected: null, }, ].forEach(({ args, expected }) => { it(`returns "${expected}" with args=${JSON.stringify(args)}`, () => { @@ -111,3 +120,190 @@ describe('graphDataValidatorForValues', () => { expect(validGraphData).toBe(true); }); }); + +describe('stringToISODate', () => { + ['', 'null', undefined, 'abc'].forEach(input => { + it(`throws error for invalid input like ${input}`, done => { + try { + stringToISODate(input); + } catch (e) { + expect(e).toBeDefined(); + done(); + } + }); + }); + [ + { + input: '2019-09-09 01:01:01', + output: '2019-09-09T01:01:01Z', + }, + { + input: '2019-09-09 00:00:00', + output: '2019-09-09T00:00:00Z', + }, + { + input: '2019-09-09 23:59:59', + output: '2019-09-09T23:59:59Z', + }, + { + input: '2019-09-09', + output: '2019-09-09T00:00:00Z', + }, + ].forEach(({ input, output }) => { + it(`returns ${output} from ${input}`, () => { + expect(stringToISODate(input)).toBe(output); + }); + }); +}); + +describe('ISODateToString', () => { + [ + { + input: new Date('2019-09-09T00:00:00.000Z'), + output: '2019-09-09 00:00:00', + }, + { + input: new Date('2019-09-09T07:00:00.000Z'), + output: '2019-09-09 07:00:00', + }, + ].forEach(({ input, output }) => { + it(`ISODateToString return ${output} for ${input}`, () => { + expect(ISODateToString(input)).toBe(output); + }); + }); +}); + +describe('truncateZerosInDateTime', () => { + [ + { + input: '', + output: '', + }, + { + input: '2019-10-10', + output: '2019-10-10', + }, + { + input: '2019-10-10 00:00:01', + output: '2019-10-10 00:00:01', + }, + { + input: '2019-10-10 00:00:00', + output: '2019-10-10', + }, + ].forEach(({ input, output }) => { + it(`truncateZerosInDateTime return ${output} for ${input}`, () => { + expect(truncateZerosInDateTime(input)).toBe(output); + }); + }); +}); + +describe('isValidDate', () => { + [ + { + input: '2019-09-09T00:00:00.000Z', + output: true, + }, + { + input: '2019-09-09T000:00.000Z', + output: false, + }, + { + input: 'a2019-09-09T000:00.000Z', + output: false, + }, + { + input: '2019-09-09T', + output: false, + }, + { + input: '2019-09-09', + output: true, + }, + { + input: '2019-9-9', + output: true, + }, + { + input: '2019-9-', + output: true, + }, + { + input: '2019--', + output: false, + }, + { + input: '2019', + output: true, + }, + { + input: '', + output: false, + }, + { + input: null, + output: false, + }, + ].forEach(({ input, output }) => { + it(`isValidDate return ${output} for ${input}`, () => { + expect(isValidDate(input)).toBe(output); + }); + }); +}); + +describe('isDateTimePickerInputValid', () => { + [ + { + input: null, + output: false, + }, + { + input: '', + output: false, + }, + { + input: 'xxxx-xx-xx', + output: false, + }, + { + input: '9999-99-19', + output: false, + }, + { + input: '2019-19-23', + output: false, + }, + { + input: '2019-09-23', + output: true, + }, + { + input: '2019-09-23 x', + output: false, + }, + { + input: '2019-09-29 0:0:0', + output: false, + }, + { + input: '2019-09-29 00:00:00', + output: true, + }, + { + input: '2019-09-29 24:24:24', + output: false, + }, + { + input: '2019-09-29 23:24:24', + output: true, + }, + { + input: '2019-09-29 23:24:24 ', + output: false, + }, + ].forEach(({ input, output }) => { + it(`returns ${output} for ${input}`, () => { + expect(isDateTimePickerInputValid(input)).toBe(output); + }); + }); +}); |