Adds left connector class to the rendered graph

1 files changed, 62 insertions, 0 deletions

diff --git a/spec/javascripts/pipelines/graph/graph_component_spec.js b/spec/javascripts/pipelines/graph/graph_component_spec.js
index a756617e65e..77f42312b40 100644
--- a/spec/javascripts/pipelines/graph/graph_component_spec.js
+++ b/spec/javascripts/pipelines/graph/graph_component_spec.js
@@ -52,6 +52,56 @@ describe('graph component', () => {
                 },
               }],
             }],
+          },
+          {
+            name: 'test_1',
+            title: 'test_1: passed',
+            status: {
+              icon: 'icon_status_success',
+              text: 'passed',
+              label: 'passed',
+              details_path: '/root/ci-mock/pipelines/123#test',
+            },
+            path: '/root/ci-mock/pipelines/123#test',
+            groups: [{
+              name: 'test',
+              size: 1,
+              jobs: [{
+                id: 4153,
+                name: 'test',
+                status: {
+                  icon: 'icon_status_success',
+                  text: 'passed',
+                  label: 'passed',
+                  details_path: '/root/ci-mock/builds/4153',
+                  action: {
+                    icon: 'icon_action_retry',
+                    title: 'Retry',
+                    path: '/root/ci-mock/builds/4153/retry',
+                    method: 'post',
+                  },
+                },
+              }],
+            }, {
+              name: 'test',
+              size: 1,
+              jobs: [{
+                id: 4153,
+                name: 'test',
+                status: {
+                  icon: 'icon_status_success',
+                  text: 'passed',
+                  label: 'passed',
+                  details_path: '/root/ci-mock/builds/4153',
+                  action: {
+                    icon: 'icon_action_retry',
+                    title: 'Retry',
+                    path: '/root/ci-mock/builds/4153/retry',
+                    method: 'post',
+                  },
+                },
+              }],
+            }],
           }],
         },
       }), {
@@ -73,6 +123,18 @@ describe('graph component', () => {
       setTimeout(() => {
         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: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('loading-icon')).toBe(null);
 
         expect(component.$el.querySelector('.stage-column-list')).toBeDefined();