@patternfly/react-core 4.202.30 → 4.202.33

package/src/components/Switch/__tests__/__snapshots__/Switch.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`no label switch is checked 1`] = `
-<div>
+exports[`Switch no label switch is checked 1`] = `
+<DocumentFragment>
   <label
     class="pf-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-7"
@@ -10,8 +10,7 @@ exports[`no label switch is checked 1`] = `
     for="no-label-switch-is-checked"
   >
     <input
-      aria-label=""
-      aria-labelledby="no-label-switch-is-checked-on"
+      aria-label="Switch label"
       checked=""
       class="pf-c-switch__input"
       id="no-label-switch-is-checked"
@@ -39,11 +38,11 @@ exports[`no label switch is checked 1`] = `
       </div>
     </span>
   </label>
-</div>
+</DocumentFragment>
 `;
 
-exports[`no label switch is not checked 1`] = `
-<div>
+exports[`Switch no label switch is not checked 1`] = `
+<DocumentFragment>
   <label
     class="pf-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-8"
@@ -52,8 +51,7 @@ exports[`no label switch is not checked 1`] = `
     for="no-label-switch-is-not-checked"
   >
     <input
-      aria-label=""
-      aria-labelledby="no-label-switch-is-not-checked-on"
+      aria-label="Switch label"
       class="pf-c-switch__input"
       id="no-label-switch-is-not-checked"
       type="checkbox"
@@ -80,11 +78,11 @@ exports[`no label switch is not checked 1`] = `
       </div>
     </span>
   </label>
-</div>
+</DocumentFragment>
 `;
 
-exports[`switch is checked 1`] = `
-<div>
+exports[`Switch switch is checked 1`] = `
+<DocumentFragment>
   <label
     class="pf-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-3"
@@ -93,8 +91,7 @@ exports[`switch is checked 1`] = `
     for="switch-is-checked"
   >
     <input
-      aria-label=""
-      aria-labelledby="switch-is-checked-on"
+      aria-label="Switch label"
       checked=""
       class="pf-c-switch__input"
       id="switch-is-checked"
@@ -106,23 +103,21 @@ exports[`switch is checked 1`] = `
     <span
       aria-hidden="true"
       class="pf-c-switch__label pf-m-on"
-      id="switch-is-checked-on"
     >
       On
     </span>
     <span
       aria-hidden="true"
       class="pf-c-switch__label pf-m-off"
-      id="switch-is-checked-off"
     >
       Off
     </span>
   </label>
-</div>
+</DocumentFragment>
 `;
 
-exports[`switch is checked and disabled 1`] = `
-<div>
+exports[`Switch switch is checked and disabled 1`] = `
+<DocumentFragment>
   <label
     class="pf-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-9"
@@ -131,8 +126,7 @@ exports[`switch is checked and disabled 1`] = `
     for="switch-is-checked-and-disabled"
   >
     <input
-      aria-label=""
-      aria-labelledby="switch-is-checked-and-disabled-on"
+      aria-label="Switch label"
       checked=""
       class="pf-c-switch__input"
       disabled=""
@@ -161,11 +155,11 @@ exports[`switch is checked and disabled 1`] = `
       </div>
     </span>
   </label>
-</div>
+</DocumentFragment>
 `;
 
-exports[`switch is not checked 1`] = `
-<div>
+exports[`Switch switch is not checked 1`] = `
+<DocumentFragment>
   <label
     class="pf-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-4"
@@ -174,8 +168,7 @@ exports[`switch is not checked 1`] = `
     for="switch-is-not-checked"
   >
     <input
-      aria-label=""
-      aria-labelledby="switch-is-not-checked-on"
+      aria-label="Switch label"
       class="pf-c-switch__input"
       id="switch-is-not-checked"
       type="checkbox"
@@ -186,23 +179,21 @@ exports[`switch is not checked 1`] = `
     <span
       aria-hidden="true"
       class="pf-c-switch__label pf-m-on"
-      id="switch-is-not-checked-on"
     >
       On
     </span>
     <span
       aria-hidden="true"
       class="pf-c-switch__label pf-m-off"
-      id="switch-is-not-checked-off"
     >
       Off
     </span>
   </label>
