fix(card): 增加card测试用例,修改组件样式 (#414)

* feat(result): 增加jest测试

* test(card): 增加card测试用例

Co-authored-by: shenzhiqing <shenzhiqing@nihaosi.com>

Author: 2 people

example/examples/src/routes/Card/index.tsx

@@ -12,8 +12,7 @@ const CardDemo = (props: any) => {
   const [loading, setLoad] = useState(true);
   const basicRender = (
     <Fragment>
-      <View
-        style={{display: 'flex', alignItems: 'center', flexDirection: 'row'}}>
+      <View style={{display: 'flex', alignItems: 'center', flexDirection: 'row'}}>
         <Image
           source={{
             uri: 'https://c-ssl.duitang.com/uploads/item/202004/13/20200413013923_25wds.jpeg',
@@ -35,9 +34,8 @@ const CardDemo = (props: any) => {
       </View>
       <View style={{marginTop: 10}}>
         <Text style={{color: '#20303C'}}>
-          Welcome to @uiw/react-native! Title two is a long title that will not
-          get cut by default, but can be limited, Title number three, Title
-          number four, Title number five!
+          Welcome to @uiw/react-native! Title two is a long title that will not get cut by default, but can be limited, Title number three, Title number four,
+          Title number five!
         </Text>
       </View>
       <Loader loading={loading}>
@@ -96,6 +94,7 @@ const CardDemo = (props: any) => {
         //   style: {
         //     borderColor: "#fd8a00",
         //   }
+        //   iconStyle: {alignItems: 'flex-end', justifyContent: 'flex-start'},
         // }}
       >
         {basicRender}

packages/core/src/Card/index.tsx

@@ -26,6 +26,7 @@ export type CardProps = {
   selectedStyle?: {
     icon?: React.ReactNode;
     style?: ViewStyle;
+    iconStyle?: ViewStyle;
   };
 };
 
@@ -40,6 +41,7 @@ const Card = ({
   selectedStyle = {
     icon: <Icon xml={checked} size={30} />,
     style: {},
+    iconStyle: {},
   },
   ...attributes
 }: CardProps) => {
@@ -66,7 +68,7 @@ const Card = ({
         ]}
         pointerEvents="none"
       >
-        <View style={styles.selectedIndicator}>{selectedStyle?.icon}</View>
+        <View style={[styles.selectedIndicator, selectedStyle?.iconStyle]}>{selectedStyle?.icon}</View>
       </Animated.View>
     );
   };
@@ -96,7 +98,7 @@ const Card = ({
 const styles = StyleSheet.create({
   container: {
     backgroundColor: colors.white,
-    borderWidth: 1,
+    // borderWidth: 1,
     padding: 15,
     margin: 15,
     marginBottom: 0,
@@ -120,7 +122,7 @@ const styles = StyleSheet.create({
     borderColor: colors.colorsPalette.violet30,
   },
   selectedIndicator: {
-    borderRadius: 999,
+    // borderRadius: 999,
     position: 'absolute',
     top: 0,
     right: 0,

test-ci/src/__tests__/card.tsx

@@ -0,0 +1,31 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import Card from '../lib/Card';
+import { Image } from 'react-native';
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('Card', () => {
+  const onPressMock = jest.fn();
+
+  const component = renderer.create(
+    <Card selected={true} borderRadius={12} onPress={onPressMock}>
+      <Image
+        source={{
+          uri: 'https://iknow-pic.cdn.bcebos.com/810a19d8bc3eb135828572d2ab1ea8d3fd1f441d',
+        }}
+        style={{ height: 200, marginTop: 10 }}
+      />
+    </Card>,
+  );
+  // 判断selected是否为真
+  expect(component.root.props.selected).toBeTruthy();
+  expect(component.root.props.borderRadius).toBe(12);
+  // 调用点击事件，确保模拟函数被调用的确切次数
+  component.root.props.onPress(onPressMock);
+  expect(onPressMock).toHaveBeenCalledTimes(1);
+});