Add vanilla JS avatar_helper and update existing avatar helpers

3 files changed, 120 insertions, 12 deletions

diff --git a/spec/javascripts/avatar_helper_spec.js b/spec/javascripts/avatar_helper_spec.js
new file mode 100644
index 00000000000..b2f80678ae7
--- /dev/null
+++ b/spec/javascripts/avatar_helper_spec.js
@@ -0,0 +1,98 @@
+import { TEST_HOST } from 'spec/test_constants';
+import { getFirstCharacterCapitalized } from '~/lib/utils/text_utility';
+import {
+  DEFAULT_SIZE_CLASS,
+  IDENTICON_BG_COUNT,
+  renderAvatar,
+  renderIdenticon,
+  getIdenticonBackgroundClass,
+  getIdenticonTitle,
+} from '~/helpers/avatar_helper';
+
+function matchAll(str) {
+  return new RegExp(`^${str}$`);
+}
+
+describe('avatar_helper', () => {
+  describe('getIdenticonBackgroundClass', () => {
+    it('returns identicon bg class from id', () => {
+      expect(getIdenticonBackgroundClass(1)).toEqual('bg2');
+    });
+
+    it(`wraps around if id is bigger than ${IDENTICON_BG_COUNT}`, () => {
+      expect(getIdenticonBackgroundClass(IDENTICON_BG_COUNT + 4)).toEqual('bg5');
+      expect(getIdenticonBackgroundClass((IDENTICON_BG_COUNT * 5) + 6)).toEqual('bg7');
+    });
+  });
+
+  describe('getIdenticonTitle', () => {
+    it('returns identicon title from name', () => {
+      expect(getIdenticonTitle('Lorem')).toEqual('L');
+      expect(getIdenticonTitle('dolar-sit-amit')).toEqual('D');
+      expect(getIdenticonTitle('%-with-special-chars')).toEqual('%');
+    });
+
+    it('returns space if name is falsey', () => {
+      expect(getIdenticonTitle('')).toEqual(' ');
+      expect(getIdenticonTitle(null)).toEqual(' ');
+    });
+  });
+
+  describe('renderIdenticon', () => {
+    it('renders with the first letter as title and bg based on id', () => {
+      const entity = {
+        id: IDENTICON_BG_COUNT + 3,
+        name: 'Xavior',
+      };
+      const options = {
+        sizeClass: 's32',
+      };
+
+      const result = renderIdenticon(entity, options);
+
+      expect(result).toHaveClass(`identicon ${options.sizeClass} bg4`);
+      expect(result).toHaveText(matchAll(getFirstCharacterCapitalized(entity.name)));
+    });
+
+    it('renders with defaults, if no options are given', () => {
+      const entity = {
+        id: 1,
+        name: 'tanuki',
+      };
+
+      const result = renderIdenticon(entity);
+
+      expect(result).toHaveClass(`identicon ${DEFAULT_SIZE_CLASS} bg2`);
+      expect(result).toHaveText(matchAll(getFirstCharacterCapitalized(entity.name)));
+    });
+  });
+
+  describe('renderAvatar', () => {
+    it('renders an image with the avatarUrl', () => {
+      const avatarUrl = `${TEST_HOST}/not-real-assets/test.png`;
+
+      const result = renderAvatar({
+        avatar_url: avatarUrl,
+      });
+
+      expect(result).toBeMatchedBy('img');
+      expect(result).toHaveAttr('src', avatarUrl);
+      expect(result).toHaveClass(DEFAULT_SIZE_CLASS);
+    });
+
+    it('renders an identicon if no avatarUrl', () => {
+      const entity = {
+        id: 1,
+        name: 'walrus',
+      };
+      const options = {
+        sizeClass: 's16',
+      };
+
+      const result = renderAvatar(entity, options);
+
+      expect(result).toHaveClass(`identicon ${options.sizeClass} bg2`);
+      expect(result).toHaveText(matchAll(getFirstCharacterCapitalized(entity.name)));
+    });
+  });
+});
diff --git a/spec/javascripts/lib/utils/text_utility_spec.js b/spec/javascripts/lib/utils/text_utility_spec.js
index 33987574f00..d60485b1308 100644
--- a/spec/javascripts/lib/utils/text_utility_spec.js
+++ b/spec/javascripts/lib/utils/text_utility_spec.js
@@ -112,4 +112,21 @@ describe('text_utility', () => {
       expect(textUtils.splitCamelCase('HelloWorld')).toBe('Hello World');
     });
   });
+
+  describe('getFirstCharacterCapitalized', () => {
+    it('returns the first character captialized, if first character is alphabetic', () => {
+      expect(textUtils.getFirstCharacterCapitalized('loremIpsumDolar')).toEqual('L');
+      expect(textUtils.getFirstCharacterCapitalized('Sit amit !')).toEqual('S');
+    });
+
+    it('returns the first character, if first character is non-alphabetic', () => {
+      expect(textUtils.getFirstCharacterCapitalized(' lorem')).toEqual(' ');
+      expect(textUtils.getFirstCharacterCapitalized('%#!')).toEqual('%');
+    });
+
+    it('returns an empty string, if string is falsey', () => {
+      expect(textUtils.getFirstCharacterCapitalized('')).toEqual('');
+      expect(textUtils.getFirstCharacterCapitalized(null)).toEqual('');
+    });
+  });
 });
diff --git a/spec/javascripts/vue_shared/components/identicon_spec.js b/spec/javascripts/vue_shared/components/identicon_spec.js
index 647680f00f7..0719800c682 100644
--- a/spec/javascripts/vue_shared/components/identicon_spec.js
+++ b/spec/javascripts/vue_shared/components/identicon_spec.js
@@ -25,19 +25,12 @@ describe('IdenticonComponent', () => {
       vm.$destroy();
     });
 
-    describe('identiconStyles', () => {
-      it('should return styles attribute value with `background-color` property', () => {
+    describe('identiconBackgroundClass', () => {
+      it('should return bg class based on entityId', () => {
         vm.entityId = 4;
 
-        expect(vm.identiconStyles).toBeDefined();
-        expect(vm.identiconStyles.indexOf('background-color: #E0F2F1;') > -1).toBeTruthy();
-      });
-
-      it('should return styles attribute value with `color` property', () => {
-        vm.entityId = 4;
-
-        expect(vm.identiconStyles).toBeDefined();
-        expect(vm.identiconStyles.indexOf('color: #555;') > -1).toBeTruthy();
+        expect(vm.identiconBackgroundClass).toBeDefined();
+        expect(vm.identiconBackgroundClass).toBe('bg5');
       });
     });
 
@@ -58,7 +51,7 @@ describe('IdenticonComponent', () => {
       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();
+      expect(vm.$el.classList.contains('bg2')).toBeTruthy();
       vm.$destroy();
     });