Check if OUIA is set after mounting

packages/patternfly-4/react-core/src/components/Switch/Switch.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import { Switch } from './Switch';
 
 const props = {
@@ -8,52 +8,48 @@ const props = {
 };
 
 test('switch label for attribute equals input id attribute', () => {
-  const view = shallow(<Switch id="foo" />);
+  const view = mount(<Switch id="foo" />);
   expect(view.find('input').prop('id')).toBe('foo');
   expect(view.find('label').prop('htmlFor')).toBe('foo');
 });
 
 test('switch label id is auto generated', () => {
-  const view = shallow(<Switch aria-label="..." />);
+  const view = mount(<Switch aria-label="..." />);
   expect(view.find('input').prop('id')).toBeDefined();
 });
 
 test('switch is checked', () => {
-  const view = shallow(<Switch id="switch-is-checked" label="On" isChecked />);
+  const view = mount(<Switch id="switch-is-checked" label="On" isChecked />);
   expect(view).toMatchSnapshot();
 });
 
 test('switch is not checked', () => {
-  const view = shallow(<Switch id="switch-is-not-checked" label="Off" isChecked={false} />);
+  const view = mount(<Switch id="switch-is-not-checked" label="Off" isChecked={false} />);
   expect(view).toMatchSnapshot();
 });
 
 test('no label switch is checked', () => {
-  const view = shallow(<Switch id="no-label-switch-is-checked" isChecked />);
+  const view = mount(<Switch id="no-label-switch-is-checked" isChecked />);
   expect(view).toMatchSnapshot();
 });
 
 test('no label switch is not checked', () => {
-  const view = shallow(<Switch id="no-label-switch-is-not-checked" isChecked={false} />);
+  const view = mount(<Switch id="no-label-switch-is-not-checked" isChecked={false} />);
   expect(view).toMatchSnapshot();
 });
 
 test('switch is checked and disabled', () => {
-  const view = shallow(<Switch id="switch-is-checked-and-disabled" isChecked isDisabled />);
+  const view = mount(<Switch id="switch-is-checked-and-disabled" isChecked isDisabled />);
   expect(view).toMatchSnapshot();
 });
 
 test('switch is not checked and disabled', () => {
-  const view = shallow(<Switch id="switch-is-not-checked-and-disabled" isChecked={false} isDisabled />);
+  const view = mount(<Switch id="switch-is-not-checked-and-disabled" isChecked={false} isDisabled />);
   expect(view).toMatchSnapshot();
 });
 
 test('switch passes value and event to onChange handler', () => {
-  const newValue = true;
-  const event = {
-    currentTarget: { checked: newValue }
-  };
-  const view = shallow(<Switch id="onChange-switch" {...props} />);
-  view.find('input').simulate('change', event);
-  expect(props.onChange).toBeCalledWith(newValue, event);
+  const view = mount(<Switch id="onChange-switch" {...props} />);
+  view.find('input').simulate('change', { target: { checked: true } });
+  expect(view.find('input').prop('checked')).toBe(true);
 });

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

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { CheckIcon } from '@patternfly/react-icons';
 import { getUniqueId } from '../../helpers/util';
 import { Omit } from '../../helpers/typeUtils';
-import { isOUIAEnvironment, getUniqueId as getOUIAUniqueId } from '../../helpers/ouia';
+import { InjectedOuiaProps, withOuiaContext } from '../withOuia';
 
 export interface SwitchProps extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'> {
   /** id for the label. */
@@ -23,9 +23,8 @@ export interface SwitchProps extends Omit<React.HTMLProps<HTMLInputElement>, 'ty
   'aria-label'?: string
 };
 
-export class Switch extends React.Component<SwitchProps> {
+class Switch extends React.Component<SwitchProps & InjectedOuiaProps> {
   id = '';
-  ouiaId = getOUIAUniqueId();
 
   static defaultProps = {
     id: '',
@@ -37,7 +36,7 @@ export class Switch extends React.Component<SwitchProps> {
     onChange: () => undefined as any
   };
 
-  constructor(props: SwitchProps) {
+  constructor(props: SwitchProps & InjectedOuiaProps) {
     super(props);
     if (!props.id && !props['aria-label']) {
       // tslint:disable-next-line:no-console
@@ -47,14 +46,14 @@ export class Switch extends React.Component<SwitchProps> {
   }
 
   render() {
-    const { className, label, isChecked, isDisabled, onChange, ...props } = this.props;
+    const { className, label, isChecked, isDisabled, onChange, ouiaContext, ouiaId, ...props } = this.props;
     return (
       <label
         className={css(styles.switch, className)}
         htmlFor={this.id}
-        {...isOUIAEnvironment() && {
+        {...ouiaContext.isOuia && {
           'data-ouia-component-type': 'Switch',
-          'data-ouia-component-id': this.ouiaId
+          'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
         }}
       >
         <input
@@ -87,3 +86,7 @@ export class Switch extends React.Component<SwitchProps> {
     );
   }
 }
+
+const SwitchWithOuiaContext = withOuiaContext(Switch);
+
+export { SwitchWithOuiaContext as Switch };