Resolve "Hover and legend data should be linked"

2 files changed, 34 insertions, 33 deletions

diff --git a/spec/javascripts/monitoring/graph/flag_spec.js b/spec/javascripts/monitoring/graph/flag_spec.js
index 14794cbfd50..8ee1171419d 100644
--- a/spec/javascripts/monitoring/graph/flag_spec.js
+++ b/spec/javascripts/monitoring/graph/flag_spec.js
@@ -14,19 +14,22 @@ function getCoordinate(component, selector, coordinate) {
   return parseInt(coordinateVal, 10);
 }
 
+const defaultValuesComponent = {
+  currentXCoordinate: 200,
+  currentYCoordinate: 100,
+  currentFlagPosition: 100,
+  currentData: {
+    time: new Date('2017-06-04T18:17:33.501Z'),
+    value: '1.49609375',
+  },
+  graphHeight: 300,
+  graphHeightOffset: 120,
+  showFlagContent: true,
+};
+
 describe('GraphFlag', () => {
   it('has a line and a circle located at the currentXCoordinate and currentYCoordinate', () => {
-    const component = createComponent({
-      currentXCoordinate: 200,
-      currentYCoordinate: 100,
-      currentFlagPosition: 100,
-      currentData: {
-        time: new Date('2017-06-04T18:17:33.501Z'),
-        value: '1.49609375',
-      },
-      graphHeight: 300,
-      graphHeightOffset: 120,
-    });
+    const component = createComponent(defaultValuesComponent);
 
     expect(getCoordinate(component, '.selected-metric-line', 'x1'))
       .toEqual(component.currentXCoordinate);
@@ -35,17 +38,7 @@ describe('GraphFlag', () => {
   });
 
   it('has a SVG with the class rect-text-metric at the currentFlagPosition', () => {
-    const component = createComponent({
-      currentXCoordinate: 200,
-      currentYCoordinate: 100,
-      currentFlagPosition: 100,
-      currentData: {
-        time: new Date('2017-06-04T18:17:33.501Z'),
-        value: '1.49609375',
-      },
-      graphHeight: 300,
-      graphHeightOffset: 120,
-    });
+    const component = createComponent(defaultValuesComponent);
 
     const svg = component.$el.querySelector('.rect-text-metric');
     expect(svg.tagName).toEqual('svg');
@@ -54,17 +47,7 @@ describe('GraphFlag', () => {
 
   describe('Computed props', () => {
     it('calculatedHeight', () => {
-      const component = createComponent({
-        currentXCoordinate: 200,
-        currentYCoordinate: 100,
-        currentFlagPosition: 100,
-        currentData: {
-          time: new Date('2017-06-04T18:17:33.501Z'),
-          value: '1.49609375',
-        },
-        graphHeight: 300,
-        graphHeightOffset: 120,
-      });
+      const component = createComponent(defaultValuesComponent);
 
       expect(component.calculatedHeight).toEqual(180);
     });
diff --git a/spec/javascripts/monitoring/graph_spec.js b/spec/javascripts/monitoring/graph_spec.js
index 7d8b0744af1..7213b3bfa30 100644
--- a/spec/javascripts/monitoring/graph_spec.js
+++ b/spec/javascripts/monitoring/graph_spec.js
@@ -86,4 +86,22 @@ describe('Graph', () => {
     expect(component.yAxisLabel).toEqual(component.graphData.y_label);
     expect(component.legendTitle).toEqual(component.graphData.queries[0].label);
   });
+
+  it('sets the currentData object based on the hovered data index', () => {
+    const component = createComponent({
+      graphData: convertedMetrics[1],
+      classType: 'col-md-6',
+      updateAspectRatio: false,
+      deploymentData,
+      graphIdentifier: 0,
+      hoverData: {
+        hoveredDate: new Date('Sun Aug 27 2017 06:11:51 GMT-0500 (CDT)'),
+        currentDeployXPos: null,
+      },
+    });
+
+    component.positionFlag();
+    expect(component.currentData).toBe(component.timeSeries[0].values[10]);
+    expect(component.currentDataIndex).toEqual(10);
+  });
 });