Pretty pretty pretty

Many files must be formatted

ee/spec/javascripts/environments/environments_table_spec.js → ee/spec/frontend/environments/environments_table_spec.js

-import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import environmentTableComp from '~/environments/components/environments_table.vue';
+import { mount } from '@vue/test-utils';
+import EnvironmentTable from '~/environments/components/environments_table.vue';
 import eventHub from '~/environments/event_hub';
-import { deployBoardMockData } from './mock_data';
+import deployBoardMockData from './mock_data';
 
 describe('Environment table', () => {
-  let Component;
-  let vm;
-
-  beforeEach(() => {
-    Component = Vue.extend(environmentTableComp);
+  let wrapper;
+
+  const factory = (options = {}) => {
+    // This destroys any wrappers created before a nested call to factory reassigns it
+    if (wrapper && wrapper.destroy) {
+      wrapper.destroy();
+    }
+    wrapper = mount(EnvironmentTable, {
+      ...options,
     });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('Should render a table', () => {
@@ -25,7 +29,8 @@ describe('Environment table', () => {
       environment_path: 'url',
     };
 
-    vm = mountComponent(Component, {
+    factory({
+      propsData: {
         environments: [mockItem],
         canReadEnvironment: true,
         canaryDeploymentFeatureId: 'canary_deployment',
@@ -33,9 +38,10 @@ describe('Environment table', () => {
         userCalloutsPath: '/callouts',
         lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
         helpCanaryDeploymentsPath: 'help/canary-deployments',
+      },
     });
 
-    expect(vm.$el.getAttribute('class')).toContain('ci-table');
+    expect(wrapper.classes()).toContain('ci-table');
   });
 
   it('should render deploy board container when data is provided', () => {
@@ -51,7 +57,8 @@ describe('Environment table', () => {
       isEmptyDeployBoard: false,
     };
 
-    vm = mountComponent(Component, {
+    factory({
+      propsData: {
         environments: [mockItem],
         canCreateDeployment: false,
         canReadEnvironment: true,
@@ -60,10 +67,11 @@ describe('Environment table', () => {
         userCalloutsPath: '/callouts',
         lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
         helpCanaryDeploymentsPath: 'help/canary-deployments',
+      },
     });
 
-    expect(vm.$el.querySelector('.js-deploy-board-row')).toBeDefined();
-    expect(vm.$el.querySelector('.deploy-board-icon')).not.toBeNull();
+    expect(wrapper.find('.js-deploy-board-row')).toBeDefined();
+    expect(wrapper.find('.deploy-board-icon')).not.toBeNull();
   });
 
   it('should toggle deploy board visibility when arrow is clicked', done => {
@@ -88,7 +96,8 @@ describe('Environment table', () => {
       done();
     });
 
-    vm = mountComponent(Component, {
+    factory({
+      propsData: {
         environments: [mockItem],
         canReadEnvironment: true,
         canaryDeploymentFeatureId: 'canary_deployment',
@@ -96,9 +105,10 @@ describe('Environment table', () => {
         userCalloutsPath: '/callouts',
         lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
         helpCanaryDeploymentsPath: 'help/canary-deployments',
+      },
     });
 
-    vm.$el.querySelector('.deploy-board-icon').click();
+    wrapper.find('.deploy-board-icon').trigger('click');
   });
 
   it('should render canary callout', () => {
@@ -111,7 +121,8 @@ describe('Environment table', () => {
       showCanaryCallout: true,
     };
 
-    vm = mountComponent(Component, {
+    factory({
+      propsData: {
         environments: [mockItem],
         canCreateDeployment: false,
         canReadEnvironment: true,
@@ -120,8 +131,9 @@ describe('Environment table', () => {
         userCalloutsPath: '/callouts',
         lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
         helpCanaryDeploymentsPath: 'help/canary-deployments',
+      },
     });
 
-    expect(vm.$el.querySelector('.canary-deployment-callout')).not.toBeNull();
+    expect(wrapper.find('.canary-deployment-callout')).not.toBeNull();
   });
 });

ee/spec/frontend/environments/mock_data.js

+const deployBoardMockData = {
+  instances: [
+    { status: 'finished', tooltip: 'tanuki-2334 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2335 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2336 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2337 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2338 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2339 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2340 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2334 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2335 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2336 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2337 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2338 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2339 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2340 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'deploying', tooltip: 'tanuki-2341 Deploying', pod_name: 'production-tanuki-1' },
+    { status: 'deploying', tooltip: 'tanuki-2342 Deploying', pod_name: 'production-tanuki-1' },
+    { status: 'deploying', tooltip: 'tanuki-2343 Deploying', pod_name: 'production-tanuki-1' },
+    { status: 'failed', tooltip: 'tanuki-2344 Failed', pod_name: 'production-tanuki-1' },
+    { status: 'ready', tooltip: 'tanuki-2345 Ready', pod_name: 'production-tanuki-1' },
+    { status: 'ready', tooltip: 'tanuki-2346 Ready', pod_name: 'production-tanuki-1' },
+    { status: 'preparing', tooltip: 'tanuki-2348 Preparing', pod_name: 'production-tanuki-1' },
+    { status: 'preparing', tooltip: 'tanuki-2349 Preparing', pod_name: 'production-tanuki-1' },
+    { status: 'preparing', tooltip: 'tanuki-2350 Preparing', pod_name: 'production-tanuki-1' },
+    { status: 'preparing', tooltip: 'tanuki-2353 Preparing', pod_name: 'production-tanuki-1' },
+    { status: 'waiting', tooltip: 'tanuki-2354 Waiting', pod_name: 'production-tanuki-1' },
+    { status: 'waiting', tooltip: 'tanuki-2355 Waiting', pod_name: 'production-tanuki-1' },
+    { status: 'waiting', tooltip: 'tanuki-2356 Waiting', pod_name: 'production-tanuki-1' },
+  ],
+  abort_url: 'url',
+  rollback_url: 'url',
+  completion: 100,
+  status: 'found',
+};
+
+export default deployBoardMockData;

spec/frontend/environments/environment_item_spec.js

+import { mount } from '@vue/test-utils';
+import { format } from 'timeago.js';
+import EnvironmentItem from '~/environments/components/environment_item.vue';
+import { environment, folder, tableData } from './mock_data';
+
+describe('Environment item', () => {
+  let wrapper;
+
+  const factory = (options = {}) => {
+    // This destroys any wrappers created before a nested call to factory reassigns it
+    if (wrapper && wrapper.destroy) {
+      wrapper.destroy();
+    }
+    wrapper = mount(EnvironmentItem, {
+      ...options,
+    });
+  };
+
+  beforeEach(() => {
+    factory({
+      propsData: {
+        model: environment,
+        canReadEnvironment: true,
+        tableData,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when item is not folder', () => {
+    it('should render environment name', () => {
+      expect(wrapper.find('.environment-name').text()).toContain(environment.name);
+    });
+
+    describe('With deployment', () => {
+      it('should render deployment internal id', () => {
+        expect(wrapper.find('.deployment-column span').text()).toContain(
+          environment.last_deployment.iid,
+        );
+
+        expect(wrapper.find('.deployment-column span').text()).toContain('#');
+      });
+
+      it('should render last deployment date', () => {
+        const formatedDate = format(environment.last_deployment.deployed_at);
+
+        expect(wrapper.find('.environment-created-date-timeago').text()).toContain(formatedDate);
+      });
+
+      describe('With user information', () => {
+        it('should render user avatar with link to profile', () => {
+          expect(wrapper.find('.js-deploy-user-container').attributes('href')).toEqual(
+            environment.last_deployment.user.web_url,
+          );
+        });
+      });
+
+      describe('With build url', () => {
+        it('should link to build url provided', () => {
+          expect(wrapper.find('.build-link').attributes('href')).toEqual(
+            environment.last_deployment.deployable.build_path,
+          );
+        });
+
+        it('should render deployable name and id', () => {
+          expect(wrapper.find('.build-link').attributes('href')).toEqual(
+            environment.last_deployment.deployable.build_path,
+          );
+        });
+      });
+
+      describe('With commit information', () => {
+        it('should render commit component', () => {
+          expect(wrapper.find('.js-commit-component')).toBeDefined();
+        });
+      });
+    });
+
+    describe('With manual actions', () => {
+      it('should render actions component', () => {
+        expect(wrapper.find('.js-manual-actions-container')).toBeDefined();
+      });
+    });
+
+    describe('With external URL', () => {
+      it('should render external url component', () => {
+        expect(wrapper.find('.js-external-url-container')).toBeDefined();
+      });
+    });
+
+    describe('With stop action', () => {
+      it('should render stop action component', () => {
+        expect(wrapper.find('.js-stop-component-container')).toBeDefined();
+      });
+    });
+
+    describe('With retry action', () => {
+      it('should render rollback component', () => {
+        expect(wrapper.find('.js-rollback-component-container')).toBeDefined();
+      });
+    });
+  });
+
+  describe('When item is folder', () => {
+    beforeEach(() => {
+      factory({
+        propsData: {
+          model: folder,
+          canReadEnvironment: true,
+          tableData,
+        },
+      });
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('should render folder icon and name', () => {
+      expect(wrapper.find('.folder-name').text()).toContain(folder.name);
+      expect(wrapper.find('.folder-icon')).toBeDefined();
+    });
+
+    it('should render the number of children in a badge', () => {
+      expect(wrapper.find('.folder-name .badge').text()).toContain(folder.size);
+    });
+  });
+});

spec/javascripts/environments/environment_table_spec.js → spec/frontend/environments/environment_table_spec.js

-import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import environmentTableComp from '~/environments/components/environments_table.vue';
+import { mount } from '@vue/test-utils';
+import EnvironmentTable from '~/environments/components/environments_table.vue';
+import { folder } from './mock_data';
 
-describe('Environment table', () => {
-  let Component;
-  let vm;
-
-  const eeOnlyProps = {
+const eeOnlyProps = {
   canaryDeploymentFeatureId: 'canary_deployment',
   showCanaryDeploymentCallout: true,
   userCalloutsPath: '/callouts',
   lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
   helpCanaryDeploymentsPath: 'help/canary-deployments',
-  };
+};
 
-  beforeEach(() => {
-    Component = Vue.extend(environmentTableComp);
-  });
+describe('Environment table', () => {
+  let wrapper;
 
-  afterEach(() => {
-    vm.$destroy();
+  const factory = (options = {}) => {
+    // This destroys any wrappers created before a nested call to factory reassigns it
+    if (wrapper && wrapper.destroy) {
+      wrapper.destroy();
+    }
+    wrapper = mount(EnvironmentTable, {
+      ...options,
     });
-
-  it('Should render a table', () => {
-    const mockItem = {
-      name: 'review',
-      size: 3,
-      isFolder: true,
-      latest: {
-        environment_path: 'url',
-      },
   };
 
-    vm = mountComponent(Component, {
-      environments: [mockItem],
+  beforeEach(() => {
+    factory({
+      propsData: {
+        environments: [folder],
         canReadEnvironment: true,
         ...eeOnlyProps,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
   });
 
-    expect(vm.$el.getAttribute('class')).toContain('ci-table');
+  it('Should render a table', () => {
+    expect(wrapper.classes()).toContain('ci-table');
   });
 
   describe('sortEnvironments', () => {
@@ -73,15 +73,17 @@ describe('Environment table', () => {
         },
       ];
 
-      vm = mountComponent(Component, {
+      factory({
+        propsData: {
           environments: mockItems,
           canReadEnvironment: true,
           ...eeOnlyProps,
+        },
       });
 
       const [old, newer, older, noDeploy] = mockItems;
 
-      expect(vm.sortEnvironments(mockItems)).toEqual([newer, old, older, noDeploy]);
+      expect(wrapper.vm.sortEnvironments(mockItems)).toEqual([newer, old, older, noDeploy]);
     });
 
     it('should push environments with no deployments to the bottom', () => {
@@ -137,15 +139,17 @@ describe('Environment table', () => {
         },
       ];
 
-      vm = mountComponent(Component, {
+      factory({
+        propsData: {
           environments: mockItems,
           canReadEnvironment: true,
           ...eeOnlyProps,
+        },
       });
 
       const [prod, review, staging] = mockItems;
 
-      expect(vm.sortEnvironments(mockItems)).toEqual([review, staging, prod]);
+      expect(wrapper.vm.sortEnvironments(mockItems)).toEqual([review, staging, prod]);
     });
 
     it('should sort environments by folder first', () => {
@@ -174,15 +178,17 @@ describe('Environment table', () => {
         },
       ];
 
-      vm = mountComponent(Component, {
+      factory({
+        propsData: {
           environments: mockItems,
           canReadEnvironment: true,
           ...eeOnlyProps,
+        },
       });
 
       const [old, newer, older] = mockItems;
 
-      expect(vm.sortEnvironments(mockItems)).toEqual([older, newer, old]);
+      expect(wrapper.vm.sortEnvironments(mockItems)).toEqual([older, newer, old]);
     });
 
     it('should break ties by name', () => {
@@ -201,15 +207,17 @@ describe('Environment table', () => {
         },
       ];
 
-      vm = mountComponent(Component, {
+      factory({
+        propsData: {
           environments: mockItems,
           canReadEnvironment: true,
           ...eeOnlyProps,
+        },
       });
 
       const [old, newer, older] = mockItems;
 
-      expect(vm.sortEnvironments(mockItems)).toEqual([older, newer, old]);
+      expect(wrapper.vm.sortEnvironments(mockItems)).toEqual([older, newer, old]);
     });
   });
 
@@ -250,19 +258,21 @@ describe('Environment table', () => {
       const [production, review, staging] = mockItems;
       const [addcibuildstatus, master] = mockItems[1].children;
 
-      vm = mountComponent(Component, {
+      factory({
+        propsData: {
           environments: mockItems,
           canReadEnvironment: true,
           ...eeOnlyProps,
+        },
       });
 
-      expect(vm.sortedEnvironments.map(env => env.name)).toEqual([
+      expect(wrapper.vm.sortedEnvironments.map(env => env.name)).toEqual([
         review.name,
         staging.name,
         production.name,
       ]);
 
-      expect(vm.sortedEnvironments[0].children).toEqual([master, addcibuildstatus]);
+      expect(wrapper.vm.sortedEnvironments[0].children).toEqual([master, addcibuildstatus]);
     });
   });
 });

spec/frontend/environments/mock_data.js

+const environment = {
+  name: 'production',
+  size: 1,
+  state: 'stopped',
+  external_url: 'http://external.com',
+  environment_type: null,
+  last_deployment: {
+    id: 66,
+    iid: 6,
+    sha: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+    ref: {
+      name: 'master',
+      ref_url: 'root/ci-folders/tree/master',
+    },
+    tag: true,
+    'last?': true,
+    user: {
+      name: 'Administrator',
+      username: 'root',
+      id: 1,
+      state: 'active',
+      avatar_url:
+        'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+      web_url: 'http://localhost:3000/root',
+    },
+    commit: {
+      id: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+      short_id: '500aabcb',
+      title: 'Update .gitlab-ci.yml',
+      author_name: 'Administrator',
+      author_email: 'admin@example.com',
+      created_at: '2016-11-07T18:28:13.000+00:00',
+      message: 'Update .gitlab-ci.yml',
+      author: {
+        name: 'Administrator',
+        username: 'root',
+        id: 1,
+        state: 'active',
+        avatar_url:
+          'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+        web_url: 'http://localhost:3000/root',
+      },
+      commit_path: '/root/ci-folders/tree/500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+    },
+    deployable: {
+      id: 1279,
+      name: 'deploy',
+      build_path: '/root/ci-folders/builds/1279',
+      retry_path: '/root/ci-folders/builds/1279/retry',
+      created_at: '2016-11-29T18:11:58.430Z',
+      updated_at: '2016-11-29T18:11:58.430Z',
+    },
+    manual_actions: [
+      {
+        name: 'action',
+        play_path: '/play',
+      },
+    ],
+    deployed_at: '2016-11-29T18:11:58.430Z',
+  },
+  has_stop_action: true,
+  environment_path: 'root/ci-folders/environments/31',
+  log_path: 'root/ci-folders/environments/31/logs',
+  created_at: '2016-11-07T11:11:16.525Z',
+  updated_at: '2016-11-10T15:55:58.778Z',
+};
+
+const folder = {
+  name: 'review',
+  folderName: 'review',
+  size: 3,
+  isFolder: true,
+  environment_path: 'url',
+  log_path: 'url',
+  latest: {
+    environment_path: 'url',
+  },
+};
+
+const tableData = {
+  name: {
+    title: 'Environment',
+    spacing: 'section-15',
+  },
+  deploy: {
+    title: 'Deployment',
+    spacing: 'section-10',
+  },
+  build: {
+    title: 'Job',
+    spacing: 'section-15',
+  },
+  commit: {
+    title: 'Commit',
+    spacing: 'section-20',
+  },
+  date: {
+    title: 'Updated',
+    spacing: 'section-10',
+  },
+  actions: {
+    spacing: 'section-25',
+  },
+};
+
+export { environment, folder, tableData };

spec/javascripts/environments/environment_item_spec.js

-import { format } from 'timeago.js';
-import Vue from 'vue';
-import environmentItemComp from '~/environments/components/environment_item.vue';
-
-const tableData = {
-  name: {
-    title: 'Environment',
-    spacing: 'section-15',
-  },
-  deploy: {
-    title: 'Deployment',
-    spacing: 'section-10',
-  },
-  build: {
-    title: 'Job',
-    spacing: 'section-15',
-  },
-  commit: {
-    title: 'Commit',
-    spacing: 'section-20',
-  },
-  date: {
-    title: 'Updated',
-    spacing: 'section-10',
-  },
-  actions: {
-    spacing: 'section-25',
-  },
-};
-
-describe('Environment item', () => {
-  let EnvironmentItem;
-
-  beforeEach(() => {
-    EnvironmentItem = Vue.extend(environmentItemComp);
-  });
-
-  describe('When item is folder', () => {
-    let mockItem;
-    let component;
-
-    beforeEach(() => {
-      mockItem = {
-        name: 'review',
-        folderName: 'review',
-        size: 3,
-        isFolder: true,
-        environment_path: 'url',
-        log_path: 'url',
-      };
-
-      component = new EnvironmentItem({
-        propsData: {
-          model: mockItem,
-          canReadEnvironment: true,
-          tableData,
-        },
-      }).$mount();
-    });
-
-    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', () => {
-      expect(component.$el.querySelector('.folder-name .badge').textContent).toContain(
-        mockItem.size,
-      );
-    });
-  });
-
-  describe('when item is not folder', () => {
-    let environment;
-    let component;
-
-    beforeEach(() => {
-      environment = {
-        name: 'production',
-        size: 1,
-        state: 'stopped',
-        external_url: 'http://external.com',
-        environment_type: null,
-        last_deployment: {
-          id: 66,
-          iid: 6,
-          sha: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
-          ref: {
-            name: 'master',
-            ref_url: 'root/ci-folders/tree/master',
-          },
-          tag: true,
-          'last?': true,
-          user: {
-            name: 'Administrator',
-            username: 'root',
-            id: 1,
-            state: 'active',
-            avatar_url:
-              'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
-            web_url: 'http://localhost:3000/root',
-          },
-          commit: {
-            id: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
-            short_id: '500aabcb',
-            title: 'Update .gitlab-ci.yml',
-            author_name: 'Administrator',
-            author_email: 'admin@example.com',
-            created_at: '2016-11-07T18:28:13.000+00:00',
-            message: 'Update .gitlab-ci.yml',
-            author: {
-              name: 'Administrator',
-              username: 'root',
-              id: 1,
-              state: 'active',
-              avatar_url:
-                'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
-              web_url: 'http://localhost:3000/root',
-            },
-            commit_path: '/root/ci-folders/tree/500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
-          },
-          deployable: {
-            id: 1279,
-            name: 'deploy',
-            build_path: '/root/ci-folders/builds/1279',
-            retry_path: '/root/ci-folders/builds/1279/retry',
-            created_at: '2016-11-29T18:11:58.430Z',
-            updated_at: '2016-11-29T18:11:58.430Z',
-          },
-          manual_actions: [
-            {
-              name: 'action',
-              play_path: '/play',
-            },
-          ],
-          deployed_at: '2016-11-29T18:11:58.430Z',
-        },
-        has_stop_action: true,
-        environment_path: 'root/ci-folders/environments/31',
-        log_path: 'root/ci-folders/environments/31/logs',
-        created_at: '2016-11-07T11:11:16.525Z',
-        updated_at: '2016-11-10T15:55:58.778Z',
-      };
-
-      component = new EnvironmentItem({
-        propsData: {
-          model: environment,
-          canReadEnvironment: true,
-          tableData,
-        },
-      }).$mount();
-    });
-
-    it('should render environment name', () => {
-      expect(component.$el.querySelector('.environment-name').textContent).toContain(
-        environment.name,
-      );
-    });
-
-    describe('With deployment', () => {
-      it('should render deployment internal id', () => {
-        expect(component.$el.querySelector('.deployment-column span').textContent).toContain(
-          environment.last_deployment.iid,
-        );
-
-        expect(component.$el.querySelector('.deployment-column span').textContent).toContain('#');
-      });
-
-      it('should render last deployment date', () => {
-        const formatedDate = format(environment.last_deployment.deployed_at);
-
-        expect(
-          component.$el.querySelector('.environment-created-date-timeago').textContent,
-        ).toContain(formatedDate);
-      });
-
-      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_path,
-          );
-        });
-
-        it('should render deployable name and id', () => {
-          expect(component.$el.querySelector('.build-link').getAttribute('href')).toEqual(
-            environment.last_deployment.deployable.build_path,
-          );
-        });
-      });
-
-      describe('With commit information', () => {
-        it('should render commit component', () => {
-          expect(component.$el.querySelector('.js-commit-component')).toBeDefined();
-        });
-      });
-    });
-
-    describe('With manual actions', () => {
-      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', () => {
-      it('should render stop action component', () => {
-        expect(component.$el.querySelector('.js-stop-component-container')).toBeDefined();
-      });
-    });
-
-    describe('With retry action', () => {
-      it('should render rollback component', () => {
-        expect(component.$el.querySelector('.js-rollback-component-container')).toBeDefined();
-      });
-    });
-  });
-});