Add test ids and tests

example/src/TapRatingScreen.tsx

@@ -42,7 +42,7 @@
           >
             <AirbnbRating
               showRating={true}
               ratingContainerStyle={{
                 alignSelf: 'center',
                 backgroundColor: '#ede7f6',
               }}
@@ -51,6 +51,7 @@
           <Card title="CUSTOM RATING" containerStyle={styles.card}>
             <AirbnbRating
               count={10}
+              showRating={true}
               reviews={[
                 'Terrible',
                 'Bad',
@@ -64,7 +65,7 @@
                 'Jesus',
               ]}
               defaultRating={5}
-              size={20}
+              reviewSize={10}
               onFinishRating={this.ratingCompleted}
             />
           </Card>
@@ -89,7 +90,7 @@
             containerStyle={styles.card}
           >
             <AirbnbRating
               starContainerStyle={{
                 alignSelf: 'center',
                 backgroundColor: 'green',
               }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rn-vui/ratings",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "..",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",
@@ -71,6 +71,7 @@
     "@react-native/babel-preset": "0.78.2",
     "@react-native/eslint-config": "^0.78.0",
     "@release-it/conventional-changelog": "^9.0.2",
+    "@testing-library/react-native": "^13.2.0",
     "@types/jest": "^29.5.5",
     "@types/react": "^19.0.12",
     "commitlint": "^19.6.1",
@@ -84,6 +85,7 @@
     "react-dom": "19.0.0",
     "react-native": "0.79.1",
     "react-native-builder-bob": "^0.40.7",
+    "react-test-renderer": "19.0.0",
     "release-it": "^17.10.0",
     "typescript": "^5.2.2"
   },
