diff --git a/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx b/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
index b8d4e2fe54c..eea71ff8ff3 100644
--- a/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
+++ b/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import { TextArea, TextAreaBase } from '../TextArea';
+import { TextArea } from '../TextArea';
import { ValidatedOptions } from '../../../helpers/constants';
const props = {
@@ -11,116 +11,132 @@ const props = {
value: 'test textarea'
};
-describe('TextArea', () => {
- test('textarea passes value and event to onChange handler', async () => {
- const user = userEvent.setup();
-
- render();
-
- await user.type(screen.getByLabelText('test textarea'), 'a');
- expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
- });
-
- test('simple text area', () => {
- const { asFragment } = render();
- expect(asFragment()).toMatchSnapshot();
- });
-
- test('disabled text area using isDisabled', () => {
- const { asFragment } = render();
- expect(asFragment()).toMatchSnapshot();
- });
-
- test('disabled text area using disabled', () => {
- const { asFragment } = render();
- expect(asFragment()).toMatchSnapshot();
- });
-
- test('read only text area using isReadOnly', () => {
- const { asFragment } = render();
- expect(asFragment()).toMatchSnapshot();
- });
-
- test('read only text area using default readOnlyVariant', () => {
- const { asFragment } = render(
-
- );
- expect(asFragment()).toMatchSnapshot();
- });
-
- test('read only text area using plain readOnlyVariant', () => {
- const { asFragment } = render(
-
- );
- expect(asFragment()).toMatchSnapshot();
- });
-
- test('read only text area using readOnly', () => {
- const { asFragment } = render();
- expect(asFragment()).toMatchSnapshot();
- });
-
- test('validated text area success', () => {
- render();
- expect(screen.getByLabelText('validated textarea')).toHaveClass('pf-m-success');
- });
-
- test('validated text area warning', () => {
- render();
- expect(screen.getByLabelText('validated textarea')).toHaveClass('pf-m-warning');
- });
-
- test('validated text area error', () => {
- const { asFragment } = render(
-
- );
- expect(asFragment()).toMatchSnapshot();
- });
-
- test('vertically resizable text area', () => {
- const { asFragment } = render(
-
- );
- expect(asFragment()).toMatchSnapshot();
- });
-
- test('horizontally resizable text area', () => {
- const { asFragment } = render(
-
- );
- 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();
-
- expect(myMock).toHaveBeenCalled();
- });
-
- 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();
-
- expect(myMock).not.toHaveBeenCalled();
- });
-
- 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();
-
- expect(myMock).not.toHaveBeenCalled();
- });
+test('Textarea input passes value and event to onChange handler', async () => {
+ const user = userEvent.setup();
+ render();
+
+ await user.type(screen.getByRole('textbox'), 'a');
+
+ expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
+});
+
+test('Renders simple text input', () => {
+ render(
+
+
+
+ );
+ expect(screen.getByTestId('textarea').firstChild).toBeVisible();
+});
+
+test('Renders with custom class passed', () => {
+ render();
+
+ expect(screen.getByRole('textbox')).toHaveClass('test-class');
+});
+
+test('Renders text area with required attribute using isRequired', () => {
+ render();
+
+ expect(screen.getByRole('textbox')).toBeRequired();
+});
+
+test('Text area is not required by default', () => {
+ render();
+
+ expect(screen.getByRole('textbox')).not.toBeRequired();
+});
+
+test('Renders disabled text area using isDisabled', () => {
+ render();
+ expect(screen.getByRole('textbox')).toBeDisabled();
+});
+
+test('Text area is not disabled by default', () => {
+ render();
+ expect(screen.getByRole('textbox')).not.toBeDisabled();
+});
+
+test('Renders read only text area using readOnlyVariant', () => {
+ render();
+ expect(screen.getByRole('textbox')).toHaveAttribute('readonly');
+});
+
+test('Text area is not read only by default', () => {
+ render();
+ expect(screen.getByRole('textbox')).not.toHaveAttribute('readonly');
+});
+
+test('Renders text area with default class name only', () => {
+ render();
+ expect(screen.getByRole('textbox')).toHaveClass('pf-c-form-control', { exact: true });
+});
+
+test('Renders validated text area with success className', () => {
+ render();
+ expect(screen.getByRole('textbox')).toHaveClass('pf-m-success');
+});
+
+test('Renders validated text area with warning className', () => {
+ render();
+ expect(screen.getByRole('textbox')).toHaveClass('pf-m-warning');
+});
+
+test('Renders invalid text area', () => {
+ render();
+ expect(screen.getByRole('textbox')).toBeInvalid();
+});
+
+test('Text area is not invalid by default', () => {
+ render();
+ expect(screen.getByRole('textbox')).not.toBeInvalid();
+});
+
+test('Renders vertically resizable text area', () => {
+ render();
+ expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-vertical');
+});
+
+test('Renders horizontally resizable text area', () => {
+ render();
+ expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-horizontal');
+});
+
+test('Throws console error when no aria-label or id is given', () => {
+ jest.spyOn(global.console, 'error');
+
+ render();
+
+ expect(console.error).toHaveBeenCalled();
+});
+
+test('Does not throw console error when id is given but no aria-label', () => {
+ jest.spyOn(global.console, 'error');
+
+ render();
+
+ expect(console.error).not.toHaveBeenCalled();
+});
+
+test('Does not throw console error when aria-label is given but no id', () => {
+ jest.spyOn(global.console, 'error');
+
+ render();
+
+ expect(console.error).not.toHaveBeenCalled();
+});
+
+test('TextArea can be accessed via passed ref', () => {
+ const testRef: React.RefObject = React.createRef();
+ render();
+ global.scrollTo = jest.fn();
+ testRef.current?.focus();
+ expect(screen.getByRole('textbox')).toHaveFocus();
+});
+
+test('Matches the snapshot', () => {
+ const { asFragment } = render(
+
+ );
+ expect(asFragment()).toMatchSnapshot();
});
diff --git a/packages/react-core/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap b/packages/react-core/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap
index a554bc28e98..73559bb5d6d 100644
--- a/packages/react-core/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap
+++ b/packages/react-core/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap
@@ -1,129 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`TextArea disabled text area using disabled 1`] = `
+exports[`Matches the snapshot 1`] = `
-
-`;
-
-exports[`TextArea disabled text area using isDisabled 1`] = `
-
-
-
-`;
-
-exports[`TextArea horizontally resizable text area 1`] = `
-
-
-
-`;
-
-exports[`TextArea read only text area using default readOnlyVariant 1`] = `
-
-
-
-`;
-
-exports[`TextArea read only text area using isReadOnly 1`] = `
-
-
-
-`;
-
-exports[`TextArea read only text area using plain readOnlyVariant 1`] = `
-
-
-
-`;
-
-exports[`TextArea read only text area using readOnly 1`] = `
-
-
-
-`;
-
-exports[`TextArea simple text area 1`] = `
-
-
-
-`;
-
-exports[`TextArea validated text area error 1`] = `
-
-
-
-`;
-
-exports[`TextArea vertically resizable text area 1`] = `
-
-
+ style="--pf-c-form-control--textarea--Height: 6px;"
+ />
`;