Resolve "Add graph value to hover"

2 files changed, 102 insertions, 156 deletions

diff --git a/spec/javascripts/monitoring/graph/deployment_spec.js b/spec/javascripts/monitoring/graph/deployment_spec.js
index bf6ada8185e..d07db871d69 100644
--- a/spec/javascripts/monitoring/graph/deployment_spec.js
+++ b/spec/javascripts/monitoring/graph/deployment_spec.js
@@ -11,168 +11,38 @@ const createComponent = (propsData) => {
 };
 
 describe('MonitoringDeployment', () => {
-  const reducedDeploymentData = [deploymentData[0]];
-  reducedDeploymentData[0].ref = reducedDeploymentData[0].ref.name;
-  reducedDeploymentData[0].xPos = 10;
-  reducedDeploymentData[0].time = new Date(reducedDeploymentData[0].created_at);
   describe('Methods', () => {
-    it('refText shows the ref when a tag is available', () => {
-      reducedDeploymentData[0].tag = '1.0';
-      const component = createComponent({
-        showDeployInfo: false,
-        deploymentData: reducedDeploymentData,
-        graphWidth: 440,
-        graphHeight: 300,
-        graphHeightOffset: 120,
-      });
-
-      expect(
-        component.refText(reducedDeploymentData[0]),
-      ).toEqual(reducedDeploymentData[0].ref);
-    });
-
-    it('refText shows the sha when no tag is available', () => {
-      reducedDeploymentData[0].tag = null;
-      const component = createComponent({
-        showDeployInfo: false,
-        deploymentData: reducedDeploymentData,
-        graphHeight: 300,
-        graphWidth: 440,
-        graphHeightOffset: 120,
-      });
-
-      expect(
-        component.refText(reducedDeploymentData[0]),
-      ).toContain('f5bcd1');
-    });
-
-    it('nameDeploymentClass creates a class with the prefix deploy-info-', () => {
+    it('should contain a hidden gradient', () => {
       const component = createComponent({
-        showDeployInfo: false,
-        deploymentData: reducedDeploymentData,
+        showDeployInfo: true,
+        deploymentData,
         graphHeight: 300,
         graphWidth: 440,
         graphHeightOffset: 120,
       });
 
-      expect(
-        component.nameDeploymentClass(reducedDeploymentData[0]),
-      ).toContain('deploy-info');
+      expect(component.$el.querySelector('#shadow-gradient')).not.toBeNull();
     });
 
     it('transformDeploymentGroup translates an available deployment', () => {
       const component = createComponent({
         showDeployInfo: false,
-        deploymentData: reducedDeploymentData,
+        deploymentData,
         graphHeight: 300,
         graphWidth: 440,
         graphHeightOffset: 120,
       });
 
       expect(
-        component.transformDeploymentGroup(reducedDeploymentData[0]),
+        component.transformDeploymentGroup({ xPos: 16 }),
       ).toContain('translate(11, 20)');
     });
 
-    it('hides the deployment flag', () => {
-      reducedDeploymentData[0].showDeploymentFlag = false;
-      const component = createComponent({
-        showDeployInfo: true,
-        deploymentData: reducedDeploymentData,
-        graphWidth: 440,
-        graphHeight: 300,
-        graphHeightOffset: 120,
-      });
-
-      expect(component.$el.querySelector('.js-deploy-info-box')).toBeNull();
-    });
-
-    it('positions the flag to the left when the xPos is too far right', () => {
-      reducedDeploymentData[0].showDeploymentFlag = false;
-      reducedDeploymentData[0].xPos = 250;
-      const component = createComponent({
-        showDeployInfo: true,
-        deploymentData: reducedDeploymentData,
-        graphWidth: 440,
-        graphHeight: 300,
-        graphHeightOffset: 120,
-      });
-
-      expect(
-        component.positionFlag(reducedDeploymentData[0]),
-      ).toBeLessThan(0);
-    });
-
-    it('shows the deployment flag', () => {
-      reducedDeploymentData[0].showDeploymentFlag = true;
-      const component = createComponent({
-        showDeployInfo: true,
-        deploymentData: reducedDeploymentData,
-        graphHeight: 300,
-        graphWidth: 440,
-        graphHeightOffset: 120,
-      });
-
-      expect(
-        component.$el.querySelector('.js-deploy-info-box').style.display,
-      ).not.toEqual('display: none;');
-    });
-
-    it('contains date, refs and the "deployed" text', () => {
-      reducedDeploymentData[0].showDeploymentFlag = true;
-      const component = createComponent({
-        showDeployInfo: true,
-        deploymentData: reducedDeploymentData,
-        graphHeight: 300,
-        graphWidth: 440,
-        graphHeightOffset: 120,
-      });
-
-      expect(
-        component.$el.querySelectorAll('.deploy-info-text'),
-      ).toContainText('Deployed');
-
-      expect(
-        component.$el.querySelectorAll('.deploy-info-text'),
-      ).toContainText('Wed, May 31');
-
-      expect(
-        component.$el.querySelectorAll('.deploy-info-text'),
-      ).toContainText(component.refText(reducedDeploymentData[0]));
-    });
-
-    it('contains a link to the commit contents', () => {
-      reducedDeploymentData[0].showDeploymentFlag = true;
-      const component = createComponent({
-        showDeployInfo: true,
-        deploymentData: reducedDeploymentData,
-        graphHeight: 300,
-        graphWidth: 440,
-        graphHeightOffset: 120,
-      });
-
-      expect(
-        component.$el.querySelectorAll('.deploy-info-text-link')[0].parentElement.getAttribute('xlink:href'),
-      ).not.toEqual('');
-    });
-
-    it('should contain a hidden gradient', () => {
-      const component = createComponent({
-        showDeployInfo: true,
-        deploymentData: reducedDeploymentData,
-        graphHeight: 300,
-        graphWidth: 440,
-        graphHeightOffset: 120,
-      });
-
-      expect(component.$el.querySelector('#shadow-gradient')).not.toBeNull();
-    });
-
     describe('Computed props', () => {
       it('calculatedHeight', () => {
         const component = createComponent({
           showDeployInfo: true,
-          deploymentData: reducedDeploymentData,
+          deploymentData,
           graphHeight: 300,
           graphWidth: 440,
           graphHeightOffset: 120,
diff --git a/spec/javascripts/monitoring/graph/flag_spec.js b/spec/javascripts/monitoring/graph/flag_spec.js
index 8ee1171419d..2d474e9092f 100644
--- a/spec/javascripts/monitoring/graph/flag_spec.js
+++ b/spec/javascripts/monitoring/graph/flag_spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import GraphFlag from '~/monitoring/components/graph/flag.vue';
+import { deploymentData } from '../mock_data';
 
 const createComponent = (propsData) => {
   const Component = Vue.extend(GraphFlag);
@@ -9,11 +10,6 @@ const createComponent = (propsData) => {
   }).$mount();
 };
 
-function getCoordinate(component, selector, coordinate) {
-  const coordinateVal = component.$el.querySelector(selector).getAttribute(coordinate);
-  return parseInt(coordinateVal, 10);
-}
-
 const defaultValuesComponent = {
   currentXCoordinate: 200,
   currentYCoordinate: 100,
@@ -25,31 +21,111 @@ const defaultValuesComponent = {
   graphHeight: 300,
   graphHeightOffset: 120,
   showFlagContent: true,
+  realPixelRatio: 1,
+  timeSeries: [{
+    values: [{
+      time: new Date('2017-06-04T18:17:33.501Z'),
+      value: '1.49609375',
+    }],
+  }],
+  unitOfDisplay: 'ms',
+  currentDataIndex: 0,
+  legendTitle: 'Average',
+};
+
+const deploymentFlagData = {
+  ...deploymentData[0],
+  ref: deploymentData[0].ref.name,
+  xPos: 10,
+  time: new Date(deploymentData[0].created_at),
 };
 
 describe('GraphFlag', () => {
-  it('has a line and a circle located at the currentXCoordinate and currentYCoordinate', () => {
-    const component = createComponent(defaultValuesComponent);
+  let component;
 
-    expect(getCoordinate(component, '.selected-metric-line', 'x1'))
-      .toEqual(component.currentXCoordinate);
-    expect(getCoordinate(component, '.selected-metric-line', 'x2'))
-      .toEqual(component.currentXCoordinate);
+  it('has a line at the currentXCoordinate', () => {
+    component = createComponent(defaultValuesComponent);
+
+    expect(component.$el.style.left)
+      .toEqual(`${70 + component.currentXCoordinate}px`);
   });
 
-  it('has a SVG with the class rect-text-metric at the currentFlagPosition', () => {
-    const component = createComponent(defaultValuesComponent);
+  describe('Deployment flag', () => {
+    it('shows a deployment flag when deployment data provided', () => {
+      const deploymentFlagComponent = createComponent({
+        ...defaultValuesComponent,
+        deploymentFlagData,
+      });
+
+      expect(
+        deploymentFlagComponent.$el.querySelector('.popover-title'),
+      ).toContainText('Deployed');
+    });
+
+    it('contains the ref when a tag is available', () => {
+      const deploymentFlagComponent = createComponent({
+        ...defaultValuesComponent,
+        deploymentFlagData: {
+          ...deploymentFlagData,
+          sha: 'f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187',
+          tag: true,
+          ref: '1.0',
+        },
+      });
+
+      expect(
+        deploymentFlagComponent.$el.querySelector('.deploy-meta-content'),
+      ).toContainText('f5bcd1d9');
+
+      expect(
+        deploymentFlagComponent.$el.querySelector('.deploy-meta-content'),
+      ).toContainText('1.0');
+    });
+
+    it('does not contain the ref when a tag is unavailable', () => {
+      const deploymentFlagComponent = createComponent({
+        ...defaultValuesComponent,
+        deploymentFlagData: {
+          ...deploymentFlagData,
+          sha: 'f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187',
+          tag: false,
+          ref: '1.0',
+        },
+      });
+
+      expect(
+        deploymentFlagComponent.$el.querySelector('.deploy-meta-content'),
+      ).toContainText('f5bcd1d9');
 
-    const svg = component.$el.querySelector('.rect-text-metric');
-    expect(svg.tagName).toEqual('svg');
-    expect(parseInt(svg.getAttribute('x'), 10)).toEqual(component.currentFlagPosition);
+      expect(
+        deploymentFlagComponent.$el.querySelector('.deploy-meta-content'),
+      ).not.toContainText('1.0');
+    });
   });
 
   describe('Computed props', () => {
-    it('calculatedHeight', () => {
-      const component = createComponent(defaultValuesComponent);
+    beforeEach(() => {
+      component = createComponent(defaultValuesComponent);
+    });
+
+    it('formatTime', () => {
+      expect(component.formatTime).toMatch(/\d:17PM/);
+    });
+
+    it('formatDate', () => {
+      expect(component.formatDate).toEqual('Sun, Jun 4');
+    });
+
+    it('cursorStyle', () => {
+      expect(component.cursorStyle).toEqual({
+        top: '20px',
+        left: '270px',
+        height: '180px',
+      });
+    });
 
-      expect(component.calculatedHeight).toEqual(180);
+    it('flagOrientation', () => {
+      expect(component.flagOrientation).toEqual('left');
     });
   });
 });