updated specs

app/assets/javascripts/vue_merge_request_widget/components/deployment.vue

@@ -9,6 +9,13 @@ import MRWidgetService from '../services/mr_widget_service';
 
 export default {
   name: 'Deployment',
+  components: {
+    MemoryUsage,
+    StatusIcon,
+  },
+  directives: {
+    tooltip,
+  },
   mixins: [
     timeagoMixin,
   ],
@@ -18,22 +25,21 @@ export default {
       required: true,
     },
   },
-  components: {
-    MemoryUsage,
-    StatusIcon,
-  },
   computed: {
     deployTimeago() {
       return this.timeFormated(this.deployment.deployed_at);
     },
     hasExternalUrls() {
-      return this.deployment.external_url && this.deployment.external_url_formatted;
+      return !!(this.deployment.external_url && this.deployment.external_url_formatted);
     },
     hasDeploymentTime() {
-      return this.deployment.deployed_at && this.deployment.deployed_at_formatted;
+      return !!(this.deployment.deployed_at && this.deployment.deployed_at_formatted);
     },
     hasDeploymentMeta() {
-      return this.deployment.url && this.deployment.name;
+      return !!(this.deployment.url && this.deployment.name);
+    },
+    hasMetrics() {
+      return !!(this.deployment.metrics_url);
     },
   },
   methods: {
@@ -67,7 +73,8 @@ export default {
       <div class="media-body">
         <div class="deploy-body">
           <span
-            v-if="hasDeploymentMeta">
+            v-if="hasDeploymentMeta"
+          >
             Deployed to
           </span>
           <span class="deploy-link">
@@ -77,11 +84,12 @@ export default {
               target="_blank"
               rel="noopener noreferrer nofollow"
               class="js-deploy-meta">
-              {{deployment.name}}
+              {{ deployment.name }}
             </a>
           </span>
           <span
-            v-if="hasExternalUrls">
+            v-if="hasExternalUrls"
+          >
             on
           </span>
           <span class="deploy-link">
@@ -93,8 +101,10 @@ export default {
               class="js-deploy-url">
               <i
                 class="fa fa-external-link"
-                aria-hidden="true" />
-              {{deployment.external_url_formatted}}
+                aria-hidden="true"
+              >
+              </i>
+              {{ deployment.external_url_formatted }}
             </a>
           </span>
           <span
@@ -103,7 +113,7 @@ export default {
             class="js-deploy-time"
             data-toggle="tooltip"
             data-placement="top">
-            {{deployTimeago}}
+            {{ deployTimeago }}
           </span>
           <button
             type="button"
@@ -114,7 +124,7 @@ export default {
           </button>
         </div>
         <memory-usage
-          v-if="deployment.metrics_url"
+          v-if="hasMetrics"
           :metrics-url="deployment.metrics_url"
           :metrics-monitoring-url="deployment.metrics_monitoring_url"
         />

spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js → spec/javascripts/vue_mr_widget/components/deployment_spec.js

 import Vue from 'vue';
 import * as urlUtils from '~/lib/utils/url_utility';
-import deploymentComponent from '~/vue_merge_request_widget/components/mr_widget_deployment';
+import deploymentComponent from '~/vue_merge_request_widget/components/deployment.vue';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
 import { getTimeago } from '~/lib/utils/datetime_utility';
 
-const deploymentMockData = [
-  {
-    id: 15,
-    name: 'review/diplo',
-    url: '/root/acets-review-apps/environments/15',
-    stop_url: '/root/acets-review-apps/environments/15/stop',
-    metrics_url: '/root/acets-review-apps/environments/15/deployments/1/metrics',
-    metrics_monitoring_url: '/root/acets-review-apps/environments/15/metrics',
-    external_url: 'http://diplo.',
-    external_url_formatted: 'diplo.',
-    deployed_at: '2017-03-22T22:44:42.258Z',
-    deployed_at_formatted: 'Mar 22, 2017 10:44pm',
-  },
-];
+const deploymentMockData = {
+  id: 15,
+  name: 'review/diplo',
+  url: '/root/acets-review-apps/environments/15',
+  stop_url: '/root/acets-review-apps/environments/15/stop',
+  metrics_url: '/root/acets-review-apps/environments/15/deployments/1/metrics',
+  metrics_monitoring_url: '/root/acets-review-apps/environments/15/metrics',
+  external_url: 'http://diplo.',
+  external_url_formatted: 'diplo.',
+  deployed_at: '2017-03-22T22:44:42.258Z',
+  deployed_at_formatted: 'Mar 22, 2017 10:44pm',
+};
 const createComponent = () => {
   const Component = Vue.extend(deploymentComponent);
-  const mr = {
-    deployments: deploymentMockData,
-  };
-  const service = {};
 
   return new Component({
     el: document.createElement('div'),
-    propsData: { mr, service },
+    propsData: { deployment: { ...deploymentMockData } },
   });
 };
 
-describe('MRWidgetDeployment', () => {
-  describe('props', () => {
-    it('should have props', () => {
-      const { mr, service } = deploymentComponent.props;
-
-      expect(mr.type instanceof Object).toBeTruthy();
-      expect(mr.required).toBeTruthy();
+describe('Deployment component', () => {
+  let vm;
 
-      expect(service.type instanceof Object).toBeTruthy();
-      expect(service.required).toBeTruthy();
-    });
+  beforeEach(() => {
+    vm = createComponent();
   });
 
-  describe('methods', () => {
-    let vm = createComponent();
-    const deployment = deploymentMockData[0];
+  afterEach(() => {
+    vm.$destroy();
+  });
 
-    describe('formatDate', () => {
-      it('should work', () => {
-        const readable = getTimeago().format(deployment.deployed_at);
-        expect(vm.formatDate(deployment.deployed_at)).toEqual(readable);
+  describe('computed', () => {
+    describe('deployTimeago', () => {
+      it('return formatted date', () => {
+        const readable = getTimeago().format(deploymentMockData.deployed_at);
+        expect(vm.deployTimeago).toEqual(readable);
       });
     });
 
     describe('hasExternalUrls', () => {
       it('should return true', () => {
-        expect(vm.hasExternalUrls(deployment)).toBeTruthy();
+        expect(vm.hasExternalUrls).toEqual(true);
+      });
+
+      it('should return false when deployment has no external_url_formatted', () => {
+        vm.deployment.external_url_formatted = null;
+
+        expect(vm.hasExternalUrls).toEqual(false);
       });
 
-      it('should return false when there is not enough information', () => {
-        expect(vm.hasExternalUrls()).toBeFalsy();
-        expect(vm.hasExternalUrls({ external_url: 'Diplo' })).toBeFalsy();
-        expect(vm.hasExternalUrls({ external_url_formatted: 'Diplo' })).toBeFalsy();
+      it('should return false when deployment has no external_url', () => {
+        vm.deployment.external_url = null;
+
+        expect(vm.hasExternalUrls).toEqual(false);
       });
     });
 
     describe('hasDeploymentTime', () => {
       it('should return true', () => {
-        expect(vm.hasDeploymentTime(deployment)).toBeTruthy();
+        expect(vm.hasDeploymentTime).toEqual(true);
       });
 
-      it('should return false when there is not enough information', () => {
-        expect(vm.hasDeploymentTime()).toBeFalsy();
-        expect(vm.hasDeploymentTime({ deployed_at: 'Diplo' })).toBeFalsy();
-        expect(vm.hasDeploymentTime({ deployed_at_formatted: 'Diplo' })).toBeFalsy();
+      it('should return false when deployment has no deployed_at', () => {
+        vm.deployment.deployed_at = null;
+
+        expect(vm.hasDeploymentTime).toEqual(false);
+      });
+
+      it('should return false when deployment has no deployed_at_formatted', () => {
+        vm.deployment.deployed_at_formatted = null;
+
+        expect(vm.hasDeploymentTime).toEqual(false);
       });
     });
 
     describe('hasDeploymentMeta', () => {
       it('should return true', () => {
-        expect(vm.hasDeploymentMeta(deployment)).toBeTruthy();
+        expect(vm.hasDeploymentMeta).toEqual(true);
       });
 
-      it('should return false when there is not enough information', () => {
-        expect(vm.hasDeploymentMeta()).toBeFalsy();
-        expect(vm.hasDeploymentMeta({ url: 'Diplo' })).toBeFalsy();
-        expect(vm.hasDeploymentMeta({ name: 'Diplo' })).toBeFalsy();
+      it('should return false when deployment has no url', () => {
+        vm.deployment.url = null;
+
+        expect(vm.hasDeploymentMeta).toEqual(false);
+      });
+
+      it('should return false when deployment has no name', () => {
+        vm.deployment.name = null;
+
+        expect(vm.hasDeploymentMeta).toEqual(false);
       });
     });
+  });
 
+  describe('methods', () => {
     describe('stopEnvironment', () => {
       const url = '/foo/bar';
       const returnPromise = () => new Promise((resolve) => {
@@ -131,9 +140,7 @@ describe('MRWidgetDeployment', () => {
   });
 
   describe('template', () => {
-    let vm;
     let el;
-    const [deployment] = deploymentMockData;
 
     beforeEach(() => {
       vm = createComponent(deploymentMockData);
@@ -141,39 +148,15 @@ describe('MRWidgetDeployment', () => {
     });
 
     it('should render template elements correctly', () => {
-      expect(el.classList.contains('mr-widget-heading')).toBeTruthy();
-      expect(el.querySelector('.js-icon-link')).toBeDefined();
-      expect(el.querySelector('.js-deploy-meta').getAttribute('href')).toEqual(deployment.url);
-      expect(el.querySelector('.js-deploy-meta').innerText).toContain(deployment.name);
-      expect(el.querySelector('.js-deploy-url').getAttribute('href')).toEqual(deployment.external_url);
-      expect(el.querySelector('.js-deploy-url').innerText).toContain(deployment.external_url_formatted);
-      expect(el.querySelector('.js-deploy-time').innerText).toContain(vm.formatDate(deployment.deployed_at));
-      expect(el.querySelector('.js-mr-memory-usage')).toBeDefined();
-      expect(el.querySelector('button')).toBeDefined();
-    });
-
-    it('should list multiple deployments', (done) => {
-      vm.mr.deployments.push(deployment);
-      vm.mr.deployments.push(deployment);
-
-      Vue.nextTick(() => {
-        expect(el.querySelectorAll('.ci-widget').length).toEqual(3);
-        expect(el.querySelectorAll('.js-mr-memory-usage').length).toEqual(3);
-        done();
-      });
-    });
-
-    it('should not have some elements when there is not enough data', (done) => {
-      vm.mr.deployments = [{}];
-
-      Vue.nextTick(() => {
-        expect(el.querySelectorAll('.js-deploy-meta').length).toEqual(0);
-        expect(el.querySelectorAll('.js-deploy-url').length).toEqual(0);
-        expect(el.querySelectorAll('.js-deploy-time').length).toEqual(0);
-        expect(el.querySelectorAll('.js-mr-memory-usage').length).toEqual(0);
-        expect(el.querySelectorAll('.button').length).toEqual(0);
-        done();
-      });
+      expect(el.classList.contains('mr-widget-heading')).toEqual(true);
+      expect(el.querySelector('.js-icon-link')).not.toBeNull();
+      expect(el.querySelector('.js-deploy-meta').getAttribute('href')).toEqual(deploymentMockData.url);
+      expect(el.querySelector('.js-deploy-meta').innerText).toContain(deploymentMockData.name);
+      expect(el.querySelector('.js-deploy-url').getAttribute('href')).toEqual(deploymentMockData.external_url);
+      expect(el.querySelector('.js-deploy-url').innerText).toContain(deploymentMockData.external_url_formatted);
+      expect(el.querySelector('.js-deploy-time').innerText).toContain(vm.deployTimeago);
+      expect(el.querySelector('.js-mr-memory-usage')).not.toBeNull();
+      expect(el.querySelector('button')).not.toBeNull();
     });
   });
 });

spec/javascripts/vue_mr_widget/mr_widget_options_spec.js

@@ -12,7 +12,7 @@ const returnPromise = data => new Promise((resolve) => {
   });
 });
 
-describe('mrWidgetOptions', () => {
+fdescribe('mrWidgetOptions', () => {
   let vm;
   let MrWidgetOptions;
 
@@ -189,16 +189,16 @@ describe('mrWidgetOptions', () => {
 
     describe('fetchDeployments', () => {
       it('should fetch deployments', (done) => {
-        spyOn(vm.service, 'fetchDeployments').and.returnValue(returnPromise([{ deployment: 1 }]));
+        spyOn(vm.service, 'fetchDeployments').and.returnValue(returnPromise([{ id: 1 }]));
 
         vm.fetchDeployments();
 
         setTimeout(() => {
           expect(vm.service.fetchDeployments).toHaveBeenCalled();
           expect(vm.mr.deployments.length).toEqual(1);
-          expect(vm.mr.deployments[0].deployment).toEqual(1);
+          expect(vm.mr.deployments[0].id).toBe(1);
           done();
-        }, 333);
+        });
       });
     });
 
@@ -374,7 +374,7 @@ describe('mrWidgetOptions', () => {
       expect(comps['mr-widget-header']).toBeDefined();
       expect(comps['mr-widget-merge-help']).toBeDefined();
       expect(comps['mr-widget-pipeline']).toBeDefined();
-      expect(comps['mr-widget-deployment']).toBeDefined();
+      expect(comps.Deployment).toBeDefined();
       expect(comps['mr-widget-related-links']).toBeDefined();
       expect(comps['mr-widget-merged']).toBeDefined();
       expect(comps['mr-widget-closed']).toBeDefined();
@@ -454,4 +454,34 @@ describe('mrWidgetOptions', () => {
       });
     });
   });
+
+  describe('rendering deployments', () => {
+    const deploymentMockData = {
+      id: 15,
+      name: 'review/diplo',
+      url: '/root/acets-review-apps/environments/15',
+      stop_url: '/root/acets-review-apps/environments/15/stop',
+      metrics_url: '/root/acets-review-apps/environments/15/deployments/1/metrics',
+      metrics_monitoring_url: '/root/acets-review-apps/environments/15/metrics',
+      external_url: 'http://diplo.',
+      external_url_formatted: 'diplo.',
+      deployed_at: '2017-03-22T22:44:42.258Z',
+      deployed_at_formatted: 'Mar 22, 2017 10:44pm',
+    };
+
+    beforeEach((done) => {
+      vm.mr.deployments.push({
+        ...deploymentMockData,
+      }, {
+        ...deploymentMockData,
+        id: deploymentMockData.id + 1,
+      });
+
+      vm.$nextTick(done);
+    });
+
+    it('renders multiple deployments', () => {
+      expect(vm.$el.querySelectorAll('.deploy-heading').length).toBe(2);
+    });
+  });
 });