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

6 files changed, 470 insertions, 0 deletions

diff --git a/spec/javascripts/environments/environment_actions_spec.js.es6 b/spec/javascripts/environments/environment_actions_spec.js.es6
new file mode 100644
index 00000000000..1097582a8e9
--- /dev/null
+++ b/spec/javascripts/environments/environment_actions_spec.js.es6
@@ -0,0 +1,37 @@
+//= require vue
+//= require environments/components/environment_actions
+
+describe('Actions Component', () => {
+  fixture.preload('environments/element.html');
+
+  beforeEach(() => {
+    fixture.load('environments/element.html');
+  });
+
+  it('Should render a dropdown with the provided actions', () => {
+    const actionsMock = [
+      {
+        name: 'bar',
+        play_url: 'https://gitlab.com/play',
+      },
+      {
+        name: 'foo',
+        play_url: '#',
+      },
+    ];
+
+    const component = new window.gl.environmentsList.ActionsComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        actions: actionsMock,
+      },
+    });
+
+    expect(
+      component.$el.querySelectorAll('.dropdown-menu li').length
+    ).toEqual(actionsMock.length);
+    expect(
+      component.$el.querySelector('.dropdown-menu li a').getAttribute('href')
+    ).toEqual(actionsMock[0].play_url);
+  });
+});
diff --git a/spec/javascripts/environments/environment_external_url_spec.js.es6 b/spec/javascripts/environments/environment_external_url_spec.js.es6
new file mode 100644
index 00000000000..156506ef28f
--- /dev/null
+++ b/spec/javascripts/environments/environment_external_url_spec.js.es6
@@ -0,0 +1,22 @@
+//= require vue
+//= require environments/components/environment_external_url
+
+describe('External URL Component', () => {
+  fixture.preload('environments/element.html');
+  beforeEach(() => {
+    fixture.load('environments/element.html');
+  });
+
+  it('should link to the provided external_url', () => {
+    const externalURL = 'https://gitlab.com';
+    const component = new window.gl.environmentsList.ExternalUrlComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        external_url: externalURL,
+      },
+    });
+
+    expect(component.$el.getAttribute('href')).toEqual(externalURL);
+    expect(component.$el.querySelector('fa-external-link')).toBeDefined();
+  });
+});
diff --git a/spec/javascripts/environments/environment_item_spec.js.es6 b/spec/javascripts/environments/environment_item_spec.js.es6
new file mode 100644
index 00000000000..f357e11dc8e
--- /dev/null
+++ b/spec/javascripts/environments/environment_item_spec.js.es6
@@ -0,0 +1,157 @@
+//= require vue
+//= require environments/components/environment_item
+
+describe('Environment item', () => {
+  fixture.preload('environments/table.html');
+  beforeEach(() => {
+    fixture.load('environments/table.html');
+  });
+
+  describe('When item is folder', () => {
+    let mockItem;
+    let component;
+
+    beforeEach(() => {
+      mockItem = {
+        name: 'review',
+        children: [
+          {
+            name: 'review-app',
+            id: 1,
+            state: 'available',
+            external_url: '',
+            last_deployment: {},
+            created_at: '2016-11-07T11:11:16.525Z',
+            updated_at: '2016-11-10T15:55:58.778Z',
+          },
+          {
+            name: 'production',
+            id: 2,
+            state: 'available',
+            external_url: '',
+            last_deployment: {},
+            created_at: '2016-11-07T11:11:16.525Z',
+            updated_at: '2016-11-10T15:55:58.778Z',
+          },
+        ],
+      };
+
+      component = new window.gl.environmentsList.EnvironmentItem({
+        el: document.querySelector('tr#environment-row'),
+        propsData: {
+          model: mockItem,
+          'can-create-deployment': false,
+          'can-read-environment': true,
+        },
+      });
+    });
+
+    it('Should render clickable folder icon and name', () => {
+      expect(document.querySelector('.folder-name').textContent).toContain(mockItem.name);
+      expect(document.querySelector('.folder-icon')).toBeDefined();
+    });
+
+    it('Should render the number of children in a badge', () => {
+      expect(document.querySelector('.folder-name .badge').textContent).toContain(mockItem.children.length);
+    });
+
+    it('Should not render any information other than the name', () => {
+    });
+
+    describe('when clicked', () => {
+      it('Should render child row', () => {
+      });
+    });
+  });
+
+  describe('when item is not folder', () => {
+    it('should render environment name', () => {
+
+    });
+
+    describe('With deployment', () => {
+      it('should render deployment internal id', () => {
+
+      });
+
+      it('should link to deployment', () => {
+
+      });
+
+      describe('With user information', () => {
+        it('should render user avatar with link to profile', () => {
+
+        });
+      });
+
+      describe('With build url', () => {
+        it('Should link to build url provided', () => {
+
+        });
+
+        it('Should render deployable name and id', () => {
+
+        });
+      });
+
+      describe('With commit information', () => {
+        it('should render commit component', () => {});
+      });
+
+      it('Should render timeago created date', () => {
+
+      });
+    });
+
+    describe('Without deployment', () => {
+      it('should render no deployments information', () => {
+
+      });
+    });
+
+    describe('With manual actions', () => {
+      describe('With create deployment permission', () => {
+        it('Should render actions component', () => {
+
+        });
+      });
+      describe('Without create deployment permission', () => {
+        it('should not render actions component', () => {
+
+        });
+      });
+    });
+
+    describe('With external URL', () => {
+      it('should render external url component', () => {
+
+      });
+    });
+
+    describe('With stop action', () => {
+      describe('With create deployment permission', () => {
+        it('Should render stop action component', () => {
+
+        });
+      });
+      describe('Without create deployment permission', () => {
+        it('should not render stop action component', () => {
+
+        });
+      });
+    });
+
+    describe('With retry action', () => {
+      describe('With create deployment permission', () => {
+        it('Should render rollback component', () => {
+
+        });
+      });
+      describe('Without create deployment permission', () => {
+        it('should not render rollback component', () => {
+
+        });
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/environments/environment_rollback_spec.js.es6 b/spec/javascripts/environments/environment_rollback_spec.js.es6
new file mode 100644
index 00000000000..29449bbbd9e
--- /dev/null
+++ b/spec/javascripts/environments/environment_rollback_spec.js.es6
@@ -0,0 +1,48 @@
+//= require vue
+//= require environments/components/environment_rollback
+describe('Rollback Component', () => {
+  fixture.preload('environments/element.html');
+
+  const retryURL = 'https://gitlab.com/retry';
+
+  beforeEach(() => {
+    fixture.load('environments/element.html');
+  });
+
+  it('Should link to the provided retry_url', () => {
+    const component = new window.gl.environmentsList.RollbackComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        retry_url: retryURL,
+        is_last_deployment: true,
+      },
+    });
+
+    expect(component.$el.getAttribute('href')).toEqual(retryURL);
+  });
+
+  it('Should render Re-deploy label when is_last_deployment is true', () => {
+    const component = new window.gl.environmentsList.RollbackComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        retry_url: retryURL,
+        is_last_deployment: true,
+      },
+    });
+
+    expect(component.$el.querySelector('span').textContent).toContain('Re-deploy');
+  });
+
+
+  it('Should render Rollback label when is_last_deployment is false', () => {
+    const component = new window.gl.environmentsList.RollbackComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        retry_url: retryURL,
+        is_last_deployment: false,
+      },
+    });
+
+    expect(component.$el.querySelector('span').textContent).toContain('Rollback');
+  });
+});
diff --git a/spec/javascripts/environments/environment_spec.js.es6 b/spec/javascripts/environments/environment_spec.js.es6
new file mode 100644
index 00000000000..07eb9938c58
--- /dev/null
+++ b/spec/javascripts/environments/environment_spec.js.es6
@@ -0,0 +1,172 @@
+//= require vue
+//= require environments/stores/environments_store
+//= require environments/components/environment
+
+/* globals environmentsList */
+describe('Environments', () => {
+  fixture.preload('environments/environments.html');
+  fixture.preload('environments/environments_no_permission.html');
+  let Store;
+  let component;
+
+  beforeEach(() => {
+    Store = window.gl.environmentsList.EnvironmentsStore;
+  });
+
+  describe('While loading', () => {
+    beforeEach(() => {
+      fixture.load('environments/environments.html');
+      component = new window.gl.environmentsList.EnvironmentsComponent({
+        el: document.querySelector('#environments-list-view'),
+        propsData: {
+          store: Store.create(),
+        },
+      });
+    });
+
+    it('Should render two tabs', () => {
+      expect(component.$el.querySelectorAll('ul li').length).toEqual(2);
+    });
+
+    it('Should render bagdes with zeros in both tabs indicating the number of available environments', () => {
+      expect(
+        component.$el.querySelector('.js-available-environments-count').textContent
+      ).toContain('0');
+      expect(
+        component.$el.querySelector('.js-stopped-environments-count').textContent
+      ).toContain('0');
+    });
+
+    it('Should render loading icon', () => {
+      expect(
+        component.$el.querySelector('environments-list-loading')
+      ).toBeDefined();
+    });
+  });
+
+  describe('Without environments', () => {
+    beforeEach(() => {
+      fixture.load('environments/environments.html');
+
+      spyOn(component, 'ready').and.callFake(() => {
+        return {
+          then: callback => callback([]),
+          json: () => ({ then: cb => cb([]) }),
+        };
+      });
+
+      component = new window.gl.environmentsList.EnvironmentsComponent({
+        el: document.querySelector('#environments-list-view'),
+        propsData: {
+          store: Store.create(),
+        },
+      });
+    });
+
+    it('Should render two tabs', () => {
+      expect(component.$el.querySelectorAll('ul li').length).toEqual(2);
+    });
+
+    it('Should render bagdes with zeros in both tabs indicating the number of available environments', () => {
+      expect(
+        component.$el.querySelector('.js-available-environments-count').textContent
+      ).toContain('0');
+      expect(
+        component.$el.querySelector('.js-stopped-environments-count').textContent
+      ).toContain('0');
+    });
+
+    it('Should render blank state information', () => {
+      expect(
+        component.$el.querySelector('.blank-state-title').textContent
+      ).toEqual('You don\'t have any environments right now.');
+
+      expect(
+        component.$el.querySelector('.blank-state-text').textContent
+      ).toEqual('Environments are places where code gets deployed, such as staging or production.');
+    });
+
+    it('Should render the provided help url', () => {
+      expect(
+        component.$el.querySelector('.blank-state a').getAttribute('href')
+      ).toEqual(component.$data.helpPagePath);
+    });
+
+    describe('With create permission', () => {
+      it('Should render new environment button', () => {
+        expect(
+          component.$el.querySelector('a.btn-create').getAttribute('href')
+        ).toEqual(component.$data.newEnvironmentPath);
+        expect(
+          component.$el.querySelector('a.btn-create').textContent
+        ).toEqual('New environment');
+      });
+    });
+
+    describe('Without create permission', () => {
+      beforeEach('Load fixture without permission', () => {
+        fixture.load('environments/environments_no_permission.html');
+        component = new window.gl.environmentsList.EnvironmentsComponent({
+          el: document.querySelector('#environments-list-view'),
+          propsData: {
+            store: Store.create(),
+          },
+        });
+      });
+
+      it('Should not render new environment button', () => {
+
+      });
+    });
+  });
+
+  describe('With environments', () => {
+    describe('Tabs behavior', () => {
+      it('Should render two tabs', () => {
+
+      });
+
+      it('Should render badges with the correct count', () => {
+
+      });
+
+      describe('When clicking in the available tab', () => {
+        it('Should make Available tab active', () => {
+
+        });
+
+        it('Should make visible only available environments', () => {
+
+        });
+      });
+
+      describe('When clicking in the stopped tab', () => {
+        it('Should make Stopped tab active', () => {
+
+        });
+
+        it('Should make visible only stopped environments', () => {
+
+        });
+      });
+    });
+
+    describe('With create permissions', () => {
+      it('Should render new environment button', () => {
+
+      });
+    });
+
+    describe('Without create permissions', () => {
+      it('Should not render the new environment button', () => {
+      });
+    });
+
+    it('Should render a table', () => {
+    });
+
+    it('Should render table pagination', () => {
+
+    });
+  });
+});
diff --git a/spec/javascripts/environments/environment_stop_spec.js.es6 b/spec/javascripts/environments/environment_stop_spec.js.es6
new file mode 100644
index 00000000000..07a68bf28fb
--- /dev/null
+++ b/spec/javascripts/environments/environment_stop_spec.js.es6
@@ -0,0 +1,34 @@
+//= require vue
+//= require environments/components/environment_stop
+describe('Stop Component', () => {
+  fixture.preload('environments/element.html');
+  beforeEach(() => {
+    fixture.load('environments/element.html');
+  });
+
+  it('should link to the provided URL', () => {
+    const stopURL = 'https://gitlab.com/stop';
+    const component = new window.gl.environmentsList.StopComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        stop_url: stopURL,
+      },
+    });
+    expect(component.$el.getAttribute('href')).toEqual(stopURL);
+  });
+
+  describe('When clicked', () => {
+    it('Should open popup with confirmation warning', () => {
+      const component = new window.gl.environmentsList.StopComponent({
+        el: document.querySelector('.test-dom-element'),
+        propsData: {
+          stop_url: '#',
+        },
+      });
+
+      const spy = spyOn(window, 'confirm');
+      component.$el.click();
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+});