Merge branch 'fl-prettify' into 'master'

Prettify vue shared component & improve tests to match guidelines

See merge request gitlab-org/gitlab-ce!18485

2 files changed, 67 insertions, 84 deletions

diff --git a/spec/javascripts/vue_shared/components/ci_icon_spec.js b/spec/javascripts/vue_shared/components/ci_icon_spec.js
index d8664408595..423bc746a22 100644
--- a/spec/javascripts/vue_shared/components/ci_icon_spec.js
+++ b/spec/javascripts/vue_shared/components/ci_icon_spec.js
@@ -1,139 +1,122 @@
 import Vue from 'vue';
 import ciIcon from '~/vue_shared/components/ci_icon.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('CI Icon component', () => {
-  let CiIcon;
-  beforeEach(() => {
-    CiIcon = Vue.extend(ciIcon);
+  const Component = Vue.extend(ciIcon);
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
   });
 
   it('should render a span element with an svg', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_success',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_success',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.tagName).toEqual('SPAN');
-    expect(component.$el.querySelector('span > svg')).toBeDefined();
+    expect(vm.$el.tagName).toEqual('SPAN');
+    expect(vm.$el.querySelector('span > svg')).toBeDefined();
   });
 
   it('should render a success status', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_success',
-          group: 'success',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_success',
+        group: 'success',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-success')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-success')).toEqual(true);
   });
 
   it('should render a failed status', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_failed',
-          group: 'failed',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_failed',
+        group: 'failed',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-failed')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-failed')).toEqual(true);
   });
 
   it('should render success with warnings status', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_warning',
-          group: 'warning',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_warning',
+        group: 'warning',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-warning')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-warning')).toEqual(true);
   });
 
   it('should render pending status', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_pending',
-          group: 'pending',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_pending',
+        group: 'pending',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-pending')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-pending')).toEqual(true);
   });
 
   it('should render running status', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_running',
-          group: 'running',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_running',
+        group: 'running',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-running')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-running')).toEqual(true);
   });
 
   it('should render created status', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_created',
-          group: 'created',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_created',
+        group: 'created',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-created')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-created')).toEqual(true);
   });
 
   it('should render skipped status', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_skipped',
-          group: 'skipped',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_skipped',
+        group: 'skipped',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-skipped')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-skipped')).toEqual(true);
   });
 
   it('should render canceled status', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_canceled',
-          group: 'canceled',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_canceled',
+        group: 'canceled',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-canceled')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-canceled')).toEqual(true);
   });
 
   it('should render status for manual action', () => {
-    const component = new CiIcon({
-      propsData: {
-        status: {
-          icon: 'icon_status_manual',
-          group: 'manual',
-        },
+    vm = mountComponent(Component, {
+      status: {
+        icon: 'icon_status_manual',
+        group: 'manual',
       },
-    }).$mount();
+    });
 
-    expect(component.$el.classList.contains('ci-status-icon-manual')).toEqual(true);
+    expect(vm.$el.classList.contains('ci-status-icon-manual')).toEqual(true);
   });
 });
diff --git a/spec/javascripts/vue_shared/components/clipboard_button_spec.js b/spec/javascripts/vue_shared/components/clipboard_button_spec.js
index f598b1afa74..97f0fbb04db 100644
--- a/spec/javascripts/vue_shared/components/clipboard_button_spec.js
+++ b/spec/javascripts/vue_shared/components/clipboard_button_spec.js
@@ -3,10 +3,10 @@ import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('clipboard button', () => {
+  const Component = Vue.extend(clipboardButton);
   let vm;
 
   beforeEach(() => {
-    const Component = Vue.extend(clipboardButton);
     vm = mountComponent(Component, {
       text: 'copy me',
       title: 'Copy this value into Clipboard!',