Adds props validation

Improves documentation

Adds tests

Fix prop validation for objects

Finish tests for environment item

Adds tests for toggle folder function

Environment tests

Adds tests

13 files changed, 244 insertions, 359 deletions

diff --git a/app/assets/javascripts/boards/services/board_service.js.es6 b/app/assets/javascripts/boards/services/board_service.js.es6
index f59a2ed7937..570944e132d 100644
--- a/app/assets/javascripts/boards/services/board_service.js.es6
+++ b/app/assets/javascripts/boards/services/board_service.js.es6
@@ -11,6 +11,7 @@ class BoardService {
     this.issues = Vue.resource(`${root}/${boardId}/lists{/id}/issues`, {});
 
     Vue.http.interceptors.push((request, next) => {
+      debugger;
       request.headers['X-CSRF-Token'] = $.rails.csrfToken();
       next();
     });
diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6
index 296e18ae8fd..42b32811e4f 100644
--- a/app/assets/javascripts/environments/components/environment.js.es6
+++ b/app/assets/javascripts/environments/components/environment.js.es6
@@ -23,8 +23,14 @@ $(() => {
     return fn(item);
   }).filter(Boolean);
 
-  window.gl.environmentsList.EnvironmentsComponent = Vue.extend({
-    props: ['store'],
+  window.gl.environmentsList.EnvironmentsComponent = Vue.component('environment-component', {
+    props: {
+      store: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+      },
+    },
 
     components: {
       'environment-item': window.gl.environmentsList.EnvironmentItem,
@@ -43,9 +49,8 @@ $(() => {
         projectStoppedEnvironmentsPath: environmentsListApp.dataset.projectStoppedEnvironmentsPath,
         newEnvironmentPath: environmentsListApp.dataset.newEnvironmentPath,
         helpPagePath: environmentsListApp.dataset.helpPagePath,
-        loading: true,
         visibility: 'available',
-        isLoading: this.loading,
+        isLoading: false,
       };
     },
 
@@ -65,6 +70,10 @@ $(() => {
       canCreateDeploymentParsed() {
         return this.$options.convertPermissionToBoolean(this.canCreateDeployment);
       },
+
+      canCreateEnvironmentParsed() {
+        return this.$options.convertPermissionToBoolean(this.canCreateEnvironment);
+      },
     },
 
     created() {
@@ -74,6 +83,15 @@ $(() => {
       if (scope) {
         this.visibility = scope;
       }
+
+      this.isLoading = true;
+
+      return window.gl.environmentsService.all()
+        .then(resp => resp.json())
+        .then((json) => {
+          this.store.storeEnvironments(json);
+          this.isLoading = false;
+        });
     },
 
     /**
@@ -81,12 +99,7 @@ $(() => {
      * Toggles loading property.
      */
     mounted() {
-      window.gl.environmentsService.all()
-      .then(resp => resp.json())
-      .then((json) => {
-        this.store.storeEnvironments(json);
-        this.loading = false;
-      });
+
     },
 
     /**
@@ -143,21 +156,21 @@ $(() => {
               </a>
             </li>
           </ul>
-          <div v-if="canCreateEnvironment && !loading" class="nav-controls">
+          <div v-if="canCreateEnvironmentParsed && !isLoading" class="nav-controls">
             <a :href="newEnvironmentPath" class="btn btn-create">
-              New envrionment
+              New environment
             </a>
           </div>
         </div>
 
         <div class="environments-container">
-          <div class="environments-list-loading text-center" v-if="loading">
+          <div class="environments-list-loading text-center" v-if="isLoading">
             <i class="fa fa-spinner spin"></i>
           </div>
 
           <div
             class="blank-state blank-state-no-icon"
-            v-if="!loading && state.environments.length === 0">
+            v-if="!isLoading && state.environments.length === 0">
             <h2 class="blank-state-title">
               You don't have any environments right now.
             </h2>
@@ -170,7 +183,7 @@ $(() => {
                 Read more about environments
               </a>
               <a
-                v-if="canCreateEnvironment"
+                v-if="canCreateEnvironmentParsed"
                 :href="newEnvironmentPath"
                 class="btn btn-create">
                 New Environment
@@ -180,7 +193,7 @@ $(() => {
 
           <div
             class="table-holder"
-            v-if="!loading && state.environments.length > 0">
+            v-if="!isLoading && state.environments.length > 0">
             <table class="table ci-table environments">
               <thead>
                 <tr>
diff --git a/app/assets/javascripts/environments/components/environment_external_url.js.es6 b/app/assets/javascripts/environments/components/environment_external_url.js.es6
index b5d540ea934..eca0c368622 100644
--- a/app/assets/javascripts/environments/components/environment_external_url.js.es6
+++ b/app/assets/javascripts/environments/components/environment_external_url.js.es6
@@ -14,7 +14,7 @@
     },
 
     template: `
-      <a class="btn external_url" :href="external_url" :target="_blank">
+      <a class="btn external_url" :href="external_url" target="_blank">
         <i class="fa fa-external-link"></i>
       </a>
     `,
diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6
index 3f976ca19e8..bea6d09aacc 100644
--- a/app/assets/javascripts/environments/components/environment_item.js.es6
+++ b/app/assets/javascripts/environments/components/environment_item.js.es6
@@ -1,3 +1,5 @@
+/*= require lib/utils/timeago
+/*= require lib/utils/text_utility
 /*= require vue_common_component/commit
 /*= require ./environment_actions
 /*= require ./environment_external_url
@@ -31,7 +33,30 @@
       'rollback-component': window.gl.environmentsList.RollbackComponent,
     },
 
-    props: ['model', 'toggleRow', 'can-create-deployment', 'can-read-environment'],
+    props: {
+      model: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+      },
+
+      toggleRow: {
+        type: Function,
+        required: false,
+      },
+
+      canCreateDeployment: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+
+      canReadEnvironment: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
 
     data() {
       return {
@@ -48,10 +73,10 @@
        * Folder items have different behaviours - it is possible to toggle
        * them and show their children.
        *
-       * @returns {Boolean}
+       * @returns {Boolean|Undefined}
        */
       isFolder() {
-        return this.$options.hasKey(this.model, 'children') &&
+        return this.model.children &&
           this.model.children.length > 0;
       },
 
@@ -69,25 +94,14 @@
        * Counts the number of environments in each folder.
        * Used to show a badge with the counter.
        *
-       * @returns {Boolean}  The number of environments for the current folder
+       * @returns {Number|Undefined}  The number of environments for the current folder.
        */
       childrenCounter() {
-        return this.$options.hasKey(this.model, 'children') &&
+        return this.model.children &&
           this.model.children.length;
       },
 
       /**
-       * Returns the value of the `last?` key sent in the API.
-       * Used to know wich title to render when the environment can be re-deployed
-       *
-       * @returns {Boolean}
-       */
-      isLast() {
-        return this.$options.hasKey(this.model, 'last_deployment') &&
-          this.model.last_deployment['last?'];
-      },
-
-      /**
        * Verifies if `last_deployment` key exists in the current Envrionment.
        * This key is required to render most of the html - this method works has
        * an helper.
@@ -95,18 +109,21 @@
        * @returns {Boolean}
        */
       hasLastDeploymentKey() {
-        return this.$options.hasKey(this.model, 'last_deployment');
+        if (this.model.last_deployment && this.model.last_deployment !== {}) {
+          return true;
+        }
+        return false;
       },
 
       /**
        * Verifies is the given environment has manual actions.
        * Used to verify if we should render them or nor.
        *
-       * @returns {Boolean}
+       * @returns {Boolean|Undefined}
        */
       hasManualActions() {
-        return this.$options.hasKey(this.model, 'manual_actions') &&
-          this.model.manual_actions.length > 0;
+        return this.model.last_deployment && this.model.last_deployment.manual_actions &&
+          this.model.last_deployment.manual_actions.length > 0;
       },
 
       /**
@@ -122,12 +139,12 @@
        * Verifies if the `deployable` key is present in `last_deployment` key.
        * Used to verify whether we should or not render the rollback partial.
        *
-       * @returns {Boolean}
+       * @returns {Boolean|Undefined}
        */
       canRetry() {
         return this.hasLastDeploymentKey &&
           this.model.last_deployment &&
-          this.$options.hasKey(this.model.last_deployment, 'deployable');
+          this.model.last_deployment.deployable;
       },
 
       /**
@@ -144,20 +161,33 @@
       /**
        * Returns the manual actions with the name parsed.
        *
-       * @returns {Array.<Object>}
+       * @returns {Array.<Object>|Undefined}
        */
       manualActions() {
-        return this.model.last_deployment.manual_actions.map((action) => {
-          const parsedAction = {
-            name: gl.text.humanize(action.name),
-            play_url: action.play_url,
-          };
-          return parsedAction;
-        });
+        if (this.hasManualActions) {
+          return this.model.last_deployment.manual_actions.map((action) => {
+            const parsedAction = {
+              name: gl.text.humanize(action.name),
+              play_url: action.play_url,
+            };
+            return parsedAction;
+          });
+        }
+        return [];
       },
 
+      /**
+       * Builds the string used in the user image alt attribute.
+       *
+       * @returns {String}
+       */
       userImageAltDescription() {
-        return `${this.model.last_deployment.user.username}'s avatar'`;
+        if (this.model.last_deployment &&
+          this.model.last_deployment.user &&
+          this.model.last_deployment.user.username) {
+          return `${this.model.last_deployment.user.username}'s avatar'`;
+        }
+        return '';
       },
 
       /**
@@ -166,7 +196,8 @@
        * @returns {String|Undefined}
        */
       commitTag() {
-        if (this.model.last_deployment && this.model.last_deployment.tag) {
+        if (this.model.last_deployment &&
+          this.model.last_deployment.tag) {
           return this.model.last_deployment.tag;
         }
         return undefined;
@@ -178,7 +209,8 @@
        * @returns {Object|Undefined}
        */
       commitRef() {
-        if (this.model.last_deployment && this.model.last_deployment.ref) {
+        if (this.model.last_deployment &&
+          this.model.last_deployment.ref) {
           return this.model.last_deployment.ref;
         }
         return undefined;
@@ -241,6 +273,11 @@
         return undefined;
       },
 
+      /**
+       * Verifies if the `retry_url` key is present and returns its value.
+       *
+       * @returns {String|Undefined}
+       */
       retryUrl() {
         if (this.model.last_deployment &&
           this.model.last_deployment.deployable &&
@@ -250,35 +287,66 @@
         return undefined;
       },
 
+      /**
+       * Verifies if the `last?` key is present and returns its value.
+       *
+       * @returns {Boolean|Undefined}
+       */
       isLastDeployment() {
         return this.model.last_deployment && this.model.last_deployment['last?'];
       },
 
+      /**
+       * Builds the name of the builds needed to display both the name and the id.
+       *
+       * @returns {String}
+       */
       buildName() {
-        if (this.model.last_deployment && this.model.last_deployment.deployable) {
+        if (this.model.last_deployment &&
+          this.model.last_deployment.deployable) {
           return `${this.model.last_deployment.deployable.name} #${this.model.last_deployment.deployable.id}`;
         }
-        return undefined;
+        return '';
       },
 
+      /**
+       * Builds the needed string to show the internal id.
+       *
+       * @returns {String}
+       */
       deploymentInternalId() {
-        if (this.model.last_deployment) {
+        if (this.model.last_deployment &&
+          this.model.last_deployment.iid) {
           return `#${this.model.last_deployment.iid}`;
         }
         return '';
       },
-    },
 
-    /**
-     * Helper to verify if key is present in an object.
-     * Can be removed once we start using lodash.
-     *
-     * @param  {Object} obj
-     * @param  {String} key
-     * @returns {Boolean}
-     */
-    hasKey(obj, key) {
-      return {}.hasOwnProperty.call(obj, key);
+      /**
+       * Verifies if the user object is present under last_deployment object.
+       *
+       * @returns {Boolean}
+       */
+      deploymentHasUser() {
+        if (this.model.last_deployment &&
+          this.model.last_deployment.user) {
+          return true;
+        }
+        return false;
+      },
+
+      /**
+       * Returns the user object nested with the last_deployment object.
+       * Used to render the template.
+       *
+       * @returns {Object}
+       */
+      deploymentUser() {
+        if (this.model.last_deployment && this.model.last_deployment.user) {
+          return this.model.last_deployment.user;
+        }
+        return {};
+      },
     },
 
     template: `
@@ -303,17 +371,19 @@
         </td>
 
         <td class="deployment-column">
-          <span v-if="!isFolder && model.last_deployment && model.last_deployment.iid" v-html="deploymentInternalId">
-
-            <span v-if="model.last_deployment.user">
-              by
-              <a :href="model.last_deployment.user.web_url">
-                <img class="avatar has-tooltip s20"
-                  :src="model.last_deployment.user.avatar_url"
-                  :alt="userImageAltDescription"
-                  :title="model.last_deployment.user.username" />
-              </a>
-            </span>
+          <span
+            v-if="!isFolder && model.last_deployment && model.last_deployment.iid"
+            v-html="deploymentInternalId">
+          </span>
+
+          <span v-if="!isFolder && deploymentHasUser">
+            by
+            <a :href="deploymentUser.web_url" class="js-deploy-user-container">
+              <img class="avatar has-tooltip s20"
+                :src="deploymentUser.avatar_url"
+                :alt="userImageAltDescription"
+                :title="deploymentUser.username" />
+            </a>
           </span>
         </td>
 
@@ -326,7 +396,7 @@
         </td>
 
         <td>
-          <div v-if="!isFolder && model.last_deployment">
+          <div v-if="!isFolder && hasLastDeploymentKey" class="js-commit-component">
             <commit-component
               :tag="commitTag"
               :ref="commitRef"
@@ -336,7 +406,7 @@
               :author="commitAuthor">
             </commit-component>
           </div>
-          <p v-if="!isFolder && !model.last_deployment" class="commit-title">
+          <p v-if="!isFolder && !hasLastDeploymentKey" class="commit-title">
             No deployments yet
           </p>
         </td>
@@ -351,25 +421,25 @@
 
         <td class="hidden-xs">
           <div v-if="!isFolder">
-            <div v-if="hasManualActions && canCreateDeployment" class="inline">
+            <div v-if="hasManualActions && canCreateDeployment" class="inline js-manual-actions-container">
               <actions-component
                 :actions="manualActions">
               </actions-component>
             </div>
 
-            <div v-if="model.external_url && canReadEnvironment" class="inline">
+            <div v-if="model.external_url && canReadEnvironment" class="inline js-external-url-container">
               <external-url-component
                 :external_url="model.external_url">
               </external_url-component>
             </div>
 
-            <div v-if="isStoppable && canCreateDeployment" class="inline">
+            <div v-if="isStoppable && canCreateDeployment" class="inline js-stop-component-container">
               <stop-component
                 :stop_url="model.environment_url">
               </stop-component>
             </div>
 
-            <div v-if="canRetry && canCreateDeployment" class="inline">
+            <div v-if="canRetry && canCreateDeployment" class="inline js-rollback-component-container">
               <rollback-component
                 :is_last_deployment="isLastDeployment"
                 :retry_url="retryUrl">
diff --git a/app/assets/javascripts/environments/services/environments_service.js.es6 b/app/assets/javascripts/environments/services/environments_service.js.es6
index e10dd87f7ce..15ec7b76c3d 100644
--- a/app/assets/javascripts/environments/services/environments_service.js.es6
+++ b/app/assets/javascripts/environments/services/environments_service.js.es6
@@ -8,7 +8,10 @@ class EnvironmentsService {
     this.environments = Vue.resource(root);
 
     Vue.http.interceptors.push((request, next) => {
-      request.headers['X-CSRF-Token'] = $.rails.csrfToken();
+      // needed in order to not break the tests.
+      if ($.rails) {
+        request.headers['X-CSRF-Token'] = $.rails.csrfToken();
+      }
       next();
     });
   }
diff --git a/app/assets/javascripts/vue_common_component/commit.js.es6 b/app/assets/javascripts/vue_common_component/commit.js.es6
index 8d4949cda69..e66db860297 100644
--- a/app/assets/javascripts/vue_common_component/commit.js.es6
+++ b/app/assets/javascripts/vue_common_component/commit.js.es6
@@ -26,7 +26,7 @@
       ref: {
         type: Object,
         required: false,
-        default: () => {},
+        default: () => ({}),
       },
 
       /**
@@ -66,7 +66,7 @@
       author: {
         type: Object,
         required: false,
-        default: () => {},
+        default: () => ({}),
       },
     },
 
diff --git a/db/schema.rb b/db/schema.rb
index 886be4520a3..d68b5edae47 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -106,6 +106,9 @@ ActiveRecord::Schema.define(version: 20161109150329) do
     t.integer "housekeeping_incremental_repack_period", default: 10, null: false
     t.integer "housekeeping_full_repack_period", default: 50, null: false
     t.integer "housekeeping_gc_period", default: 200, null: false
+    t.boolean "sidekiq_throttling_enabled", default: false
+    t.string "sidekiq_throttling_queues"
+    t.decimal "sidekiq_throttling_factor"
   end
 
   create_table "audit_events", force: :cascade do |t|
diff --git a/spec/features/environments_spec.rb b/spec/features/environments_spec.rb
index b565586ee14..f36a895a037 100644
--- a/spec/features/environments_spec.rb
+++ b/spec/features/environments_spec.rb
@@ -1,6 +1,6 @@
 require 'spec_helper'
 
-feature 'Environments', feature: true do
+feature 'Environments', feature: true, js:true do
   given(:project) { create(:empty_project) }
   given(:user) { create(:user) }
   given(:role) { :developer }
@@ -59,6 +59,7 @@ feature 'Environments', feature: true do
         given(:deployment) { create(:deployment, environment: environment) }
 
         scenario 'does show deployment SHA' do
+          puts page.body
           expect(page).to have_link(deployment.short_sha)
         end
 
diff --git a/spec/javascripts/environments/environment_item_spec.js.es6 b/spec/javascripts/environments/environment_item_spec.js.es6
index 1029d632054..7559258426b 100644
--- a/spec/javascripts/environments/environment_item_spec.js.es6
+++ b/spec/javascripts/environments/environment_item_spec.js.es6
@@ -9,6 +9,7 @@ describe('Environment item', () => {
 
   describe('When item is folder', () => {
     let mockItem;
+    let component;
 
     beforeEach(() => {
       mockItem = {
@@ -34,61 +35,31 @@ describe('Environment item', () => {
           },
         ],
       };
-    });
 
-    it('Should render clickable folder icon and name', () => {
-      const component = new window.gl.environmentsList.EnvironmentItem({
+      component = new window.gl.environmentsList.EnvironmentItem({
         el: document.querySelector('tr#environment-row'),
         propsData: {
           model: mockItem,
           toggleRow: () => {},
-          'can-create-deployment': false,
-          'can-read-environment': true,
+          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', () => {
-      const component = new window.gl.environmentsList.EnvironmentItem({
-        el: document.querySelector('tr#environment-row'),
-        propsData: {
-          model: mockItem,
-          toggleRow: () => {},
-          'can-create-deployment': false,
-          'can-read-environment': true,
-        },
-      });
-
       expect(component.$el.querySelector('.folder-name .badge').textContent).toContain(mockItem.children.length);
     });
-
-    describe('when clicked', () => {
-      it('Should call the given prop', () => {
-        const component = new window.gl.environmentsList.EnvironmentItem({
-          el: document.querySelector('tr#environment-row'),
-          propsData: {
-            model: mockItem,
-            toggleRow: () => {
-              console.log('here!');
-            },
-            'can-create-deployment': false,
-            'can-read-environment': true,
-          },
-        });
-
-        spyOn(component.$options.propsData, 'toggleRow');
-        component.$el.querySelector('.folder-name').click();
-
-        expect(component.$options.propsData.toggleRow).toHaveBeenCalled();
-      });
-    });
   });
 
   describe('when item is not folder', () => {
     let environment;
+    let component;
 
     beforeEach(() => {
       environment = {
@@ -151,104 +122,93 @@ describe('Environment item', () => {
         created_at: '2016-11-07T11:11:16.525Z',
         updated_at: '2016-11-10T15:55:58.778Z',
       };
-    });
 
-    it('should render environment name', () => {
-      const component = new window.gl.environmentsList.EnvironmentItem({
+      component = new window.gl.environmentsList.EnvironmentItem({
         el: document.querySelector('tr#environment-row'),
         propsData: {
           model: environment,
           toggleRow: () => {},
-          'can-create-deployment': false,
-          'can-read-environment': true,
+          canCreateDeployment: true,
+          canReadEnvironment: true,
         },
       });
+    });
 
-      debugger;
+    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);
 
-      });
-
-      it('should link to deployment', () => {
-
+        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_url);
         });
 
         it('Should render deployable name and id', () => {
-
+          expect(
+            component.$el.querySelector('.build-link').getAttribute('href')
+          ).toEqual(environment.last_deployment.deployable.build_url);
         });
       });
 
       describe('With commit information', () => {
-        it('should render commit component', () => {});
-      });
-
-      it('Should render timeago created date', () => {
-
-      });
-    });
-
-    describe('Without deployment', () => {
-      it('should render no deployments information', () => {
-
+        it('should render commit component', () => {
+          expect(
+            component.$el.querySelector('.js-commit-component')
+          ).toBeDefined();
+        });
       });
     });
 
     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', () => {
-
-        });
+      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', () => {
-      describe('With create deployment permission', () => {
-        it('Should render stop action component', () => {
-
-        });
-      });
-      describe('Without create deployment permission', () => {
-        it('should not render stop action component', () => {
-
-        });
+      it('Should render stop action component', () => {
+        expect(
+          component.$el.querySelector('.js-stop-component-container')
+        ).toBeDefined();
       });
     });
 
     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', () => {
-
-        });
+      it('Should render rollback component', () => {
+        expect(
+          component.$el.querySelector('.js-rollback-component-container')
+        ).toBeDefined();
       });
     });
   });
diff --git a/spec/javascripts/environments/environment_spec.js.es6 b/spec/javascripts/environments/environment_spec.js.es6
deleted file mode 100644
index 07eb9938c58..00000000000
--- a/spec/javascripts/environments/environment_spec.js.es6
+++ /dev/null
@@ -1,172 +0,0 @@
-//= 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/environments_store_spec.js.es6 b/spec/javascripts/environments/environments_store_spec.js.es6
index 5e35949ac9c..82d9599f372 100644
--- a/spec/javascripts/environments/environments_store_spec.js.es6
+++ b/spec/javascripts/environments/environments_store_spec.js.es6
@@ -1,5 +1,5 @@
 //= require vue
-//= require environments/stores/environmnets_store
+//= require environments/stores/environments_store
 //= require ./mock_data
 /* globals environmentsList */
 (() => {
@@ -50,5 +50,20 @@
         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/fixtures/environments/environments.html.haml b/spec/javascripts/fixtures/environments/environments.html.haml
index dd1d6855ce2..d89bc50c1f0 100644
--- a/spec/javascripts/fixtures/environments/environments.html.haml
+++ b/spec/javascripts/fixtures/environments/environments.html.haml
@@ -1,9 +1,9 @@
 %div
-  #environments-list-view{ data: { environments_data: "https://gitlab.com/foo/environments", 
-    "can-create-deployment" => "true", 
+  #environments-list-view{ data: { environments_data: "https://gitlab.com/foo/environments",
+    "can-create-deployment" => "true",
     "can-read-environment" => "true",
-    "can-create-environmnet" => "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"}}
\ No newline at end of file
+    "help-page-path" => "https://gitlab.com/help_page"}}
diff --git a/spec/javascripts/fixtures/environments/environments_no_permission.html.haml b/spec/javascripts/fixtures/environments/environments_no_permission.html.haml
deleted file mode 100644
index 71cf7db7a34..00000000000
--- a/spec/javascripts/fixtures/environments/environments_no_permission.html.haml
+++ /dev/null
@@ -1,9 +0,0 @@
-%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