1 files changed, 76 insertions, 0 deletions
diff --git a/spec/javascripts/monitoring/monitoring_flag_spec.js b/spec/javascripts/monitoring/monitoring_flag_spec.js
new file mode 100644
index 00000000000..3861a95ff07
--- /dev/null
+++ b/spec/javascripts/monitoring/monitoring_flag_spec.js
@@ -0,0 +1,76 @@
+import Vue from 'vue';
+import MonitoringFlag from '~/monitoring/components/monitoring_flag.vue';
+
+const createComponent = (propsData) => {
+  const Component = Vue.extend(MonitoringFlag);
+
+  return new Component({
+    propsData,
+  }).$mount();
+};
+
+function getCoordinate(component, selector, coordinate) {
+  const coordinateVal = component.$el.querySelector(selector).getAttribute(coordinate);
+  return parseInt(coordinateVal, 10);
+}
+
+describe('MonitoringFlag', () => {
+  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,
+    });
+
+    expect(getCoordinate(component, '.selected-metric-line', 'x1'))
+      .toEqual(component.currentXCoordinate);
+    expect(getCoordinate(component, '.selected-metric-line', 'x2'))
+      .toEqual(component.currentXCoordinate);
+    expect(getCoordinate(component, '.circle-metric', 'cx'))
+      .toEqual(component.currentXCoordinate);
+    expect(getCoordinate(component, '.circle-metric', 'cy'))
+      .toEqual(component.currentYCoordinate);
+  });
+
+  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 svg = component.$el.querySelector('.rect-text-metric');
+    expect(svg.tagName).toEqual('svg');
+    expect(parseInt(svg.getAttribute('x'), 10)).toEqual(component.currentFlagPosition);
+  });
+
+  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,
+      });
+
+      expect(component.calculatedHeight).toEqual(180);
+    });
+  });
+});