Prettify vue shared component & improve tests to match guidelines

app/assets/javascripts/vue_shared/components/ci_badge_link.vue

 <script>
-  import ciIcon from './ci_icon.vue';
-  import tooltip from '../directives/tooltip';
-  /**
+import CiIcon from './ci_icon.vue';
+import tooltip from '../directives/tooltip';
+/**
  * Renders CI Badge link with CI icon and status text based on
  * API response shared between all places where it is used.
  *
@@ -22,9 +22,9 @@
  * - MR widget
  */
 
-  export default {
+export default {
   components: {
-      ciIcon,
+    CiIcon,
   },
   directives: {
     tooltip,
@@ -46,7 +46,7 @@
       return className ? `ci-status ci-${className}` : 'ci-status';
     },
   },
-  };
+};
 </script>
 <template>
   <a

app/assets/javascripts/vue_shared/components/ci_icon.vue

 <script>
-  import icon from '../../vue_shared/components/icon.vue';
+import Icon from '../../vue_shared/components/icon.vue';
 
-  /**
+/**
  * Renders CI icon based on API response shared between all places where it is used.
  *
  * Receives status object containing:
@@ -22,9 +22,9 @@
  * - Jobs show view header
  * - Jobs show view sidebar
  */
-  export default {
+export default {
   components: {
-      icon,
+    Icon,
   },
   props: {
     status: {
@@ -32,14 +32,13 @@
       required: true,
     },
   },
-
   computed: {
     cssClass() {
       const status = this.status.group;
       return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`;
     },
   },
-  };
+};
 </script>
 <template>
   <span :class="cssClass">

app/assets/javascripts/vue_shared/components/clipboard_button.vue

 <script>
-  /**
+/**
  * Falls back to the code used in `copy_to_clipboard.js`
+ *
+ * Renders a button with a clipboard icon that copies the content of `data-clipboard-text`
+ * when clicked.
+ *
+ * @example
+ * <clipboard-button
+ *   title="Copy to clipbard"
+ *   text="Content to be copied"
+ *    css-class="btn-transparent"
+ * />
  */
-  import tooltip from '../directives/tooltip';
+import tooltip from '../directives/tooltip';
 
-  export default {
+export default {
   name: 'ClipboardButton',
   directives: {
     tooltip,
@@ -34,7 +44,7 @@
       default: 'btn-default',
     },
   },
-  };
+};
 </script>
 
 <template>

spec/javascripts/vue_shared/components/ci_icon_spec.js

 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: {
+    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: {
+    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: {
+    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: {
+    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: {
+    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: {
+    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: {
+    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: {
+    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: {
+    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: {
+    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);
   });
 });

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!',