add numeric size support to Avatar's badge + unit-tests (#850)

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

* fix missing default value on non-exist size key. change unittest according to default value change, removed redundant test.

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

fix typo

Co-authored-by: arnonz <[email protected]>

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,35 @@ describe('Avatar Badge', () => {
       expect(uut.renderBadge()).toEqual(undefined);
     });
   });
+
+  describe('badgeProps.size, supports enum or number', () => {
+    it('should return 99 as the size number given', () => {
+      const uut = new Avatar({badgeProps: {size: 99}});
+      expect(uut.getBadgeSize()).toEqual(99);
+    });
+
+    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 a default value from Badge for a non-exist size type', () => {
+      const sizeKey = '!NOT_A_VALID_ENUM$';
+      const uut = new Avatar({badgeProps: {size: sizeKey}});
+      expect(typeof uut.getBadgeSize()).toBe('number');
+    });
+  });
 });

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] || BADGE_SIZES[DEFAULT_BADGE_SIZE];
+    }
+    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};