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

7 files changed, 232 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 }