Commit f1826bcf authored by Rémy Coutable's avatar Rémy Coutable

Fix JS specs

Signed-off-by: default avatarRémy Coutable <remy@rymai.me>
parent 9a38c2dc
/* global Flash */
import { borderlessStatusIconEntityMap } from '../../vue_shared/ci_status_icons';
export default {
data() {
return {
builds: '',
spinner: '<span class="fa fa-spinner fa-spin"></span>',
};
},
props: {
stage: {
type: Object,
required: true,
},
},
updated() {
if (this.builds) {
this.stopDropdownClickPropagation();
}
},
methods: {
fetchBuilds(e) {
const ariaExpanded = e.currentTarget.attributes['aria-expanded'];
if (ariaExpanded && (ariaExpanded.textContent === 'true')) return null;
return this.$http.get(this.stage.dropdown_path)
.then((response) => {
this.builds = JSON.parse(response.body).html;
}, () => {
const flash = new Flash('Something went wrong on our end.');
return flash;
});
},
/**
* When the user right clicks or cmd/ctrl + click in the job name
* the dropdown should not be closed and the link should open in another tab,
* so we stop propagation of the click event inside the dropdown.
*
* Since this component is rendered multiple times per page we need to guarantee we only
* target the click event of this component.
*/
stopDropdownClickPropagation() {
$(this.$el.querySelectorAll('.js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item')).on('click', (e) => {
e.stopPropagation();
});
},
},
computed: {
buildsOrSpinner() {
return this.builds ? this.builds : this.spinner;
},
dropdownClass() {
if (this.builds) return 'js-builds-dropdown-container';
return 'js-builds-dropdown-loading builds-dropdown-loading';
},
buildStatus() {
return `Build: ${this.stage.status.label}`;
},
tooltip() {
return `has-tooltip ci-status-icon ci-status-icon-${this.stage.status.group}`;
},
triggerButtonClass() {
return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`;
},
svgHTML() {
return borderlessStatusIconEntityMap[this.stage.status.icon];
},
},
watch: {
'stage.title': function stageTitle() {
$(this.$refs.button).tooltip('destroy').tooltip();
},
},
template: `
<div>
<button
@click="fetchBuilds($event)"
:class="triggerButtonClass"
:title="stage.title"
data-placement="top"
data-toggle="dropdown"
type="button"
ref="button"
:aria-label="stage.title">
<span v-html="svgHTML" aria-hidden="true"></span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">
<div class="arrow-up" aria-hidden="true"></div>
<div
:class="dropdownClass"
class="js-builds-dropdown-list scrollable-menu"
v-html="buildsOrSpinner">
</div>
</ul>
</div>
`,
};
...@@ -41,18 +41,3 @@ export const statusIconEntityMap = { ...@@ -41,18 +41,3 @@ export const statusIconEntityMap = {
icon_status_success: SUCCESS_SVG, icon_status_success: SUCCESS_SVG,
icon_status_warning: WARNING_SVG, icon_status_warning: WARNING_SVG,
}; };
<<<<<<< HEAD
export const statusCssClasses = {
icon_status_canceled: 'canceled',
icon_status_created: 'created',
icon_status_failed: 'failed',
icon_status_manual: 'manual',
icon_status_pending: 'pending',
icon_status_running: 'running',
icon_status_skipped: 'skipped',
icon_status_success: 'success',
icon_status_warning: 'warning',
};
=======
>>>>>>> origin/master
<script> <script>
<<<<<<< HEAD
import { statusIconEntityMap, statusCssClasses } from '../../vue_shared/ci_status_icons';
=======
import { statusIconEntityMap } from '../ci_status_icons'; import { statusIconEntityMap } from '../ci_status_icons';
/** /**
...@@ -26,7 +22,6 @@ ...@@ -26,7 +22,6 @@
* - Jobs show view header * - Jobs show view header
* - Jobs show view sidebar * - Jobs show view sidebar
*/ */
>>>>>>> origin/master
export default { export default {
props: { props: {
status: { status: {
...@@ -41,11 +36,7 @@ ...@@ -41,11 +36,7 @@
}, },
cssClass() { cssClass() {
<<<<<<< HEAD
const status = statusCssClasses[this.status.icon];
=======
const status = this.status.group; const status = this.status.group;
>>>>>>> origin/master
return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`; return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`;
}, },
}, },
......
...@@ -25,10 +25,7 @@ describe('CI Icon component', () => { ...@@ -25,10 +25,7 @@ describe('CI Icon component', () => {
propsData: { propsData: {
status: { status: {
icon: 'icon_status_success', icon: 'icon_status_success',
<<<<<<< HEAD
=======
group: 'success', group: 'success',
>>>>>>> origin/master
}, },
}, },
}).$mount(); }).$mount();
...@@ -41,10 +38,7 @@ describe('CI Icon component', () => { ...@@ -41,10 +38,7 @@ describe('CI Icon component', () => {
propsData: { propsData: {
status: { status: {
icon: 'icon_status_failed', icon: 'icon_status_failed',
<<<<<<< HEAD
=======
group: 'failed', group: 'failed',
>>>>>>> origin/master
}, },
}, },
}).$mount(); }).$mount();
...@@ -57,10 +51,7 @@ describe('CI Icon component', () => { ...@@ -57,10 +51,7 @@ describe('CI Icon component', () => {
propsData: { propsData: {
status: { status: {
icon: 'icon_status_warning', icon: 'icon_status_warning',
<<<<<<< HEAD
=======
group: 'warning', group: 'warning',
>>>>>>> origin/master
}, },
}, },
}).$mount(); }).$mount();
...@@ -73,10 +64,7 @@ describe('CI Icon component', () => { ...@@ -73,10 +64,7 @@ describe('CI Icon component', () => {
propsData: { propsData: {
status: { status: {
icon: 'icon_status_pending', icon: 'icon_status_pending',
<<<<<<< HEAD
=======
group: 'pending', group: 'pending',
>>>>>>> origin/master
}, },
}, },
}).$mount(); }).$mount();
...@@ -89,10 +77,7 @@ describe('CI Icon component', () => { ...@@ -89,10 +77,7 @@ describe('CI Icon component', () => {
propsData: { propsData: {
status: { status: {
icon: 'icon_status_running', icon: 'icon_status_running',
<<<<<<< HEAD
=======
group: 'running', group: 'running',
>>>>>>> origin/master
}, },
}, },
}).$mount(); }).$mount();
...@@ -105,10 +90,7 @@ describe('CI Icon component', () => { ...@@ -105,10 +90,7 @@ describe('CI Icon component', () => {
propsData: { propsData: {
status: { status: {
icon: 'icon_status_created', icon: 'icon_status_created',
<<<<<<< HEAD
=======
group: 'created', group: 'created',
>>>>>>> origin/master
}, },
}, },
}).$mount(); }).$mount();
...@@ -121,10 +103,7 @@ describe('CI Icon component', () => { ...@@ -121,10 +103,7 @@ describe('CI Icon component', () => {
propsData: { propsData: {
status: { status: {
icon: 'icon_status_skipped', icon: 'icon_status_skipped',
<<<<<<< HEAD
=======
group: 'skipped', group: 'skipped',
>>>>>>> origin/master
}, },
}, },
}).$mount(); }).$mount();
...@@ -137,10 +116,7 @@ describe('CI Icon component', () => { ...@@ -137,10 +116,7 @@ describe('CI Icon component', () => {
propsData: { propsData: {
status: { status: {
icon: 'icon_status_canceled', icon: 'icon_status_canceled',
<<<<<<< HEAD
=======
group: 'canceled', group: 'canceled',
>>>>>>> origin/master
}, },
}, },
}).$mount(); }).$mount();
...@@ -153,10 +129,7 @@ describe('CI Icon component', () => { ...@@ -153,10 +129,7 @@ describe('CI Icon component', () => {
propsData: { propsData: {
status: { status: {
icon: 'icon_status_manual', icon: 'icon_status_manual',
<<<<<<< HEAD
=======
group: 'manual', group: 'manual',
>>>>>>> origin/master
}, },
}, },
}).$mount(); }).$mount();
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment