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

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();
     });

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>

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>
     `,

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();
     });
   }

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: () => ({}),
       },
     },
 

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|

spec/features/environments_spec.rb

 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
 

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();
       });
     });
   });

spec/javascripts/environments/environment_spec.js.es6

-//= 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', () => {
-
-    });
-  });
-});

spec/javascripts/environments/environments_store_spec.js.es6

 //= 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);
+      });
+    });
   });
 })();

spec/javascripts/fixtures/environments/environments.html.haml

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

spec/javascripts/fixtures/environments/environments_no_permission.html.haml

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