1 files changed, 26 insertions, 33 deletions
diff --git a/spec/javascripts/pipelines/graph/graph_component_spec.js b/spec/javascripts/pipelines/graph/graph_component_spec.js
index 6bd0eb86263..713baa65a17 100644
--- a/spec/javascripts/pipelines/graph/graph_component_spec.js
+++ b/spec/javascripts/pipelines/graph/graph_component_spec.js
@@ -14,49 +14,42 @@ describe('graph component', () => {
 
   describe('while is loading', () => {
     it('should render a loading icon', () => {
-      const component = new GraphComponent().$mount('#js-pipeline-graph-vue');
+      const component = new GraphComponent({
+        propsData: {
+          isLoading: true,
+          pipeline: {},
+        },
+      }).$mount('#js-pipeline-graph-vue');
       expect(component.$el.querySelector('.loading-icon')).toBeDefined();
     });
   });
 
-  describe('with a successfull response', () => {
-    const interceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify(graphJSON), {
-        status: 200,
-      }));
-    };
+  describe('with data', () => {
+    it('should render the graph', () => {
+      const component = new GraphComponent({
+        propsData: {
+          isLoading: false,
+          pipeline: graphJSON,
+        },
+      }).$mount('#js-pipeline-graph-vue');
 
-    beforeEach(() => {
-      Vue.http.interceptors.push(interceptor);
-    });
-
-    afterEach(() => {
-      Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
-    });
-
-    it('should render the graph', (done) => {
-      const component = new GraphComponent().$mount('#js-pipeline-graph-vue');
-
-      setTimeout(() => {
-        expect(component.$el.classList.contains('js-pipeline-graph')).toEqual(true);
+      expect(component.$el.classList.contains('js-pipeline-graph')).toEqual(true);
 
-        expect(
-          component.$el.querySelector('.stage-column:first-child').classList.contains('no-margin'),
-        ).toEqual(true);
+      expect(
+        component.$el.querySelector('.stage-column:first-child').classList.contains('no-margin'),
+      ).toEqual(true);
 
-        expect(
-          component.$el.querySelector('.stage-column:nth-child(2)').classList.contains('left-margin'),
-        ).toEqual(true);
+      expect(
+        component.$el.querySelector('.stage-column:nth-child(2)').classList.contains('left-margin'),
+      ).toEqual(true);
 
-        expect(
-          component.$el.querySelector('.stage-column:nth-child(2) .build:nth-child(1)').classList.contains('left-connector'),
-        ).toEqual(true);
+      expect(
+        component.$el.querySelector('.stage-column:nth-child(2) .build:nth-child(1)').classList.contains('left-connector'),
+      ).toEqual(true);
 
-        expect(component.$el.querySelector('loading-icon')).toBe(null);
+      expect(component.$el.querySelector('loading-icon')).toBe(null);
 
-        expect(component.$el.querySelector('.stage-column-list')).toBeDefined();
-        done();
-      }, 0);
+      expect(component.$el.querySelector('.stage-column-list')).toBeDefined();
     });
   });
 });