87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import {fireEvent, render, within} from '@testing-library/react-native';
|
|
import React, {type ComponentProps} from 'react';
|
|
import {View, Text} from 'react-native';
|
|
|
|
import {Preferences} from '@constants';
|
|
|
|
import Button from './index';
|
|
|
|
describe('components/button', () => {
|
|
const getBaseProps = (): ComponentProps<typeof Button> => ({
|
|
onPress: jest.fn(),
|
|
text: 'Test Button',
|
|
theme: Preferences.THEMES.denim,
|
|
testID: 'test-button',
|
|
});
|
|
|
|
it('should render button with text', () => {
|
|
const props = getBaseProps();
|
|
const {getByText} = render(<Button {...props}/>);
|
|
|
|
expect(getByText('Test Button')).toBeTruthy();
|
|
});
|
|
|
|
it('should handle onPress', () => {
|
|
const props = getBaseProps();
|
|
const {getByTestId} = render(<Button {...props}/>);
|
|
|
|
fireEvent.press(getByTestId('test-button'));
|
|
expect(props.onPress).toHaveBeenCalled();
|
|
});
|
|
|
|
it('should render with icon', () => {
|
|
const props = getBaseProps();
|
|
props.iconName = 'close';
|
|
const {getByTestId} = render(<Button {...props}/>);
|
|
|
|
// CompassIcon renders as a Text node with the unicode glyph as children;
|
|
// name is consumed internally and does not appear on the rendered props.
|
|
const icon = getByTestId('test-button-icon');
|
|
expect(icon).toBeTruthy();
|
|
expect(icon.props.children).toContain(String.fromCodePoint(0xf0156));
|
|
});
|
|
|
|
it('should render disabled button', () => {
|
|
const props = getBaseProps();
|
|
props.disabled = true;
|
|
const {getByTestId} = render(<Button {...props}/>);
|
|
|
|
fireEvent.press(getByTestId('test-button'));
|
|
expect(props.onPress).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should render icon on the right', () => {
|
|
const props = getBaseProps();
|
|
props.isIconOnTheRight = false;
|
|
props.iconName = 'close';
|
|
|
|
const {getByTestId, rerender} = render(<Button {...props}/>);
|
|
|
|
const container = getByTestId('test-button-text-container');
|
|
|
|
// When icon is on the left, it should be the first child
|
|
expect(within(container.children[0] as any).getByTestId('test-button-icon')).toBeVisible();
|
|
|
|
props.isIconOnTheRight = true;
|
|
rerender(<Button {...props}/>);
|
|
|
|
// When icon is on the right, it should be the last child
|
|
expect(within(container.children[1] as any).getByTestId('test-button-icon')).toBeVisible();
|
|
});
|
|
|
|
it('should render custom icon component', () => {
|
|
const CustomIcon = () => (
|
|
<View testID='custom-icon'>
|
|
<Text>{'Custom Icon'}</Text>
|
|
</View>
|
|
);
|
|
const props = getBaseProps();
|
|
props.iconComponent = <CustomIcon/>;
|
|
const {getByTestId} = render(<Button {...props}/>);
|
|
|
|
expect(getByTestId('custom-icon')).toBeTruthy();
|
|
});
|
|
});
|