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

5 files changed, 68 insertions, 274 deletions

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