Skip to content

Commit 6c344b8

Browse files
dheeraj1429dheeraj1429
committed
[unit-testing] working on theme config testing
1 parent fb62abb commit 6c344b8

19 files changed

Lines changed: 76 additions & 518 deletions

File tree

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
"lint": "eslint .",
99
"start": "react-native start",
1010
"test": "jest --coverage",
11-
"sonar-scanner": "sonar-scanner"
11+
"sonar-scanner": "sonar-scanner",
12+
"type-check": "npx tsc --noEmit"
1213
},
1314
"dependencies": {
1415
"lodash": "^4.17.21",

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

Lines changed: 0 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -43,29 +43,6 @@ describe('Card Component', () => {
4343
expect(flattenedStyle.borderWidth).toEqual(0.5);
4444
expect(flattenedStyle.borderColor).toEqual(gray[500]);
4545
});
46-
47-
it('should apply the root style', () => {
48-
const { getByTestId } = testRenderer(
49-
<ThemeProvider components={{ cardProps: { style: { backgroundColor: 'red' } } }}>
50-
<Card variation="outlined" testID={mockCardTestId} />
51-
</ThemeProvider>,
52-
);
53-
const card = getByTestId(mockCardTestId);
54-
const flattenedStyle = StyleSheet.flatten(card.props.style);
55-
expect(flattenedStyle.backgroundColor).toEqual('red');
56-
});
57-
58-
it('should combine the root style and component style', () => {
59-
const { getByTestId } = testRenderer(
60-
<ThemeProvider components={{ cardProps: { style: { backgroundColor: 'red' } } }}>
61-
<Card variation="outlined" testID={mockCardTestId} style={{ borderWidth: 2 }} />
62-
</ThemeProvider>,
63-
);
64-
const card = getByTestId(mockCardTestId);
65-
const flattenedStyle = StyleSheet.flatten(card.props.style);
66-
expect(flattenedStyle.backgroundColor).toEqual('red');
67-
expect(flattenedStyle.borderWidth).toEqual(2);
68-
});
6946
});
7047

7148
describe('CardHeader Component', () => {
@@ -98,29 +75,6 @@ describe('CardHeader Component', () => {
9875
const flattenedStyle = StyleSheet.flatten(cardHeader.props.style);
9976
expect(flattenedStyle.backgroundColor).toEqual('red');
10077
});
101-
102-
it('should apply the root style', () => {
103-
const { getByTestId } = testRenderer(
104-
<ThemeProvider components={{ cardHeaderProps: { style: { backgroundColor: 'red' } } }}>
105-
<CardHeader testID={mockCardHeaderTestId} />
106-
</ThemeProvider>,
107-
);
108-
const cardHeader = getByTestId(mockCardHeaderTestId);
109-
const flattenedStyle = StyleSheet.flatten(cardHeader.props.style);
110-
expect(flattenedStyle.backgroundColor).toEqual('red');
111-
});
112-
113-
it('should combine the root style and component style', () => {
114-
const { getByTestId } = testRenderer(
115-
<ThemeProvider components={{ cardHeaderProps: { style: { backgroundColor: 'red' } } }}>
116-
<CardHeader testID={mockCardHeaderTestId} style={{ borderWidth: 2 }} />
117-
</ThemeProvider>,
118-
);
119-
const cardHeader = getByTestId(mockCardHeaderTestId);
120-
const flattenedStyle = StyleSheet.flatten(cardHeader.props.style);
121-
expect(flattenedStyle.backgroundColor).toEqual('red');
122-
expect(flattenedStyle.borderWidth).toEqual(2);
123-
});
12478
});
12579

