Skip to content

Commit 38ae5aa

Browse files
dheeraj1429dheeraj1429
committed
[unit-testing] Added badge component test cases
1 parent a7218d1 commit 38ae5aa

1 file changed

Lines changed: 298 additions & 0 deletions

File tree

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

Lines changed: 298 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { renderHook, render as themeRender } from '@testing-library/react-native';
22
import { StyleSheet } from 'react-native';
33
import {
4+
Badge,
45
createColorShades,
56
createTheme,
67
createThemeDimensions,
78
defaultLightTheme,
9+
Divider,
10+
DividerColorThemeConfig,
811
Text,
912
themeDimensions,
1013
ThemeProvider,
@@ -380,5 +383,300 @@ describe('V2ThemeContext', () => {
380383
expect(fattenStyles).toEqual(expect.objectContaining({ fontSize: 20, fontWeight: 200 }));
381384
});
382385
});
386+
387+
describe('dividerProps', () => {
388+
const startLineTestId = 'divider-start-line-testid';
389+
const endLineTestId = 'divider-end-line-testid';
390+
const dividerTestId = 'divider-testid';
391+
392+
const mockDividerColorThemeConfig: DividerColorThemeConfig = {
393+
colors: {
394+
primary: {
395+
color: 'green',
396+
},
397+
secondary: {
398+
color: 'red',
399+
},
400+
success: {
401+
color: 'pink',
402+
},
403+
error: {
404+
color: 'blue',
405+
},
406+
info: {
407+
color: 'white',
408+
},
409+
warning: {
410+
color: 'pink',
411+
},
412+
gray: {
413+
color: 'gray',
414+
},
415+
lightGray: {
416+
color: 'green',
417+
},
418+
},
419+
};
420+
421+
it('should adopted the theme lightGray color', () => {
422+
const { getByTestId } = themeRender(
423+
<ThemeProvider components={{ dividerProps: mockDividerColorThemeConfig }}>
424+
<Divider color="lightGray" startLineTestId={startLineTestId} endLineTestId={endLineTestId} />
425+
</ThemeProvider>,
426+
);
427+
428+
const startLine = getByTestId(startLineTestId);
429+
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
430+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'green' }));
431+
432+
const endLine = getByTestId(endLineTestId);
433+
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
434+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'green' }));
435+
});
436+
437+
it('should adopted the theme gray color', () => {
438+
const { getByTestId } = themeRender(
439+
<ThemeProvider components={{ dividerProps: mockDividerColorThemeConfig }}>
440+
<Divider color="gray" startLineTestId={startLineTestId} endLineTestId={endLineTestId} />
441+
</ThemeProvider>,
442+
);
443+
444+
const startLine = getByTestId(startLineTestId);
445+
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
446+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'gray' }));
447+
448+
const endLine = getByTestId(endLineTestId);
449+
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
450+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'gray' }));
451+
});
452+
453+
it('should adopted the theme warning color', () => {
454+
const { getByTestId } = themeRender(
455+
<ThemeProvider components={{ dividerProps: mockDividerColorThemeConfig }}>
456+
<Divider color="warning" startLineTestId={startLineTestId} endLineTestId={endLineTestId} />
457+
</ThemeProvider>,
458+
);
459+
460+
const startLine = getByTestId(startLineTestId);
461+
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
462+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'pink' }));
463+
464+
const endLine = getByTestId(endLineTestId);
465+
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
466+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'pink' }));
467+
});
468+
469+
it('should adopted the theme info color', () => {
470+
const { getByTestId } = themeRender(
471+
<ThemeProvider components={{ dividerProps: mockDividerColorThemeConfig }}>
472+
<Divider color="info" startLineTestId={startLineTestId} endLineTestId={endLineTestId} />
473+
</ThemeProvider>,
474+
);
475+
476+
const startLine = getByTestId(startLineTestId);
477+
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
478+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'white' }));
479+
480+
const endLine = getByTestId(endLineTestId);
481+
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
482+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'white' }));
483+
});
484+
485+
it('should adopted the theme error color', () => {
486+
const { getByTestId } = themeRender(
487+
<ThemeProvider components={{ dividerProps: mockDividerColorThemeConfig }}>
488+
<Divider color="error" startLineTestId={startLineTestId} endLineTestId={endLineTestId} />
489+
</ThemeProvider>,
490+
);
491+
492+
const startLine = getByTestId(startLineTestId);
493+
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
494+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'blue' }));
495+
496+
const endLine = getByTestId(endLineTestId);
497+
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
498+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'blue' }));
499+
});
500+
501+
it('should adopted the theme success color', () => {
502+
const { getByTestId } = themeRender(
503+
<ThemeProvider components={{ dividerProps: mockDividerColorThemeConfig }}>
504+
<Divider color="success" startLineTestId={startLineTestId} endLineTestId={endLineTestId} />
505+
</ThemeProvider>,
506+
);
507+
508+
const startLine = getByTestId(startLineTestId);
509+
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
510+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'pink' }));
511+
512+
const endLine = getByTestId(endLineTestId);
513+
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
514+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'pink' }));
515+
});
516+
517+
it('should adopted the theme primary color', () => {
518+
const { getByTestId } = themeRender(
519+
<ThemeProvider components={{ dividerProps: mockDividerColorThemeConfig }}>
520+
<Divider color="primary" startLineTestId={startLineTestId} endLineTestId={endLineTestId} />
521+
</ThemeProvider>,
522+
);
523+
524+
const startLine = getByTestId(startLineTestId);
525+
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
526+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'green' }));
527+
528+
const endLine = getByTestId(endLineTestId);
529+
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
530+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'green' }));
531+
});
532+
533+
it('should adopted the theme secondary color', () => {
534+
const { getByTestId } = themeRender(
535+
<ThemeProvider components={{ dividerProps: mockDividerColorThemeConfig }}>
536+
<Divider color="secondary" startLineTestId={startLineTestId} endLineTestId={endLineTestId} />
537+
</ThemeProvider>,
538+
);
539+
540+
const startLine = getByTestId(startLineTestId);
541+
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
542+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'red' }));
543+
544+
const endLine = getByTestId(endLineTestId);
545+
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
546+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'red' }));
547+
});
548+
549+
it('should adopted the theme startLineStyles', () => {
550+
const { getByTestId } = themeRender(
551+
<ThemeProvider components={{ dividerProps: { startLineStyles: { borderWidth: 10, borderRadius: 10 } } }}>
552+
<Divider startLineTestId={startLineTestId} />
553+
</ThemeProvider>,
554+
);
555+
556+
const startLine = getByTestId(startLineTestId);
557+
558+
const flattenStyles = StyleSheet.flatten(startLine.props.style);
559+
expect(flattenStyles).toEqual(expect.objectContaining({ borderWidth: 10, borderRadius: 10 }));
560+
});
561+
562+
it('should override the theme startLineStyles', () => {
563+
const { getByTestId } = themeRender(
564+
<ThemeProvider components={{ dividerProps: { startLineStyles: { borderWidth: 10, borderRadius: 10 } } }}>
565+
<Divider startLineStyles={{ borderWidth: 30, borderRadius: 50 }} startLineTestId={startLineTestId} />
566+
</ThemeProvider>,
567+
);
568+
569+
const startLine = getByTestId(startLineTestId);
570+
571+
const flattenStyles = StyleSheet.flatten(startLine.props.style);
572+
expect(flattenStyles).toEqual(expect.objectContaining({ borderWidth: 30, borderRadius: 50 }));
573+
});
574+
575+
it('should adopted the theme endLineStyles', () => {
576+
const { getByTestId } = themeRender(
577+
<ThemeProvider components={{ dividerProps: { endLineStyles: { borderWidth: 10, borderRadius: 10 } } }}>
578+
<Divider endLineTestId={endLineTestId} />
579+
</ThemeProvider>,
580+
);
581+
582+
const startLine = getByTestId(endLineTestId);
583+
584+
const flattenStyles = StyleSheet.flatten(startLine.props.style);
585+
expect(flattenStyles).toEqual(expect.objectContaining({ borderWidth: 10, borderRadius: 10 }));
586+
});
587+
588+
it('should override the theme endLineStyles', () => {
589+
const { getByTestId } = themeRender(
590+
<ThemeProvider components={{ dividerProps: { endLineStyles: { borderWidth: 10, borderRadius: 10 } } }}>
591+
<Divider endLineStyles={{ borderWidth: 30, borderRadius: 50 }} endLineTestId={endLineTestId} />
592+
</ThemeProvider>,
593+
);
594+
595+
const startLine = getByTestId(endLineTestId);
596+
597+
const flattenStyles = StyleSheet.flatten(startLine.props.style);
598+
expect(flattenStyles).toEqual(expect.objectContaining({ borderWidth: 30, borderRadius: 50 }));
599+
});
600+
601+
it('should adopted the theme borderColor', () => {
602+
const { getByTestId } = themeRender(
603+
<ThemeProvider components={{ dividerProps: { borderColor: 'red' } }}>
604+
<Divider startLineTestId={startLineTestId} endLineTestId={endLineTestId} />
605+
</ThemeProvider>,
606+
);
607+
608+
const startLine = getByTestId(startLineTestId);
609+
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
610+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'red' }));
611+
612+
const endLine = getByTestId(endLineTestId);
613+
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
614+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'red' }));
615+
});
616+
617+
it('should override the theme borderColor', () => {
618+
const { getByTestId } = themeRender(
619+
<ThemeProvider components={{ dividerProps: { borderColor: 'red' } }}>
620+
<Divider borderColor="green" startLineTestId={startLineTestId} endLineTestId={endLineTestId} />
621+
</ThemeProvider>,
622+
);
623+
624+
const startLine = getByTestId(startLineTestId);
625+
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
626+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'green' }));
627+
628+
const endLine = getByTestId(endLineTestId);
629+
const endLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
630+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'green' }));
631+
});
632+
633+
it('should adopted the theme styles', () => {
634+
const { getByTestId } = themeRender(
635+
<ThemeProvider components={{ dividerProps: { style: { borderWidth: 10 } } }}>
636+
<Divider testID={dividerTestId} />
637+
</ThemeProvider>,
638+
);
639+
640+
const divider = getByTestId(dividerTestId);
641+
const flattenStyles = StyleSheet.flatten(divider.props.style);
642+
expect(flattenStyles).toEqual(expect.objectContaining({ borderWidth: 10 }));
643+
});
644+
645+
it('should override the theme styles', () => {
646+
const { getByTestId } = themeRender(
647+
<ThemeProvider components={{ dividerProps: { style: { borderWidth: 10 } } }}>
648+
<Divider testID={dividerTestId} style={{ borderWidth: 100 }} />
649+
</ThemeProvider>,
650+
);
651+
652+
const divider = getByTestId(dividerTestId);
653+
const flattenStyles = StyleSheet.flatten(divider.props.style);
654+
expect(flattenStyles).toEqual(expect.objectContaining({ borderWidth: 100 }));
655+
});
656+
});
657+
658+
describe('badgeProps', () => {
659+
it('should adopted the theme config max prop', () => {
660+
const { getByText } = themeRender(
661+
<ThemeProvider components={{ badgeProps: { max: 10 } }}>
662+
<Badge badgeContent={20} />
663+
</ThemeProvider>,
664+
);
665+
666+
const label = getByText('9+');
667+
expect(label).toBeDefined();
668+
});
669+
670+
it('should override the theme config max prop', () => {
671+
const { getByText } = themeRender(
672+
<ThemeProvider components={{ badgeProps: { max: 10 } }}>
673+
<Badge badgeContent={30} max={20} shouldOverrideRootMaxValue />
674+
</ThemeProvider>,
675+
);
676+
677+
const label = getByText('19+');
678+
expect(label).toBeDefined();
679+
});
680+
});
383681
});
384682
});

0 commit comments

Comments
 (0)