test(rating): update test

hyochan · Nov 18, 2020 · efc05bc · efc05bc
1 parent 06617f5
commit efc05bc
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 42 deletions.
diff --git a/main/Rating/index.tsx b/main/Rating/index.tsx
@@ -2,12 +2,16 @@ import React, { useMemo } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import styled from 'styled-components/native';
 
+interface CustomItem {
+  onComponent: React.ReactElement;
+  offComponent: React.ReactElement;
+}
 interface Props {
   total: number;
   value: number;
   onChange?: (value: number) => void;
   disabled?: boolean;
-  customItem?: CustomStar;
+  customItem?: CustomItem;
   containerStyle?: StyleProp<ViewStyle>;
 }
 
@@ -24,11 +28,6 @@ interface StarProps {
   customItem?: CustomItem;
 }
 
-interface CustomItem {
-  onComponent: React.ReactElement;
-  offComponent: React.ReactElement;
-}
-
 const ContainerWrapper = styled.View<ContainerWrapperProps>`
   width: ${({ total }): number => total * 30}px;
   flex-direction: row;

diff --git a/main/__tests__/Rating.test.tsx b/main/__tests__/Rating.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Rating } from '../../main';
 // Note: test renderer must be required after react-native.
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
+import { Rating } from '../../main';
 import renderer from 'react-test-renderer';
 
 const defaultProps = {
@@ -69,5 +69,29 @@ describe('[Rating] render', () => {
       expect(rendered).toMatchSnapshot();
       expect(rendered).toBeTruthy();
     });
+
+    it('should simulate customItem and containerStyle props', (): void => {
+      const rendered = renderer.create(
+        component({
+          ...defaultProps,
+          customItem: {
+            onComponent: <View />,
+            offComponent: <View />,
+          },
+          containerStyle: {
+            width: 300,
+          },
+          testID: 'RATING_ID',
+        }),
+      );
+
+      rendered.update(component({ value: 3 }));
+      expect(rendered).toMatchSnapshot();
+      expect(rendered).toBeTruthy();
+
+      rendered.update(component({ disabled: true }));
+      expect(rendered).toMatchSnapshot();
+      expect(rendered).toBeTruthy();
+    });
   });
 });
diff --git a/main/__tests__/__snapshots__/Rating.test.tsx.snap b/main/__tests__/__snapshots__/Rating.test.tsx.snap
@@ -1,14 +1,114 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`[Rating] render [Rating] Interaction should simulate customItem and containerStyle props 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "opacity": 1,
+        "width": "NaNpx",
+      },
+    ]
+  }
+>
+  <View
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "opacity": 1,
+      }
+    }
+  >
+    <Image
+      resizeMode="contain"
+      source={
+        Object {
+          "testUri": "../../../main/__assets__/star_s.png",
+        }
+      }
+      style={
+        Array [
+          Object {
+            "height": 30,
+            "width": 30,
+          },
+        ]
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`[Rating] render [Rating] Interaction should simulate customItem and containerStyle props 2`] = `
+<View
+  disabled={true}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "opacity": 0.5,
+        "width": "NaNpx",
+      },
+    ]
+  }
+>
+  <View
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "opacity": 1,
+      }
+    }
+  >
+    <Image
+      resizeMode="contain"
+      source={
+        Object {
+          "testUri": "../../../main/__assets__/star_d.png",
+        }
+      }
+      style={
+        Array [
+          Object {
+            "height": 30,
+            "width": 30,
+          },
+        ]
+      }
+    />
+  </View>
+</View>
+`;
+
 exports[`[Rating] render [Rating] Interaction should simulate props 1`] = `
 <View
   style={
     Array [
       Object {
         "alignItems": "center",
         "flexDirection": "row",
-        "height": 30,
-        "justifyContent": "center",
+        "justifyContent": "space-between",
         "opacity": 1,
         "width": "NaNpx",
       },
@@ -27,9 +127,7 @@ exports[`[Rating] render [Rating] Interaction should simulate props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "height": "100%",
         "opacity": 1,
-        "width": 30,
       }
     }
   >
@@ -43,8 +141,8 @@ exports[`[Rating] render [Rating] Interaction should simulate props 1`] = `
       style={
         Array [
           Object {
-            "height": "100%",
-            "width": "100%",
+            "height": 30,
+            "width": 30,
           },
         ]
       }
@@ -61,8 +159,7 @@ exports[`[Rating] render [Rating] Interaction should simulate props 2`] = `
       Object {
         "alignItems": "center",
         "flexDirection": "row",
-        "height": 30,
-        "justifyContent": "center",
+        "justifyContent": "space-between",
         "opacity": 0.5,
         "width": "NaNpx",
       },
@@ -81,9 +178,7 @@ exports[`[Rating] render [Rating] Interaction should simulate props 2`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "height": "100%",
         "opacity": 1,
-        "width": 30,
       }
     }
   >
@@ -97,8 +192,8 @@ exports[`[Rating] render [Rating] Interaction should simulate props 2`] = `
       style={
         Array [
           Object {
-            "height": "100%",
-            "width": "100%",
+            "height": 30,
+            "width": 30,
           },
         ]
       }
@@ -114,8 +209,7 @@ exports[`[Rating] render renders without crashing 1`] = `
       Object {
         "alignItems": "center",
         "flexDirection": "row",
-        "height": 30,
-        "justifyContent": "center",
+        "justifyContent": "space-between",
         "opacity": 1,
         "width": 150,
       },
@@ -135,9 +229,7 @@ exports[`[Rating] render renders without crashing 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "height": "100%",
         "opacity": 1,
-        "width": 30,
       }
     }
   >
@@ -151,8 +243,8 @@ exports[`[Rating] render renders without crashing 1`] = `
       style={
         Array [
           Object {
-            "height": "100%",
-            "width": "100%",
+            "height": 30,
+            "width": 30,
           },
         ]
       }
@@ -170,9 +262,7 @@ exports[`[Rating] render renders without crashing 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "height": "100%",
         "opacity": 1,
-        "width": 30,
       }
     }
   >
@@ -186,8 +276,8 @@ exports[`[Rating] render renders without crashing 1`] = `
       style={
         Array [
           Object {
-            "height": "100%",
-            "width": "100%",
+            "height": 30,
+            "width": 30,
           },
         ]
       }
@@ -205,9 +295,7 @@ exports[`[Rating] render renders without crashing 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "height": "100%",
         "opacity": 1,
-        "width": 30,
       }
     }
   >
@@ -221,8 +309,8 @@ exports[`[Rating] render renders without crashing 1`] = `
       style={
         Array [
           Object {
-            "height": "100%",
-            "width": "100%",
+            "height": 30,
+            "width": 30,
           },
         ]
       }
@@ -240,9 +328,7 @@ exports[`[Rating] render renders without crashing 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "height": "100%",
         "opacity": 1,
-        "width": 30,
       }
     }
   >
@@ -256,8 +342,8 @@ exports[`[Rating] render renders without crashing 1`] = `
       style={
         Array [
           Object {
-            "height": "100%",
-            "width": "100%",
+            "height": 30,
+            "width": 30,
           },
         ]
       }
@@ -275,9 +361,7 @@ exports[`[Rating] render renders without crashing 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "height": "100%",
         "opacity": 1,
-        "width": 30,
       }
     }
   >
@@ -291,8 +375,8 @@ exports[`[Rating] render renders without crashing 1`] = `
       style={
         Array [
           Object {
-            "height": "100%",
-            "width": "100%",
+            "height": 30,
+            "width": 30,
           },
         ]
       }