Convert vue components into vue filesenvironments-vue-files

10 files changed, 22 insertions, 18 deletions

diff --git a/spec/javascripts/environments/environment_actions_spec.js b/spec/javascripts/environments/environment_actions_spec.js
index 6348d97b0a5..676bf61cfd9 100644
--- a/spec/javascripts/environments/environment_actions_spec.js
+++ b/spec/javascripts/environments/environment_actions_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import actionsComp from '~/environments/components/environment_actions';
+import actionsComp from '~/environments/components/environment_actions.vue';
 
 describe('Actions Component', () => {
   let ActionsComponent;
diff --git a/spec/javascripts/environments/environment_external_url_spec.js b/spec/javascripts/environments/environment_external_url_spec.js
index 9af218a27ff..056d68a26e9 100644
--- a/spec/javascripts/environments/environment_external_url_spec.js
+++ b/spec/javascripts/environments/environment_external_url_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import externalUrlComp from '~/environments/components/environment_external_url';
+import externalUrlComp from '~/environments/components/environment_external_url.vue';
 
 describe('External URL Component', () => {
   let ExternalUrlComponent;
diff --git a/spec/javascripts/environments/environment_item_spec.js b/spec/javascripts/environments/environment_item_spec.js
index 4d42de4d549..0e141adb628 100644
--- a/spec/javascripts/environments/environment_item_spec.js
+++ b/spec/javascripts/environments/environment_item_spec.js
@@ -1,6 +1,6 @@
 import 'timeago.js';
 import Vue from 'vue';
-import environmentItemComp from '~/environments/components/environment_item';
+import environmentItemComp from '~/environments/components/environment_item.vue';
 
 describe('Environment item', () => {
   let EnvironmentItem;
diff --git a/spec/javascripts/environments/environment_monitoring_spec.js b/spec/javascripts/environments/environment_monitoring_spec.js
index fc451cce641..0f3dba66230 100644
--- a/spec/javascripts/environments/environment_monitoring_spec.js
+++ b/spec/javascripts/environments/environment_monitoring_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import monitoringComp from '~/environments/components/environment_monitoring';
+import monitoringComp from '~/environments/components/environment_monitoring.vue';
 
 describe('Monitoring Component', () => {
   let MonitoringComponent;
diff --git a/spec/javascripts/environments/environment_rollback_spec.js b/spec/javascripts/environments/environment_rollback_spec.js
index 7cb39d9df03..25397714a76 100644
--- a/spec/javascripts/environments/environment_rollback_spec.js
+++ b/spec/javascripts/environments/environment_rollback_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import rollbackComp from '~/environments/components/environment_rollback';
+import rollbackComp from '~/environments/components/environment_rollback.vue';
 
 describe('Rollback Component', () => {
   const retryURL = 'https://gitlab.com/retry';
diff --git a/spec/javascripts/environments/environment_spec.js b/spec/javascripts/environments/environment_spec.js
index 9762688af1a..d32578f0385 100644
--- a/spec/javascripts/environments/environment_spec.js
+++ b/spec/javascripts/environments/environment_spec.js
@@ -1,14 +1,16 @@
 import Vue from 'vue';
 import '~/flash';
-import EnvironmentsComponent from '~/environments/components/environment';
+import environmentsComponent from '~/environments/components/environment.vue';
 import { environment, folder } from './mock_data';
 
 describe('Environment', () => {
   preloadFixtures('static/environments/environments.html.raw');
-
+  let EnvironmentsComponent;
   let component;
 
   beforeEach(() => {
+    EnvironmentsComponent = Vue.extend(environmentsComponent);
+
     loadFixtures('static/environments/environments.html.raw');
   });
 
@@ -32,7 +34,7 @@ describe('Environment', () => {
 
       it('should render the empty state', (done) => {
         component = new EnvironmentsComponent({
-          el: document.querySelector('#environments-list-view'),
+          el: document.querySelector('#js-environments-list-view'),
         });
 
         setTimeout(() => {
@@ -71,8 +73,8 @@ describe('Environment', () => {
       beforeEach(() => {
         Vue.http.interceptors.push(environmentsResponseInterceptor);
         component = new EnvironmentsComponent({
-          el: document.querySelector('#environments-list-view'),
-        });
+          el: document.querySelector('#js-environments-list-view'),
+        }).$mount();
       });
 
       afterEach(() => {
@@ -169,7 +171,7 @@ describe('Environment', () => {
 
     it('should render empty state', (done) => {
       component = new EnvironmentsComponent({
-        el: document.querySelector('#environments-list-view'),
+        el: document.querySelector('#js-environments-list-view'),
       });
 
       setTimeout(() => {
@@ -203,7 +205,7 @@ describe('Environment', () => {
     beforeEach(() => {
       Vue.http.interceptors.push(environmentsResponseInterceptor);
       component = new EnvironmentsComponent({
-        el: document.querySelector('#environments-list-view'),
+        el: document.querySelector('#js-environments-list-view'),
       });
     });
 
diff --git a/spec/javascripts/environments/environment_stop_spec.js b/spec/javascripts/environments/environment_stop_spec.js
index 01055e3f255..942e4aaabd4 100644
--- a/spec/javascripts/environments/environment_stop_spec.js
+++ b/spec/javascripts/environments/environment_stop_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import stopComp from '~/environments/components/environment_stop';
+import stopComp from '~/environments/components/environment_stop.vue';
 
 describe('Stop Component', () => {
   let StopComponent;
diff --git a/spec/javascripts/environments/environment_table_spec.js b/spec/javascripts/environments/environment_table_spec.js
index 3df967848a7..effbc6c3ee1 100644
--- a/spec/javascripts/environments/environment_table_spec.js
+++ b/spec/javascripts/environments/environment_table_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import environmentTableComp from '~/environments/components/environments_table';
+import environmentTableComp from '~/environments/components/environments_table.vue';
 
 describe('Environment item', () => {
   preloadFixtures('static/environments/element.html.raw');
diff --git a/spec/javascripts/environments/environment_terminal_button_spec.js b/spec/javascripts/environments/environment_terminal_button_spec.js
index be2289edc2b..858472af4b6 100644
--- a/spec/javascripts/environments/environment_terminal_button_spec.js
+++ b/spec/javascripts/environments/environment_terminal_button_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import terminalComp from '~/environments/components/environment_terminal_button';
+import terminalComp from '~/environments/components/environment_terminal_button.vue';
 
 describe('Stop Component', () => {
   let TerminalComponent;
diff --git a/spec/javascripts/environments/folder/environments_folder_view_spec.js b/spec/javascripts/environments/folder/environments_folder_view_spec.js
index 72f3db29a66..909f85fbc25 100644
--- a/spec/javascripts/environments/folder/environments_folder_view_spec.js
+++ b/spec/javascripts/environments/folder/environments_folder_view_spec.js
@@ -1,12 +1,14 @@
 import Vue from 'vue';
 import '~/flash';
-import EnvironmentsFolderViewComponent from '~/environments/folder/environments_folder_view';
+import environmentsFolderViewComponent from '~/environments/folder/environments_folder_view.vue';
 import { environmentsList } from '../mock_data';
 
 describe('Environments Folder View', () => {
   preloadFixtures('static/environments/environments_folder_view.html.raw');
+  let EnvironmentsFolderViewComponent;
 
   beforeEach(() => {
+    EnvironmentsFolderViewComponent = Vue.extend(environmentsFolderViewComponent);
     loadFixtures('static/environments/environments_folder_view.html.raw');
     window.history.pushState({}, null, 'environments/folders/build');
   });
@@ -35,7 +37,7 @@ describe('Environments Folder View', () => {
     beforeEach(() => {
       Vue.http.interceptors.push(environmentsResponseInterceptor);
       component = new EnvironmentsFolderViewComponent({
-        el: document.querySelector('#environments-folder-list-view'),
+        el: document.querySelector('#js-environments-folder-list-view'),
       });
     });
 
@@ -163,7 +165,7 @@ describe('Environments Folder View', () => {
 
     it('should not render a table', (done) => {
       component = new EnvironmentsFolderViewComponent({
-        el: document.querySelector('#environments-folder-list-view'),
+        el: document.querySelector('#js-environments-folder-list-view'),
       });
 
       setTimeout(() => {