Skip to content

Commit 03cf645

Browse files
dheeraj1429dheeraj1429
committed
[unit-testing] Added theme badge config test cases
1 parent 51d0ec6 commit 03cf645

File tree

1 file changed

+249
-1
lines changed

1 file changed

+249
-1
lines changed

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

Lines changed: 249 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
} from '../src';
1616
import { ThemeInterface, ThemeType } from '../src/libraries/types';
1717
import { render, ThemeWrapper } from './test-utils';
18-
import { TextVariationThemeConfig } from '../src/types';
18+
import { BadgeVariationThemeConfig, TextVariationThemeConfig } from '../src/types';
1919

2020
describe('V2ThemeContext', () => {
2121
const mockLightColors = { 400: '#000000', '100': '#be3434', '200': '#2f63be' };
@@ -665,6 +665,133 @@ describe('V2ThemeContext', () => {
665665
});
666666

667667
describe('badgeProps', () => {
668+
const badgeTestId = 'badge-testid';
669+
670+
const mockDividerColorThemeConfig: BadgeVariationThemeConfig = {
671+
colors: {
672+
primary: {
673+
color: 'green',
674+
},
675+
secondary: {
676+
color: 'red',
677+
},
678+
success: {
679+
color: 'pink',
680+
},
681+
error: {
682+
color: 'blue',
683+
},
684+
info: {
685+
color: 'white',
686+
},
687+
warning: {
688+
color: 'pink',
689+
},
690+
gray: {
691+
color: 'gray',
692+
},
693+
lightGray: {
694+
color: 'green',
695+
},
696+
},
697+
};
698+
699+
it('should adopted theme lightGray color', () => {
700+
const { getByTestId } = themeRender(
701+
<ThemeProvider components={{ badgeProps: mockDividerColorThemeConfig }}>
702+
<Badge variation="lightGray" testID={badgeTestId} />
703+
</ThemeProvider>,
704+
);
705+
706+
const badge = getByTestId(badgeTestId);
707+
const fattenStyles = StyleSheet.flatten(badge.props.style);
708+
expect(fattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'green' }));
709+
});
710+
711+
it('should adopted theme gray color', () => {
712+
const { getByTestId } = themeRender(
713+
<ThemeProvider components={{ badgeProps: mockDividerColorThemeConfig }}>
714+
<Badge variation="gray" testID={badgeTestId} />
715+
</ThemeProvider>,
716+
);
717+
718+
const badge = getByTestId(badgeTestId);
719+
const fattenStyles = StyleSheet.flatten(badge.props.style);
720+
expect(fattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'gray' }));
721+
});
722+
723+
it('should adopted theme warning color', () => {
724+
const { getByTestId } = themeRender(
725+
<ThemeProvider components={{ badgeProps: mockDividerColorThemeConfig }}>
726+
<Badge variation="warning" testID={badgeTestId} />
727+
</ThemeProvider>,
728+
);
729+
730+
const badge = getByTestId(badgeTestId);
731+
const fattenStyles = StyleSheet.flatten(badge.props.style);
732+
expect(fattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'pink' }));
733+
});
734+
735+
it('should adopted theme info color', () => {
736+
const { getByTestId } = themeRender(
737+
<ThemeProvider components={{ badgeProps: mockDividerColorThemeConfig }}>
738+
<Badge variation="info" testID={badgeTestId} />
739+
</ThemeProvider>,
740+
);
741+
742+
const badge = getByTestId(badgeTestId);
743+
const fattenStyles = StyleSheet.flatten(badge.props.style);
744+
expect(fattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'white' }));
745+
});
746+
747+
it('should adopted theme error color', () => {
748+
const { getByTestId } = themeRender(
749+
<ThemeProvider components={{ badgeProps: mockDividerColorThemeConfig }}>
750+
<Badge variation="error" testID={badgeTestId} />
751+
</ThemeProvider>,
752+
);
753+
754+
const badge = getByTestId(badgeTestId);
755+
const fattenStyles = StyleSheet.flatten(badge.props.style);
756+
expect(fattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'blue' }));
757+
});
758+
759+
it('should adopted theme success color', () => {
760+
const { getByTestId } = themeRender(
761+
<ThemeProvider components={{ badgeProps: mockDividerColorThemeConfig }}>
762+
<Badge variation="success" testID={badgeTestId} />
763+
</ThemeProvider>,
764+
);
765+
766+
const badge = getByTestId(badgeTestId);
767+
const fattenStyles = StyleSheet.flatten(badge.props.style);
768+
expect(fattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'pink' }));
769+
});
770+
771+
it('should adopted theme secondary color', () => {
772+
const { getByTestId } = themeRender(
773+
<ThemeProvider components={{ badgeProps: mockDividerColorThemeConfig }}>
774+
<Badge variation="secondary" testID={badgeTestId} />
775+
</ThemeProvider>,
776+
);
777+
778+
const badge = getByTestId(badgeTestId);
779+
const fattenStyles = StyleSheet.flatten(badge.props.style);
780+
expect(fattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'red' }));
781+
});
782+
783+
it('should adopted theme primary color', () => {
784+
const { getByTestId } = themeRender(
785+
<ThemeProvider components={{ badgeProps: mockDividerColorThemeConfig }}>
786+
<Badge variation="primary" testID={badgeTestId} />
787+
</ThemeProvider>,
788+
);
789+
790+
const badge = getByTestId(badgeTestId);
791+
const fattenStyles = StyleSheet.flatten(badge.props.style);
792+
expect(fattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'green' }));
793+
});
794+
668795
it('should adopted the theme config max prop', () => {
669796
const { getByText } = themeRender(
670797
<ThemeProvider components={{ badgeProps: { max: 10 } }}>
@@ -686,6 +813,127 @@ describe('V2ThemeContext', () => {
686813
const label = getByText('19+');
687814
expect(label).toBeDefined();
688815
});
816+
817+
it('should adopted the theme anchorOrigin prop with badge variant', () => {
818+
const { getByTestId } = themeRender(
819+
<ThemeProvider components={{ badgeProps: { anchorOrigin: { vertical: 'top', horizontal: 'left' } } }}>
820+
<Badge badgeContent={10} testID={badgeTestId} />
821+
</ThemeProvider>,
822+
);
823+
824+
const badge = getByTestId(badgeTestId);
825+
826+
const fattenStyles = StyleSheet.flatten(badge.props.style);
827+
expect(fattenStyles).toEqual(expect.objectContaining({ top: -4, left: -4 }));
828+
});
829+
830+
it('should override the theme anchorOrigin prop with badge variant', () => {
831+
const { getByTestId } = themeRender(
832+
<ThemeProvider components={{ badgeProps: { anchorOrigin: { vertical: 'top', horizontal: 'left' } } }}>
833+
<Badge
834+
shouldOverrideRootAnchor
835+
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
836+
badgeContent={10}
837+
testID={badgeTestId}
838+
/>
839+
</ThemeProvider>,
840+
);
841+
842+
const badge = getByTestId(badgeTestId);
843+
844+
const fattenStyles = StyleSheet.flatten(badge.props.style);
845+
expect(fattenStyles).toEqual(expect.objectContaining({ bottom: -4, right: -4 }));
846+
});
847+
848+
it('should adopted the theme anchorOrigin prop with dot variant', () => {
849+
const { getByTestId } = themeRender(
850+
<ThemeProvider components={{ badgeProps: { anchorOrigin: { vertical: 'top', horizontal: 'left' } } }}>
851+
<Badge badgeContent={10} variant="dot" testID={badgeTestId} />
852+
</ThemeProvider>,
853+
);
854+
855+
const badge = getByTestId(badgeTestId);
856+
857+
const fattenStyles = StyleSheet.flatten(badge.props.style);
858+
expect(fattenStyles).toEqual(expect.objectContaining({ top: 0, left: 0 }));
859+
});
860+
861+
it('should override the theme anchorOrigin prop with dot variant', () => {
862+
const { getByTestId } = themeRender(
863+
<ThemeProvider components={{ badgeProps: { anchorOrigin: { vertical: 'top', horizontal: 'left' } } }}>
864+
<Badge
865+
shouldOverrideRootAnchor
866+
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
867+
badgeContent={10}
868+
variant="dot"
869+
testID={badgeTestId}
870+
/>
871+
</ThemeProvider>,
872+
);
873+
874+
const badge = getByTestId(badgeTestId);
875+
876+
const fattenStyles = StyleSheet.flatten(badge.props.style);
877+
expect(fattenStyles).toEqual(expect.objectContaining({ bottom: 0, right: 0 }));
878+
});
879+
880+
it('should apply the theme badge style config', () => {
881+
const { getByTestId } = themeRender(
882+
<ThemeProvider
883+
components={{
884+
badgeProps: {
885+
style: {
886+
borderRadius: 2,
887+
backgroundColor: 'red',
888+
borderWidth: 1,
889+
borderColor: 'grey',
890+
},
891+
},
892+
}}>
893+
<Badge testID={badgeTestId} />
894+
</ThemeProvider>,
895+
);
896+
897+
const badge = getByTestId(badgeTestId);
898+
const fattenStyles = StyleSheet.flatten(badge.props.style);
899+
expect(fattenStyles).toEqual(
900+
expect.objectContaining({
901+
borderRadius: 2,
902+
backgroundColor: 'red',
903+
borderWidth: 1,
904+
borderColor: 'grey',
905+
}),
906+
);
907+
});
908+
909+
it('should merge the theme badge style config with badge component style prop', () => {
910+
const { getByTestId } = themeRender(
911+
<ThemeProvider
912+
components={{
913+
badgeProps: {
914+
style: {
915+
borderRadius: 2,
916+
backgroundColor: 'red',
917+
borderWidth: 1,
918+
borderColor: 'grey',
919+
},
920+
},
921+
}}>
922+
<Badge style={{ backgroundColor: 'green', borderColor: 'red' }} testID={badgeTestId} />
923+
</ThemeProvider>,
924+
);
925+
926+
const badge = getByTestId(badgeTestId);
927+
const fattenStyles = StyleSheet.flatten(badge.props.style);
928+
expect(fattenStyles).toEqual(
929+
expect.objectContaining({
930+
borderRadius: 2,
931+
backgroundColor: 'green',
932+
borderWidth: 1,
933+
borderColor: 'red',
934+
}),
935+
);
936+
});
689937
});
690938
});
691939
});

0 commit comments

Comments
 (0)