Skip to content

Commit e7f6802

Browse files
adids1221adids1221
authored
fix badge should be pimple when label undefined (#3545)
* fix badge should be pimple when label undefined * correct size handling when label is undefined
1 parent 37cd1a1 commit e7f6802

File tree

2 files changed

+86
-53
lines changed

2 files changed

+86
-53
lines changed

‎src/components/badge/__tests__/index.spec.js

Lines changed: 79 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,84 @@
11
import {Badge} from '../index';
22

3-
describe('Badge Label', () => {
4-
it('Should return the label sent (unformatted)', () => {
5-
const uut = new Badge({label: '10'});
6-
expect(uut.getFormattedLabel()).toEqual('10');
3+
describe('Badge', () => {
4+
describe('Badge Label', () => {
5+
it('Should return the label sent (unformatted)', () => {
6+
const uut = new Badge({label: '10'});
7+
expect(uut.getFormattedLabel()).toEqual('10');
8+
});
9+
it('Should return original label if it is NaN (string) ', () => {
10+
const uut = new Badge({label: 'a'});
11+
expect(uut.getFormattedLabel()).toEqual('a');
12+
});
13+
it('Should return original label if it is NaN (number with +) ', () => {
14+
const uut = new Badge({label: '99+'});
15+
expect(uut.getFormattedLabel()).toEqual('99+');
16+
});
17+
it('Should return formatted label according to given labelFormatterLimit prop (1) ', () => {
18+
const uut = new Badge({label: '10000', labelFormatterLimit: 1});
19+
expect(uut.getFormattedLabel()).toEqual('9+');
20+
});
21+
it('Should return formatted label according to given labelFormatterLimit prop (2) ', () => {
22+
const uut = new Badge({label: '10000', labelFormatterLimit: 2});
23+
expect(uut.getFormattedLabel()).toEqual('99+');
24+
});
25+
it('Should return formatted label according to given labelFormatterLimit prop (3) ', () => {
26+
const uut = new Badge({label: '10000', labelFormatterLimit: 3});
27+
expect(uut.getFormattedLabel()).toEqual('999+');
28+
});
29+
it('Should return formatted label according to given labelFormatterLimit prop (4) ', () => {
30+
const uut = new Badge({label: '10000', labelFormatterLimit: 4});
31+
expect(uut.getFormattedLabel()).toEqual('9999+');
32+
});
33+
it('Should not format label if it is not larger than maxLabelNumber', () => {
34+
const uut = new Badge({label: '999', labelFormatterLimit: 3});
35+
expect(uut.getFormattedLabel()).toEqual('999');
36+
});
37+
it('Should return original label when labelFormatterLimit prop is not included in LABEL_FORMATTER_VALUES array', () => {
38+
const uut = new Badge({label: '9', labelFormatterLimit: 'a'});
39+
expect(uut.getFormattedLabel()).toEqual('9');
40+
});
41+
it('Should return original label when label is NaN and labelFormatterLimit prop is valid ', () => {
42+
const uut = new Badge({label: 'a', labelFormatterLimit: 3});
43+
expect(uut.getFormattedLabel()).toEqual('a');
44+
});
45+
it('Should return original label when labelFormatterLimit prop is undefined', () => {
46+
const uut = new Badge({label: '9', labelFormatterLimit: undefined});
47+
expect(uut.getFormattedLabel()).toEqual('9');
48+
});
49+
it('Should return original label when labelFormatterLimit prop is not included in LABEL_FORMATTER_VALUES array', () => {
50+
const uut = new Badge({label: '9', labelFormatterLimit: 5});
51+
expect(uut.getFormattedLabel()).toEqual('9');
52+
});
53+
it('Should return original label when labelFormatterLimit prop is not included in LABEL_FORMATTER_VALUES array', () => {
54+
const uut = new Badge({label: '9', labelFormatterLimit: 0});
55+
expect(uut.getFormattedLabel()).toEqual('9');
56+
});
757
});
8-
it('Should return original label if it is NaN (string) ', () => {
9-
const uut = new Badge({label: 'a'});
10-
expect(uut.getFormattedLabel()).toEqual('a');
11-
});
12-
it('Should return original label if it is NaN (number with +) ', () => {
13-
const uut = new Badge({label: '99+'});
14-
expect(uut.getFormattedLabel()).toEqual('99+');
15-
});
16-
it('Should return formatted label according to given labelFormatterLimit prop (1) ', () => {
17-
const uut = new Badge({label: '10000', labelFormatterLimit: 1});
18-
expect(uut.getFormattedLabel()).toEqual('9+');
19-
});
20-
it('Should return formatted label according to given labelFormatterLimit prop (2) ', () => {
21-
const uut = new Badge({label: '10000', labelFormatterLimit: 2});
22-
expect(uut.getFormattedLabel()).toEqual('99+');
23-
});
24-
it('Should return formatted label according to given labelFormatterLimit prop (3) ', () => {
25-
const uut = new Badge({label: '10000', labelFormatterLimit: 3});
26-
expect(uut.getFormattedLabel()).toEqual('999+');
27-
});
28-
it('Should return formatted label according to given labelFormatterLimit prop (4) ', () => {
29-
const uut = new Badge({label: '10000', labelFormatterLimit: 4});
30-
expect(uut.getFormattedLabel()).toEqual('9999+');
31-
});
32-
it('Should not format label if it is not larger than maxLabelNumber', () => {
33-
const uut = new Badge({label: '999', labelFormatterLimit: 3});
34-
expect(uut.getFormattedLabel()).toEqual('999');
35-
});
36-
it('Should return original label when labelFormatterLimit prop is not included in LABEL_FORMATTER_VALUES array', () => {
37-
const uut = new Badge({label: '9', labelFormatterLimit: 'a'});
38-
expect(uut.getFormattedLabel()).toEqual('9');
39-
});
40-
it('Should return original label when label is NaN and labelFormatterLimit prop is valid ', () => {
41-
const uut = new Badge({label: 'a', labelFormatterLimit: 3});
42-
expect(uut.getFormattedLabel()).toEqual('a');
43-
});
44-
it('Should return original label when labelFormatterLimit prop is undefined', () => {
45-
const uut = new Badge({label: '9', labelFormatterLimit: undefined});
46-
expect(uut.getFormattedLabel()).toEqual('9');
47-
});
48-
it('Should return original label when labelFormatterLimit prop is not included in LABEL_FORMATTER_VALUES array', () => {
49-
const uut = new Badge({label: '9', labelFormatterLimit: 5});
50-
expect(uut.getFormattedLabel()).toEqual('9');
51-
});
52-
it('Should return original label when labelFormatterLimit prop is not included in LABEL_FORMATTER_VALUES array', () => {
53-
const uut = new Badge({label: '9', labelFormatterLimit: 0});
54-
expect(uut.getFormattedLabel()).toEqual('9');
58+
59+
describe('Badge Size', () => {
60+
it('Should return pimple badge when no size and no label passed', () => {
61+
const uut = new Badge({});
62+
console.log(`uut.size`, uut.size);
63+
expect(uut.size).toEqual(10);
64+
});
65+
66+
it('Should return pimple badge when no label and size undefined', () => {
67+
const uut = new Badge({label: undefined, size: undefined});
68+
console.log(`uut.size`, uut.size);
69+
expect(uut.size).toEqual(10);
70+
});
71+
72+
it('Shouldn\'t return pimple badge when label is undefined and size passed', () => {
73+
const uut = new Badge({label: undefined, size: 20});
74+
console.log(`uut.size`, uut.size);
75+
expect(uut.size).toEqual(20);
76+
});
77+
78+
it('Should return size when label is empty string', () => {
79+
const uut = new Badge({label: '', size: 20});
80+
console.log(`uut.size`, uut.size);
81+
expect(uut.size).toEqual(20);
82+
});
5583
});
5684
});

‎src/components/badge/index.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@ import Image from '../image';
1818
import View from '../view';
1919
import Text from '../text';
2020

21-
2221
const LABEL_FORMATTER_VALUES = [1, 2, 3, 4] as const;
22+
const DEFAULT_PIMPLE_SIZE = 10;
23+
const DEFAULT_BADGE_SIZE = 20;
2324

2425
type LabelFormatterValues = typeof LABEL_FORMATTER_VALUES[number];
2526

@@ -121,7 +122,11 @@ class Badge extends PureComponent<BadgeProps> {
121122
}
122123

123124
get size() {
124-
return this.props.size || 20;
125+
const {size, label} = this.props;
126+
if (size !== undefined) {
127+
return size;
128+
}
129+
return label === undefined ? DEFAULT_PIMPLE_SIZE : DEFAULT_BADGE_SIZE;
125130
}
126131

127132
isSmallBadge() {

0 commit comments

Comments
 (0)