From bc12ec9f80210384a50bb8f902e62b1f5614c6dd Mon Sep 17 00:00:00 2001
From: Eileen Burdekin <eileenburdekin@proton.me>
Date: Fri, 26 Jul 2024 00:10:01 -0700
Subject: [PATCH 1/5] add textarea tests

---
 .../src/tests/textareas.test.tsx              | 93 +++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 products/statement-generator/src/tests/textareas.test.tsx

diff --git a/products/statement-generator/src/tests/textareas.test.tsx b/products/statement-generator/src/tests/textareas.test.tsx
new file mode 100644
index 00000000..2f44753f
--- /dev/null
+++ b/products/statement-generator/src/tests/textareas.test.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ThemeProvider } from '@material-ui/core/styles';
+import customMuiTheme from 'styles/customMuiTheme';
+
+import Textarea from '../components/Textarea';
+
+describe('Textarea component', () => {
+  test('Textarea renders and displays correct default value', () => {
+    const { getByText } = render(
+      <ThemeProvider theme={customMuiTheme}>
+        <Textarea id="test" handleChange={() => {}} defaultValue="Type here" />
+      </ThemeProvider>
+    );
+
+    const textarea = getByText(/Type here/i);
+
+    expect(textarea).toBeInTheDocument();
+  });
+
+  test('Textarea props are passed correctly', () => {
+    const { getByText, rerender } = render(
+      <ThemeProvider theme={customMuiTheme}>
+        <Textarea
+          id="test"
+          label="label"
+          placeholder="Type here"
+          handleChange={() => {}}
+          defaultValue="Type here"
+          rows={3}
+        />
+      </ThemeProvider>
+    );
+
+    const textarea = getByText(/Type here/i);
+
+    // passed correct placeholder
+    expect(textarea).toHaveAttribute('placeholder', 'Type here');
+
+    // passed correct # of rows
+    expect(textarea).toHaveAttribute('rows', '3');
+
+    // passed correct id
+    expect(textarea).toHaveAttribute('id', 'test');
+
+    // passed correct label
+    const label = getByText('label');
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveAttribute('for', 'test');
+
+    // passed disabled state correctly
+    rerender(
+      <ThemeProvider theme={customMuiTheme}>
+        <Textarea
+          id="test"
+          label="label"
+          handleChange={() => {}}
+          defaultValue="Type here"
+          rows={3}
+          disabled
+        />
+      </ThemeProvider>
+    );
+
+    expect(textarea).toBeDisabled();
+  });
+
+  test('Textarea is accessible and focusable', () => {
+    const { getByText, getByPlaceholderText } = render(
+      <ThemeProvider theme={customMuiTheme}>
+        <Textarea
+          id="accessible-textarea"
+          label="accessibleTextarea"
+          placeholder="Type here"
+          handleChange={() => {}}
+          defaultValue=""
+          rows={3}
+        />
+      </ThemeProvider>
+    );
+
+    // label is associated with the textarea
+    const label = getByText('accessibleTextarea');
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveAttribute('for', 'accessible-textarea');
+
+    // textarea is focusable
+    const textarea = getByPlaceholderText('Type here');
+    textarea.focus();
+    expect(textarea).toHaveFocus();
+  });
+});

From 1640eeeee90cb29b7d74c2a4efab240986d976dc Mon Sep 17 00:00:00 2001
From: Eileen Burdekin <eileenburdekin@proton.me>
Date: Fri, 26 Jul 2024 17:52:15 -0700
Subject: [PATCH 2/5] create function for checking props, test focus and blur
 using userEvent

---
 .../src/tests/textareas.test.tsx              | 41 ++++++++++++++-----
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/products/statement-generator/src/tests/textareas.test.tsx b/products/statement-generator/src/tests/textareas.test.tsx
index 2f44753f..5ae2a328 100644
--- a/products/statement-generator/src/tests/textareas.test.tsx
+++ b/products/statement-generator/src/tests/textareas.test.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+
 import { ThemeProvider } from '@material-ui/core/styles';
 import customMuiTheme from 'styles/customMuiTheme';
 
