verdnatura-chat/app/containers/SearchBox/SearchBox.test.tsx

46 lines
1.8 KiB
TypeScript

import React from 'react';
import { fireEvent, render } from '@testing-library/react-native';
import { TextInputProps } from 'react-native';
import SearchBox from '.';
const onChangeTextMock = jest.fn();
const testSearchInputs = {
onChangeText: onChangeTextMock,
testID: 'search-box-text-input'
};
const Render = ({ onChangeText, testID }: TextInputProps) => <SearchBox testID={testID} onChangeText={onChangeText} />;
describe('SearchBox', () => {
it('should render the searchbox component', () => {
const { findByTestId } = render(<Render onChangeText={testSearchInputs.onChangeText} testID={testSearchInputs.testID} />);
expect(findByTestId('searchbox')).toBeTruthy();
});
it('should not render clear-input icon', async () => {
const { queryByTestId } = render(<Render onChangeText={testSearchInputs.onChangeText} testID={testSearchInputs.testID} />);
const clearInput = await queryByTestId('clear-text-input');
expect(clearInput).toBeNull();
});
it('should input new value with onChangeText function', async () => {
const { findByTestId } = render(<Render onChangeText={onChangeTextMock} testID={testSearchInputs.testID} />);
const component = await findByTestId(testSearchInputs.testID);
fireEvent.changeText(component, 'new-input-value');
expect(onChangeTextMock).toHaveBeenCalledWith('new-input-value');
});
// we need skip this test for now, until discovery how handle with functions effect
// https://github.com/callstack/react-native-testing-library/issues/978
it.skip('should clear input when call onCancelSearch function', async () => {
const { findByTestId } = render(<Render testID={'input-with-value'} onChangeText={onChangeTextMock} />);
const component = await findByTestId('clear-text-input');
fireEvent.press(component, 'input-with-value');
expect(onChangeTextMock).toHaveBeenCalledWith('input-with-value');
});
});