diff --git a/src/components/badge/__tests__/index.spec.js b/src/components/badge/__tests__/index.spec.js index 66cf4def9a..be9463e1c2 100644 --- a/src/components/badge/__tests__/index.spec.js +++ b/src/components/badge/__tests__/index.spec.js @@ -1,56 +1,84 @@ import {Badge} from '../index'; -describe('Badge Label', () => { - it('Should return the label sent (unformatted)', () => { - const uut = new Badge({label: '10'}); - expect(uut.getFormattedLabel()).toEqual('10'); +describe('Badge', () => { + describe('Badge Label', () => { + it('Should return the label sent (unformatted)', () => { + const uut = new Badge({label: '10'}); + expect(uut.getFormattedLabel()).toEqual('10'); + }); + it('Should return original label if it is NaN (string) ', () => { + const uut = new Badge({label: 'a'}); + expect(uut.getFormattedLabel()).toEqual('a'); + }); + it('Should return original label if it is NaN (number with +) ', () => { + const uut = new Badge({label: '99+'}); + expect(uut.getFormattedLabel()).toEqual('99+'); + }); + it('Should return formatted label according to given labelFormatterLimit prop (1) ', () => { + const uut = new Badge({label: '10000', labelFormatterLimit: 1}); + expect(uut.getFormattedLabel()).toEqual('9+'); + }); + it('Should return formatted label according to given labelFormatterLimit prop (2) ', () => { + const uut = new Badge({label: '10000', labelFormatterLimit: 2}); + expect(uut.getFormattedLabel()).toEqual('99+'); + }); + it('Should return formatted label according to given labelFormatterLimit prop (3) ', () => { + const uut = new Badge({label: '10000', labelFormatterLimit: 3}); + expect(uut.getFormattedLabel()).toEqual('999+'); + }); + it('Should return formatted label according to given labelFormatterLimit prop (4) ', () => { + const uut = new Badge({label: '10000', labelFormatterLimit: 4}); + expect(uut.getFormattedLabel()).toEqual('9999+'); + }); + it('Should not format label if it is not larger than maxLabelNumber', () => { + const uut = new Badge({label: '999', labelFormatterLimit: 3}); + expect(uut.getFormattedLabel()).toEqual('999'); + }); + it('Should return original label when labelFormatterLimit prop is not included in LABEL_FORMATTER_VALUES array', () => { + const uut = new Badge({label: '9', labelFormatterLimit: 'a'}); + expect(uut.getFormattedLabel()).toEqual('9'); + }); + it('Should return original label when label is NaN and labelFormatterLimit prop is valid ', () => { + const uut = new Badge({label: 'a', labelFormatterLimit: 3}); + expect(uut.getFormattedLabel()).toEqual('a'); + }); + it('Should return original label when labelFormatterLimit prop is undefined', () => { + const uut = new Badge({label: '9', labelFormatterLimit: undefined}); + expect(uut.getFormattedLabel()).toEqual('9'); + }); + it('Should return original label when labelFormatterLimit prop is not included in LABEL_FORMATTER_VALUES array', () => { + const uut = new Badge({label: '9', labelFormatterLimit: 5}); + expect(uut.getFormattedLabel()).toEqual('9'); + }); + it('Should return original label when labelFormatterLimit prop is not included in LABEL_FORMATTER_VALUES array', () => { + const uut = new Badge({label: '9', labelFormatterLimit: 0}); + expect(uut.getFormattedLabel()).toEqual('9'); + }); }); - it('Should return original label if it is NaN (string) ', () => { - const uut = new Badge({label: 'a'}); - expect(uut.getFormattedLabel()).toEqual('a'); - }); - it('Should return original label if it is NaN (number with +) ', () => { - const uut = new Badge({label: '99+'}); - expect(uut.getFormattedLabel()).toEqual('99+'); - }); - it('Should return formatted label according to given labelFormatterLimit prop (1) ', () => { - const uut = new Badge({label: '10000', labelFormatterLimit: 1}); - expect(uut.getFormattedLabel()).toEqual('9+'); - }); - it('Should return formatted label according to given labelFormatterLimit prop (2) ', () => { - const uut = new Badge({label: '10000', labelFormatterLimit: 2}); - expect(uut.getFormattedLabel()).toEqual('99+'); - }); - it('Should return formatted label according to given labelFormatterLimit prop (3) ', () => { - const uut = new Badge({label: '10000', labelFormatterLimit: 3}); - expect(uut.getFormattedLabel()).toEqual('999+'); - }); - it('Should return formatted label according to given labelFormatterLimit prop (4) ', () => { - const uut = new Badge({label: '10000', labelFormatterLimit: 4}); - expect(uut.getFormattedLabel()).toEqual('9999+'); - }); - it('Should not format label if it is not larger than maxLabelNumber', () => { - const uut = new Badge({label: '999', labelFormatterLimit: 3}); - expect(uut.getFormattedLabel()).toEqual('999'); - }); - it('Should return original label when labelFormatterLimit prop is not included in LABEL_FORMATTER_VALUES array', () => { - const uut = new Badge({label: '9', labelFormatterLimit: 'a'}); - expect(uut.getFormattedLabel()).toEqual('9'); - }); - it('Should return original label when label is NaN and labelFormatterLimit prop is valid ', () => { - const uut = new Badge({label: 'a', labelFormatterLimit: 3}); - expect(uut.getFormattedLabel()).toEqual('a'); - }); - it('Should return original label when labelFormatterLimit prop is undefined', () => { - const uut = new Badge({label: '9', labelFormatterLimit: undefined}); - expect(uut.getFormattedLabel()).toEqual('9'); - }); - it('Should return original label when labelFormatterLimit prop is not included in LABEL_FORMATTER_VALUES array', () => { - const uut = new Badge({label: '9', labelFormatterLimit: 5}); - expect(uut.getFormattedLabel()).toEqual('9'); - }); - it('Should return original label when labelFormatterLimit prop is not included in LABEL_FORMATTER_VALUES array', () => { - const uut = new Badge({label: '9', labelFormatterLimit: 0}); - expect(uut.getFormattedLabel()).toEqual('9'); + + describe('Badge Size', () => { + it('Should return pimple badge when no size and no label passed', () => { + const uut = new Badge({}); + console.log(`uut.size`, uut.size); + expect(uut.size).toEqual(10); + }); + + it('Should return pimple badge when no label and size undefined', () => { + const uut = new Badge({label: undefined, size: undefined}); + console.log(`uut.size`, uut.size); + expect(uut.size).toEqual(10); + }); + + it('Shouldn\'t return pimple badge when label is undefined and size passed', () => { + const uut = new Badge({label: undefined, size: 20}); + console.log(`uut.size`, uut.size); + expect(uut.size).toEqual(20); + }); + + it('Should return size when label is empty string', () => { + const uut = new Badge({label: '', size: 20}); + console.log(`uut.size`, uut.size); + expect(uut.size).toEqual(20); + }); }); }); diff --git a/src/components/badge/index.tsx b/src/components/badge/index.tsx index 19e693e394..74ece732ed 100644 --- a/src/components/badge/index.tsx +++ b/src/components/badge/index.tsx @@ -18,8 +18,9 @@ import Image from '../image'; import View from '../view'; import Text from '../text'; - const LABEL_FORMATTER_VALUES = [1, 2, 3, 4] as const; +const DEFAULT_PIMPLE_SIZE = 10; +const DEFAULT_BADGE_SIZE = 20; type LabelFormatterValues = typeof LABEL_FORMATTER_VALUES[number]; @@ -121,7 +122,11 @@ class Badge extends PureComponent { } get size() { - return this.props.size || 20; + const {size, label} = this.props; + if (size !== undefined) { + return size; + } + return label === undefined ? DEFAULT_PIMPLE_SIZE : DEFAULT_BADGE_SIZE; } isSmallBadge() {