@@ -20,6 +22,21 @@ describe('Textarea component', () => {
   });
 
   test('Textarea props are passed correctly', () => {
+    interface ExpectedProps {
+      placeholder: string;
+      id: string;
+      rows: string;
+    }
+
+    const checkTextareaProps = (
+      input: HTMLElement,
+      expectedProps: ExpectedProps
+    ) => {
+      expect(input).toHaveAttribute('placeholder', expectedProps.placeholder);
+      expect(input).toHaveAttribute('rows', expectedProps.rows);
+      expect(input).toHaveAttribute('id', expectedProps.id);
+    };
+
     const { getByText, rerender } = render(
       <ThemeProvider theme={customMuiTheme}>
         <Textarea
@@ -35,14 +52,12 @@ describe('Textarea component', () => {
 
     const textarea = getByText(/Type here/i);
 
-    // passed correct placeholder
-    expect(textarea).toHaveAttribute('placeholder', 'Type here');
-
-    // passed correct # of rows
-    expect(textarea).toHaveAttribute('rows', '3');
-
-    // passed correct id
-    expect(textarea).toHaveAttribute('id', 'test');
+    // passed correct placeholder, # of rows, and id
+    checkTextareaProps(textarea, {
+      placeholder: 'Type here',
+      rows: '3',
+      id: 'test',
+    });
 
     // passed correct label
     const label = getByText('label');
@@ -86,8 +101,12 @@ describe('Textarea component', () => {
     expect(label).toHaveAttribute('for', 'accessible-textarea');
 
     // textarea is focusable
-    const textarea = getByPlaceholderText('Type here');
-    textarea.focus();
-    expect(textarea).toHaveFocus();
+    const input = getByPlaceholderText('Type here');
+    userEvent.click(input);
+    expect(input).toHaveFocus();
+
+    // textarea does not trap focus
+    userEvent.tab();
+    expect(input).not.toHaveFocus();
   });
 });

From e548e71b64dff525651d3caeecde6d6b2a87029f Mon Sep 17 00:00:00 2001
From: Eileen Burdekin <eileenburdekin@proton.me>
Date: Fri, 26 Jul 2024 18:29:54 -0700
Subject: [PATCH 3/5] simplify prop checking function

---
 .../statement-generator/src/tests/textareas.test.tsx  | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/products/statement-generator/src/tests/textareas.test.tsx b/products/statement-generator/src/tests/textareas.test.tsx
index 5ae2a328..eee0a839 100644
--- a/products/statement-generator/src/tests/textareas.test.tsx
+++ b/products/statement-generator/src/tests/textareas.test.tsx
@@ -32,9 +32,14 @@ describe('Textarea component', () => {
       input: HTMLElement,
       expectedProps: ExpectedProps
     ) => {
-      expect(input).toHaveAttribute('placeholder', expectedProps.placeholder);
-      expect(input).toHaveAttribute('rows', expectedProps.rows);
-      expect(input).toHaveAttribute('id', expectedProps.id);
+      const attributes: (keyof typeof expectedProps)[] = [
+        'placeholder',
+        'rows',
+        'id',
+      ];
+      attributes.forEach((attr) => {
+        expect(input).toHaveAttribute(attr, expectedProps[attr]);
+      });
     };
 
     const { getByText, rerender } = render(

From b0de32efe9275e352d81d81d572f055bb54efdf2 Mon Sep 17 00:00:00 2001
From: Eileen Burdekin <eileenburdekin@proton.me>
Date: Fri, 26 Jul 2024 18:40:18 -0700
Subject: [PATCH 4/5] remove unnecessary props

---
 products/statement-generator/src/tests/textareas.test.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/products/statement-generator/src/tests/textareas.test.tsx b/products/statement-generator/src/tests/textareas.test.tsx
index eee0a839..e9c833bb 100644
--- a/products/statement-generator/src/tests/textareas.test.tsx
+++ b/products/statement-generator/src/tests/textareas.test.tsx
@@ -94,8 +94,6 @@ describe('Textarea component', () => {
           label="accessibleTextarea"
           placeholder="Type here"
           handleChange={() => {}}
-          defaultValue=""
-          rows={3}
         />
       </ThemeProvider>
     );

From 14b0a014e70b2f5e963518d54edf42c4912bc2f4 Mon Sep 17 00:00:00 2001
From: Eileen Burdekin <eileenburdekin@proton.me>
Date: Sun, 11 Aug 2024 22:05:19 -0700
Subject: [PATCH 5/5] update test to account for tabbing

---
 .../statement-generator/src/tests/textareas.test.tsx   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/products/statement-generator/src/tests/textareas.test.tsx b/products/statement-generator/src/tests/textareas.test.tsx
index e9c833bb..c6abb94a 100644
--- a/products/statement-generator/src/tests/textareas.test.tsx
+++ b/products/statement-generator/src/tests/textareas.test.tsx
@@ -103,13 +103,19 @@ describe('Textarea component', () => {
     expect(label).toBeInTheDocument();
     expect(label).toHaveAttribute('for', 'accessible-textarea');
 
-    // textarea is focusable
+    // textarea and label focus on tab
     const input = getByPlaceholderText('Type here');
-    userEvent.click(input);
+    userEvent.tab();
+    expect(label).toHaveFocus();
+    userEvent.tab();
     expect(input).toHaveFocus();
 
     // textarea does not trap focus
     userEvent.tab();
     expect(input).not.toHaveFocus();
+
+    // textarea focuses on click
+    userEvent.click(input);
+    expect(input).toHaveFocus();
   });
 });