Added OUIA compatibility to Select component

packages/patternfly-4/react-core/src/components/Select/Select.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { mount } from 'enzyme';
-import { Select } from './Select';
+import { Select, SelectProps } from './Select';
 import { SelectOption, SelectOptionObject } from './SelectOption';
 import { CheckboxSelectOption } from './CheckboxSelectOption';
 import { SelectGroup } from './SelectGroup';
@@ -116,7 +116,7 @@ describe('select', () => {
       );
       view.find('input').simulate('change', { target: { value: 'r' } });
       view.update();
-      expect((view.state('typeaheadFilteredChildren') as []).length).toBe(3);
+      expect((view.find('Select').state('typeaheadFilteredChildren') as []).length).toBe(3);
       expect(view).toMatchSnapshot();
     });
   });
@@ -240,7 +240,7 @@ describe('typeahead select', () => {
         {selectOptions}
       </Select>
     );
-    const inst = view.instance() as Select;
+    const inst = view.find('Select').instance() as any;
     inst.onChange(mockEvent);
     view.update();
     expect(view).toMatchSnapshot();
@@ -253,7 +253,7 @@ describe('typeahead select', () => {
         {selectOptions}
       </Select>
     );
-    const inst = view.instance() as Select;
+    const inst = view.find('Select').instance() as any;
     inst.onChange(mockEvent);
     view.update();
     expect(view).toMatchSnapshot();
@@ -307,7 +307,7 @@ describe('typeahead multi select', () => {
         {selectOptions}
       </Select>
     );
-    const inst = view.instance() as Select;
+    const inst = view.find('Select').instance() as any;
     inst.onChange(mockEvent);
     view.update();
     expect(view).toMatchSnapshot();

packages/patternfly-4/react-core/src/components/Select/Select.tsx

@@ -12,6 +12,7 @@ import { SelectContext, SelectVariant, SelectDirection } from './selectConstants
 import { Chip, ChipGroup } from '../ChipGroup';
 import { keyHandler, getNextIndex } from '../../helpers/util';
 import { Omit } from '../../helpers/typeUtils';
+import { InjectedOuiaProps, withOuiaContext } from '../withOuia';
 
 // seed for the aria-labelledby ID
 let currentId = 0;
@@ -89,7 +90,7 @@ export interface SelectState {
   creatableValue: string;
 }
 
-export class Select extends React.Component<SelectProps, SelectState> {
+class Select extends React.Component<SelectProps & InjectedOuiaProps, SelectState> {
   private parentRef = React.createRef<HTMLDivElement>();
   private refCollection: HTMLElement[] = [];
 
@@ -103,7 +104,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
     isPlain: false,
     isDisabled: false,
     isCreatable: false,
-    'aria-label': '',
+    "aria-label": '',
     ariaLabelledBy: '',
     ariaLabelTypeAhead: '',
     ariaLabelClear: 'Clear all',
@@ -115,12 +116,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
     noResultsFoundText: 'No results found',
     variant: SelectVariant.single,
     width: '',
-    maxHeight: '',
-    onClear: Function.prototype,
-    onCreateOption: Function.prototype,
+    onClear: (_e: React.MouseEvent) => undefined as void,
+    onCreateOption: (_newOptionValue: string) => undefined as void,
     toggleIcon: null as React.ReactElement,
-    onFilter: undefined as () => {}
-  };
+    onFilter: (_e: React.ChangeEvent<HTMLInputElement>) => undefined as void
+  } as Partial<SelectProps & InjectedOuiaProps>;
 
   state = {
     openedOnEnter: false,
@@ -165,7 +165,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
 
   onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { onFilter, isCreatable, onCreateOption, createText, noResultsFoundText } = this.props;
-    let typeaheadFilteredChildren;
+    let typeaheadFilteredChildren: any;
     if (onFilter) {
       typeaheadFilteredChildren = onFilter(e);
     } else {
@@ -183,6 +183,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
             )
           : React.Children.toArray(this.props.children);
     }
+    if (!typeaheadFilteredChildren) {
+      typeaheadFilteredChildren = [];
+    }
     if (typeaheadFilteredChildren.length === 0) {
       !isCreatable && typeaheadFilteredChildren.push(<SelectOption isDisabled key={0} value={noResultsFoundText} />);
     }
@@ -345,6 +348,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
       width,
       maxHeight,
       toggleIcon,
+      ouiaContext,
+      ouiaId,
       ...props
     } = this.props;
     const { openedOnEnter, typeaheadInputValue, typeaheadActiveChild } = this.state;
@@ -379,6 +384,10 @@ export class Select extends React.Component<SelectProps, SelectState> {
         )}
         ref={this.parentRef}
         style={{ width }}
+        {...ouiaContext.isOuia && {
+          'data-ouia-component-type': 'Select',
+          'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
+        }}
       >
         <SelectContext.Provider value={{ onSelect, onClose: this.onClose, variant }}>
           <SelectToggle
@@ -541,3 +550,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
     );
   }
 }
+
+const SelectWithOuiaContext = withOuiaContext(Select);
+
+export { SelectWithOuiaContext as Select };