@@ -140,7 +142,7 @@
       [
         "module",
         {
-          "esm": true
+          "esm": false
         }
       ],
       [

src/SwipeRating.tsx

@@ -123,12 +123,12 @@ export type SwipeRatingProps = {
   /**
    * Callback method when the user starts rating.
    */
-  onStartRating?: Function;
+  onStartRating?: (value: number) => void;
 
   /**
    * Callback method when the user finishes rating. Gives you the final rating value as a whole number
    */
-  onFinishRating?: Function;
+  onFinishRating?: (value: number) => void;
 
   /**
    * Displays the Built-in Rating UI to show the rating value in real-time
@@ -404,9 +404,10 @@ const SwipeRating: React.FC<SwipeRatingProps> = ({
   const renderRatings = React.useMemo(() => {
     const source = TYPES[type]?.source;
     return Array.from({ length: ratingCount }, (_, index) => (
-      <View key={index} style={styles.starsWrapper}>
+      <View key={index} style={styles.starsWrapper} testID="RNVUI__Star">
         <Image
           source={source}
+          testID="RNVUI__Star-image"
           style={{
             width: imageSize,
             height: imageSize,
@@ -418,9 +419,16 @@ const SwipeRating: React.FC<SwipeRatingProps> = ({
   }, [ratingCount, imageSize, ratingColor, type]);
 
   return (
-    <View pointerEvents={readonly ? 'none' : 'auto'} style={style}>
+    <View
+      pointerEvents={readonly ? 'none' : 'auto'}
+      style={style}
+      testID="RNVUI__SwipeRating"
+    >
       {showRating && (
-        <View style={styles.showRatingView}>
+        <View
+          style={styles.showRatingView}
+          testID="RNVUI__SwipeRating-showRating"
+        >
           <View style={styles.ratingView}>
             <Text style={[styles.ratingText, { color: ratingTextColor }]}>
               Rating:{' '}
@@ -443,7 +451,11 @@ const SwipeRating: React.FC<SwipeRatingProps> = ({
           </View>
         </View>
       )}
-      <View style={styles.starsWrapper} {...panResponder.panHandlers}>
+      <View
+        style={styles.starsWrapper}
+        {...panResponder.panHandlers}
+        testID="RNVUI__SwipeRating-pan"
+      >
         <View
           style={styles.starsInsideWrapper}
           onLayout={() => {

src/TapRating.tsx

@@ -43,7 +43,7 @@
   reviewColor?: string;
 
   /**
-   * Size value for review.
+   * Size value for review text.
    *
    * @default 40
    */
@@ -120,6 +120,7 @@
   showRating = true,
   reviewColor = 'rgba(230, 196, 46, 1)',
   reviewSize = 25,
+  size: reviewImageSize = 40,
   defaultRating = 3,
   starContainerStyle,
   ratingContainerStyle,
@@ -144,7 +145,7 @@
     return rating_array.map((star) => star);
   };
 
   const starSelectedInPosition = (position: number) => {
     if (typeof onFinishRating === 'function') {
       onFinishRating(position);
     }
@@ -163,7 +164,7 @@
         isDisabled={isDisabled}
         selectedColor={selectedColor}
         unSelectedColor={unSelectedColor}
-        size={reviewSize}
+        size={reviewImageSize}
         starImage={starImage}
         starStyle={starStyle}
       />
@@ -173,19 +174,22 @@
   return (
     <View
       style={StyleSheet.flatten([styles.ratingContainer, ratingContainerStyle])}
+      testID="RNVUI__TapRating"
     >
       {showRating && (
         <Text
-          style={[
+          style={StyleSheet.flatten([
             styles.reviewText,
             { fontSize: reviewSize, color: reviewColor },
-          ]}
+          ])}
+          testID="RNVUI__TapRating-showRating"
         >
           {reviews[position - 1]}
         </Text>
       )}
       <View
         style={StyleSheet.flatten([styles.starContainer, starContainerStyle])}
+        testID="RNVUI__TapRating-starContainer"
       >
         {renderStars(rating_array)}
       </View>

src/__tests__/SwipeRating.test.tsx

@@ -0,0 +1,88 @@
+import { render } from '@testing-library/react-native';
+import SwipeRating from '../SwipeRating';
+
+describe('SwipeRating', () => {
+  it('should export SwipeRating', () => {
+    const SwipeRatingLocal = require('../SwipeRating');
+    expect(SwipeRatingLocal).toBeDefined();
+  });
+
+  it('should match snapshot', () => {
+    const { toJSON } = render(<SwipeRating />); //to ensure default props are not changed
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should render with custom props', () => {
+    const ratingsCount = 9;
+
+    const { getAllByTestId } = render(
+      <SwipeRating ratingCount={ratingsCount} />
+    );
+    const stars = getAllByTestId('RNVUI__Star');
+    expect(stars).toHaveLength(ratingsCount);
+  });
+
+  it('should render with different type', () => {
+    const heartImage = require('../images/heart.png');
+    const { getAllByTestId } = render(<SwipeRating type="heart" />);
+    const swipeRatings = getAllByTestId('RNVUI__Star-image');
+
+    swipeRatings.forEach((swipeRating) => {
+      expect(swipeRating.props.source).toEqual(heartImage); // Check if the image source is the heart image
+    });
+  });
+
+  // it('should render with custom image', () => {
+  //   const customImage = require('../images/bell.png');
+  //   const { getAllByTestId } = render(
+  //     <SwipeRating type="custom" ratingImage={customImage} />
+  //   );
+  //   const swipeRatings = getAllByTestId('RNVUI__Star-image');
+
+  //   swipeRatings.forEach((swipeRating) => {
+  //     expect(swipeRating.props.source).toEqual(customImage); // Check if the image source is the custom image
+  //   });
+  // });
+
+  it('should render with custom star color', () => {
+    const customStarColor = 'red';
+    const { getAllByTestId } = render(
+      <SwipeRating ratingColor={customStarColor} />
+    );
+    const stars = getAllByTestId('RNVUI__Star-image');
+    stars.forEach((star) => {
+      expect(star.props.style.tintColor).toBe(customStarColor);
+    });
+  });
+
+  it('should render with custom star size', () => {
+    const customStarSize = 50;
+    const { getAllByTestId } = render(
+      <SwipeRating imageSize={customStarSize} />
+    );
+    const stars = getAllByTestId('RNVUI__Star-image');
+    stars.forEach((star) => {
+      expect(star.props.style.width).toBe(customStarSize);
+      expect(star.props.style.height).toBe(customStarSize);
+    });
+  });
+
+  it('should show the correct number of stars', () => {
+    const ratingsCount = 5;
+    const { getAllByTestId } = render(
+      <SwipeRating ratingCount={ratingsCount} />
+    );
+    const stars = getAllByTestId('RNVUI__Star');
+    expect(stars).toHaveLength(ratingsCount);
+  });
+
+  //show rating should show the text
+  it('should show the correct rating text', () => {
+    const ratingsCount = 5;
+    const { getByTestId } = render(
+      <SwipeRating ratingCount={ratingsCount} showRating />
+    );
+    const ratingText = getByTestId('RNVUI__SwipeRating-showRating');
+    expect(ratingText).toBeTruthy();
+  });
+});