diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx index e537f5832b..193cd4477a 100644 --- a/example/src/Examples/TextInputExample.tsx +++ b/example/src/Examples/TextInputExample.tsx @@ -468,6 +468,13 @@ const TextInputExample = () => { label="Custom rounded input" /> + + + ); diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx index 774b7f302d..26c361eb7c 100644 --- a/src/components/TextInput/TextInputOutlined.tsx +++ b/src/components/TextInput/TextInputOutlined.tsx @@ -295,6 +295,7 @@ class TextInputOutlined extends React.Component { { labelBackground={LabelBackground} /> {render?.({ + testID: 'text-input-outlined', ...rest, ref: innerRef, onChangeText, @@ -365,6 +367,7 @@ export default TextInputOutlined; type OutlineProps = { activeColor: string; hasActiveOutline?: boolean; + focused?: boolean; outlineColor?: string; backgroundColor: ColorValue; theme: ReactNativePaper.Theme; @@ -375,9 +378,11 @@ const Outline = ({ hasActiveOutline, activeColor, outlineColor, + focused, backgroundColor, }: OutlineProps) => ( { expect(toJSON()).toMatchSnapshot(); }); + +it('correctly applies error state Outline TextInput', () => { + const { getByTestId } = render( + + ); + + const outline = getByTestId('text-input-outline'); + expect(outline.props.style).toEqual( + expect.arrayContaining([expect.objectContaining({ borderWidth: 1 })]) + ); +}); + +it('correctly applies focused state Outline TextInput', () => { + const { getByTestId } = render( + + ); + + const outline = getByTestId('text-input-outline'); + expect(outline.props.style).toEqual( + expect.arrayContaining([expect.objectContaining({ borderWidth: 1 })]) + ); + + fireEvent(getByTestId('text-input-outlined'), 'focus'); + + expect(outline.props.style).toEqual( + expect.arrayContaining([expect.objectContaining({ borderWidth: 2 })]) + ); +}); diff --git a/src/components/__tests__/__snapshots__/TextInput.test.js.snap b/src/components/__tests__/__snapshots__/TextInput.test.js.snap index da38a1fc70..f9f5401782 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.js.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.js.snap @@ -201,6 +201,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` }, ] } + testID="text-input-outline" />