feat(Chip): Added OUIA compatibility to Chip component

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import { ChipButton } from './ChipButton';
 import { Chip } from './Chip';
 
 test('ChipButton', () => {
-  const view = shallow(
+  const view = mount(
     <ChipButton id="my-chip-button" className="chip-bttn-cls">
       <b>Close</b>
     </ChipButton>
@@ -14,7 +14,7 @@ test('ChipButton', () => {
 
 describe('Chip', () => {
   test('overflow', () => {
-    const view = shallow(
+    const view = mount(
       <Chip className="my-chp-cls" isOverflowChip>
         4 more
       </Chip>
@@ -23,7 +23,7 @@ describe('Chip', () => {
   });
 
   test('closable', () => {
-    const view = shallow(
+    const view = mount(
       <Chip className="my-chp-cls" id="chip_one">
         Chip
       </Chip>
@@ -32,7 +32,7 @@ describe('Chip', () => {
   });
 
   test('closable with tooltip', () => {
-    const view = shallow(
+    const view = mount(
       <Chip className="my-chp-cls" id="chip_one">
         1234567890123456789
       </Chip>
@@ -41,7 +41,7 @@ describe('Chip', () => {
   });
 
   test('readonly', () => {
-    const view = shallow(
+    const view = mount(
       <Chip className="my-chp-cls" isReadOnly>
         4 more
       </Chip>

packages/patternfly-4/react-core/src/components/ChipGroup/Chip.tsx

@@ -6,6 +6,7 @@ import { Tooltip, TooltipPosition } from '../Tooltip';
 import { TimesCircleIcon } from '@patternfly/react-icons';
 import styles from '@patternfly/react-styles/css/components/Chip/chip';
 import GenerateId from '../../helpers/GenerateId/GenerateId';
+import { InjectedOuiaProps, withOuiaContext } from '../withOuia';
 
 export interface ChipProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the chip text */
@@ -30,8 +31,8 @@ interface ChipState {
   isTooltipVisible: boolean;
 }
 
-export class Chip extends React.Component<ChipProps, ChipState> {
-  constructor(props: ChipProps) {
+class Chip extends React.Component<ChipProps & InjectedOuiaProps, ChipState> {
+  constructor(props: ChipProps & InjectedOuiaProps) {
     super(props);
     this.state = {
       isTooltipVisible: false
@@ -44,9 +45,9 @@ export class Chip extends React.Component<ChipProps, ChipState> {
     className: '',
     isOverflowChip: false,
     isReadOnly: false,
-    tooltipPosition: 'top',
-    onClick: () => undefined as any,
-    component: 'div'
+    tooltipPosition: 'top' as 'auto' | 'top' | 'bottom' | 'left' | 'right',
+    onClick: (_e: React.MouseEvent) => undefined as any,
+    component: 'div' as React.ReactNode
   };
 
   componentDidMount() {
@@ -56,10 +57,16 @@ export class Chip extends React.Component<ChipProps, ChipState> {
   }
 
   renderOverflowChip = () => {
-    const { children, className, onClick } = this.props;
+    const { children, className, onClick, ouiaContext, ouiaId, } = this.props;
     const Component = this.props.component as any;
     return (
-      <Component className={css(styles.chip, styles.modifiers.overflow, className)}>
+      <Component
+        className={css(styles.chip, styles.modifiers.overflow, className)}
+        {...ouiaContext.isOuia && {
+          'data-ouia-component-type': 'OverflowChip',
+          'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
+        }}
+      >
         <ChipButton onClick={onClick}>
           <span className={css(styles.chipText)}>{children}</span>
         </ChipButton>
@@ -68,12 +75,27 @@ export class Chip extends React.Component<ChipProps, ChipState> {
   };
 
   renderChip = (randomId: string) => {
-    const { children, closeBtnAriaLabel, tooltipPosition, className, onClick, isReadOnly } = this.props;
+    const {
+      children,
+      closeBtnAriaLabel,
+      tooltipPosition,
+      className,
+      onClick,
+      isReadOnly,
+      ouiaContext,
+      ouiaId,
+    } = this.props;
     const Component = this.props.component as any;
     if (this.state.isTooltipVisible) {
       return (
         <Tooltip position={tooltipPosition} content={children}>
-          <Component className={css(styles.chip, isReadOnly && styles.modifiers.readOnly, className)}>
+          <Component
+            className={css(styles.chip, isReadOnly && styles.modifiers.readOnly, className)}
+            {...ouiaContext.isOuia && {
+              'data-ouia-component-type': 'Chip',
+              'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
+            }}
+          >
             <span ref={this.span} className={css(styles.chipText)} id={randomId}>
               {children}
             </span>
@@ -92,7 +114,13 @@ export class Chip extends React.Component<ChipProps, ChipState> {
       );
     }
     return (
-      <Component className={css(styles.chip, isReadOnly && styles.modifiers.readOnly, className)}>
+      <Component 
+        className={css(styles.chip, isReadOnly && styles.modifiers.readOnly, className)}
+        {...ouiaContext.isOuia && {
+          'data-ouia-component-type': 'Chip',
+          'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
+        }}
+      >
         <span ref={this.span} className={css(styles.chipText)} id={randomId}>
           {children}
         </span>
@@ -117,3 +145,6 @@ export class Chip extends React.Component<ChipProps, ChipState> {
     );
   }
 }
+
+const ChipWithOuiaContext = withOuiaContext(Chip);
+export { ChipWithOuiaContext as Chip };