From 9f8e5d4004b8b71ce1af5e883b527e7213fcbd1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Thu, 29 Sep 2022 10:57:13 +0200
Subject: [PATCH 1/5] Text area test revamp

---
 .../TextArea/__tests__/TextArea.test.tsx      | 223 +++++++++---------
 .../__snapshots__/TextArea.test.tsx.snap      | 125 +---------
 2 files changed, 116 insertions(+), 232 deletions(-)

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..8b81207a583 100644
--- a/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
+++ b/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
@@ -11,116 +11,115 @@ const props = {
   value: 'test textarea'
 };
 
-describe('TextArea', () => {
-  test('textarea passes value and event to onChange handler', async () => {
-    const user = userEvent.setup();
-
-    render(<TextAreaBase {...props} value="" aria-label="test textarea" />);
-
-    await user.type(screen.getByLabelText('test textarea'), 'a');
-    expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
-  });
-
-  test('simple text area', () => {
-    const { asFragment } = render(<TextArea {...props} aria-label="simple textarea" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('disabled text area using isDisabled', () => {
-    const { asFragment } = render(<TextArea {...props} aria-label="is disabled textarea" isDisabled />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('disabled text area using disabled', () => {
-    const { asFragment } = render(<TextArea {...props} aria-label="disabled textarea" disabled />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('read only text area using isReadOnly', () => {
-    const { asFragment } = render(<TextArea {...props} aria-label="is read only textarea" isReadOnly />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('read only text area using default readOnlyVariant', () => {
-    const { asFragment } = render(
-      <TextArea {...props} aria-label="is default read only textarea" readOnlyVariant="default" />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('read only text area using plain readOnlyVariant', () => {
-    const { asFragment } = render(
-      <TextArea {...props} aria-label="is plain read only textarea" readOnlyVariant="plain" />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('read only text area 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).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(<TextArea {...props} id="5" />);
-
-    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(<TextArea {...props} aria-label="test textarea" />);
-
-    expect(myMock).not.toHaveBeenCalled();
-  });
+test('textarea input passes value and event to onChange handler', async () => {
+  render(<TextAreaBase {...props} value="" aria-label="test textarea" />);
+
+  const user = userEvent.setup();
+  await user.type(screen.getByLabelText('test textarea'), 'a');
+
+  expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
+});
+
+test('Renders simple text input', () => {
+  render(
+    <div data-testid="textarea">
+      <TextArea aria-label="simple textarea" />
+    </div>
+  );
+  expect(screen.getByTestId('textarea').firstChild).toBeVisible();
+});
+
+test('Renders with custom class passed', () => {
+  render(<TextArea aria-label="custom class textarea" className="test-class" />);
+
+  expect(screen.getByRole('textbox')).toHaveClass('test-class');
+});
+
+test('Renders text area with required attribute using isRequired', () => {
+  render(<TextArea aria-label="required textarea" isRequired />);
+
+  expect(screen.getByRole('textbox')).toBeRequired();
+});
+
+test('Renders text area with required attribute using required', () => {
+  render(<TextArea aria-label="required textarea" required />);
+
+  expect(screen.getByRole('textbox')).toBeRequired();
+});
+
+test('Renders disabled text area using isDisabled', () => {
+  render(<TextArea aria-label="is disabled textarea" isDisabled />);
+  expect(screen.getByRole('textbox')).toBeDisabled();
+});
+
+test('Renders disabled text area using disabled', () => {
+  render(<TextArea aria-label="disabled textarea" disabled />);
+  expect(screen.getByRole('textbox')).toBeDisabled();
+});
+
+test('Renders read only text area using isReadOnly', () => {
+  render(<TextArea aria-label="is read only textarea" isReadOnly />);
+  expect(screen.getByRole('textbox')).toHaveAttribute('readonly');
+});
+
+test('Renders read only text area using readOnly', () => {
+  render(<TextArea aria-label="read only textarea" readOnly />);
+  expect(screen.getByRole('textbox')).toHaveAttribute('readonly');
+});
+
+test('Renders validated text area with success className', () => {
+  render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.success} />);
+  expect(screen.getByRole('textbox')).toHaveClass('pf-m-success');
+});
+
+test('Renders validated text area with warning className', () => {
+  render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.warning} />);
+  expect(screen.getByRole('textbox')).toHaveClass('pf-m-warning');
+});
+
+test('Renders invalid text area', () => {
+  render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.error} />);
+  expect(screen.getByRole('textbox')).toBeInvalid();
+});
+
+test('Renders vertically resizable text area', () => {
+  render(<TextArea aria-label="vertical resize textarea" resizeOrientation="vertical" />);
+  expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-vertical');
+});
+
+test('Renders horizontally resizable text area', () => {
+  render(<TextArea aria-label="horizontal resize textarea" resizeOrientation="horizontal" />);
+  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(<TextArea />);
+
+  expect(console.error).toHaveBeenCalled();
+});
+
+test('Does not throw console error when id is given but no aria-label', () => {
+  jest.spyOn(global.console, 'error');
+
+  render(<TextArea id="5" />);
+
+  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(<TextArea aria-label="test textarea" />);
+
+  expect(console.error).not.toHaveBeenCalled();
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <TextArea className="custom class" isRequired isDisabled autoResize aria-label="test textarea" />
+  );
+
+  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`] = `
 <DocumentFragment>
   <textarea
     aria-invalid="false"
-    aria-label="disabled textarea"
-    class="pf-c-form-control"
+    aria-label="test textarea"
+    class="pf-c-form-control custom class"
     disabled=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea disabled text area using isDisabled 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="is disabled textarea"
-    class="pf-c-form-control"
-    disabled=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea horizontally resizable text area 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="true"
-    aria-label="horizontal resize textarea"
-    class="pf-c-form-control pf-m-resize-horizontal"
-    required=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea read only text area using default readOnlyVariant 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="is default read only textarea"
-    class="pf-c-form-control"
-    readonly=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea read only text area using isReadOnly 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="is read only textarea"
-    class="pf-c-form-control"
-    readonly=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea read only text area using plain readOnlyVariant 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="is plain read only textarea"
-    class="pf-c-form-control pf-m-plain"
-    readonly=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea read only text area using readOnly 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="read only textarea"
-    class="pf-c-form-control"
-    readonly=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea simple text area 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="simple textarea"
-    class="pf-c-form-control"
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea validated text area error 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="true"
-    aria-label="validated textarea"
-    class="pf-c-form-control"
     required=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea vertically resizable text area 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="vertical resize textarea"
-    class="pf-c-form-control pf-m-resize-vertical"
-  >
-    test textarea
-  </textarea>
+    style="--pf-c-form-control--textarea--Height: 6px;"
+  />
 </DocumentFragment>
 `;

From 56d1877ece359e81a0fc416c5c305c1a387f3657 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Tue, 4 Oct 2022 16:37:38 +0200
Subject: [PATCH 2/5] Edit ref test

---
 .../components/TextArea/__tests__/TextArea.test.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

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 8b81207a583..b86ce057073 100644
--- a/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
+++ b/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
@@ -57,8 +57,8 @@ test('Renders disabled text area using disabled', () => {
   expect(screen.getByRole('textbox')).toBeDisabled();
 });
 
-test('Renders read only text area using isReadOnly', () => {
-  render(<TextArea aria-label="is read only textarea" isReadOnly />);
+test('Renders read only text area using readOnlyVariant', () => {
+  render(<TextArea aria-label="is read only textarea" readOnlyVariant={'default'} />);
   expect(screen.getByRole('textbox')).toHaveAttribute('readonly');
 });
 
@@ -116,10 +116,17 @@ test('Does not throw console error when aria-label is given but no id', () => {
   expect(console.error).not.toHaveBeenCalled();
 });
 
+test('TextArea can be accessed via passed ref', () => {
+  const testRef: React.RefObject<HTMLTextAreaElement> = React.createRef();
+  render(<TextArea ref={testRef} />);
+  global.scrollTo = jest.fn();
+  testRef.current?.focus();
+  expect(screen.getByRole('textbox')).toHaveFocus();
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(
     <TextArea className="custom class" isRequired isDisabled autoResize aria-label="test textarea" />
   );
-
   expect(asFragment()).toMatchSnapshot();
 });

From 4a60b4dafc9ce8c29487bdfc0fa413ac09f5e3f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Thu, 13 Oct 2022 14:29:18 +0200
Subject: [PATCH 3/5] remove unnecessary tests

---
 .../TextArea/__tests__/TextArea.test.tsx         | 16 ----------------
 1 file changed, 16 deletions(-)

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 b86ce057073..1a1f1450911 100644
--- a/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
+++ b/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
@@ -41,32 +41,16 @@ test('Renders text area with required attribute using isRequired', () => {
   expect(screen.getByRole('textbox')).toBeRequired();
 });
 
-test('Renders text area with required attribute using required', () => {
-  render(<TextArea aria-label="required textarea" required />);
-
-  expect(screen.getByRole('textbox')).toBeRequired();
-});
-
 test('Renders disabled text area using isDisabled', () => {
   render(<TextArea aria-label="is disabled textarea" isDisabled />);
   expect(screen.getByRole('textbox')).toBeDisabled();
 });
 
-test('Renders disabled text area using disabled', () => {
-  render(<TextArea aria-label="disabled textarea" disabled />);
-  expect(screen.getByRole('textbox')).toBeDisabled();
-});
-
 test('Renders read only text area using readOnlyVariant', () => {
   render(<TextArea aria-label="is read only textarea" readOnlyVariant={'default'} />);
   expect(screen.getByRole('textbox')).toHaveAttribute('readonly');
 });
 
-test('Renders read only text area using readOnly', () => {
-  render(<TextArea aria-label="read only textarea" readOnly />);
-  expect(screen.getByRole('textbox')).toHaveAttribute('readonly');
-});
-
 test('Renders validated text area with success className', () => {
   render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.success} />);
   expect(screen.getByRole('textbox')).toHaveClass('pf-m-success');

From 3cf0368834cc55d620eb4b82a7f11216c457ef60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Thu, 13 Oct 2022 14:46:05 +0200
Subject: [PATCH 4/5] add tests for default behavior

---
 .../TextArea/__tests__/TextArea.test.tsx      | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

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 1a1f1450911..6f0fe9f9a79 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 = {
@@ -12,10 +12,10 @@ const props = {
 };
 
 test('textarea input passes value and event to onChange handler', async () => {
-  render(<TextAreaBase {...props} value="" aria-label="test textarea" />);
+  render(<TextArea {...props} value="" aria-label="test textarea" />);
 
   const user = userEvent.setup();
-  await user.type(screen.getByLabelText('test textarea'), 'a');
+  await user.type(screen.getByRole('textbox'), 'a');
 
   expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
 });
@@ -41,16 +41,37 @@ test('Renders text area with required attribute using isRequired', () => {
   expect(screen.getByRole('textbox')).toBeRequired();
 });
 
+test('Text area is not required by default', () => {
+  render(<TextArea aria-label="not required textarea" />);
+
+  expect(screen.getByRole('textbox')).not.toBeRequired();
+});
+
 test('Renders disabled text area using isDisabled', () => {
   render(<TextArea aria-label="is disabled textarea" isDisabled />);
   expect(screen.getByRole('textbox')).toBeDisabled();
 });
 
+test('Text area is not disabled by default', () => {
+  render(<TextArea aria-label="not disabled textarea" />);
+  expect(screen.getByRole('textbox')).not.toBeDisabled();
+});
+
 test('Renders read only text area using readOnlyVariant', () => {
   render(<TextArea aria-label="is read only textarea" readOnlyVariant={'default'} />);
   expect(screen.getByRole('textbox')).toHaveAttribute('readonly');
 });
 
+test('Text area is not read only by default', () => {
+  render(<TextArea aria-label="not read only textarea" />);
+  expect(screen.getByRole('textbox')).not.toHaveAttribute('readonly');
+});
+
+test('Renders text area with default class name only', () => {
+  render(<TextArea aria-label="validated textarea" />);
+  expect(screen.getByRole('textbox')).toHaveClass('pf-c-form-control', { exact: true });
+});
+
 test('Renders validated text area with success className', () => {
   render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.success} />);
   expect(screen.getByRole('textbox')).toHaveClass('pf-m-success');

From 2d7c2ce0e9338e2a71e01418d9efbe4a8a99961f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Fri, 14 Oct 2022 13:34:37 +0200
Subject: [PATCH 5/5] add default validity test

---
 .../src/components/TextArea/__tests__/TextArea.test.tsx  | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

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 6f0fe9f9a79..eea71ff8ff3 100644
--- a/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
+++ b/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
@@ -11,10 +11,10 @@ const props = {
   value: 'test textarea'
 };
 
-test('textarea input passes value and event to onChange handler', async () => {
+test('Textarea input passes value and event to onChange handler', async () => {
+  const user = userEvent.setup();
   render(<TextArea {...props} value="" aria-label="test textarea" />);
 
-  const user = userEvent.setup();
   await user.type(screen.getByRole('textbox'), 'a');
 
   expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
@@ -87,6 +87,11 @@ test('Renders invalid text area', () => {
   expect(screen.getByRole('textbox')).toBeInvalid();
 });
 
+test('Text area is not invalid by default', () => {
+  render(<TextArea aria-label="validated textarea" />);
+  expect(screen.getByRole('textbox')).not.toBeInvalid();
+});
+
 test('Renders vertically resizable text area', () => {
   render(<TextArea aria-label="vertical resize textarea" resizeOrientation="vertical" />);
   expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-vertical');