Merge branch 'fl-prettify' into 'master'

Prettify vue shared component & improve tests to match guidelines

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

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

 <script>
-  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.
-   *
-   * Receives status object containing:
-   * status: {
-   *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
-   *   group:"running" // used for CSS class
-   *   icon: "icon_status_running" // used to render the icon
-   *   label:"running" // used for potential tooltip
-   *   text:"running" // text rendered
-   * }
-   *
-   * Used in:
-   * - Pipelines table - first column
-   * - Jobs table - first column
-   * - Pipeline show view - header
-   * - Job show view - header
-   * - MR widget
-   */
+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.
+ *
+ * Receives status object containing:
+ * status: {
+ *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
+ *   group:"running" // used for CSS class
+ *   icon: "icon_status_running" // used to render the icon
+ *   label:"running" // used for potential tooltip
+ *   text:"running" // text rendered
+ * }
+ *
+ * Used in:
+ * - Pipelines table - first column
+ * - Jobs table - first column
+ * - Pipeline show view - header
+ * - Job show view - header
+ * - MR widget
+ */
 
-  export default {
-    components: {
-      ciIcon,
+export default {
+  components: {
+    CiIcon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    status: {
+      type: Object,
+      required: true,
     },
-    directives: {
-      tooltip,
+    showText: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    props: {
-      status: {
-        type: Object,
-        required: true,
-      },
-      showText: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+  },
+  computed: {
+    cssClass() {
+      const className = this.status.group;
+      return className ? `ci-status ci-${className}` : 'ci-status';
     },
-    computed: {
-      cssClass() {
-        const className = this.status.group;
-        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:
-   * status: {
-   *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
-   *   group:"running" // used for CSS class
-   *   icon: "icon_status_running" // used to render the icon
-   *   label:"running" // used for potential tooltip
-   *   text:"running" // text rendered
-   * }
-   *
-   * Used in:
-   * - Pipelines table Badge
-   * - Pipelines table mini graph
-   * - Pipeline graph
-   * - Pipeline show view badge
-   * - Jobs table
-   * - Jobs show view header
-   * - Jobs show view sidebar
-   */
-  export default {
-    components: {
-      icon,
+/**
+ * Renders CI icon based on API response shared between all places where it is used.
+ *
+ * Receives status object containing:
+ * status: {
+ *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
+ *   group:"running" // used for CSS class
+ *   icon: "icon_status_running" // used to render the icon
+ *   label:"running" // used for potential tooltip
+ *   text:"running" // text rendered
+ * }
+ *
+ * Used in:
+ * - Pipelines table Badge
+ * - Pipelines table mini graph
+ * - Pipeline graph
+ * - Pipeline show view badge
+ * - Jobs table
+ * - Jobs show view header
+ * - Jobs show view sidebar
+ */
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    status: {
+      type: Object,
+      required: true,
     },
-    props: {
-      status: {
-        type: Object,
-        required: true,
-      },
+  },
+  computed: {
+    cssClass() {
+      const status = this.status.group;
+      return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`;
     },
-
-    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`
-   */
-  import tooltip from '../directives/tooltip';
+/**
+ * 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';
 
-  export default {
-    name: 'ClipboardButton',
-    directives: {
-      tooltip,
+export default {
+  name: 'ClipboardButton',
+  directives: {
+    tooltip,
+  },
+  props: {
+    text: {
+      type: String,
+      required: true,
     },
-    props: {
-      text: {
-        type: String,
-        required: true,
-      },
-      title: {
-        type: String,
-        required: true,
-      },
-      tooltipPlacement: {
-        type: String,
-        required: false,
-        default: 'top',
-      },
-      tooltipContainer: {
-        type: [String, Boolean],
-        required: false,
-        default: false,
-      },
-      cssClass: {
-        type: String,
-        required: false,
-        default: 'btn-default',
-      },
+    title: {
+      type: String,
+      required: true,
     },
-  };
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+    tooltipContainer: {
+      type: [String, Boolean],
+      required: false,
+      default: false,
+    },
+    cssClass: {
+      type: String,
+      required: false,
+      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: {
-        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);
   });
 });

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