Merge branch '22539-display-folders' into 'master'

Resolve "Display "folders" for environments"

## What does this MR do?
Adds the ability to show the grouped environments inside "folders".
Adds several reusable vue components in order to accomplish the recursive tree data structure presented.

For the individual components, Jasmine tests were added.
For the ones that depend of an API response, rspec tests are used.


## Screenshots (if relevant)
![Screen_Shot_2016-11-16_at_02.00.13](/uploads/1278012c8639b999b53f080728d283e1/Screen_Shot_2016-11-16_at_02.00.13.png)
![Screen_Shot_2016-11-16_at_02.00.25](/uploads/a3d65416ddb553e1b8f0f4c8897a75dc/Screen_Shot_2016-11-16_at_02.00.25.png)
![Screen_Shot_2016-10-17_at_16.08.50](/uploads/af63efe1d2cbd5fc069408622ef4b607/Screen_Shot_2016-10-17_at_16.08.50.png)


![environments](/uploads/b5a1801766d82ab176fc60f96b6968cb/environments.gif)
## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG.md) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [x] Added for this feature/bug
  - [ ] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
Closes #22539

See merge request !7015

11 files changed, 701 insertions, 0 deletions

diff --git a/spec/javascripts/environments/environment_actions_spec.js.es6 b/spec/javascripts/environments/environment_actions_spec.js.es6
new file mode 100644
index 00000000000..c9ac7a73fd0
--- /dev/null
+++ b/spec/javascripts/environments/environment_actions_spec.js.es6
@@ -0,0 +1,37 @@
+//= require vue
+//= require environments/components/environment_actions
+
+describe('Actions Component', () => {
+  fixture.preload('environments/element.html');
+
+  beforeEach(() => {
+    fixture.load('environments/element.html');
+  });
+
+  it('Should render a dropdown with the provided actions', () => {
+    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,
+      },
+    });
+
+    expect(
+      component.$el.querySelectorAll('.dropdown-menu li').length
+    ).toEqual(actionsMock.length);
+    expect(
+      component.$el.querySelector('.dropdown-menu li a').getAttribute('href')
+    ).toEqual(actionsMock[0].play_path);
+  });
+});
diff --git a/spec/javascripts/environments/environment_external_url_spec.js.es6 b/spec/javascripts/environments/environment_external_url_spec.js.es6
new file mode 100644
index 00000000000..156506ef28f
--- /dev/null
+++ b/spec/javascripts/environments/environment_external_url_spec.js.es6
@@ -0,0 +1,22 @@
+//= require vue
+//= require environments/components/environment_external_url
+
+describe('External URL Component', () => {
+  fixture.preload('environments/element.html');
+  beforeEach(() => {
+    fixture.load('environments/element.html');
+  });
+
+  it('should link to the provided external_url', () => {
+    const externalURL = 'https://gitlab.com';
+    const component = new window.gl.environmentsList.ExternalUrlComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        external_url: externalURL,
+      },
+    });
+
+    expect(component.$el.getAttribute('href')).toEqual(externalURL);
+    expect(component.$el.querySelector('fa-external-link')).toBeDefined();
+  });
+});
diff --git a/spec/javascripts/environments/environment_item_spec.js.es6 b/spec/javascripts/environments/environment_item_spec.js.es6
new file mode 100644
index 00000000000..54c93367b17
--- /dev/null
+++ b/spec/javascripts/environments/environment_item_spec.js.es6
@@ -0,0 +1,215 @@
+//= require vue
+//= require environments/components/environment_item
+
+describe('Environment item', () => {
+  fixture.preload('environments/table.html');
+  beforeEach(() => {
+    fixture.load('environments/table.html');
+  });
+
+  describe('When item is folder', () => {
+    let mockItem;
+    let component;
+
+    beforeEach(() => {
+      mockItem = {
+        name: 'review',
+        children: [
+          {
+            name: 'review-app',
+            id: 1,
+            state: 'available',
+            external_url: '',
+            last_deployment: {},
+            created_at: '2016-11-07T11:11:16.525Z',
+            updated_at: '2016-11-10T15:55:58.778Z',
+          },
+          {
+            name: 'production',
+            id: 2,
+            state: 'available',
+            external_url: '',
+            last_deployment: {},
+            created_at: '2016-11-07T11:11:16.525Z',
+            updated_at: '2016-11-10T15:55:58.778Z',
+          },
+        ],
+      };
+
+      component = new window.gl.environmentsList.EnvironmentItem({
+        el: document.querySelector('tr#environment-row'),
+        propsData: {
+          model: mockItem,
+          toggleRow: () => {},
+          canCreateDeployment: false,
+          canReadEnvironment: true,
+        },
+      });
+    });
+
+    it('Should render folder icon and name', () => {
+      expect(component.$el.querySelector('.folder-name').textContent).toContain(mockItem.name);
+      expect(component.$el.querySelector('.folder-icon')).toBeDefined();
+    });
+
+    it('Should render the number of children in a badge', () => {
+      expect(component.$el.querySelector('.folder-name .badge').textContent).toContain(mockItem.children.length);
+    });
+  });
+
+  describe('when item is not folder', () => {
+    let environment;
+    let component;
+
+    beforeEach(() => {
+      environment = {
+        id: 31,
+        name: 'production',
+        state: 'stopped',
+        external_url: 'http://external.com',
+        environment_type: null,
+        last_deployment: {
+          id: 66,
+          iid: 6,
+          sha: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+          ref: {
+            name: 'master',
+            ref_path: 'root/ci-folders/tree/master',
+          },
+          tag: true,
+          'last?': true,
+          user: {
+            name: 'Administrator',
+            username: 'root',
+            id: 1,
+            state: 'active',
+            avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+            web_url: 'http://localhost:3000/root',
+          },
+          commit: {
+            id: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+            short_id: '500aabcb',
+            title: 'Update .gitlab-ci.yml',
+            author_name: 'Administrator',
+            author_email: 'admin@example.com',
+            created_at: '2016-11-07T18:28:13.000+00:00',
+            message: 'Update .gitlab-ci.yml',
+            author: {
+              name: 'Administrator',
+              username: 'root',
+              id: 1,
+              state: 'active',
+              avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+              web_url: 'http://localhost:3000/root',
+            },
+            commit_path: '/root/ci-folders/tree/500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+          },
+          deployable: {
+            id: 1279,
+            name: 'deploy',
+            build_path: '/root/ci-folders/builds/1279',
+            retry_path: '/root/ci-folders/builds/1279/retry',
+          },
+          manual_actions: [
+            {
+              name: 'action',
+              play_path: '/play',
+            },
+          ],
+        },
+        'stoppable?': true,
+        environment_path: 'root/ci-folders/environments/31',
+        created_at: '2016-11-07T11:11:16.525Z',
+        updated_at: '2016-11-10T15:55:58.778Z',
+      };
+
+      component = new window.gl.environmentsList.EnvironmentItem({
+        el: document.querySelector('tr#environment-row'),
+        propsData: {
+          model: environment,
+          toggleRow: () => {},
+          canCreateDeployment: true,
+          canReadEnvironment: true,
+        },
+      });
+    });
+
+    it('should render environment name', () => {
+      expect(component.$el.querySelector('.environment-name').textContent).toEqual(environment.name);
+    });
+
+    describe('With deployment', () => {
+      it('should render deployment internal id', () => {
+        expect(
+          component.$el.querySelector('.deployment-column span').textContent
+        ).toContain(environment.last_deployment.iid);
+
+        expect(
+          component.$el.querySelector('.deployment-column span').textContent
+        ).toContain('#');
+      });
+
+      describe('With user information', () => {
+        it('should render user avatar with link to profile', () => {
+          expect(
+            component.$el.querySelector('.js-deploy-user-container').getAttribute('href')
+          ).toEqual(environment.last_deployment.user.web_url);
+        });
+      });
+
+      describe('With build url', () => {
+        it('Should link to build url provided', () => {
+          expect(
+            component.$el.querySelector('.build-link').getAttribute('href')
+          ).toEqual(environment.last_deployment.deployable.build_path);
+        });
+
+        it('Should render deployable name and id', () => {
+          expect(
+            component.$el.querySelector('.build-link').getAttribute('href')
+          ).toEqual(environment.last_deployment.deployable.build_path);
+        });
+      });
+
+      describe('With commit information', () => {
+        it('should render commit component', () => {
+          expect(
+            component.$el.querySelector('.js-commit-component')
+          ).toBeDefined();
+        });
+      });
+    });
+
+    describe('With manual actions', () => {
+      it('Should render actions component', () => {
+        expect(
+          component.$el.querySelector('.js-manual-actions-container')
+        ).toBeDefined();
+      });
+    });
+
+    describe('With external URL', () => {
+      it('should render external url component', () => {
+        expect(
+          component.$el.querySelector('.js-external-url-container')
+        ).toBeDefined();
+      });
+    });
+
+    describe('With stop action', () => {
+      it('Should render stop action component', () => {
+        expect(
+          component.$el.querySelector('.js-stop-component-container')
+        ).toBeDefined();
+      });
+    });
+
+    describe('With retry action', () => {
+      it('Should render rollback component', () => {
+        expect(
+          component.$el.querySelector('.js-rollback-component-container')
+        ).toBeDefined();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/environments/environment_rollback_spec.js.es6 b/spec/javascripts/environments/environment_rollback_spec.js.es6
new file mode 100644
index 00000000000..29449bbbd9e
--- /dev/null
+++ b/spec/javascripts/environments/environment_rollback_spec.js.es6
@@ -0,0 +1,48 @@
+//= require vue
+//= require environments/components/environment_rollback
+describe('Rollback Component', () => {
+  fixture.preload('environments/element.html');
+
+  const retryURL = 'https://gitlab.com/retry';
+
+  beforeEach(() => {
+    fixture.load('environments/element.html');
+  });
+
+  it('Should link to the provided retry_url', () => {
+    const component = new window.gl.environmentsList.RollbackComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        retry_url: retryURL,
+        is_last_deployment: true,
+      },
+    });
+
+    expect(component.$el.getAttribute('href')).toEqual(retryURL);
+  });
+
+  it('Should render Re-deploy label when is_last_deployment is true', () => {
+    const component = new window.gl.environmentsList.RollbackComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        retry_url: retryURL,
+        is_last_deployment: true,
+      },
+    });
+
+    expect(component.$el.querySelector('span').textContent).toContain('Re-deploy');
+  });
+
+
+  it('Should render Rollback label when is_last_deployment is false', () => {
+    const component = new window.gl.environmentsList.RollbackComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        retry_url: retryURL,
+        is_last_deployment: false,
+      },
+    });
+
+    expect(component.$el.querySelector('span').textContent).toContain('Rollback');
+  });
+});
diff --git a/spec/javascripts/environments/environment_stop_spec.js.es6 b/spec/javascripts/environments/environment_stop_spec.js.es6
new file mode 100644
index 00000000000..b842be4da61
--- /dev/null
+++ b/spec/javascripts/environments/environment_stop_spec.js.es6
@@ -0,0 +1,28 @@
+//= require vue
+//= require environments/components/environment_stop
+describe('Stop Component', () => {
+  fixture.preload('environments/element.html');
+
+  let stopURL;
+  let component;
+
+  beforeEach(() => {
+    fixture.load('environments/element.html');
+
+    stopURL = '/stop';
+    component = new window.gl.environmentsList.StopComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        stop_url: stopURL,
+      },
+    });
+  });
+
+  it('should link to the provided URL', () => {
+    expect(component.$el.getAttribute('href')).toEqual(stopURL);
+  });
+
+  it('should have a data-confirm attribute', () => {
+    expect(component.$el.getAttribute('data-confirm')).toEqual('Are you sure you want to stop this environment?');
+  });
+});
diff --git a/spec/javascripts/environments/environments_store_spec.js.es6 b/spec/javascripts/environments/environments_store_spec.js.es6
new file mode 100644
index 00000000000..82d9599f372
--- /dev/null
+++ b/spec/javascripts/environments/environments_store_spec.js.es6
@@ -0,0 +1,69 @@
+//= require vue
+//= require environments/stores/environments_store
+//= require ./mock_data
+/* globals environmentsList */
+(() => {
+  beforeEach(() => {
+    gl.environmentsList.EnvironmentsStore.create();
+  });
+
+  describe('Store', () => {
+    it('should start with a blank state', () => {
+      expect(gl.environmentsList.EnvironmentsStore.state.environments.length).toBe(0);
+      expect(gl.environmentsList.EnvironmentsStore.state.stoppedCounter).toBe(0);
+      expect(gl.environmentsList.EnvironmentsStore.state.availableCounter).toBe(0);
+    });
+
+    describe('store environments', () => {
+      beforeEach(() => {
+        gl.environmentsList.EnvironmentsStore.storeEnvironments(environmentsList);
+      });
+
+      it('should count stopped environments and save the count in the state', () => {
+        expect(gl.environmentsList.EnvironmentsStore.state.stoppedCounter).toBe(1);
+      });
+
+      it('should count available environments and save the count in the state', () => {
+        expect(gl.environmentsList.EnvironmentsStore.state.availableCounter).toBe(3);
+      });
+
+      it('should store environments with same environment_type as sibilings', () => {
+        expect(gl.environmentsList.EnvironmentsStore.state.environments.length).toBe(3);
+
+        const parentFolder = gl.environmentsList.EnvironmentsStore.state.environments
+        .filter(env => env.children && env.children.length > 0);
+
+        expect(parentFolder[0].children.length).toBe(2);
+        expect(parentFolder[0].children[0].environment_type).toBe('review');
+        expect(parentFolder[0].children[1].environment_type).toBe('review');
+        expect(parentFolder[0].children[0].name).toBe('test-environment');
+        expect(parentFolder[0].children[1].name).toBe('test-environment-1');
+      });
+
+      it('should sort the environments alphabetically', () => {
+        const { environments } = gl.environmentsList.EnvironmentsStore.state;
+
+        expect(environments[0].name).toBe('production');
+        expect(environments[1].name).toBe('review');
+        expect(environments[1].children[0].name).toBe('test-environment');
+        expect(environments[1].children[1].name).toBe('test-environment-1');
+        expect(environments[2].name).toBe('review_app');
+      });
+    });
+
+    describe('toggleFolder', () => {
+      beforeEach(() => {
+        gl.environmentsList.EnvironmentsStore.storeEnvironments(environmentsList);
+      });
+
+      it('should toggle the open property for the given environment', () => {
+        gl.environmentsList.EnvironmentsStore.toggleFolder('review');
+
+        const { environments } = gl.environmentsList.EnvironmentsStore.state;
+        const environment = environments.filter(env => env['vue-isChildren'] === true && env.name === 'review');
+
+        expect(environment[0].isOpen).toBe(true);
+      });
+    });
+  });
+})();
diff --git a/spec/javascripts/environments/mock_data.js.es6 b/spec/javascripts/environments/mock_data.js.es6
new file mode 100644
index 00000000000..9e16bc3e6a5
--- /dev/null
+++ b/spec/javascripts/environments/mock_data.js.es6
@@ -0,0 +1,135 @@
+/* eslint-disable no-unused-vars */
+const environmentsList = [
+  {
+    id: 31,
+    name: 'production',
+    state: 'available',
+    external_url: 'https://www.gitlab.com',
+    environment_type: null,
+    last_deployment: {
+      id: 64,
+      iid: 5,
+      sha: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+      ref: {
+        name: 'master',
+        ref_url: 'http://localhost:3000/root/ci-folders/tree/master',
+      },
+      tag: false,
+      'last?': true,
+      user: {
+        name: 'Administrator',
+        username: 'root',
+        id: 1,
+        state: 'active',
+        avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+        web_url: 'http://localhost:3000/root',
+      },
+      commit: {
+        id: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+        short_id: '500aabcb',
+        title: 'Update .gitlab-ci.yml',
+        author_name: 'Administrator',
+        author_email: 'admin@example.com',
+        created_at: '2016-11-07T18:28:13.000+00:00',
+        message: 'Update .gitlab-ci.yml',
+        author: {
+          name: 'Administrator',
+          username: 'root',
+          id: 1,
+          state: 'active',
+          avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+          web_url: 'http://localhost:3000/root',
+        },
+        commit_path: '/root/ci-folders/tree/500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+      },
+      deployable: {
+        id: 1278,
+        name: 'build',
+        build_path: '/root/ci-folders/builds/1278',
+        retry_path: '/root/ci-folders/builds/1278/retry',
+      },
+      manual_actions: [],
+    },
+    'stoppable?': true,
+    environment_path: '/root/ci-folders/environments/31',
+    created_at: '2016-11-07T11:11:16.525Z',
+    updated_at: '2016-11-07T11:11:16.525Z',
+  },
+  {
+    id: 32,
+    name: 'review_app',
+    state: 'stopped',
+    external_url: 'https://www.gitlab.com',
+    environment_type: null,
+    last_deployment: {
+      id: 64,
+      iid: 5,
+      sha: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+      ref: {
+        name: 'master',
+        ref_url: 'http://localhost:3000/root/ci-folders/tree/master',
+      },
+      tag: false,
+      'last?': true,
+      user: {
+        name: 'Administrator',
+        username: 'root',
+        id: 1,
+        state: 'active',
+        avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+        web_url: 'http://localhost:3000/root',
+      },
+      commit: {
+        id: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+        short_id: '500aabcb',
+        title: 'Update .gitlab-ci.yml',
+        author_name: 'Administrator',
+        author_email: 'admin@example.com',
+        created_at: '2016-11-07T18:28:13.000+00:00',
+        message: 'Update .gitlab-ci.yml',
+        author: {
+          name: 'Administrator',
+          username: 'root',
+          id: 1,
+          state: 'active',
+          avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+          web_url: 'http://localhost:3000/root',
+        },
+        commit_path: '/root/ci-folders/tree/500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+      },
+      deployable: {
+        id: 1278,
+        name: 'build',
+        build_path: '/root/ci-folders/builds/1278',
+        retry_path: '/root/ci-folders/builds/1278/retry',
+      },
+      manual_actions: [],
+    },
+    'stoppable?': false,
+    environment_path: '/root/ci-folders/environments/31',
+    created_at: '2016-11-07T11:11:16.525Z',
+    updated_at: '2016-11-07T11:11:16.525Z',
+  },
+  {
+    id: 33,
+    name: 'test-environment',
+    state: 'available',
+    environment_type: 'review',
+    last_deployment: null,
+    'stoppable?': true,
+    environment_path: '/root/ci-folders/environments/31',
+    created_at: '2016-11-07T11:11:16.525Z',
+    updated_at: '2016-11-07T11:11:16.525Z',
+  },
+  {
+    id: 34,
+    name: 'test-environment-1',
+    state: 'available',
+    environment_type: 'review',
+    last_deployment: null,
+    'stoppable?': true,
+    environment_path: '/root/ci-folders/environments/31',
+    created_at: '2016-11-07T11:11:16.525Z',
+    updated_at: '2016-11-07T11:11:16.525Z',
+  },
+];
diff --git a/spec/javascripts/fixtures/environments/element.html.haml b/spec/javascripts/fixtures/environments/element.html.haml
new file mode 100644
index 00000000000..8d7aeb23356
--- /dev/null
+++ b/spec/javascripts/fixtures/environments/element.html.haml
@@ -0,0 +1 @@
+.test-dom-element
diff --git a/spec/javascripts/fixtures/environments/environments.html.haml b/spec/javascripts/fixtures/environments/environments.html.haml
new file mode 100644
index 00000000000..d89bc50c1f0
--- /dev/null
+++ b/spec/javascripts/fixtures/environments/environments.html.haml
@@ -0,0 +1,9 @@
+%div
+  #environments-list-view{ data: { environments_data: "https://gitlab.com/foo/environments",
+    "can-create-deployment" => "true",
+    "can-read-environment" => "true",
+    "can-create-environment" => "true",
+    "project-environments-path" => "https://gitlab.com/foo/environments",
+    "project-stopped-environments-path" => "https://gitlab.com/foo/environments?scope=stopped",
+    "new-environment-path" => "https://gitlab.com/foo/environments/new",
+    "help-page-path" => "https://gitlab.com/help_page"}}
diff --git a/spec/javascripts/fixtures/environments/table.html.haml b/spec/javascripts/fixtures/environments/table.html.haml
new file mode 100644
index 00000000000..1ea1725c561
--- /dev/null
+++ b/spec/javascripts/fixtures/environments/table.html.haml
@@ -0,0 +1,11 @@
+%table
+  %thead
+    %tr
+      %th Environment
+      %th Last deployment
+      %th Build
+      %th Commit
+      %th
+      %th
+  %tbody
+    %tr#environment-row
diff --git a/spec/javascripts/vue_common_components/commit_spec.js.es6 b/spec/javascripts/vue_common_components/commit_spec.js.es6
new file mode 100644
index 00000000000..0e3b82967c1
--- /dev/null
+++ b/spec/javascripts/vue_common_components/commit_spec.js.es6
@@ -0,0 +1,126 @@
+//= require vue_common_component/commit
+
+describe('Commit component', () => {
+  let props;
+  let component;
+
+  it('should render a code-fork icon if it does not represent a tag', () => {
+    fixture.set('<div class="test-commit-container"></div>');
+    component = new window.gl.CommitComponent({
+      el: document.querySelector('.test-commit-container'),
+      propsData: {
+        tag: false,
+        ref: {
+          name: 'master',
+          ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
+        },
+        commit_url: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
+        short_sha: 'b7836edd',
+        title: 'Commit message',
+        author: {
+          avatar_url: 'https://gitlab.com/uploads/user/avatar/300478/avatar.png',
+          web_url: 'https://gitlab.com/jschatz1',
+          username: 'jschatz1',
+        },
+      },
+    });
+
+    expect(component.$el.querySelector('.icon-container i').classList).toContain('fa-code-fork');
+  });
+
+  describe('Given all the props', () => {
+    beforeEach(() => {
+      fixture.set('<div class="test-commit-container"></div>');
+
+      props = {
+        tag: true,
+        ref: {
+          name: 'master',
+          ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
+        },
+        commit_url: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
+        short_sha: 'b7836edd',
+        title: 'Commit message',
+        author: {
+          avatar_url: 'https://gitlab.com/uploads/user/avatar/300478/avatar.png',
+          web_url: 'https://gitlab.com/jschatz1',
+          username: 'jschatz1',
+        },
+      };
+
+      component = new window.gl.CommitComponent({
+        el: document.querySelector('.test-commit-container'),
+        propsData: props,
+      });
+    });
+
+    it('should render a tag icon if it represents a tag', () => {
+      expect(component.$el.querySelector('.icon-container i').classList).toContain('fa-tag');
+    });
+
+    it('should render a link to the ref url', () => {
+      expect(component.$el.querySelector('.branch-name').getAttribute('href')).toEqual(props.ref.ref_url);
+    });
+
+    it('should render the ref name', () => {
+      expect(component.$el.querySelector('.branch-name').textContent).toContain(props.ref.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);
+    });
+
+    describe('Given commit title and author props', () => {
+      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);
+      });
+
+      it('Should render the author avatar with title and alt attributes', () => {
+        expect(
+          component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('title')
+        ).toContain(props.author.username);
+        expect(
+          component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('alt')
+        ).toContain(`${props.author.username}'s avatar`);
+      });
+    });
+
+    it('should render the commit title', () => {
+      expect(
+        component.$el.querySelector('a.commit-row-message').getAttribute('href')
+      ).toEqual(props.commit_url);
+      expect(
+        component.$el.querySelector('a.commit-row-message').textContent
+      ).toContain(props.title);
+    });
+  });
+
+  describe('When commit title is not provided', () => {
+    it('Should render default message', () => {
+      fixture.set('<div class="test-commit-container"></div>');
+      props = {
+        tag: false,
+        ref: {
+          name: 'master',
+          ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
+        },
+        commit_url: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
+        short_sha: 'b7836edd',
+        title: null,
+        author: {},
+      };
+
+      component = new window.gl.CommitComponent({
+        el: document.querySelector('.test-commit-container'),
+        propsData: props,
+      });
+
+      expect(
+        component.$el.querySelector('.commit-title span').textContent
+      ).toContain('Cant find HEAD commit for this branch');
+    });
+  });
+});