Update specs to match changes, and get passing.

spec/javascripts/pipelines/graph/graph_component_spec.js

@@ -5,22 +5,26 @@ import linkedPipelineJSON from './linked_pipelines_mock_data';
 
 const GraphComponent = Vue.extend(graphComponent);
 
-const defaultPropsData = {
-  pipeline: graphJSON.details.stages,
+const pipelineJSON = Object.assign(graphJSON, {
   triggered: linkedPipelineJSON.triggered,
-  triggerer: linkedPipelineJSON.triggerer,
+  triggeredBy: linkedPipelineJSON.triggered_by,
+});
+
+const defaultPropsData = {
+  pipeline:  pipelineJSON,
+  isLoading: false,
 };
 
 describe('graph component', function () {
   describe('while is loading', function () {
     beforeEach(function () {
       this.component = new GraphComponent({
-        propsData: defaultPropsData,
+        propsData: Object.assign(defaultPropsData, { isLoading: true }),
       }).$mount();
     });
 
     it('should render a loading icon', function () {
-      expect(this.component.$el.querySelector('.loading-icon')).not.toBeNull();
+      expect(this.component.$el.querySelector('.fa-spinner')).not.toBeNull();
     });
   });
 
@@ -36,21 +40,6 @@ describe('graph component', function () {
         expect(this.component.$el.classList.contains('js-pipeline-graph')).toEqual(true);
       });
 
-      it('should include the first column with left margin', function () {
-        const firstColumn = this.component.$el.querySelector('.stage-column:first-child');
-        expect(firstColumn.classList.contains('left-margin')).toEqual(true);
-      });
-
-      it('should include the second column with a left margin', function () {
-        const secondColumn = this.component.$el.querySelector('.stage-column:nth-child(2)');
-        expect(secondColumn.classList.contains('left-margin')).toEqual(true);
-      });
-
-      it('should include the second column first build with a left connector', function () {
-        const firstBuild = this.component.$el.querySelector('.stage-column:nth-child(2) .build:nth-child(1)');
-        expect(firstBuild.classList.contains('left-connector')).toEqual(true);
-      });
-
       it('should not include the loading icon', function () {
         expect(this.component.$el.querySelector('.loading-icon')).toBe(null);
       });
@@ -65,10 +54,6 @@ describe('graph component', function () {
     });
 
     describe('computeds and methods', function () {
-      it('linkedPipelinesClass should return "has-linked-pipelines"', function () {
-        expect(this.component.linkedPipelinesClass).toBe('has-linked-pipelines');
-      });
-
       describe('capitalizeStageName', function () {
         it('it capitalizes the stage name', function () {
           expect(this.component.capitalizeStageName('mystage')).toBe('Mystage');
@@ -77,17 +62,7 @@ describe('graph component', function () {
 
       describe('stageConnectorClass', function () {
         it('it returns left-margin when there is a triggerer', function () {
-          expect(this.component.stageConnectorClass(0, { groups: ['job'] })).toBe('left-margin');
-        });
-      });
-
-      describe('linkedPipelineClass', function () {
-        it('it returns has-upstream when triggerer and first stage', function () {
-          expect(this.component.linkedPipelineClass(0)).toBe('has-upstream');
-        });
-
-        it('it returns has-downstream when triggered and is last stage', function () {
-          expect(this.component.linkedPipelineClass(1)).toBe('has-downstream');
+          expect(this.component.stageConnectorClass(0, { groups: ['job'] })).toBe('no-margin');
         });
       });
     });
@@ -107,8 +82,9 @@ describe('graph component', function () {
 
   describe('when linked pipelines are not present', function () {
     beforeEach(function () {
+      const pipeline = Object.assign(graphJSON, { triggered: [], triggeredBy: [] });
       this.component = new GraphComponent({
-        propsData: { pipeline: graphJSON, triggered: [], triggerer: [] },
+        propsData: { pipeline, isLoading: false },
       }).$mount();
     });
 
@@ -132,11 +108,5 @@ describe('graph component', function () {
         expect(this.component.stageConnectorClass(99, { groups: ['job'] })).toBe('left-margin');
       });
     });
-
-    describe('linkedPipelineClass', function () {
-      it('it returns empty string when no triggerer', function () {
-        expect(this.component.linkedPipelineClass(1)).toBe('');
-      });
-    });
   });
 });

spec/javascripts/pipelines/graph/linked_pipelines_column_spec.js

@@ -34,20 +34,5 @@ describe('Linked Pipelines Column', () => {
     const linkedPipelineElements = this.linkedPipelinesColumn.$el.querySelectorAll('.linked-pipeline');
     expect(linkedPipelineElements.length).toBe(this.propsData.linkedPipelines.length);
   });
-
-  describe('flatConnectorClass', () => {
-    beforeEach(() => {
-      this.flatConnectorClass = this.linkedPipelinesColumn.flatConnectorClass;
-    });
-
-    it('should return flat-connector-before for the first job on the right side of the graph', () => {
-      expect(this.flatConnectorClass(0)).toBe('flat-connector-before');
-    });
-
-    it('should return an empty string for subsequent jobs', () => {
-      expect(this.flatConnectorClass(1)).toBeFalsy();
-      expect(this.flatConnectorClass(99)).toBeFalsy();
-    });
-  });
 });