From 057e84d6e3997033584339c5c7df1d2278af8ebd Mon Sep 17 00:00:00 2001 From: Jose Ivan Vargas Date: Fri, 1 Sep 2017 16:28:23 -0500 Subject: Renamed some components --- spec/javascripts/monitoring/graph_path_spec.js | 35 ++++++++++++++++++++++ .../monitoring/monitoring_paths_spec.js | 34 --------------------- .../monitoring/utils/multiple_time_series_spec.js | 13 ++++---- 3 files changed, 42 insertions(+), 40 deletions(-) create mode 100644 spec/javascripts/monitoring/graph_path_spec.js delete mode 100644 spec/javascripts/monitoring/monitoring_paths_spec.js (limited to 'spec/javascripts') diff --git a/spec/javascripts/monitoring/graph_path_spec.js b/spec/javascripts/monitoring/graph_path_spec.js new file mode 100644 index 00000000000..105fb852e8e --- /dev/null +++ b/spec/javascripts/monitoring/graph_path_spec.js @@ -0,0 +1,35 @@ +import Vue from 'vue'; +import GraphPath from '~/monitoring/components/graph_path.vue'; +import createTimeSeries from '~/monitoring/utils/multiple_time_series'; +import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from './mock_data'; + +const createComponent = (propsData) => { + const Component = Vue.extend(GraphPath); + + return new Component({ + propsData, + }).$mount(); +}; + +const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries); + +const timeSeries = createTimeSeries(convertedMetrics[0].queries[0].result, 428, 272, 120); +const firstTimeSeries = timeSeries[0]; + +describe('Monitoring Paths', () => { + it('renders two paths to represent a line and the area underneath it', () => { + const component = createComponent({ + generatedLinePath: firstTimeSeries.linePath, + generatedAreaPath: firstTimeSeries.areaPath, + lineColor: '#ccc', + areaColor: '#fff', + }); + const metricArea = component.$el.querySelector('.metric-area'); + const metricLine = component.$el.querySelector('.metric-line'); + + expect(metricArea.getAttribute('fill')).toBe('#fff'); + expect(metricArea.getAttribute('d')).toBe(firstTimeSeries.areaPath); + expect(metricLine.getAttribute('stroke')).toBe('#ccc'); + expect(metricLine.getAttribute('d')).toBe(firstTimeSeries.linePath); + }); +}); diff --git a/spec/javascripts/monitoring/monitoring_paths_spec.js b/spec/javascripts/monitoring/monitoring_paths_spec.js deleted file mode 100644 index d39db945e17..00000000000 --- a/spec/javascripts/monitoring/monitoring_paths_spec.js +++ /dev/null @@ -1,34 +0,0 @@ -import Vue from 'vue'; -import MonitoringPaths from '~/monitoring/components/monitoring_paths.vue'; -import createTimeSeries from '~/monitoring/utils/multiple_time_series'; -import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from './mock_data'; - -const createComponent = (propsData) => { - const Component = Vue.extend(MonitoringPaths); - - return new Component({ - propsData, - }).$mount(); -}; - -const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries); - -const timeSeries = createTimeSeries(convertedMetrics[0].queries[0].result, 428, 272, 120); - -describe('Monitoring Paths', () => { - it('renders two paths to represent a line and the area underneath it', () => { - const component = createComponent({ - generatedLinePath: timeSeries[0].linePath, - generatedAreaPath: timeSeries[0].areaPath, - lineColor: '#ccc', - areaColor: '#fff', - }); - const metricArea = component.$el.querySelector('.metric-area'); - const metricLine = component.$el.querySelector('.metric-line'); - - expect(metricArea.getAttribute('fill')).toBe('#fff'); - expect(metricArea.getAttribute('d')).toBe(timeSeries[0].areaPath); - expect(metricLine.getAttribute('stroke')).toBe('#ccc'); - expect(metricLine.getAttribute('d')).toBe(timeSeries[0].linePath); - }); -}); diff --git a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js b/spec/javascripts/monitoring/utils/multiple_time_series_spec.js index 3daf6bf82df..b78314accd0 100644 --- a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js +++ b/spec/javascripts/monitoring/utils/multiple_time_series_spec.js @@ -3,15 +3,16 @@ import { convertDatesMultipleSeries, singleRowMetricsMultipleSeries } from '../m const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries); const timeSeries = createTimeSeries(convertedMetrics[0].queries[0].result, 428, 272, 120); +const firstTimeSeries = timeSeries[0]; describe('Multiple time series', () => { it('createTimeSeries returned array contains an object for each element', () => { - expect(typeof timeSeries[0].linePath).toEqual('string'); - expect(typeof timeSeries[0].areaPath).toEqual('string'); - expect(typeof timeSeries[0].timeSeriesScaleX).toEqual('function'); - expect(typeof timeSeries[0].areaColor).toEqual('string'); - expect(typeof timeSeries[0].lineColor).toEqual('string'); - expect(timeSeries[0].values instanceof Array).toEqual(true); + expect(typeof firstTimeSeries.linePath).toEqual('string'); + expect(typeof firstTimeSeries.areaPath).toEqual('string'); + expect(typeof firstTimeSeries.timeSeriesScaleX).toEqual('function'); + expect(typeof firstTimeSeries.areaColor).toEqual('string'); + expect(typeof firstTimeSeries.lineColor).toEqual('string'); + expect(firstTimeSeries.values instanceof Array).toEqual(true); }); it('createTimeSeries returns an array', () => { -- cgit v1.2.1 From 75b8f64ac331ac344dd0b4afa49ca4ad9e3de977 Mon Sep 17 00:00:00 2001 From: Jose Ivan Vargas Date: Tue, 5 Sep 2017 15:28:38 -0500 Subject: Added specs for the additional color support --- spec/javascripts/monitoring/graph/legend_spec.js | 8 +++----- spec/javascripts/monitoring/graph_path_spec.js | 2 +- spec/javascripts/monitoring/utils/multiple_time_series_spec.js | 2 +- 3 files changed, 5 insertions(+), 7 deletions(-) (limited to 'spec/javascripts') diff --git a/spec/javascripts/monitoring/graph/legend_spec.js b/spec/javascripts/monitoring/graph/legend_spec.js index da2fbd26e23..2eda0fc4ab6 100644 --- a/spec/javascripts/monitoring/graph/legend_spec.js +++ b/spec/javascripts/monitoring/graph/legend_spec.js @@ -28,7 +28,7 @@ const defaultValuesComponent = { currentDataIndex: 0, }; -const timeSeries = createTimeSeries(convertedMetrics[0].queries[0].result, +const timeSeries = createTimeSeries(convertedMetrics[0].queries[0], defaultValuesComponent.graphWidth, defaultValuesComponent.graphHeight, defaultValuesComponent.graphHeightOffset); @@ -38,7 +38,7 @@ function getTextFromNode(component, selector) { return component.$el.querySelector(selector).firstChild.nodeValue.trim(); } -describe('GraphLegend', () => { +fdescribe('GraphLegend', () => { describe('Computed props', () => { it('textTransform', () => { const component = createComponent(defaultValuesComponent); @@ -93,9 +93,7 @@ describe('GraphLegend', () => { const component = createComponent(defaultValuesComponent); const titles = component.$el.querySelectorAll('.legend-metric-title'); - expect(getTextFromNode(component, '.legend-metric-title').indexOf(component.legendTitle)).not.toEqual(-1); - expect(titles[0].textContent.indexOf('Title')).not.toEqual(-1); - expect(titles[1].textContent.indexOf('Series')).not.toEqual(-1); + expect(titles[1].textContent.indexOf('series')).not.toEqual(-1); expect(getTextFromNode(component, '.y-label-text')).toEqual(component.yAxisLabel); }); diff --git a/spec/javascripts/monitoring/graph_path_spec.js b/spec/javascripts/monitoring/graph_path_spec.js index 105fb852e8e..41b3014baac 100644 --- a/spec/javascripts/monitoring/graph_path_spec.js +++ b/spec/javascripts/monitoring/graph_path_spec.js @@ -13,7 +13,7 @@ const createComponent = (propsData) => { const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries); -const timeSeries = createTimeSeries(convertedMetrics[0].queries[0].result, 428, 272, 120); +const timeSeries = createTimeSeries(convertedMetrics[0].queries[0], 428, 272, 120); const firstTimeSeries = timeSeries[0]; describe('Monitoring Paths', () => { diff --git a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js b/spec/javascripts/monitoring/utils/multiple_time_series_spec.js index b78314accd0..7e44a9ade9e 100644 --- a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js +++ b/spec/javascripts/monitoring/utils/multiple_time_series_spec.js @@ -2,7 +2,7 @@ import createTimeSeries from '~/monitoring/utils/multiple_time_series'; import { convertDatesMultipleSeries, singleRowMetricsMultipleSeries } from '../mock_data'; const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries); -const timeSeries = createTimeSeries(convertedMetrics[0].queries[0].result, 428, 272, 120); +const timeSeries = createTimeSeries(convertedMetrics[0].queries[0], 428, 272, 120); const firstTimeSeries = timeSeries[0]; describe('Multiple time series', () => { -- cgit v1.2.1 From 93ba3fdd1e756168ba9ca12e60a53a98969ccdec Mon Sep 17 00:00:00 2001 From: Jose Ivan Vargas Date: Tue, 5 Sep 2017 18:30:08 -0500 Subject: small fixes to code and specs --- spec/javascripts/monitoring/graph/legend_spec.js | 7 ++++--- spec/javascripts/monitoring/mock_data.js | 8 +++++++- 2 files changed, 11 insertions(+), 4 deletions(-) (limited to 'spec/javascripts') diff --git a/spec/javascripts/monitoring/graph/legend_spec.js b/spec/javascripts/monitoring/graph/legend_spec.js index 2eda0fc4ab6..969b5bad730 100644 --- a/spec/javascripts/monitoring/graph/legend_spec.js +++ b/spec/javascripts/monitoring/graph/legend_spec.js @@ -38,7 +38,7 @@ function getTextFromNode(component, selector) { return component.$el.querySelector(selector).firstChild.nodeValue.trim(); } -fdescribe('GraphLegend', () => { +describe('GraphLegend', () => { describe('Computed props', () => { it('textTransform', () => { const component = createComponent(defaultValuesComponent); @@ -89,11 +89,12 @@ fdescribe('GraphLegend', () => { expect(component.$el.querySelectorAll('.rect-axis-text').length).toEqual(2); }); - it('contains text to signal the usage, title and time', () => { + it('contains text to signal the usage, title and time with multiple time series', () => { const component = createComponent(defaultValuesComponent); const titles = component.$el.querySelectorAll('.legend-metric-title'); - expect(titles[1].textContent.indexOf('series')).not.toEqual(-1); + expect(titles[0].textContent.indexOf('hundred(s)')).not.toEqual(-1); + expect(titles[1].textContent.indexOf('2xx')).not.toEqual(-1); expect(getTextFromNode(component, '.y-label-text')).toEqual(component.yAxisLabel); }); diff --git a/spec/javascripts/monitoring/mock_data.js b/spec/javascripts/monitoring/mock_data.js index 3d399f2bb95..4d0d565cf26 100644 --- a/spec/javascripts/monitoring/mock_data.js +++ b/spec/javascripts/monitoring/mock_data.js @@ -6346,7 +6346,13 @@ export const singleRowMetricsMultipleSeries = [ } ] }, - ] + ], + 'series': [ + { + 'value': 'hundred(s)', + 'color': 'green', + }, + ], } ] }, -- cgit v1.2.1 From b71eb1da5bd20c8c2ae53efe79af516da0aeeb03 Mon Sep 17 00:00:00 2001 From: Jose Ivan Vargas Date: Thu, 7 Sep 2017 09:45:30 -0500 Subject: Added minor details to specs --- spec/javascripts/monitoring/graph_path_spec.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'spec/javascripts') diff --git a/spec/javascripts/monitoring/graph_path_spec.js b/spec/javascripts/monitoring/graph_path_spec.js index 41b3014baac..e7348b03ba1 100644 --- a/spec/javascripts/monitoring/graph_path_spec.js +++ b/spec/javascripts/monitoring/graph_path_spec.js @@ -21,15 +21,15 @@ describe('Monitoring Paths', () => { const component = createComponent({ generatedLinePath: firstTimeSeries.linePath, generatedAreaPath: firstTimeSeries.areaPath, - lineColor: '#ccc', - areaColor: '#fff', + lineColor: firstTimeSeries.lineColor, + areaColor: firstTimeSeries.areaColor, }); const metricArea = component.$el.querySelector('.metric-area'); const metricLine = component.$el.querySelector('.metric-line'); - expect(metricArea.getAttribute('fill')).toBe('#fff'); + expect(metricArea.getAttribute('fill')).toBe('#8dd5aa'); expect(metricArea.getAttribute('d')).toBe(firstTimeSeries.areaPath); - expect(metricLine.getAttribute('stroke')).toBe('#ccc'); + expect(metricLine.getAttribute('stroke')).toBe('#1aaa55'); expect(metricLine.getAttribute('d')).toBe(firstTimeSeries.linePath); }); }); -- cgit v1.2.1 From 7f5ae2e8b2a3e29ad128e28798b82c8b19d55100 Mon Sep 17 00:00:00 2001 From: Jose Ivan Vargas Date: Thu, 7 Sep 2017 17:16:31 -0500 Subject: Changed how the backend response is handled for when instead of series --- spec/javascripts/monitoring/graph/legend_spec.js | 2 +- spec/javascripts/monitoring/graph_path_spec.js | 4 ++-- spec/javascripts/monitoring/mock_data.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) (limited to 'spec/javascripts') diff --git a/spec/javascripts/monitoring/graph/legend_spec.js b/spec/javascripts/monitoring/graph/legend_spec.js index 969b5bad730..2571b7ef869 100644 --- a/spec/javascripts/monitoring/graph/legend_spec.js +++ b/spec/javascripts/monitoring/graph/legend_spec.js @@ -93,7 +93,7 @@ describe('GraphLegend', () => { const component = createComponent(defaultValuesComponent); const titles = component.$el.querySelectorAll('.legend-metric-title'); - expect(titles[0].textContent.indexOf('hundred(s)')).not.toEqual(-1); + expect(titles[0].textContent.indexOf('1xx')).not.toEqual(-1); expect(titles[1].textContent.indexOf('2xx')).not.toEqual(-1); expect(getTextFromNode(component, '.y-label-text')).toEqual(component.yAxisLabel); }); diff --git a/spec/javascripts/monitoring/graph_path_spec.js b/spec/javascripts/monitoring/graph_path_spec.js index e7348b03ba1..a4844636d09 100644 --- a/spec/javascripts/monitoring/graph_path_spec.js +++ b/spec/javascripts/monitoring/graph_path_spec.js @@ -27,9 +27,9 @@ describe('Monitoring Paths', () => { const metricArea = component.$el.querySelector('.metric-area'); const metricLine = component.$el.querySelector('.metric-line'); - expect(metricArea.getAttribute('fill')).toBe('#8dd5aa'); + expect(metricArea.getAttribute('fill')).toBe('#8fbce8'); expect(metricArea.getAttribute('d')).toBe(firstTimeSeries.areaPath); - expect(metricLine.getAttribute('stroke')).toBe('#1aaa55'); + expect(metricLine.getAttribute('stroke')).toBe('#1f78d1'); expect(metricLine.getAttribute('d')).toBe(firstTimeSeries.linePath); }); }); diff --git a/spec/javascripts/monitoring/mock_data.js b/spec/javascripts/monitoring/mock_data.js index 4d0d565cf26..7ceab657464 100644 --- a/spec/javascripts/monitoring/mock_data.js +++ b/spec/javascripts/monitoring/mock_data.js @@ -6347,7 +6347,7 @@ export const singleRowMetricsMultipleSeries = [ ] }, ], - 'series': [ + 'when': [ { 'value': 'hundred(s)', 'color': 'green', -- cgit v1.2.1