feat(TextInput): Added OUIA for TextInput

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<React.HTMLProps<HTMLInputElement>,
   innerRef?: React.Ref<any>;
 }
 
-class TextInputBase extends React.Component<TextInputProps> {
-  static defaultProps: TextInputProps = {
+class TextInputBase extends React.Component<TextInputProps & InjectedOuiaProps> {
+  static defaultProps = {
     'aria-label': null as string,
     className: '',
     isRequired: false,
@@ -68,9 +69,9 @@ class TextInputBase extends React.Component<TextInputProps> {
     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<TextInputProps> {
 
   handleChange = (event: React.FormEvent<HTMLInputElement>) => {
     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<TextInputProps> {
       isReadOnly,
       isRequired,
       isDisabled,
+      ouiaContext,
+      ouiaId,
       ...props
     } = this.props;
     return (
@@ -114,10 +117,15 @@ class TextInputBase extends React.Component<TextInputProps> {
         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<HTMLInputElement, TextInputProps>(TextInputBase)
-export { TextInputFR as TextInput, TextInputBase } 
+const TextInputFR = withInnerRef<HTMLInputElement, TextInputProps>(withOuiaContext(TextInputBase))
+export { TextInputFR as TextInput, TextInputBase } 

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(<TextInputBase {...props} aria-label="test input" />);
+  const view = mount(<TextInput {...props} aria-label="test input" />);
   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(<TextInput {...props} required validated={ValidatedOptions.error} aria-label="validated text input" />);
+  const view = mount(<TextInput {...props} required validated={ValidatedOptions.error} aria-label="validated text input" />);
   expect(view).toMatchSnapshot();
 });
 

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`] = `
-<TextInputBase
+<ForwardRef
   aria-label="validated text input"
-  className=""
-  innerRef={null}
-  isDisabled={false}
-  isReadOnly={false}
-  isRequired={false}
-  isValid={true}
   onChange={[MockFunction]}
   required={true}
-  type="text"
   validated="error"
   value="test input"
-/>
+>
+  <Component
+    aria-label="validated text input"
+    innerRef={null}
+    onChange={[MockFunction]}
+    required={true}
+    validated="error"
+    value="test input"
+  >
+    <ComponentWithOuia
+      component={[Function]}
+      componentProps={
+        Object {
+          "aria-label": "validated text input",
+          "innerRef": null,
+          "onChange": [MockFunction],
+          "required": true,
+          "validated": "error",
+          "value": "test input",
+        }
+      }
+      consumerContext={null}
+    >
+      <TextInputBase
+        aria-label="validated text input"
+        className=""
+        innerRef={null}
+        isDisabled={false}
+        isReadOnly={false}
+        isRequired={false}
+        isValid={true}
+        onChange={[MockFunction]}
+        ouiaContext={
+          Object {
+            "isOuia": false,
+            "ouiaId": null,
+          }
+        }
+        required={true}
+        type="text"
+        validated="error"
+        value="test input"
+      >
+        <input
+          aria-invalid={true}
+          aria-label="validated text input"
+          className="pf-c-form-control"
+          disabled={false}
+          onChange={[Function]}
+          readOnly={false}
+          required={false}
+          type="text"
+          value="test input"
+        />
+      </TextInputBase>
+    </ComponentWithOuia>
+  </Component>
+</ForwardRef>
 `;
 
 exports[`validated text input success 1`] = `
@@ -80,31 +130,61 @@ exports[`validated text input success 1`] = `
   validated="success"
   value="test input"
 >
-  <TextInputBase
+  <Component
     aria-label="validated text input"
-    className=""
     innerRef={null}
-    isDisabled={false}
-    isReadOnly={false}
-    isRequired={false}
-    isValid={true}
     onChange={[MockFunction]}
     required={true}
-    type="text"
     validated="success"
     value="test input"
   >
-    <input
-      aria-invalid={false}
-      aria-label="validated text input"
-      className="pf-c-form-control pf-m-success"
-      disabled={false}
-      onChange={[Function]}
-      readOnly={false}
-      required={false}
-      type="text"
-      value="test input"
-    />
-  </TextInputBase>
+    <ComponentWithOuia
+      component={[Function]}
+      componentProps={
+        Object {
+          "aria-label": "validated text input",
+          "innerRef": null,
+          "onChange": [MockFunction],
+          "required": true,
+          "validated": "success",
+          "value": "test input",
+        }
+      }
+      consumerContext={null}
+    >
+      <TextInputBase
+        aria-label="validated text input"
+        className=""
+        innerRef={null}
+        isDisabled={false}
+        isReadOnly={false}
+        isRequired={false}
+        isValid={true}
+        onChange={[MockFunction]}
+        ouiaContext={
+          Object {
+            "isOuia": false,
+            "ouiaId": null,
+          }
+        }
+        required={true}
+        type="text"
+        validated="success"
+        value="test input"
+      >
+        <input
+          aria-invalid={false}
+          aria-label="validated text input"
+          className="pf-c-form-control pf-m-success"
+          disabled={false}
+          onChange={[Function]}
+          readOnly={false}
+          required={false}
+          type="text"
+          value="test input"
+        />
+      </TextInputBase>
+    </ComponentWithOuia>
+  </Component>
 </ForwardRef>
 `;