-</div>
+</DocumentFragment>
 `;
 
-exports[`switch is not checked and disabled 1`] = `
-<div>
+exports[`Switch switch is not checked and disabled 1`] = `
+<DocumentFragment>
   <label
     class="pf-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-10"
@@ -211,8 +202,7 @@ exports[`switch is not checked and disabled 1`] = `
     for="switch-is-not-checked-and-disabled"
   >
     <input
-      aria-label=""
-      aria-labelledby="switch-is-not-checked-and-disabled-on"
+      aria-label="Switch label"
       class="pf-c-switch__input"
       disabled=""
       id="switch-is-not-checked-and-disabled"
@@ -240,11 +230,11 @@ exports[`switch is not checked and disabled 1`] = `
       </div>
     </span>
   </label>
-</div>
+</DocumentFragment>
 `;
 
-exports[`switch with only label is checked 1`] = `
-<div>
+exports[`Switch switch with only label is checked 1`] = `
+<DocumentFragment>
   <label
     class="pf-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-5"
@@ -278,11 +268,11 @@ exports[`switch with only label is checked 1`] = `
       On
     </span>
   </label>
-</div>
+</DocumentFragment>
 `;
 
-exports[`switch with only label is not checked 1`] = `
-<div>
+exports[`Switch switch with only label is not checked 1`] = `
+<DocumentFragment>
   <label
     class="pf-c-switch"
     data-ouia-component-id="OUIA-Generated-Switch-6"
@@ -315,5 +305,5 @@ exports[`switch with only label is not checked 1`] = `
       Off
     </span>
   </label>
-</div>
+</DocumentFragment>
 `;

