Migrate environment specs to Jest + VTU

Migrated a few environment specs from Karma to Jest and Vue Test Utils.
This migration will help us upgrade BootstrapVue in a follow up MR.

spec/frontend/environments/environment_monitoring_spec.js

+import { shallowMount } from '@vue/test-utils';
+import MonitoringComponent from '~/environments/components/environment_monitoring.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+
+describe('Monitoring Component', () => {
+  let wrapper;
+
+  const monitoringUrl = 'https://gitlab.com';
+
+  const createWrapper = () => {
+    wrapper = shallowMount(MonitoringComponent, {
+      sync: false,
+      attachToDocument: true,
+      propsData: {
+        monitoringUrl,
+      },
+    });
+  };
+
+  const findIcons = () => wrapper.findAll(Icon);
+  const findIconsByName = name => findIcons().filter(icon => icon.props('name') === name);
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
+  describe('computed', () => {
+    it('title', () => {
+      expect(wrapper.vm.title).toBe('Monitoring');
+    });
+  });
+
+  it('should render a link to environment monitoring page', () => {
+    expect(wrapper.attributes('href')).toEqual(monitoringUrl);
+    expect(findIconsByName('chart').length).toBe(1);
+    expect(wrapper.attributes('data-original-title')).toBe('Monitoring');
+    expect(wrapper.attributes('aria-label')).toBe('Monitoring');
+  });
+});

spec/frontend/environments/environment_stop_spec.js

+import $ from 'jquery';
+import { shallowMount } from '@vue/test-utils';
+import StopComponent from '~/environments/components/environment_stop.vue';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import eventHub from '~/environments/event_hub';
+
+$.fn.tooltip = () => {};
+
+describe('Stop Component', () => {
+  let wrapper;
+
+  const createWrapper = () => {
+    wrapper = shallowMount(StopComponent, {
+      sync: false,
+      attachToDocument: true,
+      propsData: {
+        environment: {},
+      },
+    });
+  };
+
+  const findButton = () => wrapper.find(LoadingButton);
+
+  beforeEach(() => {
+    jest.spyOn(window, 'confirm');
+
+    createWrapper();
+  });
+
+  it('should render a button to stop the environment', () => {
+    expect(findButton().exists()).toBe(true);
+    expect(wrapper.attributes('data-original-title')).toEqual('Stop environment');
+  });
+
+  it('emits requestStopEnvironment in the event hub when button is clicked', () => {
+    jest.spyOn(eventHub, '$emit');
+    findButton().vm.$emit('click');
+    expect(eventHub.$emit).toHaveBeenCalledWith('requestStopEnvironment', wrapper.vm.environment);
+  });
+});

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

-import Vue from 'vue';
-import terminalComp from '~/environments/components/environment_terminal_button.vue';
+import { shallowMount } from '@vue/test-utils';
+import TerminalComponent from '~/environments/components/environment_terminal_button.vue';
 
 describe('Stop Component', () => {
-  let component;
+  let wrapper;
   const terminalPath = '/path';
 
   const mountWithProps = props => {
-    const TerminalComponent = Vue.extend(terminalComp);
-    component = new TerminalComponent({
+    wrapper = shallowMount(TerminalComponent, {
+      sync: false,
+      attachToDocument: true,
       propsData: props,
-    }).$mount();
+    });
   };
 
   beforeEach(() => {
@@ -18,18 +19,18 @@ describe('Stop Component', () => {
 
   describe('computed', () => {
     it('title', () => {
-      expect(component.title).toEqual('Terminal');
+      expect(wrapper.vm.title).toEqual('Terminal');
     });
   });
 
   it('should render a link to open a web terminal with the provided path', () => {
-    expect(component.$el.tagName).toEqual('A');
-    expect(component.$el.getAttribute('data-original-title')).toEqual('Terminal');
-    expect(component.$el.getAttribute('aria-label')).toEqual('Terminal');
-    expect(component.$el.getAttribute('href')).toEqual(terminalPath);
+    expect(wrapper.is('a')).toBe(true);
+    expect(wrapper.attributes('data-original-title')).toBe('Terminal');
+    expect(wrapper.attributes('aria-label')).toBe('Terminal');
+    expect(wrapper.attributes('href')).toBe(terminalPath);
   });
 
   it('should render a non-disabled button', () => {
-    expect(component.$el.classList).not.toContain('disabled');
+    expect(wrapper.classes()).not.toContain('disabled');
   });
 });

spec/javascripts/environments/environment_monitoring_spec.js

-import Vue from 'vue';
-import monitoringComp from '~/environments/components/environment_monitoring.vue';
-
-describe('Monitoring Component', () => {
-  let MonitoringComponent;
-  let component;
-
-  const monitoringUrl = 'https://gitlab.com';
-
-  beforeEach(() => {
-    MonitoringComponent = Vue.extend(monitoringComp);
-
-    component = new MonitoringComponent({
-      propsData: {
-        monitoringUrl,
-      },
-    }).$mount();
-  });
-
-  describe('computed', () => {
-    it('title', () => {
-      expect(component.title).toEqual('Monitoring');
-    });
-  });
-
-  it('should render a link to environment monitoring page', () => {
-    expect(component.$el.getAttribute('href')).toEqual(monitoringUrl);
-    expect(component.$el.querySelector('.fa-area-chart')).toBeDefined();
-    expect(component.$el.getAttribute('data-original-title')).toEqual('Monitoring');
-    expect(component.$el.getAttribute('aria-label')).toEqual('Monitoring');
-  });
-});

spec/javascripts/environments/environment_stop_spec.js

-import Vue from 'vue';
-import stopComp from '~/environments/components/environment_stop.vue';
-
-describe('Stop Component', () => {
-  let StopComponent;
-  let component;
-
-  beforeEach(() => {
-    StopComponent = Vue.extend(stopComp);
-    spyOn(window, 'confirm').and.returnValue(true);
-
-    component = new StopComponent({
-      propsData: {
-        environment: {},
-      },
-    }).$mount();
-  });
-
-  it('should render a button to stop the environment', () => {
-    expect(component.$el.tagName).toEqual('BUTTON');
-    expect(component.$el.getAttribute('data-original-title')).toEqual('Stop environment');
-  });
-});