base button

src/components/BaseButton/index.test.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import {create} from 'react-test-renderer';
+import {Text, View} from 'react-native';
+import {palette} from '../../theme/palette';
+import BaseButton from './';
+
+const validData = {
+	title: 'test title',
+	icon: 'plus_circle',
+	iconRight: true,
+	disabled: true,
+	borderRadius: 15,
+	pressedColor: palette.success.main,
+	style: {backgroundColor: palette.black.main},
+	iconStyle: {backgroundColor: palette.black.main},
+	textStyle: {color: palette.black.main},
+};
+
+describe('BaseButton Component', () => {
+	describe('return null when', () => {
+		it('when hasnt minimum props needed', () => {
+			const {toJSON} = create(<BaseButton />);
+			expect(toJSON()).toBeNull();
+		});
+	});
+
+	describe('render correctly when has minimum props needed, example', () => {
+		it('title', () => {
+			const {toJSON} = create(<BaseButton title={validData.title} />);
+			expect(toJSON()).toBeTruthy();
+		});
+
+		it('icon', () => {
+			const {toJSON} = create(<BaseButton icon={validData.icon} />);
+			expect(toJSON()).toBeTruthy();
+		});
+
+		it('children', () => {
+			const {toJSON} = create(
+				<BaseButton>
+					<View>
+						<Text>Valid Children</Text>
+					</View>
+				</BaseButton>
+			);
+			expect(toJSON()).toBeTruthy();
+		});
+	});
+
+	describe('Icon', () => {
+		it('is renders right icon when iconRight prop is true', () => {
+			const {toJSON} = create(
+				<BaseButton title={validData.title} icon={validData.icon} iconRight={validData.iconRight} />
+			);
+			expect(toJSON()).toBeTruthy();
+		});
+
+		it('is renders left icon when iconRight prop is not passed', () => {
+			const {toJSON} = create(<BaseButton title={validData.title} icon={validData.icon} />);
+			expect(toJSON()).toBeTruthy();
+		});
+	});
+
+	describe('pressedColor', () => {
+		it('it changes when pressedColor props is an string color format', () => {
+			const {toJSON} = create(
+				<BaseButton title={validData.title} pressedColor={validData.pressedColor} />
+			);
+			expect(toJSON()).toBeTruthy();
+		});
+	});
+
+	describe('is disabled', () => {
+		it('when disabled props is true', () => {
+			const {toJSON} = create(<BaseButton title={validData.title} disabled={validData.disabled} />);
+			expect(toJSON()).toBeTruthy();
+		});
+	});
+});

src/components/BaseButton/index.tsx

@@ -18,7 +18,7 @@ interface BaseButtonProps extends PressableProps {
 	style?: ViewStyle;
 	iconStyle?: ViewStyle;
 	textStyle?: ViewStyle;
-	children?: React.Component;
+	children?: React.ReactNode;
 }
 
 const BaseButton: FC<BaseButtonProps> = ({
@@ -34,10 +34,13 @@ const BaseButton: FC<BaseButtonProps> = ({
 	children = null,
 	...props
 }) => {
+	if (!title && !icon && !children) {
+		return null;
+	}
+
 	const bgColor = !disabled ? palette.primary.main : palette.grey[200];
 	const iconPaddingLeft = iconRight && title ? 8 : 0;
 	const iconPaddingRight = !iconRight && title ? 8 : 0;
-
 	const styles = StyleSheet.create({
 		container: {
 			display: 'flex',
@@ -70,6 +73,7 @@ const BaseButton: FC<BaseButtonProps> = ({
 		</>
 	);
 
+	/* istanbul ignore next */
 	const PressableStyle = ({pressed}: PressableStyleProp) => {
 		const backgroundColor = pressedColor ?? palette.primary.dark;
 		const pressedBgColor = pressed ? [{backgroundColor}] : [];