diff --git a/packages/patternfly-4/react-core/src/components/TextInput/TextInput.tsx b/packages/patternfly-4/react-core/src/components/TextInput/TextInput.tsx index 62acfe623f3..57ad8e4d0eb 100644 --- a/packages/patternfly-4/react-core/src/components/TextInput/TextInput.tsx +++ b/packages/patternfly-4/react-core/src/components/TextInput/TextInput.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/FormControl/form-control'; -import { css, getModifier } from '@patternfly/react-styles'; +import { css } from '@patternfly/react-styles'; import { Omit, withInnerRef } from '../../helpers' import { ValidatedOptions } from '../../helpers/constants'; +import { InjectedOuiaProps, withOuiaContext } from '../withOuia'; export enum TextInputTypes { text = 'text', @@ -57,8 +58,8 @@ export interface TextInputProps extends Omit, innerRef?: React.Ref; } -class TextInputBase extends React.Component { - static defaultProps: TextInputProps = { +class TextInputBase extends React.Component { + static defaultProps = { 'aria-label': null as string, className: '', isRequired: false, @@ -68,9 +69,9 @@ class TextInputBase extends React.Component { isReadOnly: false, type: TextInputTypes.text, onChange: (): any => undefined - }; + } as TextInputProps; - constructor(props: TextInputProps) { + constructor(props: TextInputProps & InjectedOuiaProps) { super(props); if (!props.id && !props['aria-label'] && !props['aria-labelledby']) { // tslint:disable-next-line:no-console @@ -80,7 +81,7 @@ class TextInputBase extends React.Component { handleChange = (event: React.FormEvent) => { if (this.props.onChange) { - this.props.onChange(event.currentTarget.value, event); + this.props.onChange((event.target as HTMLInputElement).value, event); } }; @@ -96,6 +97,8 @@ class TextInputBase extends React.Component { isReadOnly, isRequired, isDisabled, + ouiaContext, + ouiaId, ...props } = this.props; return ( @@ -114,10 +117,15 @@ class TextInputBase extends React.Component { disabled={isDisabled} readOnly={isReadOnly} ref={innerRef} + {...(ouiaContext.isOuia && { + 'data-ouia-component-type': 'TextInput', + 'data-ouia-component-ns': 'PF4', + 'data-ouia-component-id': ouiaId || ouiaContext.ouiaId + })} /> ); } } -const TextInputFR = withInnerRef(TextInputBase) -export { TextInputFR as TextInput, TextInputBase } \ No newline at end of file +const TextInputFR = withInnerRef(withOuiaContext(TextInputBase)) +export { TextInputFR as TextInput, TextInputBase } diff --git a/packages/patternfly-4/react-core/src/components/TextInput/__tests__/TextInput.test.js b/packages/patternfly-4/react-core/src/components/TextInput/__tests__/TextInput.test.js index 66b527b8f0b..b70cb82583a 100644 --- a/packages/patternfly-4/react-core/src/components/TextInput/__tests__/TextInput.test.js +++ b/packages/patternfly-4/react-core/src/components/TextInput/__tests__/TextInput.test.js @@ -1,6 +1,6 @@ import React from 'react'; -import { mount, shallow } from 'enzyme'; -import { TextInput,TextInputBase } from '../TextInput'; +import { mount } from 'enzyme'; +import { TextInput } from '../TextInput'; import { ValidatedOptions } from '../../../helpers/constants'; const props = { @@ -11,11 +11,12 @@ const props = { test('input passes value and event to onChange handler', () => { const newValue = 'new test input'; const event = { - currentTarget: { value: newValue } + target: { value: newValue } }; - const view = shallow(); + const view = mount(); view.find('input').simulate('change', event); - expect(props.onChange).toBeCalledWith(newValue, event); + expect(props.onChange.mock.calls[0][0]).toBe(newValue); + expect(props.onChange.mock.calls[0][1]).toMatchObject(event); }); test('simple text input', () => { @@ -45,7 +46,7 @@ test('validated text input success', () => { }); test('validated text input', () => { - const view = shallow(); + const view = mount(); expect(view).toMatchSnapshot(); }); diff --git a/packages/patternfly-4/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.js.snap b/packages/patternfly-4/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.js.snap index c1ea0a65dea..151ab65826c 100644 --- a/packages/patternfly-4/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.js.snap +++ b/packages/patternfly-4/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.js.snap @@ -56,20 +56,70 @@ exports[`simple text input 1`] = ` `; exports[`validated text input 1`] = ` - +> + + + + + + + + `; exports[`validated text input success 1`] = ` @@ -80,31 +130,61 @@ exports[`validated text input success 1`] = ` validated="success" value="test input" > - - - + + + + + + `;