summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFilipa Lacerda <filipa@gitlab.com>2017-12-11 20:13:39 +0000
committerFilipa Lacerda <filipa@gitlab.com>2017-12-11 20:35:47 +0000
commit5e4681372ad6384c56d82dc8582d80f6568a0dcf (patch)
tree2d17f62fbcdb53a7005961e9f147f0b664cd1f66
parent4ccbd556d98e002b1c521fd3dd7748fe1d9c4044 (diff)
downloadgitlab-ce-5e4681372ad6384c56d82dc8582d80f6568a0dcf.tar.gz
Check for null in job tooltip title40997-pipeline-null
-rw-r--r--app/assets/javascripts/pipelines/components/graph/job_component.vue41
-rw-r--r--spec/javascripts/pipelines/graph/job_component_spec.js31
2 files changed, 61 insertions, 11 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue
index 08199b4234a..b01c799643c 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue
@@ -59,8 +59,26 @@
},
computed: {
+ status() {
+ return this.job && this.job.status ? this.job.status : {};
+ },
+
tooltipText() {
- return `${this.job.name} - ${this.job.status.label}`;
+ const textBuilder = [];
+
+ if (this.job.name) {
+ textBuilder.push(this.job.name);
+ }
+
+ if (this.job.name && this.status.label) {
+ textBuilder.push('-');
+ }
+
+ if (this.status.label) {
+ textBuilder.push(`${this.job.status.label}`);
+ }
+
+ return textBuilder.join(' ');
},
/**
@@ -78,8 +96,8 @@
<div class="ci-job-component">
<a
v-tooltip
- v-if="job.status.has_details"
- :href="job.status.details_path"
+ v-if="status.has_details"
+ :href="status.details_path"
:title="tooltipText"
:class="cssClassJobName"
data-container="body"
@@ -95,6 +113,7 @@
<div
v-else
v-tooltip
+ class="js-job-component-tooltip"
:title="tooltipText"
:class="cssClassJobName"
data-container="body"
@@ -108,18 +127,18 @@
<action-component
v-if="hasAction && !isDropdown"
- :tooltip-text="job.status.action.title"
- :link="job.status.action.path"
- :action-icon="job.status.action.icon"
- :action-method="job.status.action.method"
+ :tooltip-text="status.action.title"
+ :link="status.action.path"
+ :action-icon="status.action.icon"
+ :action-method="status.action.method"
/>
<dropdown-action-component
v-if="hasAction && isDropdown"
- :tooltip-text="job.status.action.title"
- :link="job.status.action.path"
- :action-icon="job.status.action.icon"
- :action-method="job.status.action.method"
+ :tooltip-text="status.action.title"
+ :link="status.action.path"
+ :action-icon="status.action.icon"
+ :action-method="status.action.method"
/>
</div>
</template>
diff --git a/spec/javascripts/pipelines/graph/job_component_spec.js b/spec/javascripts/pipelines/graph/job_component_spec.js
index 23c87610d83..35e36e9c353 100644
--- a/spec/javascripts/pipelines/graph/job_component_spec.js
+++ b/spec/javascripts/pipelines/graph/job_component_spec.js
@@ -113,4 +113,35 @@ describe('pipeline graph job component', () => {
component.$el.querySelector('a').classList.contains('css-class-job-name'),
).toBe(true);
});
+
+ describe('status label', () => {
+ it('should not render status label when it is not provided', () => {
+ component = mountComponent(JobComponent, {
+ job: {
+ id: 4256,
+ name: 'test',
+ status: {
+ icon: 'icon_status_success',
+ },
+ },
+ });
+
+ expect(component.$el.querySelector('.js-job-component-tooltip').getAttribute('data-original-title')).toEqual('test');
+ });
+
+ it('should not render status label when it is provided', () => {
+ component = mountComponent(JobComponent, {
+ job: {
+ id: 4256,
+ name: 'test',
+ status: {
+ icon: 'icon_status_success',
+ label: 'success',
+ },
+ },
+ });
+
+ expect(component.$el.querySelector('.js-job-component-tooltip').getAttribute('data-original-title')).toEqual('test - success');
+ });
+ });
});