1 files changed, 107 insertions, 57 deletions

diff --git a/spec/frontend/pipelines/graph/stage_column_component_spec.js b/spec/frontend/pipelines/graph/stage_column_component_spec.js
index d32534326c5..44803929f6d 100644
--- a/spec/frontend/pipelines/graph/stage_column_component_spec.js
+++ b/spec/frontend/pipelines/graph/stage_column_component_spec.js
@@ -1,64 +1,101 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
+import ActionComponent from '~/pipelines/components/graph/action_component.vue';
+import JobItem from '~/pipelines/components/graph/job_item.vue';
+import StageColumnComponent from '~/pipelines/components/graph/stage_column_component.vue';
 
-import stageColumnComponent from '~/pipelines/components/graph/stage_column_component.vue';
-
-describe('stage column component', () => {
-  const mockJob = {
-    id: 4250,
-    name: 'test',
-    status: {
-      icon: 'status_success',
-      text: 'passed',
-      label: 'passed',
-      group: 'success',
-      details_path: '/root/ci-mock/builds/4250',
-      action: {
-        icon: 'retry',
-        title: 'Retry',
-        path: '/root/ci-mock/builds/4250/retry',
-        method: 'post',
-      },
+const mockJob = {
+  id: 4250,
+  name: 'test',
+  status: {
+    icon: 'status_success',
+    text: 'passed',
+    label: 'passed',
+    group: 'success',
+    details_path: '/root/ci-mock/builds/4250',
+    action: {
+      icon: 'retry',
+      title: 'Retry',
+      path: '/root/ci-mock/builds/4250/retry',
+      method: 'post',
     },
-  };
+  },
+};
 
+const mockGroups = Array(4)
+  .fill(0)
+  .map((item, idx) => {
+    return { ...mockJob, id: idx, name: `fish-${idx}` };
+  });
+
+const defaultProps = {
+  title: 'Fish',
+  groups: mockGroups,
+};
+
+describe('stage column component', () => {
   let wrapper;
 
-  beforeEach(() => {
-    const mockGroups = [];
-    for (let i = 0; i < 3; i += 1) {
-      const mockedJob = { ...mockJob };
-      mockedJob.id += i;
-      mockGroups.push(mockedJob);
-    }
+  const findStageColumnTitle = () => wrapper.find('[data-testid="stage-column-title"]');
+  const findStageColumnGroup = () => wrapper.find('[data-testid="stage-column-group"]');
+  const findAllStageColumnGroups = () => wrapper.findAll('[data-testid="stage-column-group"]');
+  const findJobItem = () => wrapper.find(JobItem);
+  const findActionComponent = () => wrapper.find(ActionComponent);
 
-    wrapper = shallowMount(stageColumnComponent, {
+  const createComponent = ({ method = shallowMount, props = {} } = {}) => {
+    wrapper = method(StageColumnComponent, {
       propsData: {
-        title: 'foo',
-        groups: mockGroups,
-        hasTriggeredBy: false,
+        ...defaultProps,
+        ...props,
       },
     });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
   });
 
-  it('should render provided title', () => {
-    expect(
-      wrapper
-        .find('.stage-name')
-        .text()
-        .trim(),
-    ).toBe('foo');
+  describe('when mounted', () => {
+    beforeEach(() => {
+      createComponent({ method: mount });
+    });
+
+    it('should render provided title', () => {
+      expect(findStageColumnTitle().text()).toBe(defaultProps.title);
+    });
+
+    it('should render the provided groups', () => {
+      expect(findAllStageColumnGroups().length).toBe(mockGroups.length);
+    });
   });
 
-  it('should render the provided groups', () => {
-    expect(wrapper.findAll('.builds-container > ul > li').length).toBe(
-      wrapper.props('groups').length,
-    );
+  describe('when job notifies action is complete', () => {
+    beforeEach(() => {
+      createComponent({
+        method: mount,
+        props: {
+          groups: [
+            {
+              title: 'Fish',
+              size: 1,
+              jobs: [mockJob],
+            },
+          ],
+        },
+      });
+      findJobItem().vm.$emit('pipelineActionRequestComplete');
+    });
+
+    it('emits refreshPipelineGraph', () => {
+      expect(wrapper.emitted().refreshPipelineGraph).toHaveLength(1);
+    });
   });
 
-  describe('jobId', () => {
-    it('escapes job name', () => {
-      wrapper = shallowMount(stageColumnComponent, {
-        propsData: {
+  describe('job', () => {
+    beforeEach(() => {
+      createComponent({
+        method: mount,
+        props: {
           groups: [
             {
               id: 4259,
@@ -70,21 +107,29 @@ describe('stage column component', () => {
               },
             },
           ],
-          title: 'test',
-          hasTriggeredBy: false,
+          title: 'test <img src=x onerror=alert(document.domain)>',
         },
       });
+    });
 
-      expect(wrapper.find('.builds-container li').attributes('id')).toBe(
+    it('capitalizes and escapes name', () => {
+      expect(findStageColumnTitle().text()).toBe(
+        'Test &lt;img src=x onerror=alert(document.domain)&gt;',
+      );
+    });
+
+    it('escapes id', () => {
+      expect(findStageColumnGroup().attributes('id')).toBe(
         'ci-badge-&lt;img src=x onerror=alert(document.domain)&gt;',
       );
     });
   });
 
   describe('with action', () => {
-    it('renders action button', () => {
-      wrapper = shallowMount(stageColumnComponent, {
-        propsData: {
+    beforeEach(() => {
+      createComponent({
+        method: mount,
+        props: {
           groups: [
             {
               id: 4259,
@@ -105,15 +150,18 @@ describe('stage column component', () => {
           },
         },
       });
+    });
 
-      expect(wrapper.find('.js-stage-action').exists()).toBe(true);
+    it('renders action button', () => {
+      expect(findActionComponent().exists()).toBe(true);
     });
   });
 
   describe('without action', () => {
-    it('does not render action button', () => {
-      wrapper = shallowMount(stageColumnComponent, {
-        propsData: {
+    beforeEach(() => {
+      createComponent({
+        method: mount,
+        props: {
           groups: [
             {
               id: 4259,
@@ -129,8 +177,10 @@ describe('stage column component', () => {
           hasTriggeredBy: false,
         },
       });
+    });
 
-      expect(wrapper.find('.js-stage-action').exists()).toBe(false);
+    it('does not render action button', () => {
+      expect(findActionComponent().exists()).toBe(false);
     });
   });
 });