diff --git a/app/assets/javascripts/environments/components/environment_actions.js.es6 b/app/assets/javascripts/environments/components/environment_actions.js.es6
index 02cdb305217862d643d674105584dbd3b8141ecc..d35a04419613e91943d3f8c485062076b044613f 100644
--- a/app/assets/javascripts/environments/components/environment_actions.js.es6
+++ b/app/assets/javascripts/environments/components/environment_actions.js.es6
@@ -23,8 +23,8 @@
<div class="inline">
<div class="dropdown">
<a class="dropdown-new btn btn-default" data-toggle="dropdown">
- <span v-html='playIconSvg'></span>
- <i class="fa fa-caret-down"></i>
+ <span class="js-dropdown-play-icon-container" v-html='playIconSvg'></span>
+ <i class"=fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-align-right">
@@ -33,7 +33,9 @@
data-method="post"
rel="nofollow"
class="js-manual-action-link">
- <span v-html='playIconSvg'></span>
+
+ <span class="js-action-play-icon-container" v-html='playIconSvg'></span>
+
<span>
{{action.name}}
</span>
diff --git a/app/assets/javascripts/vue_common_component/commit.js.es6 b/app/assets/javascripts/vue_common_component/commit.js.es6
index 1f6995a645af374728d9bc831213230abb0c3e53..f6f02cc1cd0be7c01dcf91fe35568f7013b90f29 100644
--- a/app/assets/javascripts/vue_common_component/commit.js.es6
+++ b/app/assets/javascripts/vue_common_component/commit.js.es6
@@ -129,7 +129,7 @@
{{commitRef.name}}
</a>
- <div v-html="commitIconSvg" class="commit-icon"></div>
+ <div v-html="commitIconSvg" class="commit-icon js-commit-icon"></div>
<a class="commit-id monospace"
:href="commitUrl">
diff --git a/spec/javascripts/environments/environment_actions_spec.js.es6 b/spec/javascripts/environments/environment_actions_spec.js.es6
index 76e81233e89178663689f9a8f4ba527832471da4..4bae3f30bb5b00ad85e6d618f5d8e12594409a17 100644
--- a/spec/javascripts/environments/environment_actions_spec.js.es6
+++ b/spec/javascripts/environments/environment_actions_spec.js.es6
@@ -8,7 +8,7 @@ describe('Actions Component', () => {
fixture.load('environments/element.html');
});
- it('Should render a dropdown with the provided actions', () => {
+ it('should render a dropdown with the provided actions', () => {
const actionsMock = [
{
name: 'bar',
@@ -24,6 +24,7 @@ describe('Actions Component', () => {
el: document.querySelector('.test-dom-element'),
propsData: {
actions: actionsMock,
+ playIconSvg: '<svg></svg>',
},
});
@@ -34,4 +35,33 @@ describe('Actions Component', () => {
component.$el.querySelector('.dropdown-menu li a').getAttribute('href'),
).toEqual(actionsMock[0].play_path);
});
+
+ it('should render a dropdown with the provided svg', () => {
+ const actionsMock = [
+ {
+ name: 'bar',
+ play_path: 'https://gitlab.com/play',
+ },
+ {
+ name: 'foo',
+ play_path: '#',
+ },
+ ];
+
+ const component = new window.gl.environmentsList.ActionsComponent({
+ el: document.querySelector('.test-dom-element'),
+ propsData: {
+ actions: actionsMock,
+ playIconSvg: '<svg></svg>',
+ },
+ });
+
+ expect(
+ component.$el.querySelector('.js-dropdown-play-icon-container').children,
+ ).toContain('svg');
+
+ expect(
+ component.$el.querySelector('.js-action-play-icon-container').children,
+ ).toContain('svg');
+ });
});
diff --git a/spec/javascripts/environments/environment_external_url_spec.js.es6 b/spec/javascripts/environments/environment_external_url_spec.js.es6
index 35177d9b651b25f7ee9a1f9700d40cbd05d4a685..9f82567c35b70a2ce7f6530656169ccc290e5cc6 100644
--- a/spec/javascripts/environments/environment_external_url_spec.js.es6
+++ b/spec/javascripts/environments/environment_external_url_spec.js.es6
@@ -7,7 +7,7 @@ describe('External URL Component', () => {
fixture.load('environments/element.html');
});
- it('should link to the provided external_url', () => {
+ it('should link to the provided externalUrl prop', () => {
const externalURL = 'https://gitlab.com';
const component = new window.gl.environmentsList.ExternalUrlComponent({
el: document.querySelector('.test-dom-element'),
diff --git a/spec/javascripts/environments/environment_rollback_spec.js.es6 b/spec/javascripts/environments/environment_rollback_spec.js.es6
index d54ec9aa5daf586c77c29e5cc38676ae7ec9faef..77ba0ab38eca1632ac167ebb0235f54f0701c0b0 100644
--- a/spec/javascripts/environments/environment_rollback_spec.js.es6
+++ b/spec/javascripts/environments/environment_rollback_spec.js.es6
@@ -9,7 +9,7 @@ describe('Rollback Component', () => {
fixture.load('environments/element.html');
});
- it('Should link to the provided retry_url', () => {
+ it('Should link to the provided retryUrl', () => {
const component = new window.gl.environmentsList.RollbackComponent({
el: document.querySelector('.test-dom-element'),
propsData: {
@@ -21,7 +21,7 @@ describe('Rollback Component', () => {
expect(component.$el.getAttribute('href')).toEqual(retryURL);
});
- it('Should render Re-deploy label when is_last_deployment is true', () => {
+ it('Should render Re-deploy label when isLastDeployment is true', () => {
const component = new window.gl.environmentsList.RollbackComponent({
el: document.querySelector('.test-dom-element'),
propsData: {
@@ -34,7 +34,7 @@ describe('Rollback Component', () => {
});
- it('Should render Rollback label when is_last_deployment is false', () => {
+ it('Should render Rollback label when isLastDeployment is false', () => {
const component = new window.gl.environmentsList.RollbackComponent({
el: document.querySelector('.test-dom-element'),
propsData: {
diff --git a/spec/javascripts/vue_common_components/commit_spec.js.es6 b/spec/javascripts/vue_common_components/commit_spec.js.es6
index d170517dd9b6e88d696eb81839d97f0a0fdbfa54..26dfdb94aae490a2d6ba17d4e62b1b636270eb75 100644
--- a/spec/javascripts/vue_common_components/commit_spec.js.es6
+++ b/spec/javascripts/vue_common_components/commit_spec.js.es6
@@ -10,12 +10,12 @@ describe('Commit component', () => {
el: document.querySelector('.test-commit-container'),
propsData: {
tag: false,
- commit_ref: {
+ commitRef: {
name: 'master',
ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
},
- commit_url: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
- short_sha: 'b7836edd',
+ commitUrl: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
+ shortSha: 'b7836edd',
title: 'Commit message',
author: {
avatar_url: 'https://gitlab.com/uploads/user/avatar/300478/avatar.png',
@@ -34,18 +34,19 @@ describe('Commit component', () => {
props = {
tag: true,
- commit_ref: {
+ commitRef: {
name: 'master',
ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
},
- commit_url: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
- short_sha: 'b7836edd',
+ commitUrl: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
+ shortSha: 'b7836edd',
title: 'Commit message',
author: {
avatar_url: 'https://gitlab.com/uploads/user/avatar/300478/avatar.png',
web_url: 'https://gitlab.com/jschatz1',
username: 'jschatz1',
},
+ commitIconSvg: '<svg></svg>',
};
component = new window.gl.CommitComponent({
@@ -59,20 +60,24 @@ describe('Commit component', () => {
});
it('should render a link to the ref url', () => {
- expect(component.$el.querySelector('.branch-name').getAttribute('href')).toEqual(props.commit_ref.ref_url);
+ expect(component.$el.querySelector('.branch-name').getAttribute('href')).toEqual(props.commitRef.ref_url);
});
it('should render the ref name', () => {
- expect(component.$el.querySelector('.branch-name').textContent).toContain(props.commit_ref.name);
+ expect(component.$el.querySelector('.branch-name').textContent).toContain(props.commitRef.name);
});
it('should render the commit short sha with a link to the commit url', () => {
- expect(component.$el.querySelector('.commit-id').getAttribute('href')).toEqual(props.commit_url);
- expect(component.$el.querySelector('.commit-id').textContent).toContain(props.short_sha);
+ expect(component.$el.querySelector('.commit-id').getAttribute('href')).toEqual(props.commitUrl);
+ expect(component.$el.querySelector('.commit-id').textContent).toContain(props.shortSha);
+ });
+
+ it('should render the given commitIconSvg', () => {
+ expect(component.$el.querySelector('.js-commit-icon').children).toContain('svg');
});
describe('Given commit title and author props', () => {
- it('Should render a link to the author profile', () => {
+ it('should render a link to the author profile', () => {
expect(
component.$el.querySelector('.commit-title .avatar-image-container').getAttribute('href'),
).toEqual(props.author.web_url);
@@ -91,7 +96,7 @@ describe('Commit component', () => {
it('should render the commit title', () => {
expect(
component.$el.querySelector('a.commit-row-message').getAttribute('href'),
- ).toEqual(props.commit_url);
+ ).toEqual(props.commitUrl);
expect(
component.$el.querySelector('a.commit-row-message').textContent,
).toContain(props.title);
@@ -99,16 +104,16 @@ describe('Commit component', () => {
});
describe('When commit title is not provided', () => {
- it('Should render default message', () => {
+ it('should render default message', () => {
fixture.set('<div class="test-commit-container"></div>');
props = {
tag: false,
- commit_ref: {
+ commitRef: {
name: 'master',
ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
},
- commit_url: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
- short_sha: 'b7836edd',
+ commitUrl: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
+ shortSha: 'b7836edd',
title: null,
author: {},
};