Adds tests

Adds tests.
Changes instance into a constructor

Adds tests for environments component

Adds tests assertations

Adds external URL test

Adds tests for Rollback component

Adds tests for stop component

Adds tests for actions component
Fix environment item

Init environment item tests

19 files changed, 825 insertions, 209 deletions

diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6
new file mode 100644
index 00000000000..9cdc17e8589
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment.js.es6
@@ -0,0 +1,190 @@
+//= require vue
+//= require vue-resource
+//= require_tree ../services/
+//= require ./environment_item
+
+/* globals Vue, EnvironmentsService */
+/* eslint-disable no-param-reassign */
+
+$(() => {
+  window.gl = window.gl || {};
+
+  const filterState = state => environment => environment.state === state && environment;
+
+  // recursiveMap :: (Function, Array) -> Array
+  const recursiveMap = (fn, arr) => arr.map((item) => {
+    if (item.children) {
+      const filteredChildren = recursiveMap(fn, item.children).filter(Boolean);
+      if (filteredChildren.length) {
+        item.children = filteredChildren;
+        return item;
+      }
+    }
+    return fn(item);
+  }).filter(Boolean);
+
+  window.gl.environmentsList.EnvironmentsComponent = Vue.extend({
+    props: ['store'],
+
+    components: {
+      'environment-item': window.gl.environmentsList.EnvironmentItem,
+    },
+
+    data() {
+      const environmentsListApp = document.querySelector('#environments-list-view');
+
+      return {
+        state: this.store.state,
+        endpoint: environmentsListApp.dataset.environmentsDataEndpoint,
+        canCreateDeployment: environmentsListApp.dataset.canCreateDeployment,
+        canReadEnvironment: environmentsListApp.dataset.canReadEnvironment,
+        canCreateEnvironment: environmentsListApp.dataset.canCreateEnvironment,
+        projectEnvironmentsPath: environmentsListApp.dataset.projectEnvironmentsPath,
+        projectStoppedEnvironmentsPath: environmentsListApp.dataset.projectStoppedEnvironmentsPath,
+        newEnvironmentPath: environmentsListApp.dataset.newEnvironmentPath,
+        helpPagePath: environmentsListApp.dataset.helpPagePath,
+        loading: true,
+        visibility: 'available',
+      };
+    },
+
+    computed: {
+      filteredEnvironments() {
+        return recursiveMap(filterState(this.visibility), this.state.environments);
+      },
+
+      scope() {
+        return this.$options.getQueryParameter('scope');
+      },
+
+      canReadEnvironmentParsed() {
+        return this.$options.convertPermissionToBoolean(this.canReadEnvironment);
+      },
+
+      canCreateDeploymentParsed() {
+        return this.$options.convertPermissionToBoolean(this.canCreateDeployment);
+      },
+    },
+
+    created() {
+      window.gl.environmentsService = new EnvironmentsService(this.endpoint);
+
+      const scope = this.$options.getQueryParameter('scope');
+      if (scope) {
+        this.visibility = scope;
+      }
+    },
+
+    /**
+     * Fetches all the environmnets and stores them.
+     * Toggles loading property.
+     */
+    ready() {
+      window.gl.environmentsService.all().then(resp => resp.json()).then((json) => {
+        this.store.storeEnvironments(json);
+        this.loading = false;
+      });
+    },
+
+    /**
+     * Transforms the url parameter into an object and
+     * returns the one requested.
+     *
+     * @param  {String} param
+     * @returns {String}       The value of the requested parameter.
+     */
+    getQueryParameter(parameter) {
+      return window.location.search.substring(1).split('&').reduce((acc, param) => {
+        const paramSplited = param.split('=');
+        acc[paramSplited[0]] = paramSplited[1];
+        return acc;
+      }, {})[parameter];
+    },
+
+    /**
+     * Converts permission provided as strings to booleans.
+     * @param  {String} string
+     * @returns {Boolean}
+     */
+    convertPermissionToBoolean(string) {
+      if (string === 'true') {
+        return true;
+      }
+      return false;
+    },
+
+    template: `
+      <div>
+        <div class="top-area">
+          <ul v-if="!isLoading" class="nav-links">
+            <li v-bind:class="{ 'active': scope === undefined}">
+              <a :href="projectEnvironmentsPath">
+                Available
+                <span class="badge js-available-environments-count">
+                  {{state.availableCounter}}
+                </span>
+              </a>
+            </li>
+            <li v-bind:class="{ 'active': scope === 'stopped'}">
+              <a :href="projectStoppedEnvironmentsPath">
+                Stopped
+                <span class="badge js-stopped-environments-count">
+                  {{state.stoppedCounter}}
+                </span>
+              </a>
+            </li>
+          </ul>
+          <div v-if="canCreateEnvironment && !loading" class="nav-controls">
+            <a :href="newEnvironmentPath" class="btn btn-create">
+              New envrionment
+            </a>
+          </div>
+        </div>
+
+        <div class="environments-container">
+          <div class="environments-list-loading text-center" v-if="loading">
+            <i class="fa fa-spinner spin"></i>
+          </div>
+
+          <div class="blank-state blank-state-no-icon" v-if="!loading && state.environments.length === 0">
+            <h2 class="blank-state-title">
+              You don't have any environments right now.
+            </h2>
+            <p class="blank-state-text">
+              Environments are places where code gets deployed, such as staging or production.
+
+              <br />
+
+              <a :href="helpPagePath">
+                Read more about environments
+              </a>
+              <a v-if="canCreateEnvironment" :href="newEnvironmentPath" class="btn btn-create">
+                New Environment
+              </a>
+            </p>
+          </div>
+
+          <div class="table-holder" v-if="!loading && state.environments.length > 0">
+            <table class="table ci-table environments">
+              <thead>
+                <th>Environment</th>
+                <th>Last deployment</th>
+                <th>Build</th>
+                <th>Commit</th>
+                <th></th>
+                <th class="hidden-xs"></th>
+              </thead>
+              <tbody>
+                <tr is="environment-item"
+                  v-for="model in filteredEnvironments"
+                  :model="model"
+                  :can-create-deployment="canCreateDeploymentParsed"
+                  :can-read-environment="canReadEnvironmentParsed">
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    `,
+  });
+});
diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6
index 1451c1f2a56..ebe31cbc26b 100644
--- a/app/assets/javascripts/environments/components/environment_item.js.es6
+++ b/app/assets/javascripts/environments/components/environment_item.js.es6
@@ -31,7 +31,7 @@
       'rollback-component': window.gl.environmentsList.RollbackComponent,
     },
 
