Merge remote-tracking branch 'origin/master' into repo-bugsrepo-bugs

9 files changed, 59 insertions, 60 deletions

diff --git a/spec/javascripts/fly_out_nav_spec.js b/spec/javascripts/fly_out_nav_spec.js
index 2e81a1b056b..0847e463577 100644
--- a/spec/javascripts/fly_out_nav_spec.js
+++ b/spec/javascripts/fly_out_nav_spec.js
@@ -1,4 +1,3 @@
-import Cookies from 'js-cookie';
 import {
   calculateTop,
   showSubLevelItems,
@@ -11,6 +10,7 @@ import {
   getHideSubItemsInterval,
   documentMouseMove,
   getHeaderHeight,
+  setSidebar,
 } from '~/fly_out_nav';
 import bp from '~/breakpoints';
 
@@ -113,7 +113,6 @@ describe('Fly out sidebar navigation', () => {
         clientX: el.getBoundingClientRect().left + 20,
         clientY: el.getBoundingClientRect().top + 10,
       });
-      console.log(el);
 
       expect(
         getHideSubItemsInterval(),
@@ -283,7 +282,7 @@ describe('Fly out sidebar navigation', () => {
 
   describe('canShowActiveSubItems', () => {
     afterEach(() => {
-      Cookies.remove('sidebar_collapsed');
+      setSidebar(null);
     });
 
     it('returns true by default', () => {
@@ -292,36 +291,23 @@ describe('Fly out sidebar navigation', () => {
       ).toBeTruthy();
     });
 
-    it('returns false when cookie is false & element is active', () => {
-      Cookies.set('sidebar_collapsed', 'false');
+    it('returns false when active & expanded sidebar', () => {
+      const sidebar = document.createElement('div');
       el.classList.add('active');
 
-      expect(
-        canShowActiveSubItems(el),
-      ).toBeFalsy();
-    });
-
-    it('returns true when cookie is false & element is active', () => {
-      Cookies.set('sidebar_collapsed', 'true');
-      el.classList.add('active');
+      setSidebar(sidebar);
 
       expect(
         canShowActiveSubItems(el),
-      ).toBeTruthy();
+      ).toBeFalsy();
     });
 
-    it('returns true when element is active & breakpoint is sm', () => {
-      breakpointSize = 'sm';
+    it('returns true when active & collapsed sidebar', () => {
+      const sidebar = document.createElement('div');
+      sidebar.classList.add('sidebar-icons-only');
       el.classList.add('active');
 
-      expect(
-        canShowActiveSubItems(el),
-      ).toBeTruthy();
-    });
-
-    it('returns true when element is active & breakpoint is md', () => {
-      breakpointSize = 'md';
-      el.classList.add('active');
+      setSidebar(sidebar);
 
       expect(
         canShowActiveSubItems(el),
diff --git a/spec/javascripts/issue_show/components/edited_spec.js b/spec/javascripts/issue_show/components/edited_spec.js
index a0d0750ae34..2061def699b 100644
--- a/spec/javascripts/issue_show/components/edited_spec.js
+++ b/spec/javascripts/issue_show/components/edited_spec.js
@@ -46,4 +46,14 @@ describe('edited', () => {
     expect(editedComponent.$el.querySelector('.author_link')).toBeFalsy();
     expect(editedComponent.$el.querySelector('time')).toBeTruthy();
   });
+
+  it('renders time ago tooltip at the bottom', () => {
+    const editedComponent = new EditedComponent({
+      propsData: {
+        updatedAt: '2017-05-15T12:31:04.428Z',
+      },
+    }).$mount();
+
+    expect(editedComponent.$el.querySelector('time').dataset.placement).toEqual('bottom');
+  });
 });
diff --git a/spec/javascripts/monitoring/monitoring_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index 6c7b691baa4..752fdfb4614 100644
--- a/spec/javascripts/monitoring/monitoring_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -1,21 +1,21 @@
 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();
diff --git a/spec/javascripts/monitoring/monitoring_state_spec.js b/spec/javascripts/monitoring/dashboard_state_spec.js
index 4c0c558502f..e8f7042e131 100644
--- a/spec/javascripts/monitoring/monitoring_state_spec.js
+++ b/spec/javascripts/monitoring/dashboard_state_spec.js
@@ -1,9 +1,9 @@
 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({
diff --git a/spec/javascripts/monitoring/monitoring_deployment_spec.js b/spec/javascripts/monitoring/graph/deployment_spec.js
index 5cc5b514824..c2ff38ffab9 100644
--- a/spec/javascripts/monitoring/monitoring_deployment_spec.js
+++ b/spec/javascripts/monitoring/graph/deployment_spec.js
@@ -1,9 +1,9 @@
 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,
diff --git a/spec/javascripts/monitoring/monitoring_flag_spec.js b/spec/javascripts/monitoring/graph/flag_spec.js
index 3861a95ff07..731076a7d2a 100644
--- a/spec/javascripts/monitoring/monitoring_flag_spec.js
+++ b/spec/javascripts/monitoring/graph/flag_spec.js
@@ -1,8 +1,8 @@
 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,
diff --git a/spec/javascripts/monitoring/monitoring_legends_spec.js b/spec/javascripts/monitoring/graph/legend_spec.js
index 4c69b81e650..e877832dffd 100644
--- a/spec/javascripts/monitoring/monitoring_legends_spec.js
+++ b/spec/javascripts/monitoring/graph/legend_spec.js
@@ -1,9 +1,9 @@
 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({
diff --git a/spec/javascripts/monitoring/monitoring_row_spec.js b/spec/javascripts/monitoring/graph_row_spec.js
index a82480e8342..dd485473ccf 100644
--- a/spec/javascripts/monitoring/monitoring_row_spec.js
+++ b/spec/javascripts/monitoring/graph_row_spec.js
@@ -1,16 +1,21 @@
 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({
diff --git a/spec/javascripts/monitoring/monitoring_column_spec.js b/spec/javascripts/monitoring/graph_spec.js
index c423024dce0..6d6fe410113 100644
--- a/spec/javascripts/monitoring/monitoring_column_spec.js
+++ b/spec/javascripts/monitoring/graph_spec.js
@@ -1,39 +1,37 @@
 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);
   });
 });