1 files changed, 49 insertions, 0 deletions
diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
new file mode 100644
index 00000000000..752fdfb4614
--- /dev/null
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -0,0 +1,49 @@
+import Vue from 'vue';
+import Dashboard from '~/monitoring/components/dashboard.vue';
+import { MonitorMockInterceptor } from './mock_data';
+
+describe('Dashboard', () => {
+  const fixtureName = 'environments/metrics/metrics.html.raw';
+  let DashboardComponent;
+  let component;
+  preloadFixtures(fixtureName);
+
+  beforeEach(() => {
+    loadFixtures(fixtureName);
+    DashboardComponent = Vue.extend(Dashboard);
+  });
+
+  describe('no metrics are available yet', () => {
+    it('shows a getting started empty state when no metrics are present', () => {
+      component = new DashboardComponent({
+        el: document.querySelector('#prometheus-graphs'),
+      });
+
+      component.$mount();
+      expect(component.$el.querySelector('#prometheus-graphs')).toBe(null);
+      expect(component.state).toEqual('gettingStarted');
+    });
+  });
+
+  describe('requests information to the server', () => {
+    beforeEach(() => {
+      document.querySelector('#prometheus-graphs').setAttribute('data-has-metrics', 'true');
+      Vue.http.interceptors.push(MonitorMockInterceptor);
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(Vue.http.interceptors, MonitorMockInterceptor);
+    });
+
+    it('shows up a loading state', (done) => {
+      component = new DashboardComponent({
+        el: document.querySelector('#prometheus-graphs'),
+      });
+      component.$mount();
+      Vue.nextTick(() => {
+        expect(component.state).toEqual('loading');
+        done();
+      });
+    });
+  });
+});