Adds tests

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>

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">

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');
+  });
 });

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'),

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: {

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: {},
       };