Updated icon.vue to be more inline with other components + added spec for it

3 files changed, 49 insertions, 8 deletions

diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
index 5b6c6e8d0b9..fc795936abf 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -43,7 +43,6 @@
     computed: {
       cssClass() {
         const className = this.status.group;
-
         return className ? `ci-status ci-${className}` : 'ci-status';
       },
     },
diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
index 430fab302bf..2e5f9f1088f 100644
--- a/app/assets/javascripts/vue_shared/components/icon.vue
+++ b/app/assets/javascripts/vue_shared/components/icon.vue
@@ -13,7 +13,6 @@
   />
 
 */
-
   export default {
     props: {
       name: {
@@ -27,7 +26,7 @@
         default: 0,
       },
 
-      cssClass: {
+      cssClasses: {
         type: String,
         required: false,
         default: '',
@@ -38,17 +37,15 @@
       spriteHref() {
         return `${gon.sprite_icons}#${this.name}`;
       },
-      fullCssClass() {
-        let classString = '' || this.cssClass;
-        if (this.size) classString += `s${this.size}`;
-        return classString;
+      iconSizeClass() {
+        return this.size ? `s${this.size}` : '';
       },
     },
   };
 </script>
 <template>
   <svg
-    :class="fullCssClass">
+    :class="[iconSizeClass, cssClasses]">
     <use 
       v-bind="{'xlink:href':spriteHref}"/>
   </svg>
diff --git a/spec/javascripts/vue_shared/components/icon_spec.js b/spec/javascripts/vue_shared/components/icon_spec.js
new file mode 100644
index 00000000000..7c84473456d
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/icon_spec.js
@@ -0,0 +1,45 @@
+import Vue from 'vue';
+import Icon from '~/vue_shared/components/icon.vue';
+
+const IconComponent = Vue.extend(Icon);
+
+fdescribe('Sprite Icon Component', function () {
+  describe('Initialization', function () {
+    beforeEach(function () {
+      this.propsData = {
+        name: 'test',
+        size: 99,
+        cssClasses: 'extraclasses',
+      };
+
+      this.icon = new IconComponent({
+        propsData: this.propsData,
+      }).$mount();
+    });
+
+    it('should return a defined Vue component', function () {
+      expect(this.icon).toBeDefined();
+    });
+
+    it('should have <svg> as a child element', function () {
+      expect(this.icon.$el.tagName).toBe('svg');
+    });
+
+    it('should have <use> as a child element with the correct href', function () {
+      expect(this.icon.$el.firstChild.tagName).toBe('use');
+      expect(this.icon.$el.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_icons}#test`);
+    });
+
+    it('should properly compute iconSizeClass', function () {
+      expect(this.icon.iconSizeClass).toBe('s99');
+    });
+
+    it('should properly render img css', function () {
+      const classList = this.icon.$el.classList;
+      const containsSizeClass = classList.contains('s99');
+      const containsCustomClass = classList.contains('extraclasses');
+      expect(containsSizeClass).toBe(true);
+      expect(containsCustomClass).toBe(true);
+    });
+  });
+});