Merge branch '22643-manual-job-page' into 'master'

Resolve "Improve non-triggered manual action job detail page"

Closes #22643 and #37843

See merge request gitlab-org/gitlab-ce!15991

2 files changed, 48 insertions, 36 deletions

diff --git a/spec/javascripts/jobs/header_spec.js b/spec/javascripts/jobs/header_spec.js
index 4a210faa017..83395ea451e 100644
--- a/spec/javascripts/jobs/header_spec.js
+++ b/spec/javascripts/jobs/header_spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import headerComponent from '~/jobs/components/header.vue';
+import mountComponent from '../helpers/vue_mount_component_helper';
 
 describe('Job details header', () => {
   let HeaderComponent;
@@ -35,7 +36,7 @@ describe('Job details header', () => {
       isLoading: false,
     };
 
-    vm = new HeaderComponent({ propsData: props }).$mount();
+    vm = mountComponent(HeaderComponent, props);
   });
 
   afterEach(() => {
diff --git a/spec/javascripts/vue_shared/components/header_ci_component_spec.js b/spec/javascripts/vue_shared/components/header_ci_component_spec.js
index b4553acb341..b378a0bd896 100644
--- a/spec/javascripts/vue_shared/components/header_ci_component_spec.js
+++ b/spec/javascripts/vue_shared/components/header_ci_component_spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import headerCi from '~/vue_shared/components/header_ci_component.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
 describe('Header CI Component', () => {
   let HeaderCi;
@@ -8,7 +9,6 @@ describe('Header CI Component', () => {
 
   beforeEach(() => {
     HeaderCi = Vue.extend(headerCi);
-
     props = {
       status: {
         group: 'failed',
@@ -45,54 +45,65 @@ describe('Header CI Component', () => {
       ],
       hasSidebarButton: true,
     };
-
-    vm = new HeaderCi({
-      propsData: props,
-    }).$mount();
   });
 
   afterEach(() => {
     vm.$destroy();
   });
 
-  it('should render status badge', () => {
-    expect(vm.$el.querySelector('.ci-failed')).toBeDefined();
-    expect(vm.$el.querySelector('.ci-status-icon-failed svg')).toBeDefined();
-    expect(
-      vm.$el.querySelector('.ci-failed').getAttribute('href'),
-    ).toEqual(props.status.details_path);
-  });
+  describe('render', () => {
+    beforeEach(() => {
+      vm = mountComponent(HeaderCi, props);
+    });
 
-  it('should render item name and id', () => {
-    expect(vm.$el.querySelector('strong').textContent.trim()).toEqual('job #123');
-  });
+    it('should render status badge', () => {
+      expect(vm.$el.querySelector('.ci-failed')).toBeDefined();
+      expect(vm.$el.querySelector('.ci-status-icon-failed svg')).toBeDefined();
+      expect(
+        vm.$el.querySelector('.ci-failed').getAttribute('href'),
+      ).toEqual(props.status.details_path);
+    });
 
-  it('should render timeago date', () => {
-    expect(vm.$el.querySelector('time')).toBeDefined();
-  });
+    it('should render item name and id', () => {
+      expect(vm.$el.querySelector('strong').textContent.trim()).toEqual('job #123');
+    });
 
-  it('should render user icon and name', () => {
-    expect(vm.$el.querySelector('.js-user-link').textContent.trim()).toEqual(props.user.name);
-  });
+    it('should render timeago date', () => {
+      expect(vm.$el.querySelector('time')).toBeDefined();
+    });
 
-  it('should render provided actions', () => {
-    expect(vm.$el.querySelector('.btn').tagName).toEqual('BUTTON');
-    expect(vm.$el.querySelector('.btn').textContent.trim()).toEqual(props.actions[0].label);
-    expect(vm.$el.querySelector('.link').tagName).toEqual('A');
-    expect(vm.$el.querySelector('.link').textContent.trim()).toEqual(props.actions[1].label);
-    expect(vm.$el.querySelector('.link').getAttribute('href')).toEqual(props.actions[0].path);
-  });
+    it('should render user icon and name', () => {
+      expect(vm.$el.querySelector('.js-user-link').textContent.trim()).toEqual(props.user.name);
+    });
+
+    it('should render provided actions', () => {
+      expect(vm.$el.querySelector('.btn').tagName).toEqual('BUTTON');
+      expect(vm.$el.querySelector('.btn').textContent.trim()).toEqual(props.actions[0].label);
+      expect(vm.$el.querySelector('.link').tagName).toEqual('A');
+      expect(vm.$el.querySelector('.link').textContent.trim()).toEqual(props.actions[1].label);
+      expect(vm.$el.querySelector('.link').getAttribute('href')).toEqual(props.actions[0].path);
+    });
 
-  it('should show loading icon', (done) => {
-    vm.actions[0].isLoading = true;
+    it('should show loading icon', (done) => {
+      vm.actions[0].isLoading = true;
 
-    Vue.nextTick(() => {
-      expect(vm.$el.querySelector('.btn .fa-spinner').getAttribute('style')).toBeFalsy();
-      done();
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('.btn .fa-spinner').getAttribute('style')).toBeFalsy();
+        done();
+      });
+    });
+
+    it('should render sidebar toggle button', () => {
+      expect(vm.$el.querySelector('.js-sidebar-build-toggle')).toBeDefined();
     });
   });
 
-  it('should render sidebar toggle button', () => {
-    expect(vm.$el.querySelector('.js-sidebar-build-toggle')).toBeDefined();
+  describe('shouldRenderTriggeredLabel', () => {
+    it('should rendered created keyword when the shouldRenderTriggeredLabel is false', () => {
+      vm = mountComponent(HeaderCi, { ...props, shouldRenderTriggeredLabel: false });
+
+      expect(vm.$el.textContent).toContain('created');
+      expect(vm.$el.textContent).not.toContain('triggered');
+    });
   });
 });