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

Author: huqiaoli

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();
+  });
+});