fix resolve conflict

Author: ff

test-ci/package.json

@@ -17,30 +17,31 @@
     "@babel/core": "^7.20.7",
     "@babel/runtime": "^7.20.7",
     "@react-native-community/eslint-config": "^2.0.0",
+    "@testing-library/react-native": "^11.5.0",
     "@tsconfig/react-native": "^2.0.2",
+    "@types/color": "~3.0.3",
     "@types/jest": "^26.0.23",
+    "@types/lodash": "4.14.172",
     "@types/react": "^18.0.21",
     "@types/react-native": "^0.70.6",
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.37.0",
     "@typescript-eslint/parser": "^5.37.0",
-    "babel-jest": "^26.6.3",
-    "eslint": "^7.32.0",
-    "jest": "^26.6.3",
-    "metro-react-native-babel-preset": "0.73.6",
-    "react-test-renderer": "18.1.0",
-    "typescript": "^4.8.3",
-    "@types/color": "~3.0.3",
-    "@types/lodash": "4.14.172",
     "@uiw/icons": "2.5.3",
     "@validator.tool/hook": "2.2.4",
     "ahooks": "2.10.14",
+    "babel-jest": "^26.6.3",
     "color": "4.2.3",
+    "eslint": "^7.32.0",
+    "jest": "^26.6.3",
     "lodash": "4.17.21",
+    "metro-react-native-babel-preset": "0.72.3",
     "prop-types": "15.7.2",
     "react-native-gesture-handler": "2.8.0",
     "react-native-root-siblings": "4.1.1",
-    "react-native-svg": "12.1.1"
+    "react-native-svg": "12.1.1",
+    "react-test-renderer": "18.1.0",
+    "typescript": "^4.8.3"
   },
   "jest": {
     "preset": "react-native",
@@ -53,4 +54,4 @@
       "node"
     ]
   }
-}
+}

test-ci/src/__tests__/button.tsx

@@ -5,22 +5,48 @@
 import 'react-native';
 import React from 'react';
 import Button from '../lib/Button';
+import { colors } from '../lib/utils';
 // Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
-
-it('Button', () => {
-  // const component = TestRenderer.create(<Radio value="1">Radio</Radio>);
-  const component = renderer.create(
-    <Button type="primary" rounded disabled loading={true} size="large" bordered color="red">
-      按钮
-    </Button>,
-  );
-  expect(component.root.props.type).toBe('primary');
-  expect(component.root.props.color).toBe('red');
-  expect(component.root.props.rounded).toBeTruthy();
-  expect(component.root.props.disabled).toBeTruthy();
-  expect(component.root.props.loading).toBeTruthy();
-  expect(component.root.props.bordered).toBeTruthy();
-  expect(component.root.props.size).toBe('large');
-  expect(component.root.props.children).toBe('按钮');
+import TestRenderer from 'react-test-renderer';
+import { colorRgb } from '../utils';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+
+describe('Button', () => {
+  test('renders with color', () => {
+    const testInstance = TestRenderer.create(
+      <>
+        <Button type="primary">主要按钮</Button>
+        <Button type="success">成功按钮</Button>
+        <Button color="#1EABCD">自定义颜色</Button>
+      </>,
+    ) as any;
+    expect(testInstance.toJSON()[0].props.style.backgroundColor).toBe(colorRgb(colors.blue));
+    expect(testInstance.toJSON()[1].props.style.backgroundColor).toBe(colorRgb(colors.green));
+    expect(testInstance.toJSON()[2].props.style.backgroundColor).toBe(colorRgb('#1EABCD'));
+  });
+  test('loading with ActivityIndicator', () => {
+    const testInstance = TestRenderer.create(<Button loading>加载中按钮</Button>) as any;
+    const testRoot = testInstance.root;
+
+    expect(testRoot.props.loading).toBeTruthy();
+    expect(testInstance.toJSON().children[0].type).toBe('ActivityIndicator');
+  });
+
+  // test('renders with onClick', () => {
+  //   const DefaultButton = () => {
+  //     const [loading, setLoading] = React.useState(true)
+  //     return (
+  //       <Button onPress={() => setLoading(false)} loading={loading}>
+  //         click loading
+  //       </Button>
+  //     )
+  //   }
+
+  //   render(<DefaultButton />);
+
+  //   const { getByText } = render(<DefaultButton />)
+
+  //   const btn = getByText('click loading')
+
+  // })
 });

test-ci/src/utils.ts

@@ -0,0 +1,24 @@
+const colorRgb = (color: string): string => {
+  var sColor = color.toLowerCase();
+  //十六进制颜色值的正则表达式
+  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+  // 如果是16进制颜色
+  if (sColor && reg.test(sColor)) {
+    if (sColor.length === 4) {
+      var sColorNew = '#';
+      for (var i = 1; i < 4; i += 1) {
+        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
+      }
+      sColor = sColorNew;
+    }
+    //处理六位的颜色值
+    var sColorChange = [];
+    for (var i = 1; i < 7; i += 2) {
+      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)));
+    }
+    return 'rgb(' + sColorChange.join(', ') + ')';
+  }
+  return sColor;
+};
+
+export { colorRgb };