-    props: ['model', 'can-create-deployment', 'can-create-deployment', 'can-read-environment'],
+    props: ['model', 'can-create-deployment', 'can-read-environment'],
 
     data() {
       return {
@@ -107,7 +107,7 @@
        */
       hasManualActions() {
         return this.$options.hasKey(this.model, 'manual_actions') &&
-          this.model.manual_actions.length;
+          this.model.manual_actions.length > 0;
       },
 
       /**
@@ -143,17 +143,6 @@
       },
 
       /**
-       * Verifies if the environment has any manual actions to be rendered.
-       *
-       * @returns {Boolean}
-       */
-      hasManualActions() {
-        return this.model.last_deployment &&
-          this.model.last_deployment.manual_actions &&
-          this.model.last_deployment.manual_actions.length > 0;
-      },
-
-      /**
        * Returns the manual actions with the name parsed.
        *
        * @returns {Array.<Object>}
@@ -359,25 +348,25 @@
         <td class="hidden-xs col-sm-3">
           <div v-if="!isFolder">
             <div v-if="hasManualActions && canCreateDeployment" class="inline">
-              <actions-component 
+              <actions-component
                 :actions="manualActions">
               </actions-component>
             </div>
 
             <div v-if="model.external_url && canReadEnvironment" class="inline">
-              <external-url-component 
+              <external-url-component
                 :external_url="model.external_url">
               </external_url-component>
             </div>
 
             <div v-if="isStoppable && canCreateDeployment" class="inline">
-              <stop-component 
+              <stop-component
                 :stop_url="model.environment_url">
               </stop-component>
             </div>
 
             <div v-if="canRetry && canCreateDeployment" class="inline">
-              <rollback-component 
+              <rollback-component
                 :is_last_deployment="isLastDeployment"
                 :retry_url="retryUrl">
                 </rollback-component>
diff --git a/app/assets/javascripts/environments/components/environment_stop.js.es6 b/app/assets/javascripts/environments/components/environment_stop.js.es6
index c15b669c9c1..1ae02d8080c 100644
--- a/app/assets/javascripts/environments/components/environment_stop.js.es6
+++ b/app/assets/javascripts/environments/components/environment_stop.js.es6
@@ -13,12 +13,18 @@
       },
     },
 
+    methods: {
+      openConfirmDialog() {
+        return window.confirm('Are you sure you want to stop this environment?');
+      },
+    },
+
     template: `
-      <a class="btn stop-env-link" 
-        :href="stop_url" 
+      <a v-on:click="openConfirmDialog"
+        class="btn stop-env-link"
+        :href="stop_url"
         method="post"
-        rel="nofollow", 
-        data-confirm="Are you sure you want to stop this environment?">
+        rel="nofollow">
         <i class="fa fa-stop stop-env-icon"></i>
       </a>
     `,
diff --git a/app/assets/javascripts/environments/environments_bundle.js.es6 b/app/assets/javascripts/environments/environments_bundle.js.es6
index 7dff4d3ac2a..20eee7976ec 100644
--- a/app/assets/javascripts/environments/environments_bundle.js.es6
+++ b/app/assets/javascripts/environments/environments_bundle.js.es6
@@ -1,198 +1,21 @@
 //= require vue
-//= require vue-resource
-//= require_tree ./stores
-//= require_tree ./services
-//= require ./components/environment_item
+//= require_tree ./stores/
+//= require ./components/environment
 //= require ./vue_resource_interceptor
-/* globals Vue, EnvironmentsService */
-/* eslint-disable no-param-reassign */
 
-$(() => {
-  const environmentsListApp = document.getElementById('environments-list-view');
-  const Store = gl.environmentsList.EnvironmentsStore;
 
+$(() => {
   window.gl = window.gl || {};
 
-  if (gl.EnvironmentsListApp) {
-    gl.EnvironmentsListApp.$destroy(true);
+  if (window.gl.EnvironmentsListApp) {
+    window.gl.EnvironmentsListApp.$destroy(true);
   }
+  const Store = window.gl.environmentsList.EnvironmentsStore;
 
-  const filterState = state => environment => environment.state === state && environment;
-
-  // recursiveMap :: (Function, Array) -> Array
-  const recursiveMap = (fn, arr) => arr.map((item) => {
-    if (item.children) {
-      const filteredChildren = recursiveMap(fn, item.children).filter(Boolean);
-      if (filteredChildren.length) {
-        item.children = filteredChildren;
-        return item;
-      }
-    }
-    return fn(item);
-  }).filter(Boolean);
-
-  gl.EnvironmentsListApp = new Vue({
-
-    el: '#environments-list-view',
-
-    components: {
-      item: gl.environmentsList.EnvironmentItem,
-    },
-
-    data: {
-      state: Store.state,
-      endpoint: environmentsListApp.dataset.environmentsDataEndpoint,
-      canCreateDeployment: environmentsListApp.dataset.canCreateDeployment,
-      canReadEnvironment: environmentsListApp.dataset.canReadEnvironment,
-      canCreateEnvironment: environmentsListApp.dataset.canCreateEnvironment,
-      projectEnvironmentsPath: environmentsListApp.dataset.projectEnvironmentsPath,
-      projectClosedEnvironmentsPath: environmentsListApp.dataset.projectClosedEnvironmentsPath,
-      newEnvironmentPath: environmentsListApp.dataset.newEnvironmentPath,
-      helpPagePath: environmentsListApp.dataset.helpPagePath,
-      loading: true,
-      visibility: 'available',
-    },
-
-    computed: {
-      filteredEnvironments() {
-        return recursiveMap(filterState(this.visibility), this.state.environments);
-      },
-
-      scope() {
-        return this.$options.getQueryParameter('scope');
-      },
-
-      canReadEnvironmentParsed() {
-        return this.$options.convertPermissionToBoolean(this.canReadEnvironment);
-      },
-
-      canCreateDeploymentParsed() {
-        return this.$options.convertPermissionToBoolean(this.canCreateDeployment);
-      },
+  window.gl.EnvironmentsListApp = new window.gl.environmentsList.EnvironmentsComponent({
+    el: document.querySelector('#environments-list-view'),
+    propsData: {
+      store: Store.create(),
     },
-
-    init: Store.create.bind(Store),
-
-    created() {
-      gl.environmentsService = new EnvironmentsService(this.endpoint);
-
-      const scope = this.$options.getQueryParameter('scope');
-      if (scope) {
-        this.visibility = scope;
-      }
-    },
-
-    /**
-     * Fetches all the environmnets and stores them.
-     * Toggles loading property.
-     */
-    ready() {
-      gl.environmentsService.all().then(resp => resp.json()).then((json) => {
-        Store.storeEnvironments(json);
-        this.loading = false;
-      });
-    },
-
-    /**
-     * Transforms the url parameter into an object and
-     * returns the one requested.
-     *
-     * @param  {String} param
-     * @returns {String}       The value of the requested parameter.
-     */
-    getQueryParameter(parameter) {
-      return window.location.search.substring(1).split('&').reduce((acc, param) => {
-        const paramSplited = param.split('=');
-        acc[paramSplited[0]] = paramSplited[1];
-        return acc;
-      }, {})[parameter];
-    },
-
-    /**
-     * Converts permission provided as strings to booleans.
-     * @param  {String} string
-     * @returns {Boolean}
-     */
-    convertPermissionToBoolean(string) {
-      if (string === 'true') {
-        return true;
-      }
-
-      return false;
-    },
-
-    template: `
-      <div>
-        <div class="top-area">
-          <ul v-if="!isLoading" class="nav-links">
-            <li v-bind:class="{ 'active': scope === undefined}">
-              <a :href="projectEnvironmentsPath">
-                Available
-                <span class="badge js-available-environments-count">
-                  {{state.availableCounter}}
-                </span>
-              </a>
-            </li>
-            <li v-bind:class="{ 'active': scope === 'stopped'}">
-              <a :href="projectClosedEnvironmentsPath">
-                Stopped
-                <span class="badge js-stopped-environments-count">
-                  {{state.stoppedCounter}}
-                </span>
-              </a>
-            </li>
-          </ul>
-          <div v-if="canCreateEnvironment && !loading" class="nav-controls">
-            <a :href="newEnvironmentPath" class="btn btn-create">
-              New envrionment
-            </a>
-          </div>
-        </div>
-        
-        <div class="environments-container">
-          <div class="environments-list-loading text-center" v-if="loading">
-            <i class="fa fa-spinner spin"></i>
-          </div>
-        
-          <div class="blank-state blank-state-no-icon" v-if="!loading && state.environments.length === 0">
-            <h2 class="blank-state-title">
-              You don't have any environments right now.
-            </h2>
-            <p class="blank-state-text">
-              Environments are places where code gets deployed, such as staging or production.
-              
-              <br />
-              
-              <a :href="helpPagePath">
-                Read more about environments
-              </a>
-              <a v-if="canCreateEnvironment" :href="newEnvironmentPath" class="btn btn-create">
-                New Environment
-              </a>
-            </p>
-          </div>
-          
-          <div class="table-holder" v-if="!loading && state.environments.length > 0">
-            <table class="table ci-table environments">
-              <thead>
-                <th>Environment</th>
-                <th>Last deployment</th>
-                <th>Build</th>
-                <th>Commit</th>
-                <th></th>
-                <th class="hidden-xs"></th>
-              </thead>
-              <tbody>
-                <tr is="environment-item"
-                  v-for="model in filteredEnvironments"
-                  :model="model"
-                  :can-create-deployment="canCreateDeploymentParsed"
-                  :can-read-environment="canReadEnvironmentParsed">
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>  
-    `,
   });
 });
diff --git a/app/assets/javascripts/environments/stores/environmnets_store.js.es6 b/app/assets/javascripts/environments/stores/environments_store.js.es6
index ef0188c15bf..b8fe25ef313 100644
--- a/app/assets/javascripts/environments/stores/environmnets_store.js.es6
+++ b/app/assets/javascripts/environments/stores/environments_store.js.es6
@@ -10,6 +10,8 @@
       this.state.environments = [];
       this.state.stoppedCounter = 0;
       this.state.availableCounter = 0;
+
+      return this;
     },
 
     /**
diff --git a/app/assets/javascripts/environments/vue_resource_interceptor.js.es6 b/app/assets/javascripts/environments/vue_resource_interceptor.js.es6
new file mode 100644
index 00000000000..d19a5969f96
--- /dev/null
+++ b/app/assets/javascripts/environments/vue_resource_interceptor.js.es6
@@ -0,0 +1,13 @@
+/* eslint-disable */
+Vue.http.interceptors.push((request, next) => {
+  Vue.activeResources = Vue.activeResources ? Vue.activeResources + 1 : 1;
+
+  next(function (response) {
+    console.log("this is the repsponse", JSON.stringify(response, null, '  '));
+    if (typeof response.data === "string") {
+      response.data = JSON.parse(response.data)
+    }
+    
+    Vue.activeResources--;
+  });
+});
diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml
index be4fc4dcb1b..c47f1a21efa 100644
--- a/app/views/projects/environments/index.html.haml
+++ b/app/views/projects/environments/index.html.haml
@@ -15,6 +15,6 @@
   "can-read-environment" => can?(current_user, :read_environment, @project),
   "can-create-environmnet" => can?(current_user, :create_environment, @project),
   "project-environments-path" => project_environments_path(@project),
-  "project-closed-environments-path" => project_environments_path(@project, scope: :stopped),
+  "project-stopped-environments-path" => project_environments_path(@project, scope: :stopped),
   "new-environment-path" => new_namespace_project_environment_path(@project.namespace, @project),
   "help-page-path" => help_page_path("ci/environments")}, class: container_class }
diff --git a/spec/features/environments_spec.rb b/spec/features/environments_spec.rb
index d60a6be397d..f4c0b093246 100644
--- a/spec/features/environments_spec.rb
+++ b/spec/features/environments_spec.rb
@@ -43,6 +43,10 @@ feature 'Environments', feature: true, js:true do
 
     context 'with environments' do
       let(:resource) { create_list(:environment, 2) } 
+      before do
+        endpoint = namespace_project_environments_path(project.namespace, project)
+        stub_request(:any, endpoint).to_return(body: [{"name": "test"}])
+      end
       
       scenario 'does show "Available" and "Stopped" tab with links' do
         expect(page).to have_link('Stopped')
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..1097582a8e9
--- /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_url: 'https://gitlab.com/play',
+      },
+      {
+        name: 'foo',
+        play_url: '#',
+      },
+    ];
+
+    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_url);
+  });
+});
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..f357e11dc8e
--- /dev/null
+++ b/spec/javascripts/environments/environment_item_spec.js.es6
@@ -0,0 +1,157 @@
+//= 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,
+          'can-create-deployment': false,
+          'can-read-environment': true,
+        },
+      });
+    });
+
+    it('Should render clickable folder icon and name', () => {
+      expect(document.querySelector('.folder-name').textContent).toContain(mockItem.name);
+      expect(document.querySelector('.folder-icon')).toBeDefined();
+    });
+
+    it('Should render the number of children in a badge', () => {
+      expect(document.querySelector('.folder-name .badge').textContent).toContain(mockItem.children.length);
+    });
+
+    it('Should not render any information other than the name', () => {
+    });
+
+    describe('when clicked', () => {
+      it('Should render child row', () => {
+      });
+    });
+  });
+
+  describe('when item is not folder', () => {
+    it('should render environment name', () => {
+
+    });
+
+    describe('With deployment', () => {
+      it('should render deployment internal id', () => {
+
+      });
+
+      it('should link to deployment', () => {
+
+      });
+
+      describe('With user information', () => {
+        it('should render user avatar with link to profile', () => {
+
+        });
+      });
+
+      describe('With build url', () => {
+        it('Should link to build url provided', () => {
+
+        });
+
+        it('Should render deployable name and id', () => {
+
+        });
+      });
+
+      describe('With commit information', () => {
+        it('should render commit component', () => {});
+      });
+
+      it('Should render timeago created date', () => {
+
+      });
+    });
+
+    describe('Without deployment', () => {
+      it('should render no deployments information', () => {
+
+      });
+    });
+
+    describe('With manual actions', () => {
+      describe('With create deployment permission', () => {
+        it('Should render actions component', () => {
+
+        });
+      });
+      describe('Without create deployment permission', () => {
+        it('should not render actions component', () => {
+
+        });
+      });
+    });
+
+    describe('With external URL', () => {
+      it('should render external url component', () => {
+
+      });
+    });
+
+    describe('With stop action', () => {
+      describe('With create deployment permission', () => {
+        it('Should render stop action component', () => {
+
+        });
+      });
+      describe('Without create deployment permission', () => {
+        it('should not render stop action component', () => {
+
+        });
+      });
+    });
+
+    describe('With retry action', () => {
+      describe('With create deployment permission', () => {
+        it('Should render rollback component', () => {
+
+        });
+      });
+      describe('Without create deployment permission', () => {
+        it('should not render rollback component', () => {
+
+        });
+      });
+    });
+  });
+});
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_spec.js.es6 b/spec/javascripts/environments/environment_spec.js.es6
new file mode 100644
index 00000000000..07eb9938c58
--- /dev/null
+++ b/spec/javascripts/environments/environment_spec.js.es6
@@ -0,0 +1,172 @@
+//= require vue
+//= require environments/stores/environments_store
+//= require environments/components/environment
+
+/* globals environmentsList */
+describe('Environments', () => {
+  fixture.preload('environments/environments.html');
+  fixture.preload('environments/environments_no_permission.html');
+  let Store;
+  let component;
+
+  beforeEach(() => {
+    Store = window.gl.environmentsList.EnvironmentsStore;
+  });
+
+  describe('While loading', () => {
+    beforeEach(() => {
+      fixture.load('environments/environments.html');
+      component = new window.gl.environmentsList.EnvironmentsComponent({
+        el: document.querySelector('#environments-list-view'),
+        propsData: {
+          store: Store.create(),
+        },
+      });
+    });
+
+    it('Should render two tabs', () => {
+      expect(component.$el.querySelectorAll('ul li').length).toEqual(2);
+    });
+
+    it('Should render bagdes with zeros in both tabs indicating the number of available environments', () => {
+      expect(
+        component.$el.querySelector('.js-available-environments-count').textContent
+      ).toContain('0');
+      expect(
+        component.$el.querySelector('.js-stopped-environments-count').textContent
+      ).toContain('0');
+    });
+
+    it('Should render loading icon', () => {
+      expect(
+        component.$el.querySelector('environments-list-loading')
+      ).toBeDefined();
+    });
+  });
+
+  describe('Without environments', () => {
+    beforeEach(() => {
+      fixture.load('environments/environments.html');
+
+      spyOn(component, 'ready').and.callFake(() => {
+        return {
+          then: callback => callback([]),
+          json: () => ({ then: cb => cb([]) }),
+        };
+      });
+
+      component = new window.gl.environmentsList.EnvironmentsComponent({
+        el: document.querySelector('#environments-list-view'),
+        propsData: {
+          store: Store.create(),
+        },
+      });
+    });
+
+    it('Should render two tabs', () => {
+      expect(component.$el.querySelectorAll('ul li').length).toEqual(2);
+    });
+
+    it('Should render bagdes with zeros in both tabs indicating the number of available environments', () => {
+      expect(
+        component.$el.querySelector('.js-available-environments-count').textContent
+      ).toContain('0');
+      expect(
+        component.$el.querySelector('.js-stopped-environments-count').textContent
+      ).toContain('0');
+    });
+
+    it('Should render blank state information', () => {
+      expect(
+        component.$el.querySelector('.blank-state-title').textContent
+      ).toEqual('You don\'t have any environments right now.');
+
+      expect(
+        component.$el.querySelector('.blank-state-text').textContent
+      ).toEqual('Environments are places where code gets deployed, such as staging or production.');
+    });
+
+    it('Should render the provided help url', () => {
+      expect(
+        component.$el.querySelector('.blank-state a').getAttribute('href')
+      ).toEqual(component.$data.helpPagePath);
+    });
+
+    describe('With create permission', () => {
+      it('Should render new environment button', () => {
+        expect(
+          component.$el.querySelector('a.btn-create').getAttribute('href')
+        ).toEqual(component.$data.newEnvironmentPath);
+        expect(
+          component.$el.querySelector('a.btn-create').textContent
+        ).toEqual('New environment');
+      });
+    });
+
+    describe('Without create permission', () => {
+      beforeEach('Load fixture without permission', () => {
+        fixture.load('environments/environments_no_permission.html');
+        component = new window.gl.environmentsList.EnvironmentsComponent({
+          el: document.querySelector('#environments-list-view'),
+          propsData: {
+            store: Store.create(),
+          },
+        });
+      });
+
+      it('Should not render new environment button', () => {
+
+      });
+    });
+  });
+
+  describe('With environments', () => {
+    describe('Tabs behavior', () => {
+      it('Should render two tabs', () => {
+
+      });
+
+      it('Should render badges with the correct count', () => {
+
+      });
+
+      describe('When clicking in the available tab', () => {
+        it('Should make Available tab active', () => {
+
+        });
+
+        it('Should make visible only available environments', () => {
+
+        });
+      });
+
+      describe('When clicking in the stopped tab', () => {
+        it('Should make Stopped tab active', () => {
+
+        });
+
+        it('Should make visible only stopped environments', () => {
+
+        });
+      });
+    });
+
+    describe('With create permissions', () => {
+      it('Should render new environment button', () => {
+
+      });
+    });
+
+    describe('Without create permissions', () => {
+      it('Should not render the new environment button', () => {
+      });
+    });
+
+    it('Should render a table', () => {
+    });
+
+    it('Should render table pagination', () => {
+
+    });
+  });
+});
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..07a68bf28fb
--- /dev/null
+++ b/spec/javascripts/environments/environment_stop_spec.js.es6
@@ -0,0 +1,34 @@
+//= require vue
+//= require environments/components/environment_stop
+describe('Stop Component', () => {
+  fixture.preload('environments/element.html');
+  beforeEach(() => {
+    fixture.load('environments/element.html');
+  });
+
+  it('should link to the provided URL', () => {
+    const stopURL = 'https://gitlab.com/stop';
+    const component = new window.gl.environmentsList.StopComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        stop_url: stopURL,
+      },
+    });
+    expect(component.$el.getAttribute('href')).toEqual(stopURL);
+  });
+
+  describe('When clicked', () => {
+    it('Should open popup with confirmation warning', () => {
+      const component = new window.gl.environmentsList.StopComponent({
+        el: document.querySelector('.test-dom-element'),
+        propsData: {
+          stop_url: '#',
+        },
+      });
+
+      const spy = spyOn(window, 'confirm');
+      component.$el.click();
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/javascripts/fixtures/environments/element.html.haml b/spec/javascripts/fixtures/environments/element.html.haml
new file mode 100644
index 00000000000..d709c863137
--- /dev/null
+++ b/spec/javascripts/fixtures/environments/element.html.haml
@@ -0,0 +1 @@
+.test-dom-element
\ No newline at end of file
diff --git a/spec/javascripts/fixtures/environments/environments.html.haml b/spec/javascripts/fixtures/environments/environments.html.haml
new file mode 100644
index 00000000000..dd1d6855ce2
--- /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-environmnet" => "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"}}
\ No newline at end of file
diff --git a/spec/javascripts/fixtures/environments/environments_no_permission.html.haml b/spec/javascripts/fixtures/environments/environments_no_permission.html.haml
new file mode 100644
index 00000000000..71cf7db7a34
--- /dev/null
+++ b/spec/javascripts/fixtures/environments/environments_no_permission.html.haml
@@ -0,0 +1,9 @@
+%div
+  #environments-list-view{ data: { environments_data: "https://gitlab.com/foo/environments", 
+    "can-create-deployment" => "false", 
+    "can-read-environment" => "true",
+    "can-create-environmnet" => "false",
+    "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"}}
\ No newline at end of file
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..4f158e8ffa5
--- /dev/null
+++ b/spec/javascripts/vue_common_components/commit_spec.js.es6
@@ -0,0 +1,89 @@
+/*= require vue_common_components/commit */
+/* eslint-disable */
+
+describe('Commit component', () => {
+  const getRenderedText = (Component, propsData) => {
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor({propsData}).$mount();    
+    return vm.$el.textContent;
+  };
+  
+  const MyComponent = window.gl.commitComponent;
+
+  describe('When `ref` is provided', () => {
+    const 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'
+      }
+    };
+
+    it('should render a tag icon if it represents a tag', () => {
+      const renderedText = getRenderedText(MyComponent, props);
+
+    });
+
+    it('should render a code-fork icon if it does not represent a tag', () => {
+
+    });
+
+    it('should render a link to the ref url', () => {
+
+    });
+
+    it('should render the ref name', () => {
+
+    });
+  });
+});
+
+it('should render the commit icon as an svg', () => {
+
+});
+
+it('should render the commit short sha with a link to the commit url', () => {
+
+});
+
+describe('Given commit title and author props', () => {
+  it('Should render a link to the author profile', () => {
+
+  });
+
+  it('Should render the author avatar with title and alt attributes', () => {
+
+  });
+});
+
+describe('When commit title is not provided', () => {
+  it('Should render default message', () => {
+
+  });
+});
+
+describe('Given no ref prop', () => {
+  it('Should render without errors', () => {
+
+  });
+});
+
+describe('Given no title prop', () => {
+  it('Should render without errors', () => {
+
+  });
+});
+
+describe('Given no author prop', () => {
+  it('Should render without errors', () => {
+
+  });
+});
\ No newline at end of file