Use a button and a post request instead of UJS links - part 1 - Environments

12 files changed, 128 insertions, 82 deletions

diff --git a/spec/features/projects/environments/environments_spec.rb b/spec/features/projects/environments/environments_spec.rb
index 25f31b423b8..641e2cf7402 100644
--- a/spec/features/projects/environments/environments_spec.rb
+++ b/spec/features/projects/environments/environments_spec.rb
@@ -111,10 +111,8 @@ feature 'Environments page', :feature, :js do
           find('.js-dropdown-play-icon-container').click
           expect(page).to have_content(action.name.humanize)
 
-          expect { click_link(action.name.humanize) }
+          expect { find('.js-manual-action-link').click }
             .not_to change { Ci::Pipeline.count }
-
-          expect(action.reload).to be_pending
         end
 
         scenario 'does show build name and id' do
@@ -158,12 +156,6 @@ feature 'Environments page', :feature, :js do
             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 d50d45d295e..85b73f1d4e2 100644
--- a/spec/javascripts/environments/environment_actions_spec.js
+++ b/spec/javascripts/environments/environment_actions_spec.js
@@ -1,14 +1,16 @@
-const ActionsComponent = require('~/environments/components/environment_actions');
+import Vue from 'vue';
+import actionsComp from '~/environments/components/environment_actions';
 
 describe('Actions Component', () => {
-  preloadFixtures('static/environments/element.html.raw');
+  let ActionsComponent;
+  let actionsMock;
+  let spy;
+  let component;
 
   beforeEach(() => {
-    loadFixtures('static/environments/element.html.raw');
-  });
+    ActionsComponent = Vue.extend(actionsComp);
 
-  it('should render a dropdown with the provided actions', () => {
-    const actionsMock = [
+    actionsMock = [
       {
         name: 'bar',
         play_path: 'https://gitlab.com/play',
@@ -19,18 +21,27 @@ describe('Actions Component', () => {
       },
     ];
 
-    const component = new ActionsComponent({
-      el: document.querySelector('.test-dom-element'),
+    spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
+    component = new ActionsComponent({
       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);
-    expect(
-      component.$el.querySelector('.dropdown-menu li a').getAttribute('href'),
-    ).toEqual(actionsMock[0].play_path);
+  });
+
+  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);
   });
 });
diff --git a/spec/javascripts/environments/environment_external_url_spec.js b/spec/javascripts/environments/environment_external_url_spec.js
index 393dbb5aae0..9af218a27ff 100644
--- a/spec/javascripts/environments/environment_external_url_spec.js
+++ b/spec/javascripts/environments/environment_external_url_spec.js
@@ -1,19 +1,20 @@
-const ExternalUrlComponent = require('~/environments/components/environment_external_url');
+import Vue from 'vue';
+import externalUrlComp from '~/environments/components/environment_external_url';
 
 describe('External URL Component', () => {
-  preloadFixtures('static/environments/element.html.raw');
+  let ExternalUrlComponent;
+
   beforeEach(() => {
-    loadFixtures('static/environments/element.html.raw');
+    ExternalUrlComponent = Vue.extend(externalUrlComp);
   });
 
   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 7fea80ed799..4d42de4d549 100644
--- a/spec/javascripts/environments/environment_item_spec.js
+++ b/spec/javascripts/environments/environment_item_spec.js
@@ -1,10 +1,12 @@
-window.timeago = require('timeago.js');
-const EnvironmentItem = require('~/environments/components/environment_item');
+import 'timeago.js';
+import Vue from 'vue';
+import environmentItemComp from '~/environments/components/environment_item';
 
 describe('Environment item', () => {
-  preloadFixtures('static/environments/table.html.raw');
+  let EnvironmentItem;
+
   beforeEach(() => {
-    loadFixtures('static/environments/table.html.raw');
+    EnvironmentItem = Vue.extend(environmentItemComp);
   });
 
   describe('When item is folder', () => {
@@ -21,13 +23,13 @@ describe('Environment item', () => {
       };
 
       component = new EnvironmentItem({
-        el: document.querySelector('tr#environment-row'),
         propsData: {
           model: mockItem,
           canCreateDeployment: false,
           canReadEnvironment: true,
+          service: {},
         },
-      });
+      }).$mount();
     });
 
     it('Should render folder icon and name', () => {
@@ -109,13 +111,13 @@ describe('Environment item', () => {
       };
 
       component = new EnvironmentItem({
-        el: document.querySelector('tr#environment-row'),
         propsData: {
           model: environment,
           canCreateDeployment: true,
           canReadEnvironment: true,
+          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 4a596baad09..7cb39d9df03 100644
--- a/spec/javascripts/environments/environment_rollback_spec.js
+++ b/spec/javascripts/environments/environment_rollback_spec.js
@@ -1,47 +1,59 @@
-const RollbackComponent = require('~/environments/components/environment_rollback');
+import Vue from 'vue';
+import rollbackComp from '~/environments/components/environment_rollback';
 
 describe('Rollback Component', () => {
-  preloadFixtures('static/environments/element.html.raw');
-
   const retryURL = 'https://gitlab.com/retry';
+  let RollbackComponent;
+  let spy;
 
   beforeEach(() => {
-    loadFixtures('static/environments/element.html.raw');
+    RollbackComponent = Vue.extend(rollbackComp);
+    spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
   });
 
-  it('Should link to the provided retryUrl', () => {
+  it('Should render Re-deploy label when isLastDeployment is true', () => {
     const component = new RollbackComponent({
       el: document.querySelector('.test-dom-element'),
       propsData: {
         retryUrl: retryURL,
         isLastDeployment: true,
+        service: {
+          postAction: spy,
+        },
       },
-    });
+    }).$mount();
 
-    expect(component.$el.getAttribute('href')).toEqual(retryURL);
+    expect(component.$el.querySelector('span').textContent).toContain('Re-deploy');
   });
 
-  it('Should render Re-deploy label when isLastDeployment is true', () => {
+  it('Should render Rollback label when isLastDeployment is false', () => {
     const component = new RollbackComponent({
       el: document.querySelector('.test-dom-element'),
       propsData: {
         retryUrl: retryURL,
-        isLastDeployment: true,
+        isLastDeployment: false,
+        service: {
+          postAction: spy,
+        },
       },
-    });
+    }).$mount();
 
-    expect(component.$el.querySelector('span').textContent).toContain('Re-deploy');
+    expect(component.$el.querySelector('span').textContent).toContain('Rollback');
   });
 
-  it('Should render Rollback label when isLastDeployment is false', () => {
+  it('should call the service when the button is clicked', () => {
     const component = new RollbackComponent({
-      el: document.querySelector('.test-dom-element'),
       propsData: {
         retryUrl: retryURL,
         isLastDeployment: false,
+        service: {
+          postAction: spy,
+        },
       },
-    });
+    }).$mount();
 
-    expect(component.$el.querySelector('span').textContent).toContain('Rollback');
+    component.$el.click();
+
+    expect(spy).toHaveBeenCalledWith(retryURL);
   });
 });
diff --git a/spec/javascripts/environments/environment_spec.js b/spec/javascripts/environments/environment_spec.js
index edd0cad32d0..9601575577e 100644
--- a/spec/javascripts/environments/environment_spec.js
+++ b/spec/javascripts/environments/environment_spec.js
@@ -1,7 +1,7 @@
-const Vue = require('vue');
-require('~/flash');
-const EnvironmentsComponent = require('~/environments/components/environment');
-const { environment } = require('./mock_data');
+import Vue from 'vue';
+import '~/flash';
+import EnvironmentsComponent from '~/environments/components/environment';
+import { environment } from './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 5ca65b1debc..8f79b88f3df 100644
--- a/spec/javascripts/environments/environment_stop_spec.js
+++ b/spec/javascripts/environments/environment_stop_spec.js
@@ -1,28 +1,34 @@
-const StopComponent = require('~/environments/components/environment_stop');
+import Vue from 'vue';
+import stopComp from '~/environments/components/environment_stop';
 
 describe('Stop Component', () => {
-  preloadFixtures('static/environments/element.html.raw');
-
-  let stopURL;
+  let StopComponent;
   let component;
+  let spy;
+  const stopURL = '/stop';
 
   beforeEach(() => {
-    loadFixtures('static/environments/element.html.raw');
+    StopComponent = Vue.extend(stopComp);
+    spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
+    spyOn(window, 'confirm').and.returnValue(true);
 
-    stopURL = '/stop';
     component = new StopComponent({
-      el: document.querySelector('.test-dom-element'),
       propsData: {
         stopUrl: stopURL,
+        service: {
+          postAction: spy,
+        },
       },
-    });
+    }).$mount();
   });
 
-  it('should link to the provided URL', () => {
-    expect(component.$el.getAttribute('href')).toEqual(stopURL);
+  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 have a data-confirm attribute', () => {
-    expect(component.$el.getAttribute('data-confirm')).toEqual('Are you sure you want to stop this environment?');
+  it('should call the service when an action is clicked', () => {
+    component.$el.click();
+    expect(spy).toHaveBeenCalled();
   });
 });
diff --git a/spec/javascripts/environments/environment_table_spec.js b/spec/javascripts/environments/environment_table_spec.js
index be4330b5012..3df967848a7 100644
--- a/spec/javascripts/environments/environment_table_spec.js
+++ b/spec/javascripts/environments/environment_table_spec.js
@@ -1,4 +1,5 @@
-const EnvironmentTable = require('~/environments/components/environments_table');
+import Vue from 'vue';
+import environmentTableComp from '~/environments/components/environments_table';
 
 describe('Environment item', () => {
   preloadFixtures('static/environments/element.html.raw');
@@ -16,14 +17,17 @@ describe('Environment item', () => {
       },
     };
 
+    const EnvironmentTable = Vue.extend(environmentTableComp);
+
     const component = new EnvironmentTable({
       el: document.querySelector('.test-dom-element'),
       propsData: {
         environments: [{ mockItem }],
         canCreateDeployment: false,
         canReadEnvironment: true,
+        service: {},
       },
-    });
+    }).$mount();
 
     expect(component.$el.tagName).toEqual('TABLE');
   });
diff --git a/spec/javascripts/environments/environment_terminal_button_spec.js b/spec/javascripts/environments/environment_terminal_button_spec.js
new file mode 100644
index 00000000000..b07aa4e1745
--- /dev/null
+++ b/spec/javascripts/environments/environment_terminal_button_spec.js
@@ -0,0 +1,24 @@
+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 77e182b3830..115d84b50f5 100644
--- a/spec/javascripts/environments/environments_store_spec.js
+++ b/spec/javascripts/environments/environments_store_spec.js
@@ -1,5 +1,5 @@
-const Store = require('~/environments/stores/environments_store');
-const { environmentsList, serverData } = require('./mock_data');
+import Store from '~/environments/stores/environments_store';
+import { environmentsList, serverData } from './mock_data';
 
 (() => {
   describe('Store', () => {
diff --git a/spec/javascripts/environments/folder/environments_folder_view_spec.js b/spec/javascripts/environments/folder/environments_folder_view_spec.js
index d1335b5b304..43a217a67f5 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 @@
-const Vue = require('vue');
-require('~/flash');
-const EnvironmentsFolderViewComponent = require('~/environments/folder/environments_folder_view');
-const { environmentsList } = require('../mock_data');
+import Vue from 'vue';
+import '~/flash';
+import EnvironmentsFolderViewComponent from '~/environments/folder/environments_folder_view';
+import { environmentsList } from '../mock_data';
 
 describe('Environments Folder View', () => {
   preloadFixtures('static/environments/environments_folder_view.html.raw');
diff --git a/spec/javascripts/environments/mock_data.js b/spec/javascripts/environments/mock_data.js
index 5c395c6b2d8..30861481cc5 100644
--- a/spec/javascripts/environments/mock_data.js
+++ b/spec/javascripts/environments/mock_data.js
@@ -1,4 +1,4 @@
-const environmentsList = [
+export const environmentsList = [
   {
     name: 'DEV',
     size: 1,
@@ -30,7 +30,7 @@ const environmentsList = [
   },
 ];
 
-const serverData = [
+export const serverData = [
   {
     name: 'DEV',
     size: 1,
@@ -67,7 +67,7 @@ const serverData = [
   },
 ];
 
-const environment = {
+export const environment = {
   name: 'DEV',
   size: 1,
   latest: {
@@ -84,9 +84,3 @@ const environment = {
     updated_at: '2017-01-31T10:53:46.894Z',
   },
 };
-
-module.exports = {
-  environmentsList,
-  environment,
-  serverData,
-};