|
1 | | -/** |
2 | | - * @format |
3 | | - */ |
4 | | - |
5 | 1 | import 'react-native'; |
6 | 2 | import React from 'react'; |
7 | 3 | import Button from '../lib/Button'; |
8 | 4 | import { colors } from '../lib/utils'; |
9 | | -// Note: test renderer must be required after react-native. |
10 | | -import TestRenderer from 'react-test-renderer'; |
11 | | -import { colorRgb } from '../utils'; |
12 | | -import { render, screen, fireEvent } from '@testing-library/react-native'; |
| 5 | +import { ActivityIndicator } from 'react-native'; |
| 6 | +import { render, fireEvent } from '@testing-library/react-native'; |
| 7 | +import { keys, colorRgb, toObject } from '../utils'; |
| 8 | + |
| 9 | +const TYPES: keys = { |
| 10 | + primary: colors.blue, |
| 11 | + success: colors.green, |
| 12 | + warning: colors.yellow, |
| 13 | + danger: colors.red, |
| 14 | + light: colors.white, |
| 15 | + dark: colors.black, |
| 16 | +}; |
| 17 | + |
| 18 | +const SIZES: keys = { small: 3, default: 8, large: 10 }; |
13 | 19 |
|
14 | 20 | describe('Button', () => { |
15 | | - test('renders with color', () => { |
16 | | - const testInstance = TestRenderer.create( |
17 | | - <> |
18 | | - <Button type="primary">主要按钮</Button> |
19 | | - <Button type="success">成功按钮</Button> |
20 | | - <Button color="#1EABCD">自定义颜色</Button> |
21 | | - </>, |
22 | | - ) as any; |
23 | | - expect(testInstance.toJSON()[0].props.style.backgroundColor).toBe(colorRgb(colors.blue)); |
24 | | - expect(testInstance.toJSON()[1].props.style.backgroundColor).toBe(colorRgb(colors.green)); |
25 | | - expect(testInstance.toJSON()[2].props.style.backgroundColor).toBe(colorRgb('#1EABCD')); |
26 | | - }); |
27 | | - test('loading with ActivityIndicator', () => { |
28 | | - const testInstance = TestRenderer.create(<Button loading>加载中按钮</Button>) as any; |
29 | | - const testRoot = testInstance.root; |
30 | | - |
31 | | - expect(testRoot.props.loading).toBeTruthy(); |
32 | | - expect(testInstance.toJSON().children[0].type).toBe('ActivityIndicator'); |
33 | | - }); |
34 | | - |
35 | | - // test('renders with onClick', () => { |
36 | | - // const DefaultButton = () => { |
37 | | - // const [loading, setLoading] = React.useState(true) |
38 | | - // return ( |
39 | | - // <Button onPress={() => setLoading(false)} loading={loading}> |
40 | | - // click loading |
41 | | - // </Button> |
42 | | - // ) |
43 | | - // } |
44 | | - |
45 | | - // render(<DefaultButton />); |
46 | | - |
47 | | - // const { getByText } = render(<DefaultButton />) |
48 | | - |
49 | | - // const btn = getByText('click loading') |
50 | | - |
51 | | - // }) |
| 21 | + it('color', () => { |
| 22 | + const { getByTestId } = render(<Button color="#1EABCD">自定义颜色</Button>); |
| 23 | + const component = getByTestId('RNE__Button__wrap'); |
| 24 | + expect(component.props.style.backgroundColor).toBe(colorRgb('#1EABCD')); |
| 25 | + }); |
| 26 | + |
| 27 | + it('disabled', () => { |
| 28 | + const { getByTestId } = render(<Button disabled>disabled</Button>); |
| 29 | + const component = getByTestId('RNE__Button__wrap'); |
| 30 | + expect(component.props.accessibilityState.disabled).toBe(true); |
| 31 | + }); |
| 32 | + |
| 33 | + it('border', () => { |
| 34 | + const { getByTestId } = render(<Button bordered={false}>bordered</Button>); |
| 35 | + const component = getByTestId('RNE__Button__wrap'); |
| 36 | + expect(component.props.style.borderWidth).toBe(0); |
| 37 | + }); |
| 38 | + |
| 39 | + it('loading', () => { |
| 40 | + const { UNSAFE_getByType } = render(<Button loading>loading</Button>); |
| 41 | + const icons = UNSAFE_getByType(ActivityIndicator); |
| 42 | + expect(icons.props.size).toBe(16); |
| 43 | + }); |
| 44 | + |
| 45 | + it('rounded', () => { |
| 46 | + const { getByTestId } = render(<Button rounded={20}>rounded</Button>); |
| 47 | + const component = getByTestId('RNE__Button__wrap'); |
| 48 | + expect(component.props.style.borderRadius).toBe(20); |
| 49 | + }); |
| 50 | + |
| 51 | + it('textStyle', () => { |
| 52 | + const { getByTestId } = render(<Button textStyle={{ fontSize: 20 }}>textStyle</Button>); |
| 53 | + const component = getByTestId('RNE__Button__div'); |
| 54 | + const styles = toObject(component.props.style); |
| 55 | + expect(styles.fontSize).toBe(20); |
| 56 | + }); |
| 57 | + |
| 58 | + it('type', () => { |
| 59 | + const { getByTestId } = render(<Button type="success">success</Button>); |
| 60 | + const component = getByTestId('RNE__Button__wrap'); |
| 61 | + expect(component.props.style.backgroundColor).toBe(colorRgb(colors.green)); |
| 62 | + }); |
| 63 | + |
| 64 | + describe.each` |
| 65 | + type |
| 66 | + ${'primary'} |
| 67 | + ${'success'} |
| 68 | + ${'warning'} |
| 69 | + ${'danger'} |
| 70 | + ${'light'} |
| 71 | + ${'dark'} |
| 72 | + `('$type', ({ type }) => { |
| 73 | + it(`should display type ${type} button`, () => { |
| 74 | + const { getByTestId } = render(<Button type={type}>{type}</Button>); |
| 75 | + const component = getByTestId('RNE__Button__wrap'); |
| 76 | + expect(component.props.style.backgroundColor).toBe(colorRgb(TYPES[type])); |
| 77 | + }); |
| 78 | + }); |
| 79 | + |
| 80 | + describe.each` |
| 81 | + size |
| 82 | + ${'small'} |
| 83 | + ${'default'} |
| 84 | + ${'large'} |
| 85 | + `('$size', ({ size }) => { |
| 86 | + it(`should display size ${size} button`, () => { |
| 87 | + const { getByTestId } = render(<Button size={size}>{size}</Button>); |
| 88 | + const component = getByTestId('RNE__Button__wrap'); |
| 89 | + expect(component.props.style.paddingHorizontal).toBe(SIZES[size]); |
| 90 | + }); |
| 91 | + }); |
| 92 | + |
| 93 | + it('onPress events', () => { |
| 94 | + const fn = jest.fn(); |
| 95 | + const { getByTestId } = render(<Button onPress={fn}>onPress</Button>); |
| 96 | + const component = getByTestId('RNE__Button__wrap'); |
| 97 | + fireEvent(component, 'press'); |
| 98 | + expect(fn).toHaveBeenCalled(); |
| 99 | + }); |
| 100 | + |
| 101 | + it('onPress events if disabled', () => { |
| 102 | + const fn = jest.fn(); |
| 103 | + const { getByTestId } = render( |
| 104 | + <Button disabled onPress={fn}> |
| 105 | + onPress |
| 106 | + </Button>, |
| 107 | + ); |
| 108 | + const component = getByTestId('RNE__Button__wrap'); |
| 109 | + fireEvent(component, 'press'); |
| 110 | + expect(fn).not.toHaveBeenCalled(); |
| 111 | + }); |
52 | 112 | }); |
0 commit comments