Skip to content

Commit e3b164c

Browse files
dheeraj1429dheeraj1429
committed
[unit-testing] Added alert component test cases
1 parent 2d271d4 commit e3b164c

File tree

12 files changed

+212
-45
lines changed

12 files changed

+212
-45
lines changed

‎jest.setup.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
const mockedUseColorScheme = jest.fn();
2+
3+
jest.mock('react-native/Libraries/Utilities/useColorScheme', () => {
4+
return {
5+
default: mockedUseColorScheme,
6+
};
7+
});
8+
19
jest.mock('react-native', () => {
210
const RN = jest.requireActual('react-native');
311
RN.DeviceEventEmitter.emit = jest.fn();

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

Lines changed: 117 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
1-
import React from 'react';
2-
import { Alert, Text } from '../src';
1+
import { StyleSheet, TouchableOpacity, useColorScheme, View } from 'react-native';
2+
import { Alert, gray, Text, yellow } from '../src';
33
import { fireEvent, render } from './test-utils';
4-
import { TouchableOpacity, View } from 'react-native';
4+
import * as RN from 'react-native';
55

66
describe('Alert', () => {
77
const mockStartIcon = <View testID="start-icon-test-id" />;
88
const mockEndIcon = <View testID="end-icon-test-id" />;
99

1010
const mockOnPress = jest.fn();
11+
const testId = 'alert-container-test-id';
12+
13+
beforeEach(() => {
14+
jest.clearAllMocks();
15+
});
16+
1117
const mockAction = (
1218
<TouchableOpacity testID="action-test-id" onPress={mockOnPress}>
1319
<Text>Click here</Text>
@@ -49,4 +55,112 @@ describe('Alert', () => {
4955
const subTitleElement = getByText('Hello');
5056
expect(subTitleElement).toBeDefined();
5157
});
58+
59+
it('should render the ghost variant alert with (light theme)', () => {
60+
(useColorScheme as jest.Mock).mockReturnValue('light');
61+
const { getByTestId } = render(<Alert variation="ghost" testID={testId} />);
62+
63+
const alert = getByTestId(testId);
64+
65+
const flattenStyles = StyleSheet.flatten(alert.props.style);
66+
expect(flattenStyles).toEqual(
67+
expect.objectContaining({ borderRadius: 6, borderColor: gray[300], borderWidth: 0.8, backgroundColor: gray[100] }),
68+
);
69+
});
70+
71+
it('should render the ghost variant alert with (dark theme)', () => {
72+
(useColorScheme as jest.Mock).mockReturnValue('dark');
73+
const { getByTestId } = render(<Alert variation="ghost" testID={testId} />);
74+
75+
const alert = getByTestId(testId);
76+
77+
const flattenStyles = StyleSheet.flatten(alert.props.style);
78+
expect(flattenStyles).toEqual(
79+
expect.objectContaining({ borderRadius: 6, borderColor: gray[700], borderWidth: 0.8, backgroundColor: gray[800] }),
80+
);
81+
});
82+
83+
it('should render gray title when variation is ghost, variant is gray and theme mode is light', () => {
84+
(useColorScheme as jest.Mock).mockReturnValue('light');
85+
const { getByText } = render(<Alert variation="ghost" variant="gray" subTitle="subTitle" title="title" />);
86+
87+
const title = getByText('title');
88+
const subTitle = getByText('subTitle');
89+
90+
const titleFlattenStyles = StyleSheet.flatten(title.props.style);
91+
expect(titleFlattenStyles).toEqual(expect.objectContaining({ color: gray[800] }));
92+
93+
const subTitleFlattenStyles = StyleSheet.flatten(subTitle.props.style);
94+
expect(subTitleFlattenStyles).toEqual(expect.objectContaining({ color: gray[800] }));
95+
});
96+
97+
it('should render light gray title when variation is ghost, variant is gray and theme mode is dark', () => {
98+
(useColorScheme as jest.Mock).mockReturnValue('dark');
99+
const { getByText } = render(<Alert variation="ghost" variant="gray" subTitle="subTitle" title="title" />);
100+
101+
const title = getByText('title');
102+
const subTitle = getByText('subTitle');
103+
104+
const titleFlattenStyles = StyleSheet.flatten(title.props.style);
105+
expect(titleFlattenStyles).toEqual(expect.objectContaining({ color: 'white' }));
106+
107+
const subTitleFlattenStyles = StyleSheet.flatten(subTitle.props.style);
108+
expect(subTitleFlattenStyles).toEqual(expect.objectContaining({ color: 'white' }));
109+
});
110+
111+
it('should render gray title when variation is ghost, variant is lightGray and theme mode is light', () => {
112+
(useColorScheme as jest.Mock).mockReturnValue('light');
113+
const { getByText } = render(<Alert variation="ghost" variant="lightGray" subTitle="subTitle" title="title" />);
114+
115+
const title = getByText('title');
116+
const subTitle = getByText('subTitle');
117+
118+
const titleFlattenStyles = StyleSheet.flatten(title.props.style);
119+
expect(titleFlattenStyles).toEqual(expect.objectContaining({ color: gray[800] }));
120+
121+
const subTitleFlattenStyles = StyleSheet.flatten(subTitle.props.style);
122+
expect(subTitleFlattenStyles).toEqual(expect.objectContaining({ color: gray[800] }));
123+
});
124+
125+
it('should render light gray title when variation is ghost, variant is lightGray and theme mode is dark', () => {
126+
(useColorScheme as jest.Mock).mockReturnValue('dark');
127+
const { getByText } = render(<Alert variation="ghost" variant="lightGray" subTitle="subTitle" title="title" />);
128+
129+
const title = getByText('title');
130+
const subTitle = getByText('subTitle');
131+
132+
const titleFlattenStyles = StyleSheet.flatten(title.props.style);
133+
expect(titleFlattenStyles).toEqual(expect.objectContaining({ color: 'white' }));
134+
135+
const subTitleFlattenStyles = StyleSheet.flatten(subTitle.props.style);
136+
expect(subTitleFlattenStyles).toEqual(expect.objectContaining({ color: 'white' }));
137+
});
138+
139+
it('should render gray title when variation is ghost, variant is warning and theme mode is light', () => {
140+
(useColorScheme as jest.Mock).mockReturnValue('light');
141+
const { getByText } = render(<Alert variation="ghost" variant="warning" subTitle="subTitle" title="title" />);
142+
143+
const title = getByText('title');
144+
const subTitle = getByText('subTitle');
145+
146+
const titleFlattenStyles = StyleSheet.flatten(title.props.style);
147+
expect(titleFlattenStyles).toEqual(expect.objectContaining({ color: gray[800] }));
148+
149+
const subTitleFlattenStyles = StyleSheet.flatten(subTitle.props.style);
150+
expect(subTitleFlattenStyles).toEqual(expect.objectContaining({ color: gray[800] }));
151+
});
152+
153+
it('should render yellow title when variation is ghost, variant is warning and theme mode is dark', () => {
154+
(useColorScheme as jest.Mock).mockReturnValue('dark');
155+
const { getByText, debug } = render(<Alert variation="ghost" variant="warning" subTitle="subTitle" title="title" />);
156+
157+
const title = getByText('title');
158+
const subTitle = getByText('subTitle');
159+
160+
const titleFlattenStyles = StyleSheet.flatten(title.props.style);
161+
expect(titleFlattenStyles).toEqual(expect.objectContaining({ color: yellow[400] }));
162+
163+
const subTitleFlattenStyles = StyleSheet.flatten(subTitle.props.style);
164+
expect(subTitleFlattenStyles).toEqual(expect.objectContaining({ color: yellow[400] }));
165+
});
52166
});

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react';
21
import * as RN from 'react-native';
32
import { DropDown, DropDownListContainer, gray, Text } from '../src';
43
import { fireEvent, render, waitFor } from './test-utils';
@@ -235,7 +234,7 @@ describe('DropDownListContainer component', () => {
235234

236235
const title = getByText('first_item');
237236
expect(title).toBeDefined();
238-
expect(title.props.style.color).toEqual(gray[900]);
237+
expect(title.props.style.color).toEqual(gray[50]);
239238
});
240239

241240
it('should show the listItemEndAdornment item when list items is isSelected', () => {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ exports[`Alert should render correctly with zero props 1`] = `
99
[
1010
{
1111
"alignItems": "center",
12+
"borderRadius": 6,
1213
"display": "flex",
1314
"flexDirection": "row",
1415
"minHeight": 30,

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ exports[`Divider Component should render correctly 1`] = `
2626
"borderWidth": 0.9,
2727
},
2828
{
29-
"borderColor": "#BDBDBD",
29+
"borderColor": "#616161",
3030
"borderEndWidth": 0,
3131
"flex": 1,
3232
},
@@ -42,7 +42,7 @@ exports[`Divider Component should render correctly 1`] = `
4242
"borderWidth": 0.9,
4343
},
4444
{
45-
"borderColor": "#BDBDBD",
45+
"borderColor": "#616161",
4646
"borderStartWidth": 0,
4747
"flex": 1,
4848
},
@@ -80,7 +80,7 @@ exports[`Divider Component should render the children correctly 1`] = `
8080
"borderWidth": 0.9,
8181
},
8282
{
83-
"borderColor": "#BDBDBD",
83+
"borderColor": "#616161",
8484
"borderEndWidth": 0,
8585
"flex": 1,
8686
},
@@ -102,7 +102,7 @@ exports[`Divider Component should render the children correctly 1`] = `
102102
"borderWidth": 0.9,
103103
},
104104
{
105-
"borderColor": "#BDBDBD",
105+
"borderColor": "#616161",
106106
"borderStartWidth": 0,
107107
"flex": 1,
108108
},

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -304,8 +304,8 @@ exports[`DropDownListContainer component should render the search bar component
304304
onStartShouldSetResponder={[Function]}
305305
style={
306306
{
307-
"backgroundColor": "#F5F5F5",
308-
"borderColor": "#9E9E9E",
307+
"backgroundColor": "#424242",
308+
"borderColor": "#BDBDBD",
309309
"borderRadius": 5,
310310
"borderWidth": 0.2,
311311
"marginTop": 5,
@@ -332,8 +332,8 @@ exports[`DropDownListContainer component should render the search bar component
332332
style={
333333
{
334334
"alignItems": "center",
335-
"backgroundColor": "#FAFAFA",
336-
"borderColor": "#BDBDBD",
335+
"backgroundColor": "#212121",
336+
"borderColor": "#9E9E9E",
337337
"borderRadius": 5,
338338
"borderWidth": 0,
339339
"display": "flex",
@@ -355,7 +355,7 @@ exports[`DropDownListContainer component should render the search bar component
355355
style={
356356
{
357357
"backgroundColor": "transparent",
358-
"color": "#424242",
358+
"color": "#F5F5F5",
359359
"flex": 1,
360360
"minHeight": 30,
361361
"position": "relative",
@@ -564,7 +564,7 @@ exports[`DropDownListContainer component should render the search bar component
564564
collapsable={false}
565565
style={
566566
{
567-
"color": "#212121",
567+
"color": "#FAFAFA",
568568
"fontSize": 12,
569569
}
570570
}
@@ -731,7 +731,7 @@ exports[`DropDownListContainer component should render the search bar component
731731
collapsable={false}
732732
style={
733733
{
734-
"color": "#212121",
734+
"color": "#FAFAFA",
735735
"fontSize": 12,
736736
}
737737
}
@@ -898,7 +898,7 @@ exports[`DropDownListContainer component should render the search bar component
898898
collapsable={false}
899899
style={
900900
{
901-
"color": "#212121",
901+
"color": "#FAFAFA",
902902
"fontSize": 12,
903903
}
904904
}
@@ -1065,7 +1065,7 @@ exports[`DropDownListContainer component should render the search bar component
10651065
collapsable={false}
10661066
style={
10671067
{
1068-
"color": "#212121",
1068+
"color": "#FAFAFA",
10691069
"fontSize": 12,
10701070
}
10711071
}
@@ -1232,7 +1232,7 @@ exports[`DropDownListContainer component should render the search bar component
12321232
collapsable={false}
12331233
style={
12341234
{
1235-
"color": "#212121",
1235+
"color": "#FAFAFA",
12361236
"fontSize": 12,
12371237
}
12381238
}
@@ -1399,7 +1399,7 @@ exports[`DropDownListContainer component should render the search bar component
13991399
collapsable={false}
14001400
style={
14011401
{
1402-
"color": "#212121",
1402+
"color": "#FAFAFA",
14031403
"fontSize": 12,
14041404
}
14051405
}
@@ -1566,7 +1566,7 @@ exports[`DropDownListContainer component should render the search bar component
15661566
collapsable={false}
15671567
style={
15681568
{
1569-
"color": "#212121",
1569+
"color": "#FAFAFA",
15701570
"fontSize": 12,
15711571
}
15721572
}

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,21 @@ import { render, RenderOptions } from '@testing-library/react-native';
33
import { ThemeProvider } from '../src';
44
import { ThemeProviderProps } from '../src/libraries/types';
55

6+
interface CustomRenderOptions extends Omit<RenderOptions, 'wrapper'> {
7+
themeProps?: Partial<ThemeProviderProps>;
8+
}
9+
610
export const ThemeWrapper: React.FC<ThemeProviderProps> = ({ children, ...props }) => {
711
return <ThemeProvider {...props}>{children}</ThemeProvider>;
812
};
913

10-
const customRender = (ui: React.ReactElement, options?: Omit<RenderOptions, 'wrapper'>) =>
11-
render(ui, { wrapper: ThemeWrapper, ...options });
14+
export const customRender = (ui: React.ReactElement, options?: CustomRenderOptions) => {
15+
const { themeProps, ...rest } = options || {};
16+
return render(ui, {
17+
wrapper: wrapperProps => <ThemeWrapper {...themeProps}>{wrapperProps.children}</ThemeWrapper>,
18+
...rest,
19+
});
20+
};
1221

1322
export * from '@testing-library/react-native';
1423
export { customRender as render };

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,24 +36,24 @@ export const Alert = React.forwardRef<View, AlertProps>(
3636
});
3737

3838
const alertContainerStyles = useMemo(() => {
39-
return getAlertContainerStyles({ colors: themeColors, variant, variation });
40-
}, [themeColors, variant, variation]);
39+
return getAlertContainerStyles({ colors: themeColors, variant, variation, colorScheme });
40+
}, [themeColors, variant, variation, colorScheme]);
4141

4242
const titleS = useMemo(() => {
43-
return getAlertTitleStyles({ variant, variation, colorScheme });
44-
}, [variant, variation, colorScheme]);
43+
return getAlertTitleStyles({ variant, variation, colorScheme, colors: themeColors });
44+
}, [variant, variation, colorScheme, themeColors]);
4545

4646
return (
4747
<Box ref={ref} style={[styles.alertContainer, alertContainerStyles, style]} {...props}>
4848
{startIcon ? <View style={[styles.startIconContainer, startIconContainerStyles]}>{startThemedIcon}</View> : null}
4949
<View style={styles.contentContainer}>
5050
{title ? (
51-
<Text mode="light" variation="h4" maxLength={titleMixLength} style={[titleS, titleStyles]}>
51+
<Text mode="light" variation="h5" maxLength={titleMixLength} style={[titleS, titleStyles]}>
5252
{title}
5353
</Text>
5454
) : null}
5555
{subTitle ? (
56-
<Text mode="light" variation="h5" maxLength={titleMixLength} style={[titleS, styles.subTitle, subTitleStyles]}>
56+
<Text mode="light" variation="h6" maxLength={titleMixLength} style={[titleS, styles.subTitle, subTitleStyles]}>
5757
{subTitle}
5858
</Text>
5959
) : null}
@@ -75,6 +75,7 @@ const styles = StyleSheet.create({
7575
display: 'flex',
7676
flexDirection: 'row',
7777
alignItems: 'center',
78+
borderRadius: 6,
7879
},
7980
startIconContainer: {
8081
paddingRight: 10,

‎src/packages/react-native-material-elements/src/components/Alert/Alert.types.d.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export interface AlertProps extends BoxProps {
1818
/** Optional action element (e.g., button or link) displayed inside the alert */
1919
action?: React.ReactNode;
2020
/** Defines the visual style of the alert: 'filled' for solid background, 'outlined' for bordered */
21-
variation?: 'filled' | 'outlined';
21+
variation?: 'filled' | 'outlined' | 'ghost';
2222
/** Maximum length of the title text, useful for truncating or layout adjustment */
2323
titleMixLength?: number;
2424
/** Optional icon displayed at the start (left) of the alert */
@@ -32,7 +32,9 @@ export interface AlertProps extends BoxProps {
3232
}
3333
export interface GetAlertContainerStylesParams extends Pick<AlertProps, 'variant' | 'variation'> {
3434
colors: Theme;
35+
colorScheme?: ColorSchemeName;
3536
}
3637
export interface GetAlertTitleStylesParams extends Pick<AlertProps, 'variant' | 'variation'> {
3738
colorScheme: ColorSchemeName;
39+
colors: Theme;
3840
}

0 commit comments

Comments
 (0)