Merge pull request #483 from huqiaoli/dev

test(Radio):添加Radio测试用例

Author: ChenlingasMx

packages/core/src/Badge/README.md

@@ -47,22 +47,11 @@ export default Demo;
 
 继承 [View](https://facebook.github.io/react-native/docs/view#props) 组件。
 
-```ts
-import { ViewProps } from 'react-native';
-
-export interface BadgeProps extends ViewProps {
-  children?: React.ReactNode;
-  /** 标记颜色 */
-  color?: colors.Colors | string;
-  /** 文本内容 */
-  text?: string | Element;
-  /**
-   * 设置圆角，默认 `12`
-   */
-  rounded?: number;
-  /** 设置类型 */
-  type?: 'dot' | 'text';
-  /** 文本样式 */
-  textStyles?: StyleProp<TextStyle>;
-}
-```
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| color | 标记颜色 | `colors.Colors \| string` | - |
+| text | 文本内容 | `string \| Element` | - |
+| rounded | 设置圆角 | `boolean \| number` | `12` |
+| textStyles | 文本样式 | `StyleProp<TextStyle>` | - |
+| type | 设置类型 | `'dot' \| 'text'` | - |
+| children | 更多内容 | `React.ReactNode` | - |

packages/core/src/Radio/index.tsx

@@ -132,10 +132,21 @@ export default class Radio extends Component<RadioProps, RadioState> {
     const backgroundColor = disabled ? color : checkedColor;
     const borderColor = disabled ? color : bdColor;
     return (
-      <View style={[styles.defalut, style]} {...otherProps}>
-        <TouchableOpacity disabled={disabled} style={[styles.touch]} onPress={this.handlePress}>
-          <Animated.View style={[styles.checkBg, { width: circleSize, height: circleSize, borderColor }]}>
-            <Animated.View style={[styles.check, { width: sizeValue, height: sizeValue, backgroundColor }]} />
+      <View testID="RNE__Radio__wrap" style={[styles.defalut, style]} {...otherProps}>
+        <TouchableOpacity
+          disabled={disabled}
+          style={[styles.touch]}
+          onPress={this.handlePress}
+          testID="RNE__Radio__view"
+        >
+          <Animated.View
+            style={[styles.checkBg, { width: circleSize, height: circleSize, borderColor }]}
+            testID="RNE__Radio__border"
+          >
+            <Animated.View
+              style={[styles.check, { width: sizeValue, height: sizeValue, backgroundColor }]}
+              testID="RNE__Radio__box"
+            />
           </Animated.View>
           {this.props.children && (
             <MaybeTextOrView

test-ci/src/__tests__/radio.tsx

@@ -0,0 +1,47 @@
+import 'react-native';
+import React from 'react';
+import Radio from '../lib/Radio';
+import { render, fireEvent } from '@testing-library/react-native';
+
+describe('Radio', () => {
+  it('disabled', () => {
+    const { getByTestId } = render(<Radio disabled />);
+    const component = getByTestId('RNE__Radio__view');
+    expect(component.props.accessibilityState.disabled).toBe(true);
+  });
+
+  it('borderColor', () => {
+    const { getByTestId } = render(<Radio borderColor="#bdc1cc" />);
+    const component = getByTestId('RNE__Radio__border');
+    expect(component.props.style.borderColor).toBe('#bdc1cc');
+  });
+
+  it('checkedColor', () => {
+    const { getByTestId } = render(<Radio checkedColor="#008EF0" />);
+    const component = getByTestId('RNE__Radio__box');
+    expect(component.props.style.backgroundColor).toBe('#008EF0');
+  });
+
+  it('circleSize', () => {
+    const { getByTestId } = render(<Radio circleSize={21} />);
+    const component = getByTestId('RNE__Radio__border');
+    expect(component.props.style.width).toBe(21);
+    expect(component.props.style.height).toBe(21);
+  });
+
+  it('onPress events', () => {
+    const fn = jest.fn();
+    const { getByTestId } = render(<Radio onPress={fn} />);
+    const component = getByTestId('RNE__Radio__view');
+    fireEvent(component, 'press');
+    expect(fn).toHaveBeenCalled();
+  });
+
+  it('disabled onPress events', () => {
+    const fn = jest.fn();
+    const { getByTestId } = render(<Radio disabled onPress={fn} />);
+    const component = getByTestId('RNE__Radio__view');
+    fireEvent(component, 'press');
+    expect(fn).not.toHaveBeenCalled();
+  });
+});