2 files changed, 48 insertions, 45 deletions
diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
index 1a0df49bc29..c42c4a1fbe7 100644
--- a/app/assets/javascripts/vue_shared/components/icon.vue
+++ b/app/assets/javascripts/vue_shared/components/icon.vue
@@ -65,6 +65,9 @@ export default {
     spriteHref() {
       return `${gon.sprite_icons}#${this.name}`;
     },
+    iconTestClass() {
+      return `ic-${this.name}`;
+    },
     iconSizeClass() {
       return this.size ? `s${this.size}` : '';
     },
@@ -74,7 +77,7 @@ export default {
 
 <template>
   <svg
-    :class="[iconSizeClass, cssClasses]"
+    :class="[iconSizeClass, iconTestClass, cssClasses]"
     :width="width"
     :height="height"
     :x="x"
diff --git a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
index b33a0101dbf..92d187e24bf 100644
--- a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
+++ b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
@@ -1,53 +1,53 @@
 <script>
-  import $ from 'jquery';
+import $ from 'jquery';
 
-  /**
-   * Given an array of tabs, renders non linked bootstrap tabs.
-   * When a tab is clicked it will trigger an event and provide the clicked scope.
-   *
-   * This component is used in apps that handle the API call.
-   * If you only need to change the URL this component should not be used.
-   *
-   * @example
-   * <navigation-tabs
-   *   :tabs="[
-   *   {
-   *      name: String,
-   *      scope: String,
-   *      count: Number || Undefined,
-   *      isActive: Boolean,
-   *    },
-   *   ]"
-   *   @onChangeTab="onChangeTab"
-   *   />
-   */
-  export default {
-    name: 'NavigationTabs',
-    props: {
-      tabs: {
-        type: Array,
-        required: true,
-      },
-      scope: {
-        type: String,
-        required: false,
-        default: '',
-      },
+/**
+ * Given an array of tabs, renders non linked bootstrap tabs.
+ * When a tab is clicked it will trigger an event and provide the clicked scope.
+ *
+ * This component is used in apps that handle the API call.
+ * If you only need to change the URL this component should not be used.
+ *
+ * @example
+ * <navigation-tabs
+ *   :tabs="[
+ *   {
+ *      name: String,
+ *      scope: String,
+ *      count: Number || Undefined || Null,
+ *      isActive: Boolean,
+ *    },
+ *   ]"
+ *   @onChangeTab="onChangeTab"
+ *   />
+ */
+export default {
+  name: 'NavigationTabs',
+  props: {
+    tabs: {
+      type: Array,
+      required: true,
     },
-    mounted() {
-      $(document).trigger('init.scrolling-tabs');
+    scope: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  mounted() {
+    $(document).trigger('init.scrolling-tabs');
+  },
+  methods: {
+    shouldRenderBadge(count) {
+      // 0 is valid in a badge, but evaluates to false, we need to check for undefined or null
+      return !(count === undefined || count === null);
     },
-    methods: {
-      shouldRenderBadge(count) {
-        // 0 is valid in a badge, but evaluates to false, we need to check for undefined
-        return count !== undefined;
-      },
 
-      onTabClick(tab) {
-        this.$emit('onChangeTab', tab.scope);
-      },
+    onTabClick(tab) {
+      this.$emit('onChangeTab', tab.scope);
     },
-  };
+  },
+};
 </script>
 <template>
   <ul class="nav-links scrolling-tabs separator">