12680
describe('CardContent Component', () => {

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

Lines changed: 0 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -300,164 +300,6 @@ const textTests = (Component: any, componentName: string) => {
300300
expect(caughtError?.message).toContain('maxLength props must be used with string');
301301
});
302302

303-
it('should apply the gutterBottomSpace property from theme provider', () => {
304-
const { getByTestId } = testingRenderer(
305-
<ThemeProvider components={{ textProps: { gutterBottomSpace: 20 } }}>
306-
<Component testID={mockTestId} gutterBottom>
307-
Mock label
308-
</Component>
309-
</ThemeProvider>,
310-
);
311-
const text = getByTestId(mockTestId);
312-
expect(text.props.style).toEqual(expect.objectContaining({ marginBottom: 20 }));
313-
});
314-
315-
it('should override the root gutterBottomSpace property', () => {
316-
const { getByTestId } = testingRenderer(
317-
<ThemeProvider components={{ textProps: { gutterBottomSpace: 20 } }}>
318-
<Component testID={mockTestId} gutterBottom overrideRootGutterBottomConfig gutterBottomSpace={10}>
319-
Mock label
320-
</Component>
321-
</ThemeProvider>,
322-
);
323-
const text = getByTestId(mockTestId);
324-
expect(text.props.style).toEqual(expect.objectContaining({ marginBottom: 10 }));
325-
});
326-
327-
it('should apply the maxLength property from theme provider', () => {
328-
const { getByText } = testingRenderer(
329-
<ThemeProvider components={{ textProps: { maxLength: 10 } }}>
330-
<Component>Sample Text</Component>
331-
</ThemeProvider>,
332-
);
333-
expect(getByText('Sample Tex...')).toBeTruthy();
334-
});
335-
336-
it('should override the root maxLength property', () => {
337-
const { getByText } = testingRenderer(
338-
<ThemeProvider components={{ textProps: { maxLength: 10 } }}>
339-
<Component maxLength={5}>Sample Text</Component>
340-
</ThemeProvider>,
341-
);
342-
expect(getByText('Sampl...')).toBeTruthy();
343-
});
344-
345-
it('should apply the root errorColor property', () => {
346-
const { getByTestId } = testingRenderer(
347-
<ThemeProvider components={{ textProps: { errorColor: 'green' } }}>
348-
<Component testID={mockTestId} error>
349-
Sample Text
350-
</Component>
351-
</ThemeProvider>,
352-
);
353-
354-
const text = getByTestId(mockTestId);
355-
expect(text.props.style).toEqual(expect.objectContaining({ color: 'green' }));
356-
});
357-
358-
it('should override the root errorColor property', () => {
359-
const { getByTestId } = testingRenderer(
360-
<ThemeProvider components={{ textProps: { errorColor: 'green' } }}>
361-
<Component testID={mockTestId} error errorColor={'red'}>
362-
Sample Text
363-
</Component>
364-
</ThemeProvider>,
365-
);
366-
367-
const text = getByTestId(mockTestId);
368-
expect(text.props.style).toEqual(expect.objectContaining({ color: 'red' }));
369-
});
370-
371-
it('should apply the root activeColor property', () => {
372-
const { getByTestId } = testingRenderer(
373-
<ThemeProvider components={{ textProps: { activeColor: 'green' } }}>
374-
<Component testID={mockTestId} isActive>
375-
Sample Text
376-
</Component>
377-
</ThemeProvider>,
378-
);
379-
380-
const text = getByTestId(mockTestId);
381-
expect(text.props.style).toEqual(expect.objectContaining({ color: 'green' }));
382-
});
383-
384-
it('should override the root activeColor property', () => {
385-
const { getByTestId } = testingRenderer(
386-
<ThemeProvider components={{ textProps: { activeColor: 'green' } }}>
387-
<Component testID={mockTestId} isActive activeColor={'red'}>
388-
Sample Text
389-
</Component>
390-
</ThemeProvider>,
391-
);
392-
393-
const text = getByTestId(mockTestId);
394-
expect(text.props.style).toEqual(expect.objectContaining({ color: 'red' }));
395-
});
396-
397-
it('should override the root color property', () => {
398-
const { getByTestId } = testingRenderer(
399-
<ThemeProvider components={{ textProps: { color: 'green' } }}>
400-
<Component testID={mockTestId} color={'red'}>
401-
Sample Text
402-
</Component>
403-
</ThemeProvider>,
404-
);
405-
406-
const text = getByTestId(mockTestId);
407-
expect(text.props.style).toEqual(expect.objectContaining({ color: 'red' }));
408-
});
409-
410-
it('should apply the root styles', () => {
411-
const { getByTestId } = testingRenderer(
412-
<ThemeProvider
413-
components={{
414-
textProps: {
415-
style: {
416-
fontSize: 20,
417-
fontWeight: 'bold',
418-
},
419-
},
420-
}}>
421-
<Component testID={mockTestId}>Sample text</Component>
422-
</ThemeProvider>,
423-
);
424-
425-
const text = getByTestId(mockTestId);
426-
expect(text.props.style).toEqual(
427-
expect.objectContaining({
428-
fontSize: 20,
429-
fontWeight: 'bold',
430-
}),
431-
);
432-
});
433-
434-
it('should merge the root styles and component styles', () => {
435-
const { getByTestId } = testingRenderer(
436-
<ThemeProvider
437-
components={{
438-
textProps: {
439-
style: {
440-
fontSize: 20,
441-
fontWeight: 'bold',
442-
},
443-
},
444-
}}>
445-
<Component testID={mockTestId} style={{ color: 'green' }}>
446-
Sample text
447-
</Component>
448-
</ThemeProvider>,
449-
);
450-
451-
const text = getByTestId(mockTestId);
452-
expect(text.props.style).toEqual(
453-
expect.objectContaining({
454-
fontSize: 20,
455-
fontWeight: 'bold',
456-
color: 'green',
457-
}),
458-
);
459-
});
460-
461303
Object.entries(themeVariants).forEach(([variant, expectedStyle]) => {
462304
it(`should apply the '${variant}' text theme variant`, () => {
463305
const { getByTestId } = render(

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

Lines changed: 51 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import { render as testRenderer, waitFor } from '@testing-library/react-native';
22
import React from 'react';
3-
import { StyleSheet, View } from 'react-native';
4-
import { Divider, Text, ThemeProvider } from '../src';
3+
import { StyleSheet, useColorScheme, View } from 'react-native';
4+
import { Divider, gray, Text, ThemeProvider } from '../src';
55
import { spacing } from '../src/libraries/themes/v1/sizes';
66
import { render } from './test-utils';
77

88
describe('Divider Component', () => {
99
const dividerMockTestId = 'divide-test-id';
1010
const dividerStartLineTestId = 'divide-start-line-test-id';
1111
const dividerEndLineTestId = 'divide-end-line-test-id';
12-
1312
const mockTestLabel = 'test-label';
1413

1514
const mockRef = React.createRef<View>();
@@ -251,4 +250,53 @@ describe('Divider Component', () => {
251250
expect(flattenedStyle.borderWidth).toEqual(2);
252251
expect(flattenedStyle.backgroundColor).toEqual('red');
253252
});
253+
254+
it('should show smooth light background when theme mode is dark', () => {
255+
(useColorScheme as jest.Mock).mockReturnValue('dark');
256+
const { getByTestId } = render(<Divider startLineTestId={dividerStartLineTestId} endLineTestId={dividerEndLineTestId} />);
257+
258+
const startLine = getByTestId(dividerStartLineTestId);
259+
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
260+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: gray[700] }));
261+
262+
const endLine = getByTestId(dividerEndLineTestId);
263+
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
264+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: gray[700] }));
265+
});
266+
267+
it('should show smooth dark background when theme mode is light', () => {
268+
(useColorScheme as jest.Mock).mockReturnValue('light');
269+
const { getByTestId } = render(<Divider startLineTestId={dividerStartLineTestId} endLineTestId={dividerEndLineTestId} />);
270+
271+
const startLine = getByTestId(dividerStartLineTestId);
272+
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
273+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: gray[400] }));
274+
275+
const endLine = getByTestId(dividerEndLineTestId);
276+
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
277+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: gray[400] }));
278+
});
279+
280+
it('should render child component', () => {
281+
const { getByText } = render(
282+
<Divider>
283+
<Text>Hello</Text>
284+
</Divider>,
285+
);
286+
287+
const text = getByText('Hello');
288+
expect(text).toBeDefined();
289+
});
290+
291+
it('should apply the spacing between start line child component and end line', () => {
292+
const { getByTestId } = render(
293+
<Divider testID={dividerMockTestId}>
294+
<Text>Hello</Text>
295+
</Divider>,
296+
);
297+
298+
const divider = getByTestId(dividerMockTestId);
299+
const flattenStyles = StyleSheet.flatten(divider.props.style);
300+
expect(flattenStyles).toEqual(expect.objectContaining({ gap: 10 }));
301+
});
254302
});

0 commit comments

Comments
 (0)