add numeric size support to Avatar's badge + unit-tests

Author: mendyEdri

src/components/avatar/__tests__/index.spec.js

@@ -1,5 +1,6 @@
 import {Avatar} from '../index';
 import {Colors} from '../../../style';
+import {BADGE_SIZES} from '../../badge';
 
 describe('Avatar Badge', () => {
   describe('getStatusBadgeColor', () => {
@@ -58,4 +59,40 @@ describe('Avatar Badge', () => {
       expect(uut.renderBadge()).toEqual(undefined);
     });
   });
+
+  describe('badgeProps.size, supports enum or number', () => {
+    it('should return 10 as the size number given', () => {
+      const uut = new Avatar({badgeProps: {size: 10}});
+      expect(uut.getBadgeSize()).toEqual(10);
+    });
+
+    it('should return 876 as the size number given', () => {
+      const uut = new Avatar({badgeProps: {size: 876}});
+      expect(uut.getBadgeSize()).toEqual(876);
+    });
+
+    it('should return 0 as the given size number', () => {
+      const uut = new Avatar({badgeProps: {size: 0}});
+      expect(uut.getBadgeSize()).toEqual(0);
+    });
+
+    it('should return the first badge size mapped by given key', () => {
+      const firstSizeKey = Object.keys(BADGE_SIZES)[1];
+      const uut = new Avatar({badgeProps: {size: firstSizeKey}});
+      expect(uut.getBadgeSize()).toEqual(BADGE_SIZES[firstSizeKey]);
+    });
+
+    it('should return the last badge size mapped by given key', () => {
+      const keys = Object.keys(BADGE_SIZES);
+      const lastSizeKey = keys[keys.length - 1];
+      const uut = new Avatar({badgeProps: {size: lastSizeKey}});
+      expect(uut.getBadgeSize()).toEqual(BADGE_SIZES[lastSizeKey]);
+    });
+
+    it('should return undefined for a non-exist size type', () => {
+      const sizeKey = '!NOT_A_VALID_ENUM$';
+      const uut = new Avatar({badgeProps: {size: sizeKey}});
+      expect(uut.getBadgeSize()).toBeUndefined();
+    });
+  });
 });

src/components/avatar/index.tsx

@@ -222,14 +222,21 @@ class Avatar extends PureComponent<AvatarPropTypes> {
     return _.get(this.props, 'badgeProps.backgroundColor') || statusColor || onlineColor;
   }
 
-  getBadgeSize = () => _.get(this.props, 'badgeProps.size', DEFAULT_BADGE_SIZE);
+  getBadgeSize = () => {
+    const badgeSize = _.get(this.props, 'badgeProps.size', DEFAULT_BADGE_SIZE);
+    
+    if (_.isString(badgeSize)) {
+      return BADGE_SIZES[badgeSize];
+    }
+    return badgeSize;
+  }
 
   getBadgePosition() {
     const {size, badgePosition} = this.props;
     const radius = size / 2;
     const x = Math.sqrt(radius ** 2 * 2);
     const y = x - radius;
-    const shift = Math.sqrt(y ** 2 / 2) - (BADGE_SIZES[this.getBadgeSize()] + this.getBadgeBorderWidth() * 2) / 2;
+    const shift = Math.sqrt(y ** 2 / 2) - (this.getBadgeSize() + this.getBadgeBorderWidth() * 2) / 2;
     const badgeLocation = _.split(_.toLower(badgePosition), '_', 2);
     const badgeAlignment = {position: 'absolute', [badgeLocation[0]]: shift, [badgeLocation[1]]: shift};