correcciones en componente select

janis-commerce · Jan 15, 2024 · 09c6a71 · 09c6a71
1 parent 788c03a
commit 09c6a71
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 32 deletions.
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -15,18 +15,15 @@ interface Props {
 	color?: string;
 	size?: number;
 	style?: any;
-	onPress?: () => void;
 }
 
-const Icon: FC<Props> = ({name, color = primary.main, size = 16, onPress, ...props}) => {
+const Icon: FC<Props> = ({name, color = primary.main, size = 16, ...props}) => {
 	if (!name) {
 		return null;
 	}
 	const validateSize = scaledForDevice(size, moderateScale);
 
-	return (
-		<IconComponent name={name} color={color} size={validateSize} onPress={onPress} {...props} />
-	);
+	return <IconComponent name={name} color={color} size={validateSize} {...props} />;
 };
 
 export default Icon;
diff --git a/src/components/Select/index.test.tsx b/src/components/Select/index.test.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import {create} from 'react-test-renderer';
 import Options from './Components/Options';
-import {TextInput} from 'react-native';
-import Icon from '../Icon';
+import {Pressable, TextInput} from 'react-native';
 import Select from './';
 
 jest.spyOn(React, 'useEffect').mockImplementation((f) => f());
@@ -51,8 +50,8 @@ describe('Select component', () => {
 			const {root} = create(
 				<Select options={validProps.options} label={validProps.label} isDisabled={true} />
 			);
-			const ChevronComponent = root.findByType(Icon);
-			ChevronComponent.props.onPress();
+			const ChevronComponent = root.findAllByType(Pressable);
+			ChevronComponent[0].props.onPress();
 
 			jest.spyOn(React, 'useEffect').mockImplementation((f) => f());
 
@@ -73,8 +72,8 @@ describe('Select component', () => {
 			const {root} = create(
 				<Select options={validProps.options} label={validProps.label} isMulti />
 			);
-			const [DeleteComponent] = root.findAllByType(Icon);
-			DeleteComponent.props.onPress();
+			const DeleteComponent = root.findAllByType(Pressable);
+			DeleteComponent[0].props.onPress();
 
 			expect(setIsShowedDropdownSpy).toBeCalledWith(false);
 			expect(setInputValueSpy).toBeCalledWith('');
@@ -174,9 +173,9 @@ describe('Select component', () => {
 				<Select options={validProps.options} label={validProps.label} isMulti />
 			);
 			const OptionsComponent = root.findByType(Options);
-			const ChevronComponent = root.findByType(Icon);
+			const ChevronComponent = root.findAllByType(Pressable);
+			ChevronComponent[0].props.onPress();
 			OptionsComponent.props.callbackOption(validOptions[0]);
-			ChevronComponent.props.onPress();
 
 			expect(setSelectedOptions).toBeCalledWith([validOptions[0]]);
 			expect(setInputValueSpy).toBeCalledWith(validOptions[0].label);
@@ -195,9 +194,9 @@ describe('Select component', () => {
 				<Select options={validProps.options} label={validProps.label} isMulti />
 			);
 			const OptionsComponent = root.findByType(Options);
-			const ChevronComponent = root.findByType(Icon);
+			const ChevronComponent = root.findAllByType(Pressable);
+			ChevronComponent[0].props.onPress();
 			OptionsComponent.props.callbackOption(validOptions[0]);
-			ChevronComponent.props.onPress();
 
 			expect(setSelectedOptions).toBeCalledWith([]);
 			expect(setInputValueSpy).toBeCalledWith('');
@@ -223,9 +222,9 @@ describe('Select component', () => {
 				/>
 			);
 			const OptionsComponent = root.findByType(Options);
-			const ChevronComponent = root.findByType(Icon);
+			const ChevronComponent = root.findAllByType(Pressable);
+			ChevronComponent[0].props.onPress();
 			OptionsComponent.props.callbackOption(validOptions[0]);
-			ChevronComponent.props.onPress();
 
 			expect(setSelectedOptions).toBeCalledWith([]);
 			expect(setInputValueSpy).toBeCalledWith('');

diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
@@ -1,6 +1,6 @@
 /* istanbul ignore file */
 import React, {FC, useState, useEffect, useRef, useCallback} from 'react';
-import {Keyboard, StyleSheet, Text, TextInput, View} from 'react-native';
+import {Keyboard, Pressable, StyleSheet, Text, TextInput, View} from 'react-native';
 import {black, grey, primary} from '../../theme/palette';
 import {formatPlaceholderMulti} from './utils';
 import Options from './Components/Options';
@@ -247,21 +247,14 @@ const Select: FC<SelectProps> = ({
 		<View style={styles.wrapper} {...props}>
 			<View style={styles.wrapperInput}>
 				{isMulti && showDeleteIcon && (
-					<Icon
-						size={20}
-						color={black.main}
-						name="cross_circle_flat"
-						style={styles.deleteIcon}
-						onPress={handleResetOptions}
-					/>
+					<Pressable onPress={handleResetOptions} style={styles.deleteIcon}>
+						<Icon size={20} color={black.main} name="cross_circle_flat" />
+					</Pressable>
 				)}
-				<Icon
-					size={20}
-					color={isDisabled ? black.main : primary.main}
-					name="chevron_down"
-					style={styles.arrowIcon}
-					onPress={handleCloseDropdown}
-				/>
+				<Pressable style={styles.arrowIcon} onPress={handleCloseDropdown}>
+					<Icon size={20} color={isDisabled ? black.main : primary.main} name="chevron_down" />
+				</Pressable>
+
 				<Text style={styles.label}>{label}</Text>
 				<TextInput
 					ref={inputRef}