package/src/components/TextArea/__tests__/TextArea.test.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { mount, shallow } from 'enzyme';
-import { TextArea, TextAreaBase  } from '../TextArea';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+import { TextArea, TextAreaBase } from '../TextArea';
 import { ValidatedOptions } from '../../../helpers/constants';
 
 const props = {
@@ -9,104 +12,96 @@ const props = {
   value: 'test textarea'
 };
 
-test('textarea input passes value and event to onChange handler', () => {
-  const newValue = 'new test textarea';
-  const event = {
-    currentTarget: { value: newValue }
-  };
-  const view = shallow(<TextAreaBase {...props} aria-label="test textarea" />);
-  view.find('textarea').simulate('change', event);
-  expect(props.onChange).toBeCalledWith(newValue, event);
-});
-
-test('simple text input', () => {
-  const view = render(<TextArea {...props} aria-label="simple textarea" />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('disabled text input using isDisabled', () => {
-  const view = render(<TextArea {...props} aria-label="is disabled textarea" isDisabled />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('disabled text input using disabled', () => {
-  const view = render(<TextArea {...props} aria-label="disabled textarea" disabled />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('read only text input using isReadOnly', () => {
-  const view = render(<TextArea {...props} aria-label="is read only textarea" isReadOnly />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('read only text input using readOnly', () => {
-  const view = render(<TextArea {...props} aria-label="read only textarea" readOnly />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('invalid text area', () => {
-  const view = render(<TextArea {...props} required validated={'error'} aria-label="invalid textarea" />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('validated text area success', () => {
-  const view = mount(
-    <TextArea {...props} required validated={ValidatedOptions.success} aria-label="validated textarea" />
-  );
-  expect(view.find('.pf-c-form-control.pf-m-success').length).toBe(1);
-  expect(view).toMatchSnapshot();
-});
-
-test('validated text area warning', () => {
-  const view = mount(
-    <TextArea {...props} required validated={ValidatedOptions.warning} aria-label="validated textarea" />
-  );
-  expect(view.find('.pf-c-form-control.pf-m-warning').length).toBe(1);
-  expect(view).toMatchSnapshot();
-});
-
-test('validated text area error', () => {
-  const view = render(
-    <TextArea {...props} required validated={ValidatedOptions.error} aria-label="validated textarea" />
-  );
-  expect(view.container).toMatchSnapshot();
-});
-
-test('vertically resizable text area', () => {
-  const view = render(<TextArea resizeOrientation="vertical" {...props} aria-label="vertical resize textarea" />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('horizontally resizable text area', () => {
-  const view = render(
-    <TextArea
-      resizeOrientation="horizontal"
-      {...props}
-      required
-      validated={'error'}
-      aria-label="horizontal resize textarea"
-    />
-  );
-  expect(view.container).toMatchSnapshot();
-});
-
-test('should throw console error when no aria-label or id is given', () => {
-  const myMock = jest.fn();
-  global.console = { ...global.console, error: myMock };
-  mount(<TextArea {...props} />);
-  expect(myMock).toBeCalled();
-});
-
-test('should not throw console error when id is given but no aria-label', () => {
-  const myMock = jest.fn();
-  global.console = { ...global.console, error: myMock };
-  mount(<TextArea {...props} id="5" />);
-  expect(myMock).not.toBeCalled();
-});
-
-test('should not throw console error when aria-label is given but no id', () => {
-  const myMock = jest.fn();
-  global.console = { ...global.console, error: myMock };
-  mount(<TextArea {...props} aria-label="test textarea" />);
-  expect(myMock).not.toBeCalled();
+describe('TextArea', () => {
+  test('textarea input passes value and event to onChange handler', () => {
+    render(<TextAreaBase {...props} value='' aria-label="test textarea" />);
+
+    userEvent.type(screen.getByLabelText('test textarea'), 'a');
+    expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
+  });
+
+  test('simple text input', () => {
+    const { asFragment } = render(<TextArea {...props} aria-label="simple textarea" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('disabled text input using isDisabled', () => {
+    const { asFragment } = render(<TextArea {...props} aria-label="is disabled textarea" isDisabled />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('disabled text input using disabled', () => {
+    const { asFragment } = render(<TextArea {...props} aria-label="disabled textarea" disabled />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('read only text input using isReadOnly', () => {
+    const { asFragment } = render(<TextArea {...props} aria-label="is read only textarea" isReadOnly />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('read only text input using readOnly', () => {
+    const { asFragment } = render(<TextArea {...props} aria-label="read only textarea" readOnly />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('validated text area success', () => {
+    render(<TextArea {...props} required validated={ValidatedOptions.success} aria-label="validated textarea" />);
+    expect(screen.getByLabelText('validated textarea')).toHaveClass('pf-m-success');
+  });
+
+  test('validated text area warning', () => {
+    render(<TextArea {...props} required validated={ValidatedOptions.warning} aria-label="validated textarea" />);
+    expect(screen.getByLabelText('validated textarea')).toHaveClass('pf-m-warning');
+  });
+
+  test('validated text area error', () => {
+    const { asFragment } = render(<TextArea {...props} required validated={ValidatedOptions.error} aria-label="validated textarea" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('vertically resizable text area', () => {
+    const { asFragment } = render(<TextArea resizeOrientation="vertical" {...props} aria-label="vertical resize textarea" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('horizontally resizable text area', () => {
+    const { asFragment } = render(
+      <TextArea
+        resizeOrientation="horizontal"
+        {...props}
+        required
+        validated={'error'}
+        aria-label="horizontal resize textarea"
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('should throw console error when no aria-label or id is given', () => {
+    const myMock = jest.fn();
+    global.console = { ...global.console, error: myMock };
+
+    render(<TextArea {...props} />);
+
+    expect(myMock).toBeCalled();
+  });
+
+  test('should not throw console error when id is given but no aria-label', () => {
+    const myMock = jest.fn();
+    global.console = { ...global.console, error: myMock };
+
+    render(<TextArea {...props} id="5" />);
+
+    expect(myMock).not.toBeCalled();
+  });
+
+  test('should not throw console error when aria-label is given but no id', () => {
+    const myMock = jest.fn();
+    global.console = { ...global.console, error: myMock };
+
+    render(<TextArea {...props} aria-label="test textarea" />);
+
+    expect(myMock).not.toBeCalled();
+  });
 });

package/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`disabled text input using disabled 1`] = `
-<div>
+exports[`TextArea disabled text input using disabled 1`] = `
+<DocumentFragment>
   <textarea
     aria-invalid="false"
     aria-label="disabled textarea"
@@ -10,11 +10,11 @@ exports[`disabled text input using disabled 1`] = `
   >
     test textarea
   </textarea>
-</div>
+</DocumentFragment>
 `;
 
-exports[`disabled text input using isDisabled 1`] = `
-<div>
+exports[`TextArea disabled text input using isDisabled 1`] = `
+<DocumentFragment>
   <textarea
     aria-invalid="false"
     aria-label="is disabled textarea"
@@ -23,11 +23,11 @@ exports[`disabled text input using isDisabled 1`] = `
   >
     test textarea
   </textarea>
-</div>
+</DocumentFragment>
 `;
 
-exports[`horizontally resizable text area 1`] = `
-<div>
+exports[`TextArea horizontally resizable text area 1`] = `
+<DocumentFragment>
   <textarea
     aria-invalid="true"
     aria-label="horizontal resize textarea"
@@ -36,24 +36,11 @@ exports[`horizontally resizable text area 1`] = `
   >
     test textarea
   </textarea>
-</div>
+</DocumentFragment>
 `;
 
-exports[`invalid text area 1`] = `
-<div>
-  <textarea
-    aria-invalid="true"
-    aria-label="invalid textarea"
-    class="pf-c-form-control"
-    required=""
-  >
-    test textarea
-  </textarea>
-</div>
-`;
-
-exports[`read only text input using isReadOnly 1`] = `
-<div>
+exports[`TextArea read only text input using isReadOnly 1`] = `
+<DocumentFragment>
   <textarea
     aria-invalid="false"
     aria-label="is read only textarea"
@@ -62,11 +49,11 @@ exports[`read only text input using isReadOnly 1`] = `
   >
     test textarea
   </textarea>
-</div>
+</DocumentFragment>
 `;
 
-exports[`read only text input using readOnly 1`] = `
-<div>
+exports[`TextArea read only text input using readOnly 1`] = `
+<DocumentFragment>
   <textarea
     aria-invalid="false"
     aria-label="read only textarea"
@@ -75,11 +62,11 @@ exports[`read only text input using readOnly 1`] = `
   >
     test textarea
   </textarea>
-</div>
+</DocumentFragment>
 `;
 
-exports[`simple text input 1`] = `
-<div>
+exports[`TextArea simple text input 1`] = `
+<DocumentFragment>
   <textarea
     aria-invalid="false"
     aria-label="simple textarea"
@@ -87,11 +74,11 @@ exports[`simple text input 1`] = `
   >
     test textarea
   </textarea>
-</div>
+</DocumentFragment>
 `;
 
-exports[`validated text area error 1`] = `
-<div>
+exports[`TextArea validated text area error 1`] = `
+<DocumentFragment>
   <textarea
     aria-invalid="true"
     aria-label="validated textarea"
@@ -100,77 +87,11 @@ exports[`validated text area error 1`] = `
   >
     test textarea
   </textarea>
-</div>
-`;
-
-exports[`validated text area success 1`] = `
-<TextArea
-  aria-label="validated textarea"
-  onChange={[MockFunction]}
-  required={true}
-  validated="success"
-  value="test textarea"
->
-  <TextArea
-    aria-label="validated textarea"
-    className=""
-    innerRef={null}
-    isDisabled={false}
-    isIconSprite={false}
-    isRequired={false}
-    onChange={[MockFunction]}
-    required={true}
-    resizeOrientation="both"
-    validated="success"
-    value="test textarea"
-  >
-    <textarea
-      aria-invalid={false}
-      aria-label="validated textarea"
-      className="pf-c-form-control pf-m-success"
-      onChange={[Function]}
-      required={true}
-      value="test textarea"
-    />
-  </TextArea>
-</TextArea>
-`;
-
-exports[`validated text area warning 1`] = `
-<TextArea
-  aria-label="validated textarea"
-  onChange={[MockFunction]}
-  required={true}
-  validated="warning"
-  value="test textarea"
->
-  <TextArea
-    aria-label="validated textarea"
-    className=""
-    innerRef={null}
-    isDisabled={false}
-    isIconSprite={false}
-    isRequired={false}
-    onChange={[MockFunction]}
-    required={true}
-    resizeOrientation="both"
-    validated="warning"
-    value="test textarea"
-  >
-    <textarea
-      aria-invalid={false}
-      aria-label="validated textarea"
-      className="pf-c-form-control pf-m-warning"
-      onChange={[Function]}
-      required={true}
-      value="test textarea"
-    />
-  </TextArea>
-</TextArea>
+</DocumentFragment>
 `;
 
-exports[`vertically resizable text area 1`] = `
-<div>
+exports[`TextArea vertically resizable text area 1`] = `
+<DocumentFragment>
   <textarea
     aria-invalid="false"
     aria-label="vertical resize textarea"
@@ -178,5 +99,5 @@ exports[`vertically resizable text area 1`] = `
   >
     test textarea
   </textarea>
-</div>
+</DocumentFragment>
 `;