Added specs for rendered output, changed the background for stable tracks

2 files changed, 37 insertions, 7 deletions

diff --git a/spec/javascripts/monitoring/graph/track_info_spec.js b/spec/javascripts/monitoring/graph/track_info_spec.js
index 46aa8c0b57b..d3121d553f9 100644
--- a/spec/javascripts/monitoring/graph/track_info_spec.js
+++ b/spec/javascripts/monitoring/graph/track_info_spec.js
@@ -28,4 +28,17 @@ describe('TrackInfo component', () => {
       expect(vm.summaryMetrics).toEqual('Avg: 0.000 · Max: 0.000');
     });
   });
+
+  describe('Rendered output', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, { track: timeSeries[0] });
+    });
+
+    it('contains metric tag and the summary metrics', () => {
+      const metricTag = vm.$el.querySelector('strong');
+
+      expect(metricTag.textContent.trim()).toEqual(vm.track.metricTag);
+      expect(vm.$el.textContent).toContain('Avg: 0.000 · Max: 0.000');
+    });
+  });
 });
diff --git a/spec/javascripts/monitoring/graph/track_line_spec.js b/spec/javascripts/monitoring/graph/track_line_spec.js
index 9be2bca1c28..45106830a67 100644
--- a/spec/javascripts/monitoring/graph/track_line_spec.js
+++ b/spec/javascripts/monitoring/graph/track_line_spec.js
@@ -20,16 +20,33 @@ describe('TrackLine component', () => {
   });
 
   describe('Computed props', () => {
-    beforeEach(() => {
-      vm = mountComponent(Component, { track: timeSeries[0] });
+    it('stylizedLine for dashed lineStyles', () => {
+      vm = mountComponent(Component, { track: { ...timeSeries[0], lineStyle: 'dashed' } });
+
+      expect(vm.stylizedLine).toEqual('6, 3');
+    });
+
+    it('stylizedLine for dotted lineStyles', () => {
+      vm = mountComponent(Component, { track: { ...timeSeries[0], lineStyle: 'dotted' } });
+
+      expect(vm.stylizedLine).toEqual('3, 3');
     });
+  });
+
+  describe('Rendered output', () => {
+    it('has an svg with a line', () => {
+      vm = mountComponent(Component, { track: { ...timeSeries[0] } });
+      const svgEl = vm.$el.querySelector('svg');
+      const lineEl = vm.$el.querySelector('svg line');
 
-    it('strokeDashArray', () => {
-      const dashedArray = vm.strokeDashArray('dashed');
-      const dottedArray = vm.strokeDashArray('dotted');
+      expect(svgEl.getAttribute('width')).toEqual('15');
+      expect(svgEl.getAttribute('height')).toEqual('6');
 
-      expect(dashedArray).toEqual('6, 3');
-      expect(dottedArray).toEqual('3, 3');
+      expect(lineEl.getAttribute('stroke-width')).toEqual('4');
+      expect(lineEl.getAttribute('x1')).toEqual('0');
+      expect(lineEl.getAttribute('x2')).toEqual('15');
+      expect(lineEl.getAttribute('y1')).toEqual('2');
+      expect(lineEl.getAttribute('y2')).toEqual('2');
     });
   });
 });