update specs to match reorganized monitoring components

spec/javascripts/monitoring/monitoring_spec.js → spec/javascripts/monitoring/dashboard_spec.js

 import Vue from 'vue';
-import Monitoring from '~/monitoring/components/monitoring.vue';
+import Dashboard from '~/monitoring/components/dashboard.vue';
 import { MonitorMockInterceptor } from './mock_data';
-describe('Monitoring', () => {
+describe('Dashboard', () => {
   const fixtureName = 'environments/metrics/metrics.html.raw';
-  let MonitoringComponent;
+  let DashboardComponent;
   let component;
   preloadFixtures(fixtureName);
   beforeEach(() => {
     loadFixtures(fixtureName);
-    MonitoringComponent = Vue.extend(Monitoring);
+    DashboardComponent = Vue.extend(Dashboard);
   });
   describe('no metrics are available yet', () => {
     it('shows a getting started empty state when no metrics are present', () => {
-      component = new MonitoringComponent({
+      component = new DashboardComponent({
         el: document.querySelector('#prometheus-graphs'),
       });
@@ -36,7 +36,7 @@ describe('Monitoring', () => {
     });
     it('shows up a loading state', (done) => {
-      component = new MonitoringComponent({
+      component = new DashboardComponent({
         el: document.querySelector('#prometheus-graphs'),
       });
       component.$mount();

spec/javascripts/monitoring/monitoring_state_spec.js → spec/javascripts/monitoring/dashboard_state_spec.js

 import Vue from 'vue';
-import MonitoringState from '~/monitoring/components/monitoring_state.vue';
+import EmptyState from '~/monitoring/components/empty_state.vue';
 import { statePaths } from './mock_data';
 const createComponent = (propsData) => {
-  const Component = Vue.extend(MonitoringState);
+  const Component = Vue.extend(EmptyState);
   return new Component({
     propsData,
@@ -14,7 +14,7 @@ function getTextFromNode(component, selector) {
   return component.$el.querySelector(selector).firstChild.nodeValue.trim();
 }
-describe('MonitoringState', () => {
+describe('EmptyState', () => {
   describe('Computed props', () => {
     it('currentState', () => {
       const component = createComponent({

spec/javascripts/monitoring/monitoring_deployment_spec.js → spec/javascripts/monitoring/graph/deployment_spec.js

 import Vue from 'vue';
-import MonitoringState from '~/monitoring/components/monitoring_deployment.vue';
-import { deploymentData } from './mock_data';
+import GraphDeployment from '~/monitoring/components/graph/deployment.vue';
+import { deploymentData } from '../mock_data';
 const createComponent = (propsData) => {
-  const Component = Vue.extend(MonitoringState);
+  const Component = Vue.extend(GraphDeployment);
   return new Component({
     propsData,

spec/javascripts/monitoring/monitoring_flag_spec.js → spec/javascripts/monitoring/graph/flag_spec.js

 import Vue from 'vue';
-import MonitoringFlag from '~/monitoring/components/monitoring_flag.vue';
+import GraphFlag from '~/monitoring/components/graph/flag.vue';
 const createComponent = (propsData) => {
-  const Component = Vue.extend(MonitoringFlag);
+  const Component = Vue.extend(GraphFlag);
   return new Component({
     propsData,
@@ -14,7 +14,7 @@ function getCoordinate(component, selector, coordinate) {
   return parseInt(coordinateVal, 10);
 }
-describe('MonitoringFlag', () => {
+describe('GraphFlag', () => {
   it('has a line and a circle located at the currentXCoordinate and currentYCoordinate', () => {
     const component = createComponent({
       currentXCoordinate: 200,

spec/javascripts/monitoring/monitoring_legends_spec.js → spec/javascripts/monitoring/graph/legend_spec.js

 import Vue from 'vue';
-import MonitoringLegends from '~/monitoring/components/monitoring_legends.vue';
+import GraphLegend from '~/monitoring/components/graph/legend.vue';
 import measurements from '~/monitoring/utils/measurements';
 const createComponent = (propsData) => {
-  const Component = Vue.extend(MonitoringLegends);
+  const Component = Vue.extend(GraphLegend);
   return new Component({
     propsData,
@@ -14,7 +14,7 @@ function getTextFromNode(component, selector) {
   return component.$el.querySelector(selector).firstChild.nodeValue.trim();
 }
-describe('MonitoringLegends', () => {
+describe('GraphLegend', () => {
   describe('Computed props', () => {
     it('textTransform', () => {
       const component = createComponent({

spec/javascripts/monitoring/monitoring_row_spec.js → spec/javascripts/monitoring/graph_row_spec.js

 import Vue from 'vue';
-import MonitoringRow from '~/monitoring/components/monitoring_row.vue';
+import GraphRow from '~/monitoring/components/graph_row.vue';
+import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins';
 import { deploymentData, singleRowMetrics } from './mock_data';
 const createComponent = (propsData) => {
-  const Component = Vue.extend(MonitoringRow);
+  const Component = Vue.extend(GraphRow);
   return new Component({
     propsData,
   }).$mount();
 };
-describe('MonitoringRow', () => {
+describe('GraphRow', () => {
+  beforeEach(() => {
+    spyOn(MonitoringMixins.methods, 'formatDeployments').and.returnValue({});
+  });
+
   describe('Computed props', () => {
     it('bootstrapClass is set to col-md-6 when rowData is higher/equal to 2', () => {
       const component = createComponent({

spec/javascripts/monitoring/monitoring_column_spec.js → spec/javascripts/monitoring/graph_spec.js

 import Vue from 'vue';
 import _ from 'underscore';
-import MonitoringColumn from '~/monitoring/components/monitoring_column.vue';
+import Graph from '~/monitoring/components/graph.vue';
 import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins';
 import eventHub from '~/monitoring/event_hub';
 import { deploymentData, singleRowMetrics } from './mock_data';
 const createComponent = (propsData) => {
-  const Component = Vue.extend(MonitoringColumn);
+  const Component = Vue.extend(Graph);
   return new Component({
     propsData,
   }).$mount();
 };
-describe('MonitoringColumn', () => {
+describe('Graph', () => {
   beforeEach(() => {
-    spyOn(MonitoringMixins.methods, 'formatDeployments').and.callFake(function fakeFormat() {
-      return {};
-    });
+    spyOn(MonitoringMixins.methods, 'formatDeployments').and.returnValue({});
   });
   it('has a title', () => {
     const component = createComponent({
-      columnData: singleRowMetrics[0],
+      graphData: singleRowMetrics[0],
       classType: 'col-md-6',
       updateAspectRatio: false,
       deploymentData,
     });
-    expect(component.$el.querySelector('.text-center').innerText.trim()).toBe(component.columnData.title);
+    expect(component.$el.querySelector('.text-center').innerText.trim()).toBe(component.graphData.title);
   });
   it('creates a path for the line and area of the graph', (done) => {
     const component = createComponent({
-      columnData: singleRowMetrics[0],
+      graphData: singleRowMetrics[0],
       classType: 'col-md-6',
       updateAspectRatio: false,
       deploymentData,
@@ -53,7 +51,7 @@ describe('MonitoringColumn', () => {
   describe('Computed props', () => {
     it('axisTransform translates an element Y position depending of its height', () => {
       const component = createComponent({
-        columnData: singleRowMetrics[0],
+        graphData: singleRowMetrics[0],
         classType: 'col-md-6',
         updateAspectRatio: false,
         deploymentData,
@@ -66,7 +64,7 @@ describe('MonitoringColumn', () => {
     it('outterViewBox gets a width and height property based on the DOM size of the element', () => {
       const component = createComponent({
-        columnData: singleRowMetrics[0],
+        graphData: singleRowMetrics[0],
         classType: 'col-md-6',
         updateAspectRatio: false,
         deploymentData,
@@ -81,7 +79,7 @@ describe('MonitoringColumn', () => {
   it('sends an event to the eventhub when it has finished resizing', (done) => {
     const component = createComponent({
-      columnData: singleRowMetrics[0],
+      graphData: singleRowMetrics[0],
       classType: 'col-md-6',
       updateAspectRatio: false,
       deploymentData,
@@ -97,13 +95,13 @@ describe('MonitoringColumn', () => {
   it('has a title for the y-axis and the chart legend that comes from the backend', () => {
     const component = createComponent({
-      columnData: singleRowMetrics[0],
+      graphData: singleRowMetrics[0],
       classType: 'col-md-6',
       updateAspectRatio: false,
       deploymentData,
     });
-    expect(component.yAxisLabel).toEqual(component.columnData.y_label);
-    expect(component.legendTitle).toEqual(component.columnData.queries[0].label);
+    expect(component.yAxisLabel).toEqual(component.graphData.y_label);
+    expect(component.legendTitle).toEqual(component.graphData.queries[0].label);
   });
 });