From fbfe04401deb7a08da03502282531364aa25d511 Mon Sep 17 00:00:00 2001 From: Paul Slaughter Date: Wed, 1 Aug 2018 19:43:50 +0000 Subject: Add vanilla JS avatar_helper and update existing avatar helpers --- spec/javascripts/avatar_helper_spec.js | 98 ++++++++++++++++++++++ spec/javascripts/lib/utils/text_utility_spec.js | 17 ++++ .../vue_shared/components/identicon_spec.js | 17 ++-- 3 files changed, 120 insertions(+), 12 deletions(-) create mode 100644 spec/javascripts/avatar_helper_spec.js (limited to 'spec/javascripts') 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(); }); -- cgit v1.2.3