Skip to content

Commit 8993f11

Browse files
dheeraj1429dheeraj1429
committed
[unit-testing] re-design chip component, Fixed test cases
1 parent 464a365 commit 8993f11

File tree

8 files changed

+56
-97
lines changed

8 files changed

+56
-97
lines changed

‎src/packages/react-native-material-elements/__test__/Chip.test.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Avatar, Chip, green, lightBlue, primary, red, secondary, ThemeProvider, yellow } from '../src';
2+
import { Avatar, Chip, gray, green, lightBlue, primary, red, secondary, ThemeProvider, yellow } from '../src';
33
import { SQUARE_BORDER_RADIUS } from '../src/components/Chip/constants';
44
import { fireEvent, render } from './test-utils';
55
import { View } from 'react-native';
@@ -84,7 +84,7 @@ describe('Chip Component', () => {
8484
it('should render with the (secondary) color in (filled) variant', () => {
8585
const { getByTestId } = render(<Chip testID={chipMockTestId} />);
8686
const chip = getByTestId(chipMockTestId);
87-
expect(chip.props.style).toEqual(expect.objectContaining({ backgroundColor: secondary[500] }));
87+
expect(chip.props.style).toEqual(expect.objectContaining({ backgroundColor: primary[500] }));
8888
});
8989

9090
it('should render with the (primary) color in (filled) variant', () => {
@@ -120,7 +120,7 @@ describe('Chip Component', () => {
120120
it('should render with the (secondary) color in (outlined) variant', () => {
121121
const { getByTestId } = render(<Chip testID={chipMockTestId} variant="outlined" />);
122122
const chip = getByTestId(chipMockTestId);
123-
expect(chip.props.style).toEqual(expect.objectContaining({ borderColor: secondary[500] }));
123+
expect(chip.props.style).toEqual(expect.objectContaining({ borderColor: primary[500] }));
124124
expect(chip.props.style).not.toHaveProperty('backgroundColor');
125125
});
126126

@@ -161,14 +161,14 @@ describe('Chip Component', () => {
161161

162162
it('should sync the chip and label (secondary) color in (outlined) variant', () => {
163163
const { getByTestId, getByText } = render(
164-
<Chip testID={chipMockTestId} variant="outlined" syncBorderAndLabelColor label={chipMockLabel} />,
164+
<Chip testID={chipMockTestId} color="secondary" variant="outlined" syncBorderAndLabelColor label={chipMockLabel} />,
165165
);
166166

167167
const chip = getByTestId(chipMockTestId);
168168
const label = getByText(chipMockLabel);
169169

170170
expect(chip.props.style).toEqual(expect.objectContaining({ borderColor: secondary[500] }));
171-
expect(label.props.style).toEqual(expect.objectContaining({ color: secondary[500] }));
171+
expect(label.props.style).toEqual(expect.objectContaining({ color: secondary[900] }));
172172
expect(chip.props.style).not.toHaveProperty('backgroundColor');
173173
});
174174

@@ -181,7 +181,7 @@ describe('Chip Component', () => {
181181
const label = getByText(chipMockLabel);
182182

183183
expect(chip.props.style).toEqual(expect.objectContaining({ borderColor: primary[500] }));
184-
expect(label.props.style).toEqual(expect.objectContaining({ color: primary[500] }));
184+
expect(label.props.style).toEqual(expect.objectContaining({ color: primary[900] }));
185185
expect(chip.props.style).not.toHaveProperty('backgroundColor');
186186
});
187187

@@ -194,7 +194,7 @@ describe('Chip Component', () => {
194194
const label = getByText(chipMockLabel);
195195

196196
expect(chip.props.style).toEqual(expect.objectContaining({ borderColor: green[500] }));
197-
expect(label.props.style).toEqual(expect.objectContaining({ color: green[500] }));
197+
expect(label.props.style).toEqual(expect.objectContaining({ color: green[900] }));
198198
expect(chip.props.style).not.toHaveProperty('backgroundColor');
199199
});
200200

@@ -207,7 +207,7 @@ describe('Chip Component', () => {
207207
const label = getByText(chipMockLabel);
208208

209209
expect(chip.props.style).toEqual(expect.objectContaining({ borderColor: red[500] }));
210-
expect(label.props.style).toEqual(expect.objectContaining({ color: red[500] }));
210+
expect(label.props.style).toEqual(expect.objectContaining({ color: red[900] }));
211211
expect(chip.props.style).not.toHaveProperty('backgroundColor');
212212
});
213213

@@ -220,11 +220,11 @@ describe('Chip Component', () => {
220220
const label = getByText(chipMockLabel);
221221

222222
expect(chip.props.style).toEqual(expect.objectContaining({ borderColor: lightBlue[500] }));
223-
expect(label.props.style).toEqual(expect.objectContaining({ color: lightBlue[500] }));
223+
expect(label.props.style).toEqual(expect.objectContaining({ color: lightBlue[900] }));
224224
expect(chip.props.style).not.toHaveProperty('backgroundColor');
225225
});
226226

227-
it('should sync the chip and label (warning) color in (outlined) variant', () => {
227+
it('should show the gray dark color when chip variant (warning)', () => {
228228
const { getByTestId, getByText } = render(
229229
<Chip testID={chipMockTestId} variant="outlined" color="warning" syncBorderAndLabelColor label={chipMockLabel} />,
230230
);
@@ -233,7 +233,7 @@ describe('Chip Component', () => {
233233
const label = getByText(chipMockLabel);
234234

235235
expect(chip.props.style).toEqual(expect.objectContaining({ borderColor: yellow[500] }));
236-
expect(label.props.style).toEqual(expect.objectContaining({ color: yellow[500] }));
236+
expect(label.props.style).toEqual(expect.objectContaining({ color: gray[900] }));
237237
expect(chip.props.style).not.toHaveProperty('backgroundColor');
238238
});
239239

‎src/packages/react-native-material-elements/__test__/__snapshots__/Chip.test.tsx.snap‎

Lines changed: 19 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,12 @@ exports[`Chip Component should match the snapshot with default props 1`] = `
4949
style={
5050
{
5151
"alignSelf": "flex-start",
52-
"backgroundColor": "#1890ff",
53-
"borderRadius": 20,
54-
"paddingBottom": 5,
55-
"paddingLeft": 10,
56-
"paddingRight": 10,
57-
"paddingTop": 5,
52+
"backgroundColor": "#F44336",
53+
"borderRadius": 6,
54+
"paddingBottom": 3,
55+
"paddingLeft": 7,
56+
"paddingRight": 7,
57+
"paddingTop": 3,
5858
"transform": [
5959
{
6060
"scale": 1,
@@ -84,6 +84,7 @@ exports[`Chip Component should match the snapshot with default props 1`] = `
8484
{
8585
"color": "#FAFAFA",
8686
"fontSize": 14,
87+
"fontWeight": "500",
8788
}
8889
}
8990
/>
@@ -142,12 +143,12 @@ exports[`Chip Component should render correctly with end icon 1`] = `
142143
style={
143144
{
144145
"alignSelf": "flex-start",
145-
"backgroundColor": "#1890ff",
146-
"borderRadius": 20,
147-
"paddingBottom": 5,
148-
"paddingLeft": 10,
149-
"paddingRight": 10,
150-
"paddingTop": 5,
146+
"backgroundColor": "#F44336",
147+
"borderRadius": 6,
148+
"paddingBottom": 3,
149+
"paddingLeft": 7,
150+
"paddingRight": 7,
151+
"paddingTop": 3,
151152
"transform": [
152153
{
153154
"scale": 1,
@@ -172,15 +173,6 @@ exports[`Chip Component should render correctly with end icon 1`] = `
172173
]
173174
}
174175
>
175-
<Text
176-
collapsable={false}
177-
style={
178-
{
179-
"color": "#FAFAFA",
180-
"fontSize": 14,
181-
}
182-
}
183-
/>
184176
<View
185177
accessibilityState={
186178
{
@@ -303,12 +295,12 @@ exports[`Chip Component should render correctly with start icon 1`] = `
303295
style={
304296
{
305297
"alignSelf": "flex-start",
306-
"backgroundColor": "#1890ff",
307-
"borderRadius": 20,
308-
"paddingBottom": 5,
309-
"paddingLeft": 10,
310-
"paddingRight": 10,
311-
"paddingTop": 5,
298+
"backgroundColor": "#F44336",
299+
"borderRadius": 6,
300+
"paddingBottom": 3,
301+
"paddingLeft": 7,
302+
"paddingRight": 7,
303+
"paddingTop": 3,
312304
"transform": [
313305
{
314306
"scale": 1,
@@ -400,15 +392,6 @@ exports[`Chip Component should render correctly with start icon 1`] = `
400392
</View>
401393
</View>
402394
</View>
403-
<Text
404-
collapsable={false}
405-
style={
406-
{
407-
"color": "#FAFAFA",
408-
"fontSize": 14,
409-
}
410-
}
411-
/>
412395
</View>
413396
</View>
414397
</View>

‎src/packages/react-native-material-elements/src/components/Button/Button.styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ export const buttonLabelStyles = ({ size, sizeConfig }: ButtonLabelStylesParams)
169169
break;
170170
}
171171

172-
return { fontSize, fontWeight: '500' };
172+
return { fontSize };
173173
};
174174

175175
export const baseButtonStyles = ({ fullWidth }: BaseButtonStyles): ViewStyle => {

‎src/packages/react-native-material-elements/src/components/Chip/Chip.style.ts‎

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,13 @@ import { ColorValue, StyleSheet, TextStyle, ViewStyle } from 'react-native';
22
import { gray } from '../../libraries';
33
import { getVariant } from '../../utils';
44
import { GenerateChipStylesProps, LabelStylesInterface } from './Chip.types';
5-
import { ADORNMENT_WRAPPER_SPACE } from './constants';
65

76
export const styles = StyleSheet.create({
87
chip: {
9-
paddingTop: 5,
10-
paddingBottom: 5,
11-
paddingLeft: 10,
12-
paddingRight: 10,
13-
borderRadius: 20,
8+
paddingTop: 3,
9+
paddingBottom: 3,
10+
paddingLeft: 7,
11+
paddingRight: 7,
1412
alignSelf: 'flex-start',
1513
},
1614
chipWrapper: {
@@ -20,15 +18,6 @@ export const styles = StyleSheet.create({
2018
flexDirection: 'row',
2119
gap: 6,
2220
},
23-
chipInnerComponentWrapper: {
24-
minWidth: ADORNMENT_WRAPPER_SPACE,
25-
minHeight: ADORNMENT_WRAPPER_SPACE,
26-
display: 'flex',
27-
alignItems: 'center',
28-
justifyContent: 'center',
29-
overflow: 'hidden',
30-
borderRadius: 100,
31-
},
3221
});
3322

3423
export const generateChipStyles = ({
@@ -103,8 +92,8 @@ export const labelStyles = ({
10392

10493
let resolvedColor;
10594

106-
if (syncBorderAndLabelColor) {
107-
resolvedColor = getVariant({ variant: color, colors, config: colorSchemeConfig });
95+
if (syncBorderAndLabelColor && color !== 'warning' && color !== 'lightGray' && color !== 'gray') {
96+
resolvedColor = getVariant({ variant: color, colors, config: colorSchemeConfig, systemColorItem: '900' });
10897
} else if (labelColor) {
10998
resolvedColor = labelColor;
11099
} else {
@@ -114,5 +103,6 @@ export const labelStyles = ({
114103

115104
return {
116105
color: resolvedColor,
106+
fontWeight: '500',
117107
};
118108
};

‎src/packages/react-native-material-elements/src/components/Chip/Chip.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,9 @@ export const Chip = React.forwardRef<View, ChipProps>(
2727
activeBackgroundColor,
2828
isActive = false,
2929
variant = 'filled',
30-
color = 'secondary',
31-
square = false,
30+
color = 'primary',
31+
square,
3232
syncBorderAndLabelColor = false,
33-
overrideRootSquareConfig = false,
3433
...props
3534
},
3635
ref,
@@ -68,10 +67,7 @@ export const Chip = React.forwardRef<View, ChipProps>(
6867
};
6968

7069
const chipSquareHandler = () => {
71-
if (overrideRootSquareConfig) {
72-
return square;
73-
}
74-
return chipThemeConfig?.square ?? square;
70+
return square ?? chipThemeConfig?.square;
7571
};
7672

7773
const chipStyles = useMemo(
@@ -145,7 +141,7 @@ export const Chip = React.forwardRef<View, ChipProps>(
145141
{startThemedIcon}
146142
</TouchableOpacity>
147143
)}
148-
{renderLabel()}
144+
{label && renderLabel()}
149145
{endThemedIcon && (
150146
<TouchableOpacity activeOpacity={1} {...endIconProps}>
151147
{endThemedIcon}

‎src/packages/react-native-material-elements/src/components/Chip/constants.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
1-
export const ADORNMENT_WRAPPER_SPACE = 20;
2-
export const DEFAULT_BORDER_RADIUS = 20;
1+
export const DEFAULT_BORDER_RADIUS = 6;
32
export const SQUARE_BORDER_RADIUS = 2;

‎src/packages/react-native-material-elements/src/libraries/themes/theme.d.ts‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -39,18 +39,8 @@ import { themeDimensions } from './V2ThemeContext';
3939
* Interface representing a set of color shades, typically used for creating gradients or theme variations.
4040
* Each key represents a different level of color shade, in the light theme mode the lightest values will be (50) and darkest will be (900) and in the dark theme mode the lightest value will the (900) and darkest value will be (50).
4141
*/
42-
export interface ColorShades {
43-
50: string;
44-
100: string;
45-
200: string;
46-
300: string;
47-
400: string;
48-
500: string;
49-
600: string;
50-
700: string;
51-
800: string;
52-
900: string;
53-
}
42+
export type ShadeNumbers = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
43+
export type ColorShades = Record<ShadeNumbers, string>;
5444
/**
5545
* Type representing the theme, based on the initial light theme.
5646
*/

‎src/packages/react-native-material-elements/src/utils/utils.ts‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ColorValue } from 'react-native';
22
import { SpacingStyle, StylePalette } from '../libraries/style/styleTypes';
3-
import { ThemeType } from '../libraries/themes/theme';
3+
import { ShadeNumbers, ThemeType } from '../libraries/themes/theme';
44

55
export const OFFSET = 20;
66
export const WRAPPER_BOTTOM_OFFSET = 50;
@@ -31,30 +31,31 @@ export interface GetVariantArgs<T> {
3131
colors: ThemeType['colors'];
3232
variant?: VariantTypes;
3333
config?: VariationThemeConfig<DefaultVariationOptions & T>;
34+
systemColorItem?: ShadeNumbers;
3435
}
3536
/**
3637
* Function to get the color for a specific variant based on the provided `variant`, `colors`, and `config`.
3738
* If the variant doesn't exist in `config`, it defaults to the color from the `colors` palette.
3839
*/
39-
export const getVariant = <T>({ variant, colors, config }: GetVariantArgs<T>): ColorValue | string => {
40+
export const getVariant = <T>({ variant, colors, config, systemColorItem = '500' }: GetVariantArgs<T>): ColorValue | string => {
4041
if (variant === 'primary') {
41-
return config?.primary?.color ?? colors.primary[500];
42+
return config?.primary?.color ?? colors.primary[systemColorItem];
4243
} else if (variant === 'secondary') {
43-
return config?.secondary?.color ?? colors.secondary[500];
44+
return config?.secondary?.color ?? colors.secondary[systemColorItem];
4445
} else if (variant === 'error') {
45-
return config?.error?.color ?? colors.red[500];
46+
return config?.error?.color ?? colors.red[systemColorItem];
4647
} else if (variant === 'info') {
47-
return config?.info?.color ?? colors.lightBlue[500];
48+
return config?.info?.color ?? colors.lightBlue[systemColorItem];
4849
} else if (variant === 'success') {
49-
return config?.success?.color ?? colors.green[500];
50+
return config?.success?.color ?? colors.green[systemColorItem];
5051
} else if (variant === 'warning') {
51-
return config?.warning?.color ?? colors.yellow[500];
52+
return config?.warning?.color ?? colors.yellow[systemColorItem];
5253
} else if (variant === 'gray') {
53-
return config?.gray?.color ?? colors.gray[500];
54+
return config?.gray?.color ?? colors.gray[systemColorItem];
5455
} else if (variant === 'lightGray') {
5556
return config?.lightGray?.color ?? colors.gray[200];
5657
}
57-
return colors.secondary[500];
58+
return colors.secondary[systemColorItem];
5859
};
5960

6061
export const maxLength = function (text: string, maxLengthNumber: number): string {

0 commit comments

Comments
 (0)