1 files changed, 29 insertions, 6 deletions

diff --git a/spec/javascripts/monitoring/prometheus_graph_spec.js b/spec/javascripts/monitoring/prometheus_graph_spec.js
index a3c1c5e1b7c..25578bf1c6e 100644
--- a/spec/javascripts/monitoring/prometheus_graph_spec.js
+++ b/spec/javascripts/monitoring/prometheus_graph_spec.js
@@ -1,10 +1,9 @@
 import 'jquery';
-import '~/lib/utils/common_utils';
 import PrometheusGraph from '~/monitoring/prometheus_graph';
 import { prometheusMockData } from './prometheus_mock_data';
 
 describe('PrometheusGraph', () => {
-  const fixtureName = 'static/environments/metrics.html.raw';
+  const fixtureName = 'environments/metrics/metrics.html.raw';
   const prometheusGraphContainer = '.prometheus-graph';
   const prometheusGraphContents = `${prometheusGraphContainer}[graph-type=cpu_values]`;
 
@@ -12,6 +11,7 @@ describe('PrometheusGraph', () => {
 
   beforeEach(() => {
     loadFixtures(fixtureName);
+    $('.prometheus-container').data('has-metrics', 'true');
     this.prometheusGraph = new PrometheusGraph();
     const self = this;
     const fakeInit = (metricsResponse) => {
@@ -37,9 +37,11 @@ describe('PrometheusGraph', () => {
 
   it('transforms the data', () => {
     this.prometheusGraph.init(prometheusMockData.metrics);
-    expect(this.prometheusGraph.data).toBeDefined();
-    expect(this.prometheusGraph.data.cpu_values.length).toBe(121);
-    expect(this.prometheusGraph.data.memory_values.length).toBe(121);
+    Object.keys(this.prometheusGraph.graphSpecificProperties, (key) => {
+      const graphProps = this.prometheusGraph.graphSpecificProperties[key];
+      expect(graphProps.data).toBeDefined();
+      expect(graphProps.data.length).toBe(121);
+    });
   });
 
   it('creates two graphs', () => {
@@ -68,8 +70,29 @@ describe('PrometheusGraph', () => {
       expect($prometheusGraphContents.find('.label-y-axis-line')).toBeDefined();
       expect($prometheusGraphContents.find('.label-axis-text')).toBeDefined();
       expect($prometheusGraphContents.find('.rect-axis-text')).toBeDefined();
-      expect($axisLabelContainer.find('rect').length).toBe(2);
+      expect($axisLabelContainer.find('rect').length).toBe(3);
       expect($axisLabelContainer.find('text').length).toBe(4);
     });
   });
 });
+
+describe('PrometheusGraphs UX states', () => {
+  const fixtureName = 'environments/metrics/metrics.html.raw';
+  preloadFixtures(fixtureName);
+
+  beforeEach(() => {
+    loadFixtures(fixtureName);
+    this.prometheusGraph = new PrometheusGraph();
+  });
+
+  it('shows a specified state', () => {
+    this.prometheusGraph.state = '.js-getting-started';
+    this.prometheusGraph.updateState();
+    const $state = $('.js-getting-started');
+    expect($state).toBeDefined();
+    expect($('.state-title', $state)).toBeDefined();
+    expect($('.state-svg', $state)).toBeDefined();
+    expect($('.state-description', $state)).toBeDefined();
+    expect($('.state-button', $state)).toBeDefined();
+  });
+});