diff --git a/app/assets/javascripts/environments/components/environment.js b/app/assets/javascripts/environments/components/environment.js
index 170cc1d7866e141442459e43d0b63c9a2acb327f..11871f0ee2d1a7f32bd9271924be6f1869d36761 100644
--- a/app/assets/javascripts/environments/components/environment.js
+++ b/app/assets/javascripts/environments/components/environment.js
@@ -1,16 +1,16 @@
 /* eslint-disable no-param-reassign, no-new */
 /* global Flash */
-import EnvironmentsService from '../services/environments_service';
-import EnvironmentTable from './environments_table';
-import EnvironmentsStore from '../stores/environments_store';
 
 const Vue = window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
-require('../../vue_shared/components/table_pagination');
-require('../../lib/utils/common_utils');
-require('../../vue_shared/vue_resource_interceptor');
+const EnvironmentsService = require('~/environments/services/environments_service');
+const EnvironmentTable = require('./environments_table');
+const EnvironmentsStore = require('~/environments/stores/environments_store');
+require('~/vue_shared/components/table_pagination');
+require('~/lib/utils/common_utils');
+require('~/vue_shared/vue_resource_interceptor');
 
-export default Vue.component('environment-component', {
+module.exports = Vue.component('environment-component', {
 
   components: {
     'environment-table': EnvironmentTable,
@@ -162,7 +162,7 @@ export default Vue.component('environment-component', {
 
       <div class="content-list environments-container">
         <div class="environments-list-loading text-center" v-if="isLoading">
-          <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+          <i class="fa fa-spinner fa-spin"></i>
         </div>
 
         <div class="blank-state blank-state-no-icon"
diff --git a/app/assets/javascripts/environments/components/environment_actions.js b/app/assets/javascripts/environments/components/environment_actions.js
index 57469889a9048d01f17321d8329b09618c04a16d..15e3f8823d28eb23d38d6522893dd3b94ffdc675 100644
--- a/app/assets/javascripts/environments/components/environment_actions.js
+++ b/app/assets/javascripts/environments/components/environment_actions.js
@@ -1,70 +1,41 @@
-/* global Flash */
-/* eslint-disable no-new */
+const Vue = require('vue');
+const playIconSvg = require('icons/_icon_play.svg');
 
-import playIconSvg from 'icons/_icon_play.svg';
-
-export default {
+module.exports = Vue.component('actions-component', {
   props: {
     actions: {
       type: Array,
       required: false,
       default: () => [],
     },
-
-    service: {
-      type: Object,
-      required: true,
-      default: () => ({}),
-    },
   },
 
   data() {
-    return {
-      playIconSvg,
-      isLoading: false,
-    };
-  },
-
-  methods: {
-    onClickAction(endpoint) {
-      this.isLoading = true;
-
-      this.service.postAction(endpoint)
-      .then(() => {
-        this.isLoading = false;
-      })
-      .catch(() => {
-        this.isLoading = false;
-        new Flash('An error occured while making the request.', 'alert');
-      });
-    },
+    return { playIconSvg };
   },
 
   template: `
     <div class="btn-group" role="group">
-      <button
-        class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container"
-        data-toggle="dropdown"
-        :disabled="isLoading">
+      <button class="dropdown btn btn-default dropdown-new" data-toggle="dropdown">
         <span>
-          <span v-html="playIconSvg"></span>
-          <i class="fa fa-caret-down" aria-hidden="true"></i>
-          <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+          <span class="js-dropdown-play-icon-container" v-html="playIconSvg"></span>
+          <i class="fa fa-caret-down"></i>
         </span>
 
       <ul class="dropdown-menu dropdown-menu-align-right">
         <li v-for="action in actions">
-          <button
-            @click="onClickAction(action.play_path)"
-            class="js-manual-action-link no-btn">
+          <a :href="action.play_path"
+            data-method="post"
+            rel="nofollow"
+            class="js-manual-action-link">
             ${playIconSvg}
             <span>
               {{action.name}}
             </span>
-          </button>
+          </a>
         </li>
       </ul>
     </button>
   </div>
   `,
-};
+});
diff --git a/app/assets/javascripts/environments/components/environment_external_url.js b/app/assets/javascripts/environments/components/environment_external_url.js
index a554998f52c76400602b4bccad02bc43a3d6fe60..2599bba3c59211600648038da82a36988e310091 100644
--- a/app/assets/javascripts/environments/components/environment_external_url.js
+++ b/app/assets/javascripts/environments/components/environment_external_url.js
@@ -1,7 +1,9 @@
 /**
  * Renders the external url link in environments table.
  */
-export default {
+const Vue = require('vue');
+
+module.exports = Vue.component('external-url-component', {
   props: {
     externalUrl: {
       type: String,
@@ -10,12 +12,8 @@ export default {
   },
 
   template: `
-    <a
-      class="btn external_url"
-      :href="externalUrl"
-      target="_blank"
-      title="Environment external URL">
-      <i class="fa fa-external-link" aria-hidden="true"></i>
+    <a class="btn external_url" :href="externalUrl" target="_blank">
+      <i class="fa fa-external-link"></i>
     </a>
   `,
-};
+});
diff --git a/app/assets/javascripts/environments/components/environment_item.js b/app/assets/javascripts/environments/components/environment_item.js
index c05ccc1e103acb910015564a0dd35f788b13656d..ac15518865d13a793a0e869f2f39656166d6490e 100644
--- a/app/assets/javascripts/environments/components/environment_item.js
+++ b/app/assets/javascripts/environments/components/environment_item.js
@@ -4,18 +4,20 @@
  * Renders a table row for each environment.
  */
 
-import Timeago from 'timeago.js';
-import ActionsComponent from './environment_actions';
-import ExternalUrlComponent from './environment_external_url';
-import StopComponent from './environment_stop';
-import RollbackComponent from './environment_rollback';
-import TerminalButtonComponent from './environment_terminal_button';
-import '../../lib/utils/text_utility';
-import '../../vue_shared/components/commit';
+const Vue = require('vue');
+const Timeago = require('timeago.js');
+
+require('../../lib/utils/text_utility');
+require('../../vue_shared/components/commit');
+const ActionsComponent = require('./environment_actions');
+const ExternalUrlComponent = require('./environment_external_url');
+const StopComponent = require('./environment_stop');
+const RollbackComponent = require('./environment_rollback');
+const TerminalButtonComponent = require('./environment_terminal_button');
 
 const timeagoInstance = new Timeago();
 
-export default {
+module.exports = Vue.component('environment-item', {
 
   components: {
     'commit-component': gl.CommitComponent,
@@ -49,12 +51,6 @@ export default {
       type: Function,
       required: false,
     },
-
-    service: {
-      type: Object,
-      required: true,
-      default: () => ({}),
-    },
   },
 
   computed: {
@@ -513,25 +509,22 @@ export default {
       <td class="environments-actions">
         <div v-if="!model.isFolder" class="btn-group pull-right" role="group">
           <actions-component v-if="hasManualActions && canCreateDeployment"
-            :service="service"
             :actions="manualActions"/>
 
           <external-url-component v-if="externalURL && canReadEnvironment"
             :external-url="externalURL"/>
 
           <stop-component v-if="hasStopAction && canCreateDeployment"
-            :stop-url="model.stop_path"
-            :service="service"/>
+            :stop-url="model.stop_path"/>
 
           <terminal-button-component v-if="model && model.terminal_path"
             :terminal-path="model.terminal_path"/>
 
           <rollback-component v-if="canRetry && canCreateDeployment"
             :is-last-deployment="isLastDeployment"
-            :retry-url="retryUrl"
-            :service="service"/>
+            :retry-url="retryUrl"/>
         </div>
       </td>
     </tr>
   `,
-};
+});
diff --git a/app/assets/javascripts/environments/components/environment_rollback.js b/app/assets/javascripts/environments/components/environment_rollback.js
index e91dd9d567d06ec9030052245d5dc20e419e4a87..daf126eb4e81851033cb734243eee614af6f2c84 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.js
+++ b/app/assets/javascripts/environments/components/environment_rollback.js
@@ -1,13 +1,10 @@
-/* global Flash */
-/* eslint-disable no-new */
 /**
  * Renders Rollback or Re deploy button in environments table depending
- * of the provided property `isLastDeployment`.
- *
- * Makes a post request when the button is clicked.
+ * of the provided property `isLastDeployment`
  */
+const Vue = require('vue');
 
-export default {
+module.exports = Vue.component('rollback-component', {
   props: {
     retryUrl: {
       type: String,
@@ -18,49 +15,16 @@ export default {
       type: Boolean,
       default: true,
     },
-
-    service: {
-      type: Object,
-      required: true,
-      default: () => ({}),
-    },
-  },
-
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
-
-  methods: {
-    onClick() {
-      this.isLoading = true;
-
-      this.service.postAction(this.retryUrl)
-      .then(() => {
-        this.isLoading = false;
-      })
-      .catch(() => {
-        this.isLoading = false;
-        new Flash('An error occured while making the request.', 'alert');
-      });
-    },
   },
 
   template: `
-    <button type="button"
-      class="btn"
-      @click="onClick"
-      :disabled="isLoading">
-
+    <a class="btn" :href="retryUrl" data-method="post" rel="nofollow">
       <span v-if="isLastDeployment">
         Re-deploy
       </span>
       <span v-else>
         Rollback
       </span>
-
-      <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
-    </button>
+    </a>
   `,
-};
+});
diff --git a/app/assets/javascripts/environments/components/environment_stop.js b/app/assets/javascripts/environments/components/environment_stop.js
index 26eb0421226e220e5cd8034464608ddc521192ec..96983a19568aaf943a537eab4f9530a0ec1e35a7 100644
--- a/app/assets/javascripts/environments/components/environment_stop.js
+++ b/app/assets/javascripts/environments/components/environment_stop.js
@@ -1,55 +1,24 @@
-/* global Flash */
-/* eslint-disable no-new, no-alert */
 /**
  * Renders the stop "button" that allows stop an environment.
  * Used in environments table.
  */
+const Vue = require('vue');
 
-export default {
+module.exports = Vue.component('stop-component', {
   props: {
     stopUrl: {
       type: String,
       default: '',
     },
-
-    service: {
-      type: Object,
-      required: true,
-      default: () => ({}),
-    },
-  },
-
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
-
-  methods: {
-    onClick() {
-      if (confirm('Are you sure you want to stop this environment?')) {
-        this.isLoading = true;
-
-        this.service.postAction(this.retryUrl)
-        .then(() => {
-          this.isLoading = false;
-        })
-        .catch(() => {
-          this.isLoading = false;
-          new Flash('An error occured while making the request.', 'alert');
-        });
-      }
-    },
   },
 
   template: `
-    <button type="button"
-      class="btn stop-env-link"
-      @click="onClick"
-      :disabled="isLoading"
-      title="Stop Environment">
+    <a class="btn stop-env-link"
+      :href="stopUrl"
+      data-confirm="Are you sure you want to stop this environment?"
+      data-method="post"
+      rel="nofollow">
       <i class="fa fa-stop stop-env-icon" aria-hidden="true"></i>
-      <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
-    </button>
+    </a>
   `,
-};
+});
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.js b/app/assets/javascripts/environments/components/environment_terminal_button.js
index ece53acf9ad9f094c4a518827b14e584d2c85ce0..e86607e78f45d778735899622d3c4b6491d67eff 100644
--- a/app/assets/javascripts/environments/components/environment_terminal_button.js
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.js
@@ -2,9 +2,10 @@
  * Renders a terminal button to open a web terminal.
  * Used in environments table.
  */
-import terminalIconSvg from 'icons/_icon_terminal.svg';
+const Vue = require('vue');
+const terminalIconSvg = require('icons/_icon_terminal.svg');
 
-export default {
+module.exports = Vue.component('terminal-button-component', {
   props: {
     terminalPath: {
       type: String,
@@ -18,9 +19,8 @@ export default {
 
   template: `
     <a class="btn terminal-button"
-      title="Open web terminal"
       :href="terminalPath">
       ${terminalIconSvg}
     </a>
   `,
-};
+});
diff --git a/app/assets/javascripts/environments/components/environments_table.js b/app/assets/javascripts/environments/components/environments_table.js
index cb932a214a29e19ebd4a31b0577ef754dcc51384..295b562960977b0ec0b29bd99e20dc7bf8bfb036 100644
--- a/app/assets/javascripts/environments/components/environments_table.js
+++ b/app/assets/javascripts/environments/components/environments_table.js
@@ -4,10 +4,12 @@
  * Dumb component used to render top level environments and
  * the folder view.
  */
-import EnvironmentItem from './environment_item';
-import DeployBoard from './deploy_board_component';
+const Vue = require('vue');
+const EnvironmentItem = require('./environment_item');
+const DeployBoard = require('./deploy_board_component').default;
+
+module.exports = Vue.component('environment-table-component', {
 
-export default {
   components: {
     EnvironmentItem,
     DeployBoard,
@@ -46,7 +48,7 @@ export default {
 
     service: {
       type: Object,
-      required: true,
+      required: false,
       default: () => ({}),
     },
   },
@@ -71,8 +73,7 @@ export default {
             :model="model"
             :can-create-deployment="canCreateDeployment"
             :can-read-environment="canReadEnvironment"
-            :toggleDeployBoard="toggleDeployBoard"
-            :service="service"></tr>
+            :toggleDeployBoard="toggleDeployBoard"></tr>
 
           <tr v-if="model.hasDeployBoard && model.isDeployBoardVisible" class="js-deploy-board-row">
             <td colspan="6" class="deploy-board-container">
@@ -89,4 +90,4 @@ export default {
       </tbody>
     </table>
   `,
-};
+});
diff --git a/app/assets/javascripts/environments/environments_bundle.js b/app/assets/javascripts/environments/environments_bundle.js
index 8d963b335cfd51116136bfa406e07a69168714d2..7bbba91bc109bce83de80b7430c6bbb3aa81b509 100644
--- a/app/assets/javascripts/environments/environments_bundle.js
+++ b/app/assets/javascripts/environments/environments_bundle.js
@@ -1,4 +1,4 @@
-import EnvironmentsComponent from './components/environment';
+const EnvironmentsComponent = require('./components/environment');
 
 $(() => {
   window.gl = window.gl || {};
diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
index f939eccf2469f5072277491a70a5990f914f4ea1..d2ca465351a6887e82e0da5c82250b93cbcb1595 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_bundle.js
+++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
@@ -1,4 +1,4 @@
-import EnvironmentsFolderComponent from './environments_folder_view';
+const EnvironmentsFolderComponent = require('./environments_folder_view');
 
 $(() => {
   window.gl = window.gl || {};
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.js b/app/assets/javascripts/environments/folder/environments_folder_view.js
index 36defa013db949b96a487e098572da60ccfd16b3..eb85963790e3ee96b65080a05c33003b083ebc10 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.js
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.js
@@ -1,17 +1,16 @@
-/* eslint-disable no-param-reassign, no-new */
-/* global Flash */
-import EnvironmentsService from '../services/environments_service';
-import EnvironmentTable from '../components/environments_table';
-import EnvironmentsStore from '../stores/environments_store';
+/* eslint-disable no-new */
 
-const Flash = require('~/flash');
 const Vue = window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
-require('../../vue_shared/components/table_pagination');
-require('../../lib/utils/common_utils');
-require('../../vue_shared/vue_resource_interceptor');
+const EnvironmentsService = require('~/environments//services/environments_service');
+const EnvironmentTable = require('~/environments/components/environments_table');
+const EnvironmentsStore = require('~/environments//stores/environments_store');
+const Flash = require('~/flash');
+require('~/vue_shared/components/table_pagination');
+require('~/lib/utils/common_utils');
+require('~/vue_shared/vue_resource_interceptor');
 
-export default Vue.component('environment-folder-view', {
+module.exports = Vue.component('environment-folder-view', {
 
   components: {
     'environment-table': EnvironmentTable,
@@ -184,11 +183,13 @@ export default Vue.component('environment-folder-view', {
             :commit-icon-svg="commitIconSvg"
             :toggleDeployBoard="toggleDeployBoard"
             :store="store"
-            :service="service"/>
+            :service="service">
+          </environment-table>
 
           <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
             :change="changePage"
-            :pageInfo="state.paginationInformation"/>
+            :pageInfo="state.paginationInformation">
+          </table-pagination>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/environments/services/environments_service.js b/app/assets/javascripts/environments/services/environments_service.js
index 12c7db2656192c615aab4c5267996370c64d4ac7..b5036e5526e6343ad246d2e28f55b4fcd191aa72 100644
--- a/app/assets/javascripts/environments/services/environments_service.js
+++ b/app/assets/javascripts/environments/services/environments_service.js
@@ -1,7 +1,7 @@
-/* eslint-disable class-methods-use-this */
-import Vue from 'vue';
+/* eslint-disable class-methods-use-this*/
+const Vue = require('vue');
 
-export default class EnvironmentsService {
+class EnvironmentsService {
   constructor(endpoint) {
     this.environments = Vue.resource(endpoint);
   }
@@ -13,8 +13,6 @@ export default class EnvironmentsService {
   getDeployBoard(endpoint) {
     return Vue.http.get(endpoint);
   }
-
-  postAction(endpoint) {
-    return Vue.http.post(endpoint, {}, { emulateJSON: true });
-  }
 }
+
+module.exports = EnvironmentsService;
diff --git a/app/assets/javascripts/environments/stores/environments_store.js b/app/assets/javascripts/environments/stores/environments_store.js
index 3c7e5501322a7bbc3424ba0a807ae038787e5d12..664ff1a5e774e8d9674252be5316ce4c9a12aa33 100644
--- a/app/assets/javascripts/environments/stores/environments_store.js
+++ b/app/assets/javascripts/environments/stores/environments_store.js
@@ -1,12 +1,11 @@
-import '~/lib/utils/common_utils';
-
+require('~/lib/utils/common_utils');
 /**
  * Environments Store.
  *
  * Stores received environments, count of stopped environments and count of
  * available environments.
  */
-export default class EnvironmentsStore {
+class EnvironmentsStore {
   constructor() {
     this.state = {};
     this.state.environments = [];
@@ -157,3 +156,5 @@ export default class EnvironmentsStore {
     return this.state.environments;
   }
 }
+
+module.exports = EnvironmentsStore;
diff --git a/app/assets/javascripts/vue_shared/vue_resource_interceptor.js b/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
index 4157fefddc9d99d3d60da969bd9d40174dc6b3c9..d3229f9f73002d45c116dee27760ce907907c336 100644
--- a/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
+++ b/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
@@ -6,6 +6,10 @@ Vue.http.interceptors.push((request, next) => {
   Vue.activeResources = Vue.activeResources ? Vue.activeResources + 1 : 1;
 
   next((response) => {
+    if (typeof response.data === 'string') {
+      response.data = JSON.parse(response.data);
+    }
+
     Vue.activeResources--;
   });
 });
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 026195f7250a2ac40af9c968201a32b7649fc2fc..b16661237bfafa7c8b545a1015a436783aa7fca8 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -141,14 +141,6 @@
         margin-right: 0;
       }
     }
-
-    .no-btn {
-      border: none;
-      background: none;
-      outline: none;
-      width: 100%;
-      text-align: left;
-    }
   }
 }
 
diff --git a/spec/features/projects/environments/environments_spec.rb b/spec/features/projects/environments/environments_spec.rb
index 641e2cf7402fbc6b33fae1551d0fbbead4de0e0e..25f31b423b81e629985bd85c99d8e4b049cb1b5d 100644
--- a/spec/features/projects/environments/environments_spec.rb
+++ b/spec/features/projects/environments/environments_spec.rb
@@ -111,8 +111,10 @@
           find('.js-dropdown-play-icon-container').click
           expect(page).to have_content(action.name.humanize)
 
-          expect { find('.js-manual-action-link').click }
+          expect { click_link(action.name.humanize) }
             .not_to change { Ci::Pipeline.count }
+
+          expect(action.reload).to be_pending
         end
 
         scenario 'does show build name and id' do
@@ -156,6 +158,12 @@
             expect(page).to have_selector('.stop-env-link')
           end
 
+          scenario 'starts build when stop button clicked' do
+            find('.stop-env-link').click
+
+            expect(page).to have_content('close_app')
+          end
+
           context 'for reporter' do
             let(:role) { :reporter }
 
diff --git a/spec/javascripts/environments/environment_actions_spec.js b/spec/javascripts/environments/environment_actions_spec.js
index 85b73f1d4e2b8a86b8321f3670a20812a238cecd..d50d45d295ec631807001e38c7446dc1518321c4 100644
--- a/spec/javascripts/environments/environment_actions_spec.js
+++ b/spec/javascripts/environments/environment_actions_spec.js
@@ -1,16 +1,14 @@
-import Vue from 'vue';
-import actionsComp from '~/environments/components/environment_actions';
+const ActionsComponent = require('~/environments/components/environment_actions');
 
 describe('Actions Component', () => {
-  let ActionsComponent;
-  let actionsMock;
-  let spy;
-  let component;
+  preloadFixtures('static/environments/element.html.raw');
 
   beforeEach(() => {
-    ActionsComponent = Vue.extend(actionsComp);
+    loadFixtures('static/environments/element.html.raw');
+  });
 
-    actionsMock = [
+  it('should render a dropdown with the provided actions', () => {
+    const actionsMock = [
       {
         name: 'bar',
         play_path: 'https://gitlab.com/play',
@@ -21,27 +19,18 @@ describe('Actions Component', () => {
       },
     ];
 
-    spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
-    component = new ActionsComponent({
+    const component = new ActionsComponent({
+      el: document.querySelector('.test-dom-element'),
       propsData: {
         actions: actionsMock,
-        service: {
-          postAction: spy,
-        },
       },
-    }).$mount();
-  });
+    });
 
-  it('should render a dropdown with the provided actions', () => {
     expect(
       component.$el.querySelectorAll('.dropdown-menu li').length,
     ).toEqual(actionsMock.length);
-  });
-
-  it('should call the service when an action is clicked', () => {
-    component.$el.querySelector('.dropdown').click();
-    component.$el.querySelector('.js-manual-action-link').click();
-
-    expect(spy).toHaveBeenCalledWith(actionsMock[0].play_path);
+    expect(
+      component.$el.querySelector('.dropdown-menu li a').getAttribute('href'),
+    ).toEqual(actionsMock[0].play_path);
   });
 });
diff --git a/spec/javascripts/environments/environment_external_url_spec.js b/spec/javascripts/environments/environment_external_url_spec.js
index 9af218a27fff1691b1a38755622361b6168da848..393dbb5aae08be420c8ab879377e01f75c0bc2f7 100644
--- a/spec/javascripts/environments/environment_external_url_spec.js
+++ b/spec/javascripts/environments/environment_external_url_spec.js
@@ -1,20 +1,19 @@
-import Vue from 'vue';
-import externalUrlComp from '~/environments/components/environment_external_url';
+const ExternalUrlComponent = require('~/environments/components/environment_external_url');
 
 describe('External URL Component', () => {
-  let ExternalUrlComponent;
-
+  preloadFixtures('static/environments/element.html.raw');
   beforeEach(() => {
-    ExternalUrlComponent = Vue.extend(externalUrlComp);
+    loadFixtures('static/environments/element.html.raw');
   });
 
   it('should link to the provided externalUrl prop', () => {
     const externalURL = 'https://gitlab.com';
     const component = new ExternalUrlComponent({
+      el: document.querySelector('.test-dom-element'),
       propsData: {
         externalUrl: externalURL,
       },
-    }).$mount();
+    });
 
     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 b/spec/javascripts/environments/environment_item_spec.js
index 6e7a54b4cd24ff31ed4ef0d91a5875278f9030b2..369e47d3732d7484fe69a8a93e4f1719f70b3b82 100644
--- a/spec/javascripts/environments/environment_item_spec.js
+++ b/spec/javascripts/environments/environment_item_spec.js
@@ -1,12 +1,10 @@
-import 'timeago.js';
-import Vue from 'vue';
-import environmentItemComp from '~/environments/components/environment_item';
+window.timeago = require('timeago.js');
+const EnvironmentItem = require('~/environments/components/environment_item');
 
 describe('Environment item', () => {
-  let EnvironmentItem;
-
+  preloadFixtures('static/environments/table.html.raw');
   beforeEach(() => {
-    EnvironmentItem = Vue.extend(environmentItemComp);
+    loadFixtures('static/environments/table.html.raw');
   });
 
   describe('When item is folder', () => {
@@ -23,6 +21,7 @@ describe('Environment item', () => {
       };
 
       component = new EnvironmentItem({
+        el: document.querySelector('tr#environment-row'),
         propsData: {
           model: mockItem,
           canCreateDeployment: false,
@@ -31,7 +30,7 @@ describe('Environment item', () => {
           store: {},
           service: {},
         },
-      }).$mount();
+      });
     });
 
     it('Should render folder icon and name', () => {
@@ -113,6 +112,7 @@ describe('Environment item', () => {
       };
 
       component = new EnvironmentItem({
+        el: document.querySelector('tr#environment-row'),
         propsData: {
           model: environment,
           canCreateDeployment: true,
@@ -121,7 +121,7 @@ describe('Environment item', () => {
           store: {},
           service: {},
         },
-      }).$mount();
+      });
     });
 
     it('should render environment name', () => {
diff --git a/spec/javascripts/environments/environment_rollback_spec.js b/spec/javascripts/environments/environment_rollback_spec.js
index 7cb39d9df03ddec6d1e47b7d863b02eb5fa694ca..4a596baad09cfdf52157b11626cfc6945d5d46c9 100644
--- a/spec/javascripts/environments/environment_rollback_spec.js
+++ b/spec/javascripts/environments/environment_rollback_spec.js
@@ -1,59 +1,47 @@
-import Vue from 'vue';
-import rollbackComp from '~/environments/components/environment_rollback';
+const RollbackComponent = require('~/environments/components/environment_rollback');
 
 describe('Rollback Component', () => {
+  preloadFixtures('static/environments/element.html.raw');
+
   const retryURL = 'https://gitlab.com/retry';
-  let RollbackComponent;
-  let spy;
 
   beforeEach(() => {
-    RollbackComponent = Vue.extend(rollbackComp);
-    spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
+    loadFixtures('static/environments/element.html.raw');
   });
 
-  it('Should render Re-deploy label when isLastDeployment is true', () => {
+  it('Should link to the provided retryUrl', () => {
     const component = new RollbackComponent({
       el: document.querySelector('.test-dom-element'),
       propsData: {
         retryUrl: retryURL,
         isLastDeployment: true,
-        service: {
-          postAction: spy,
-        },
       },
-    }).$mount();
+    });
 
-    expect(component.$el.querySelector('span').textContent).toContain('Re-deploy');
+    expect(component.$el.getAttribute('href')).toEqual(retryURL);
   });
 
-  it('Should render Rollback label when isLastDeployment is false', () => {
+  it('Should render Re-deploy label when isLastDeployment is true', () => {
     const component = new RollbackComponent({
       el: document.querySelector('.test-dom-element'),
       propsData: {
         retryUrl: retryURL,
-        isLastDeployment: false,
-        service: {
-          postAction: spy,
-        },
+        isLastDeployment: true,
       },
-    }).$mount();
+    });
 
-    expect(component.$el.querySelector('span').textContent).toContain('Rollback');
+    expect(component.$el.querySelector('span').textContent).toContain('Re-deploy');
   });
 
-  it('should call the service when the button is clicked', () => {
+  it('Should render Rollback label when isLastDeployment is false', () => {
     const component = new RollbackComponent({
+      el: document.querySelector('.test-dom-element'),
       propsData: {
         retryUrl: retryURL,
         isLastDeployment: false,
-        service: {
-          postAction: spy,
-        },
       },
-    }).$mount();
-
-    component.$el.click();
+    });
 
-    expect(spy).toHaveBeenCalledWith(retryURL);
+    expect(component.$el.querySelector('span').textContent).toContain('Rollback');
   });
 });
diff --git a/spec/javascripts/environments/environment_spec.js b/spec/javascripts/environments/environment_spec.js
index 8b1d9ca84dc6ea7ae9bc0a6f09b59c1057558961..93f6200f103f11f146e0b306c39690130e7dab9e 100644
--- a/spec/javascripts/environments/environment_spec.js
+++ b/spec/javascripts/environments/environment_spec.js
@@ -1,7 +1,7 @@
-import Vue from 'vue';
-import '~/flash';
-import EnvironmentsComponent from '~/environments/components/environment';
-import { environment } from './mock_data';
+const Vue = require('vue');
+require('~/flash');
+const EnvironmentsComponent = require('~/environments/components/environment');
+const { environment } = require('./mock_data');
 
 describe('Environment', () => {
   preloadFixtures('static/environments/environments.html.raw');
diff --git a/spec/javascripts/environments/environment_stop_spec.js b/spec/javascripts/environments/environment_stop_spec.js
index 8f79b88f3df1c073b6be3ac60fcb7c1f86bdfb02..5ca65b1debc32e61f817929ca812b1b352dd9262 100644
--- a/spec/javascripts/environments/environment_stop_spec.js
+++ b/spec/javascripts/environments/environment_stop_spec.js
@@ -1,34 +1,28 @@
-import Vue from 'vue';
-import stopComp from '~/environments/components/environment_stop';
+const StopComponent = require('~/environments/components/environment_stop');
 
 describe('Stop Component', () => {
-  let StopComponent;
+  preloadFixtures('static/environments/element.html.raw');
+
+  let stopURL;
   let component;
-  let spy;
-  const stopURL = '/stop';
 
   beforeEach(() => {
-    StopComponent = Vue.extend(stopComp);
-    spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
-    spyOn(window, 'confirm').and.returnValue(true);
+    loadFixtures('static/environments/element.html.raw');
 
+    stopURL = '/stop';
     component = new StopComponent({
+      el: document.querySelector('.test-dom-element'),
       propsData: {
         stopUrl: stopURL,
-        service: {
-          postAction: spy,
-        },
       },
-    }).$mount();
+    });
   });
 
-  it('should render a button to stop the environment', () => {
-    expect(component.$el.tagName).toEqual('BUTTON');
-    expect(component.$el.getAttribute('title')).toEqual('Stop Environment');
+  it('should link to the provided URL', () => {
+    expect(component.$el.getAttribute('href')).toEqual(stopURL);
   });
 
-  it('should call the service when an action is clicked', () => {
-    component.$el.click();
-    expect(spy).toHaveBeenCalled();
+  it('should have a data-confirm attribute', () => {
+    expect(component.$el.getAttribute('data-confirm')).toEqual('Are you sure you want to stop this environment?');
   });
 });
diff --git a/spec/javascripts/environments/environment_table_spec.js b/spec/javascripts/environments/environment_table_spec.js
index c3cbad3234d3c9e5226347b475e09c0e8b1c7ddc..798e978d03827b33f3323eaf350a831f04b4ae58 100644
--- a/spec/javascripts/environments/environment_table_spec.js
+++ b/spec/javascripts/environments/environment_table_spec.js
@@ -1,11 +1,9 @@
-import Vue from 'vue';
-import environmentTableComp from '~/environments/components/environments_table';
+const EnvironmentTable = require('~/environments/components/environments_table');
 
 describe('Environment item', () => {
-  let EnvironmentTable;
-
+  preloadFixtures('static/environments/element.html.raw');
   beforeEach(() => {
-    EnvironmentTable = Vue.extend(environmentTableComp);
+    loadFixtures('static/environments/element.html.raw');
   });
 
   it('Should render a table', () => {
@@ -27,7 +25,7 @@ describe('Environment item', () => {
         store: {},
         service: {},
       },
-    }).$mount();
+    });
 
     expect(component.$el.tagName).toEqual('TABLE');
   });
@@ -62,7 +60,7 @@ describe('Environment item', () => {
         store: {},
         service: {},
       },
-    }).$mount();
+    });
 
     expect(component.$el.querySelector('.js-deploy-board-row')).toBeDefined();
     expect(
@@ -102,7 +100,7 @@ describe('Environment item', () => {
         store: {},
         service: {},
       },
-    }).$mount();
+    });
 
     component.$el.querySelector('.deploy-board-icon').click();
 
diff --git a/spec/javascripts/environments/environment_terminal_button_spec.js b/spec/javascripts/environments/environment_terminal_button_spec.js
deleted file mode 100644
index b07aa4e1745624ee82906bdeaba961b72da5f479..0000000000000000000000000000000000000000
--- a/spec/javascripts/environments/environment_terminal_button_spec.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Vue from 'vue';
-import terminalComp from '~/environments/components/environment_terminal_button';
-
-describe('Stop Component', () => {
-  let TerminalComponent;
-  let component;
-  const terminalPath = '/path';
-
-  beforeEach(() => {
-    TerminalComponent = Vue.extend(terminalComp);
-
-    component = new TerminalComponent({
-      propsData: {
-        terminalPath,
-      },
-    }).$mount();
-  });
-
-  it('should render a link to open a web terminal with the provided path', () => {
-    expect(component.$el.tagName).toEqual('A');
-    expect(component.$el.getAttribute('title')).toEqual('Open web terminal');
-    expect(component.$el.getAttribute('href')).toEqual(terminalPath);
-  });
-});
diff --git a/spec/javascripts/environments/environments_store_spec.js b/spec/javascripts/environments/environments_store_spec.js
index 36e6770c264e32b31e827dd93fab404cf592d54a..baaaf36ad60a5c8598822d3209a99e8a1b1e3844 100644
--- a/spec/javascripts/environments/environments_store_spec.js
+++ b/spec/javascripts/environments/environments_store_spec.js
@@ -1,5 +1,5 @@
-import Store from '~/environments/stores/environments_store';
-import { serverData, deployBoardMockData } from './mock_data';
+const Store = require('~/environments/stores/environments_store');
+const { serverData, deployBoardMockData } = require('./mock_data');
 
 (() => {
   describe('Environments Store', () => {
diff --git a/spec/javascripts/environments/folder/environments_folder_view_spec.js b/spec/javascripts/environments/folder/environments_folder_view_spec.js
index bd093a3071590e504fab402643f219b75be3bde6..d451d0288a66478e68cdb440ae45a3e139c25b8e 100644
--- a/spec/javascripts/environments/folder/environments_folder_view_spec.js
+++ b/spec/javascripts/environments/folder/environments_folder_view_spec.js
@@ -1,7 +1,7 @@
-import Vue from 'vue';
-import '~/flash';
-import EnvironmentsFolderViewComponent from '~/environments/folder/environments_folder_view';
-import { environmentsList } from '../mock_data';
+const Vue = require('vue');
+require('~/flash');
+const EnvironmentsFolderViewComponent = require('~/environments/folder/environments_folder_view');
+const { environmentsList } = require('../mock_data');
 
 describe('Environments Folder View', () => {
   preloadFixtures('static/environments/environments_folder_view.html.raw');