fix: added testID

azeezat · Aug 30, 2024 · dc612ad · dc612ad
1 parent 49f39f7
commit dc612ad
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 60 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -46,10 +46,7 @@ export default function App() {
             label="Currency"
             placeholder="Select multiple currencies..."
             options={[
-              {
-                name: 'Naira (NGN) \u20A6',
-                code: 'NGN',
-              },
+              {name: 'Naira (NGN) \u20A6', code: 'NGN'},
               {name: 'Dollar (USD) \u0024', code: 'USD'},
               {name: 'Euro (EUR) \u20AC', code: 'EUR'},
             ]}
@@ -84,59 +81,18 @@ export default function App() {
             modalControls={{
               modalProps: {
                 onShow: () => logMovies(),
-                onDismiss: () => console.log('modal was dismissed'), //only works for ios
+                onDismiss: () => console.log('modal was dismissed'),
               },
             }}
-            autoCloseOnSelect={false}
           />
 
           <DropdownSelect
             label="Border has been removed"
             placeholder="Select users"
             options={[
-              {
-                value: '01',
-                labelComponent: (
-                  <View
-                    style={{
-                      flexDirection: 'row',
-                      justifyContent: 'center',
-                      alignItems: 'center',
-                    }}>
-                    <Image
-                      style={styles.avatarStyle}
-                      source={{
-                        uri: 'https://avatar.iran.liara.run/public/boy?username=Ash',
-                      }}
-                    />
-
-                    <Text>John Doe</Text>
-                  </View>
-                ),
-              },
-              {
-                value: '02',
-                labelComponent: (
-                  <View
-                    style={{
-                      flexDirection: 'row',
-                      justifyContent: 'center',
-                      alignItems: 'center',
-                    }}>
-                    <Image
-                      style={styles.avatarStyle}
-                      source={{
-                        uri: 'https://avatar.iran.liara.run/username?username=Azeezat+Raheem',
-                      }}
-                    />
-
-                    <Text>Azeezat Raheem</Text>
-                  </View>
-                ),
-              },
+              {label: 'John Doe', value: '12'},
+              {label: 'James Bond', value: '13'},
             ]}
-            optionLabel={'labelComponent'}
-            optionValue={'value'}
             selectedValue={users}
             onValueChange={(itemValue: any) => setUsers(itemValue)}
             isSearchable
@@ -456,10 +412,4 @@ const styles = StyleSheet.create({
     borderWidth: 3,
     borderColor: 'white',
   },
-  avatarStyle: {
-    height: 20,
-    width: 20,
-    borderRadius: 20,
-    marginRight: 5,
-  },
 });
diff --git a/src/__tests__/index.test.tsx b/src/__tests__/index.test.tsx
@@ -12,11 +12,12 @@ describe('Initial state of component', () => {
     jest.useRealTimers();
   });
   const defaultDropdown = (
-    <DropdownSelect options={[]} onValueChange={() => {}} />
+    <DropdownSelect options={[]} onValueChange={() => {}} testID='some-random-test-id' />
   );
 
   test('show default texts', () => {
     render(defaultDropdown);
+    expect(screen.getByTestId('some-random-test-id'));
     expect(screen.getByText('Select an option'));
   });
 

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -5,6 +5,7 @@ import { colors } from '../../styles/colors';
 import { typography } from '../../styles/typography';
 
 const Dropdown = ({
+  testID,
   label,
   placeholder,
   helperText,
@@ -31,7 +32,11 @@ const Dropdown = ({
   setIndexOfSelectedItem,
 }: any) => {
   return (
-    <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>
+    <View
+      style={[styles.dropdownInputContainer, dropdownContainerStyle]}
+      accessibilityRole="combobox"
+      testID={testID}
+    >
       {label && label !== '' && (
         <Text style={[styles.label, labelStyle]}>{label}</Text>
       )}

diff --git a/src/index.tsx b/src/index.tsx
@@ -18,6 +18,7 @@ import type {
 import { escapeRegExp, extractPropertyFromArray } from './utils';
 
 export const DropdownSelect: React.FC<DropdownProps> = ({
+  testID,
   placeholder,
   label,
   error,
@@ -59,7 +60,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   searchControls,
   modalControls,
   checkboxControls,
-  autoCloseOnSelect=true,
+  autoCloseOnSelect = true,
   ...rest
 }) => {
   const [newOptions, setNewOptions] = useState<TFlatList | TSectionList>([]);
@@ -124,8 +125,8 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
       setSelectedItem(value);
       onValueChange(value); // send value to parent
 
-      if(autoCloseOnSelect){
-      setOpen(false); // close modal upon selection
+      if (autoCloseOnSelect) {
+        setOpen(false); // close modal upon selection
       }
     }
   };
@@ -356,6 +357,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   return (
     <>
       <Dropdown
+        testID={testID}
         label={label}
         placeholder={placeholder}
         helperText={helperText}
@@ -394,7 +396,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
           ListHeaderComponent={
             <>
               {isSearchable && (
-                <Input 
+                <Input
                   value={searchValue}
                   onChangeText={(text: string) => onSearch(text)}
                   style={searchControls?.textInputStyle || searchInputStyle}

diff --git a/src/types/index.types.ts b/src/types/index.types.ts
@@ -15,6 +15,7 @@ export type DropdownProps = CommonDropdownProps &
   TListControls;
 
 export type CommonDropdownProps = {
+  testID?: string;
   label?: string;
   options: TFlatList | TSectionList;
   optionLabel?: string;