From 8c70224d1829a81567b0edf86f2fd9d7b94c0298 Mon Sep 17 00:00:00 2001
From: kushalpandya <kushal@gitlab.com>
Date: Mon, 4 Sep 2017 21:12:27 +0530
Subject: [PATCH] Add support for `sizeClass`, defaults to `s40`

---
 .../vue_shared/components/identicon.vue       |  8 ++++-
 .../vue_shared/components/identicon_spec.js   | 30 ++++++++++++++-----
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/identicon.vue b/app/assets/javascripts/vue_shared/components/identicon.vue
index 0edd820743f..7cf2e029cf6 100644
--- a/app/assets/javascripts/vue_shared/components/identicon.vue
+++ b/app/assets/javascripts/vue_shared/components/identicon.vue
@@ -9,6 +9,11 @@ export default {
       type: String,
       required: true,
     },
+    sizeClass: {
+      type: String,
+      required: false,
+      default: 's40',
+    },
   },
   computed: {
     /**
@@ -38,7 +43,8 @@ export default {
 
 <template>
   <div
-    class="avatar s40 identicon"
+    class="avatar identicon"
+    :class="sizeClass"
     :style="identiconStyles">
     {{identiconTitle}}
   </div>
diff --git a/spec/javascripts/vue_shared/components/identicon_spec.js b/spec/javascripts/vue_shared/components/identicon_spec.js
index 4f194e5a64e..647680f00f7 100644
--- a/spec/javascripts/vue_shared/components/identicon_spec.js
+++ b/spec/javascripts/vue_shared/components/identicon_spec.js
@@ -1,25 +1,30 @@
 import Vue from 'vue';
 import identiconComponent from '~/vue_shared/components/identicon.vue';
 
-const createComponent = () => {
+const createComponent = (sizeClass) => {
   const Component = Vue.extend(identiconComponent);
 
   return new Component({
     propsData: {
       entityId: 1,
       entityName: 'entity-name',
+      sizeClass,
     },
   }).$mount();
 };
 
 describe('IdenticonComponent', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
-
   describe('computed', () => {
+    let vm;
+
+    beforeEach(() => {
+      vm = createComponent();
+    });
+
+    afterEach(() => {
+      vm.$destroy();
+    });
+
     describe('identiconStyles', () => {
       it('should return styles attribute value with `background-color` property', () => {
         vm.entityId = 4;
@@ -48,9 +53,20 @@ describe('IdenticonComponent', () => {
 
   describe('template', () => {
     it('should render identicon', () => {
+      const vm = createComponent();
+
       expect(vm.$el.nodeName).toBe('DIV');
       expect(vm.$el.classList.contains('identicon')).toBeTruthy();
+      expect(vm.$el.classList.contains('s40')).toBeTruthy();
       expect(vm.$el.getAttribute('style').indexOf('background-color') > -1).toBeTruthy();
+      vm.$destroy();
+    });
+
+    it('should render identicon with provided sizing class', () => {
+      const vm = createComponent('s32');
+
+      expect(vm.$el.classList.contains('s32')).toBeTruthy();
+      vm.$destroy();
     });
   });
 });