Adds missing tests

Adds tests and verifies environment has rollout_status key

Remove fake API response

app/assets/javascripts/environments/components/deploy_board_component.js.es6

@@ -101,6 +101,25 @@ module.exports = Vue.component('deploy_boards_components', {
     });
   },
 
+  computed: {
+    canRenderDeployBoard() {
+      return !this.isLoading && !this.hasError && Object.keys(this.deployBoardData).length;
+    },
+
+    instanceTitle() {
+      let title;
+      if (this.deployBoardData.instances.length === 1) {
+        title = 'Instance';
+      }
+
+      if (this.deployBoardData.instances.length > 1) {
+        title = 'Instances';
+      }
+
+      return title;
+    },
+  },
+
   template: `
     <div class="js-deploy-board deploy-board">
 
@@ -108,14 +127,17 @@ module.exports = Vue.component('deploy_boards_components', {
         <i class="fa fa-spinner fa-spin"></i>
       </div>
 
-      <div v-if="!isLoading && !hasError">
+      <div v-if="canRenderDeployBoard">
+
         <section class="deploy-board-information">
+          <span>
             <span class="percentage">{{deployBoardData.completion}}%</span>
             <span class="text">Complete</span>
+          </span>
         </section>
 
         <section class="deploy-board-instances">
-          <p class="text">Instances</p>
+          <p class="text">{{instanceTitle}}</p>
 
           <div class="deploy-board-instances-container">
             <template v-for="instance in deployBoardData.instances">
@@ -146,7 +168,7 @@ module.exports = Vue.component('deploy_boards_components', {
         </section>
       </div>
 
-      <div v-if="!isLoading && hasError">
+      <div v-if="!isLoading && hasError" class="deploy-board-error-message">
         We can't fetch the data right now. Please try again later.
       </div>
     </div>

app/assets/javascripts/environments/components/environment.js.es6

@@ -102,13 +102,13 @@ module.exports = Vue.component('environment-component', {
   methods: {
 
     /**
-     * Toggles the visibility of the deploy boards to the clicked environment.
+     * Toggles the visibility of the deploy boards of the clicked environment.
      *
      * @param  {Object} model
      * @return {Object}
      */
     toggleDeployBoard(model) {
-      return this.store.toggleDeployBoard(model);
+      return this.store.toggleDeployBoard(model.id);
     },
 
     /**

app/assets/javascripts/environments/components/environment_item.js.es6

@@ -419,17 +419,6 @@ module.exports = Vue.component('environment-item', {
     folderUrl() {
       return `${window.location.pathname}/folders/${this.model.folderName}`;
     },
-
-    /**
-     * If the environment can have a deploy board we need to render an arrow icon
-     * next to it's name.
-     *
-     * @return {Boolean}
-     */
-    hasDeployBoard() {
-      return true;
-      // return this.model.rollout_status;
-    },
   },
 
   /**
@@ -451,7 +440,7 @@ module.exports = Vue.component('environment-item', {
     <tr>
       <td>
         <span class="deploy-board-icon"
-          v-if="!model.isFolder"
+          v-if="model.hasDeployBoard"
           v-on:click="toggleDeployBoard(model)">
 
           <i v-show="!model.isDeployBoardVisible"

app/assets/javascripts/environments/components/environments_table.js.es6

@@ -93,8 +93,7 @@ module.exports = Vue.component('environment-table-component', {
             :commit-icon-svg="commitIconSvg"
             :toggleDeployBoard="toggleDeployBoard.bind(model)"></tr>
 
-          <tr v-if="model.isDeployBoardVisible" class="js-deploy-board-row">
-
+          <tr v-if="model.hasDeployBoard && model.isDeployBoardVisible" class="js-deploy-board-row">
             <td colspan="6" class="deploy-board-container">
               <deploy-board
                 :store="store"
@@ -103,9 +102,7 @@ module.exports = Vue.component('environment-table-component', {
                 :deployBoardData="model.deployBoardData">
               </deploy-board>
             </td>
-
           </tr>
-
         </template>
       </tbody>
     </table>

app/assets/javascripts/environments/stores/environments_store.js.es6

@@ -45,26 +45,26 @@ class EnvironmentsStore {
     const filteredEnvironments = environments.map((env) => {
       let filtered = {};
 
+      if (env.latest) {
+        filtered = Object.assign(filtered, env, env.latest);
+        delete filtered.latest;
+      } else {
+        filtered = Object.assign(filtered, env);
+      }
+
       if (env.size > 1) {
-        filtered = Object.assign({}, env, { isFolder: true, folderName: env.name });
+        filtered = Object.assign(filtered, env, { isFolder: true, folderName: env.name });
       }
 
-      // FIX ME
-      // no folders items with `x` key can have a deploy board
-      if (env.size === 1) {
-        filtered = Object.assign({}, env, {
+      // no folders items with `rollout_status` key can have a deploy board
+      if (env.size === 1 && env.rollout_status) {
+        filtered = Object.assign(filtered, env, {
+          hasDeployBoard: true,
           isDeployBoardVisible: false,
           deployBoardData: {},
         });
       }
 
-      if (env.latest) {
-        filtered = Object.assign(filtered, env, env.latest);
-        delete filtered.latest;
-      } else {
-        filtered = Object.assign(filtered, env);
-      }
-
       return filtered;
     });
 
@@ -118,18 +118,18 @@ class EnvironmentsStore {
   }
 
   /**
-   * Toggles deploy board visibility for the provided environment.
+   * Toggles deploy board visibility for the provided environment ID.
    *
    * @param  {Object} environment
    * @return {Array}
    */
-  toggleDeployBoard(environment) {
+  toggleDeployBoard(environmentID) {
     const environments = Object.assign([], this.state.environments);
 
     this.state.environments = environments.map((env) => {
       let updated = Object.assign({}, env);
 
-      if (env.id === environment.id) {
+      if (env.id === environmentID) {
         updated = Object.assign({}, updated, { isDeployBoardVisible: !env.isDeployBoardVisible });
       }
       return updated;

app/assets/stylesheets/pages/environments.scss

@@ -161,6 +161,10 @@
     justify-content: center;
     margin: 20px 10px;
 
+    > span {
+      text-align: center;
+    }
+
     .percentage {
       color: $gl-text-color;
     }
@@ -172,7 +176,7 @@
 
   .deploy-board-instances {
     order: 2;
-    max-width: 75%;
+    width: 75%;
 
     .text {
       color: $gl-text-color-secondary;
@@ -191,6 +195,10 @@
     order: 3;
     align-self: center;
   }
+
+  .deploy-board-error-message {
+    justify-content: center;
+  }
 }
 
 .deploy-board-instance {
@@ -234,7 +242,7 @@
 
 .deploy-board-icon i {
   cursor: pointer;
-  color: $border-color;
+  color: $layout-link-gray;
   padding-right: 10px;
 }
 

spec/javascripts/environments/environment_table_spec.js.es6

@@ -61,7 +61,9 @@ describe('Environment item', () => {
     });
 
     expect(component.$el.querySelector('.js-deploy-board-row')).toBeDefined();
-    expect(component.$el.querySelector('.deploy-board-icon i').classList).toContain('fa-caret-down');
+    expect(
+      component.$el.querySelector('.deploy-board-icon i').classList.contains('fa-caret-right'),
+    ).toEqual(true);
   });
 
   it('should toggle deploy board visibility when arrow is clicked', () => {
@@ -82,22 +84,22 @@ describe('Environment item', () => {
       isDeployBoardVisible: false,
     };
 
+    const spy = jasmine.createSpy('spy');
+
     const component = new EnvironmentTable({
       el: document.querySelector('.test-dom-element'),
       propsData: {
         environments: [mockItem],
         canCreateDeployment: true,
         canReadEnvironment: true,
-        toggleDeployBoard: () => {},
+        toggleDeployBoard: spy,
         store: {},
         service: {},
       },
     });
 
-    expect(component.$el.querySelector('.deploy-board-icon')).toContain('fa-caret-right');
-
     component.$el.querySelector('.deploy-board-icon').click();
 
-    // expect toggleDeployBoard to have been called
+    expect(spy).toHaveBeenCalled();
   });
 });

spec/javascripts/environments/environments_store_spec.js.es6

 const Store = require('~/environments/stores/environments_store');
-const { serverData } = require('./mock_data');
+const { serverData, deployBoardMockData } = require('./mock_data');
 
 (() => {
-  describe('Store', () => {
+  describe('Environments Store', () => {
     let store;
 
     beforeEach(() => {
@@ -22,14 +22,16 @@ const { serverData } = require('./mock_data');
         expect(store.state.environments.length).toEqual(serverData.length);
       });
 
-      it('should store a non folder environment with deploy board if x key is provided', () => {
+      it('should store a non folder environment with deploy board if rollout_status key is provided', () => {
         const environment = {
           name: 'foo',
           size: 1,
           id: 1,
+          rollout_status: 'url',
         };
 
         store.storeEnvironments([environment]);
+        expect(store.state.environments[0].hasDeployBoard).toEqual(true);
         expect(store.state.environments[0].isDeployBoardVisible).toEqual(false);
         expect(store.state.environments[0].deployBoardData).toEqual({});
       });
@@ -99,12 +101,24 @@ const { serverData } = require('./mock_data');
     });
 
     describe('deploy boards', () => {
-      it('should toggle deploy board property for given environment id', () => {
+      beforeEach(() => {
+        const environment = {
+          name: 'foo',
+          size: 1,
+          id: 1,
+        };
 
+        store.storeEnvironments([environment]);
       });
 
-      it('should store deploy board data for given environment id', () => {
+      it('should toggle deploy board property for given environment id', () => {
+        store.toggleDeployBoard(1);
+        expect(store.state.environments[0].isDeployBoardVisible).toEqual(true);
+      });
 
+      it('should store deploy board data for given environment id', () => {
+        store.storeDeployBoard(1, deployBoardMockData);
+        expect(store.state.environments[0].deployBoardData).toEqual(deployBoardMockData);
       });
     });
   });