From 906af54998b53ce415997a9eadb4438850ff9ec9 Mon Sep 17 00:00:00 2001
From: Bea Esguerra <beaesguerra@khanacademy.org>
Date: Tue, 12 Nov 2024 16:19:38 -0700
Subject: [PATCH] clean up more arrange/act comments

---
 .../components/__tests__/text-area.test.tsx   | 42 +++++++++----------
 .../components/__tests__/text-field.test.tsx  | 41 ++++++++++--------
 2 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/packages/wonder-blocks-form/src/components/__tests__/text-area.test.tsx b/packages/wonder-blocks-form/src/components/__tests__/text-area.test.tsx
index 3595566d8..34216eb79 100644
--- a/packages/wonder-blocks-form/src/components/__tests__/text-area.test.tsx
+++ b/packages/wonder-blocks-form/src/components/__tests__/text-area.test.tsx
@@ -828,13 +828,12 @@ describe("TextArea", () => {
 
             it("should set aria-invalid to false if the error prop is false", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextArea value="text" onChange={() => {}} error={false} />,
                     defaultOptions,
                 );
 
-                // Act
-
                 // Assert
                 const textArea = await screen.findByRole("textbox");
                 expect(textArea).toHaveAttribute("aria-invalid", "false");
@@ -842,13 +841,12 @@ describe("TextArea", () => {
 
             it("should set aria-invalid to false if the error prop is not provided", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextArea value="text" onChange={() => {}} />,
                     defaultOptions,
                 );
 
-                // Act
-
                 // Assert
                 const textArea = await screen.findByRole("textbox");
                 expect(textArea).toHaveAttribute("aria-invalid", "false");
@@ -860,6 +858,7 @@ describe("TextArea", () => {
         describe("validate prop", () => {
             it("should be in an error state if the initial value is not empty and not valid", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextArea
                         value="tooShort"
@@ -872,7 +871,6 @@ describe("TextArea", () => {
                     />,
                     defaultOptions,
                 );
-                // Act
 
                 // Assert
                 const textArea = await screen.findByRole("textbox");
@@ -881,6 +879,7 @@ describe("TextArea", () => {
 
             it("should not be in an error state if the initial value is empty and not valid", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextArea
                         value=""
@@ -893,7 +892,6 @@ describe("TextArea", () => {
                     />,
                     defaultOptions,
                 );
-                // Act
 
                 // Assert
                 const textArea = await screen.findByRole("textbox");
@@ -902,6 +900,7 @@ describe("TextArea", () => {
 
             it("should not be in an error state if the initial value is valid", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextArea
                         value="LongerThan10"
@@ -914,7 +913,6 @@ describe("TextArea", () => {
                     />,
                     defaultOptions,
                 );
-                // Act
 
                 // Assert
                 const textArea = await screen.findByRole("textbox");
@@ -998,9 +996,10 @@ describe("TextArea", () => {
 
             it("should call the onValidate function only once when it is first rendered (once after mount)", async () => {
                 // Arrange
-                // Act
                 const onValidate = jest.fn();
                 const errorMessage = "Error message";
+
+                // Act
                 render(
                     <TextArea
                         value="text"
@@ -1019,8 +1018,9 @@ describe("TextArea", () => {
 
             it("should not call the validate function when it is first rendered if it is disabled and value is not empty", async () => {
                 // Arrange
-                // Act
                 const validate = jest.fn();
+
+                // Act
                 render(
                     <TextArea
                         value="text"
@@ -1038,6 +1038,8 @@ describe("TextArea", () => {
             it("should not call the validate function when it is first rendered if the value is empty", async () => {
                 // Arrange
                 const validate = jest.fn();
+
+                // Act
                 render(
                     <TextArea
                         value=""
@@ -1046,7 +1048,6 @@ describe("TextArea", () => {
                     />,
                     defaultOptions,
                 );
-                // Act
 
                 // Assert
                 expect(validate).not.toHaveBeenCalled();
@@ -1110,6 +1111,8 @@ describe("TextArea", () => {
                 // Arrange
                 const handleValidate = jest.fn();
                 const errorMsg = "error message";
+
+                // Act
                 render(
                     <TextArea
                         value="text"
@@ -1119,7 +1122,6 @@ describe("TextArea", () => {
                     />,
                     defaultOptions,
                 );
-                // Act
 
                 // Assert
                 expect(handleValidate).toHaveBeenCalledExactlyOnceWith(
@@ -1130,6 +1132,8 @@ describe("TextArea", () => {
             it("should call the onValidate prop with null if the validate prop returns null", () => {
                 // Arrange
                 const handleValidate = jest.fn();
+
+                // Act
                 render(
                     <TextArea
                         value="text"
@@ -1139,7 +1143,6 @@ describe("TextArea", () => {
                     />,
                     defaultOptions,
                 );
-                // Act
 
                 // Assert
                 expect(handleValidate).toHaveBeenCalledExactlyOnceWith(null);
@@ -1148,6 +1151,8 @@ describe("TextArea", () => {
             it("should call the onValidate prop with null if the validate prop is a void function", () => {
                 // Arrange
                 const handleValidate = jest.fn();
+
+                // Act
                 render(
                     <TextArea
                         value="text"
@@ -1157,7 +1162,6 @@ describe("TextArea", () => {
                     />,
                     defaultOptions,
                 );
-                // Act
 
                 // Assert
                 expect(handleValidate).toHaveBeenCalledExactlyOnceWith(null);
@@ -1167,6 +1171,7 @@ describe("TextArea", () => {
         describe("required prop", () => {
             it("should initially render with no error if it is required and the value is empty", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextArea
                         value=""
@@ -1176,8 +1181,6 @@ describe("TextArea", () => {
                     defaultOptions,
                 );
 
-                // Act
-
                 // Assert
                 const textArea = await screen.findByRole("textbox");
                 expect(textArea).toHaveAttribute("aria-invalid", "false");
@@ -1185,6 +1188,7 @@ describe("TextArea", () => {
 
             it("should initially render with no error if it is required and the value is not empty", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextArea
                         value="Text"
@@ -1194,8 +1198,6 @@ describe("TextArea", () => {
                     defaultOptions,
                 );
 
-                // Act
-
                 // Assert
                 const textArea = await screen.findByRole("textbox");
                 expect(textArea).toHaveAttribute("aria-invalid", "false");
@@ -1246,6 +1248,7 @@ describe("TextArea", () => {
 
             it("should not call onValidate on first render if the value is empty and required prop is used", async () => {
                 // Arrange
+                // Act
                 const handleValidate = jest.fn();
                 render(
                     <TextArea
@@ -1257,14 +1260,13 @@ describe("TextArea", () => {
                     defaultOptions,
                 );
 
-                // Act
-
                 // Assert
                 expect(handleValidate).not.toHaveBeenCalled();
             });
 
             it("should call onValidate with no error message on first render if the value is not empty and required prop is used", async () => {
                 // Arrange
+                // Act
                 const handleValidate = jest.fn();
                 render(
                     <TextArea
@@ -1276,8 +1278,6 @@ describe("TextArea", () => {
                     defaultOptions,
                 );
 
-                // Act
-
                 // Assert
                 expect(handleValidate).toHaveBeenCalledExactlyOnceWith(null);
             });
diff --git a/packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx b/packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx
index 19efc1bdc..c99b36e32 100644
--- a/packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx
+++ b/packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx
@@ -751,6 +751,7 @@ describe("TextField", () => {
         describe("validate prop", () => {
             it("should be in an error state if the initial value is not empty and not valid", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextField
                         value="tooShort"
@@ -762,7 +763,6 @@ describe("TextField", () => {
                         }}
                     />,
                 );
-                // Act
 
                 // Assert
                 const field = await screen.findByRole("textbox");
@@ -771,6 +771,7 @@ describe("TextField", () => {
 
             it("should not be in an error state if the initial value is empty and not valid", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextField
                         value=""
@@ -782,7 +783,6 @@ describe("TextField", () => {
                         }}
                     />,
                 );
-                // Act
 
                 // Assert
                 const field = await screen.findByRole("textbox");
@@ -791,6 +791,7 @@ describe("TextField", () => {
 
             it("should not be in an error state if the initial value is valid", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextField
                         value="LongerThan10"
@@ -802,7 +803,6 @@ describe("TextField", () => {
                         }}
                     />,
                 );
-                // Act
 
                 // Assert
                 const field = await screen.findByRole("textbox");
@@ -868,8 +868,9 @@ describe("TextField", () => {
 
             it("should call the validate function twice when it is first rendered (once on initialization, once after mount)", async () => {
                 // Arrange
-                // Act
                 const validate = jest.fn();
+
+                // Act
                 render(
                     <TextField
                         value="text"
@@ -884,9 +885,10 @@ describe("TextField", () => {
 
             it("should call the onValidate function only once when it is first rendered (once after mount)", async () => {
                 // Arrange
-                // Act
                 const onValidate = jest.fn();
                 const errorMessage = "Error message";
+
+                // Act
                 render(
                     <TextField
                         value="text"
@@ -904,8 +906,9 @@ describe("TextField", () => {
 
             it("should not call the validate function when it is first rendered if it is disabled and value is not empty", async () => {
                 // Arrange
-                // Act
                 const validate = jest.fn();
+
+                // Act
                 render(
                     <TextField
                         value="text"
@@ -922,6 +925,8 @@ describe("TextField", () => {
             it("should not call the validate function when it is first rendered if the value is empty", async () => {
                 // Arrange
                 const validate = jest.fn();
+
+                // Act
                 render(
                     <TextField
                         value=""
@@ -929,7 +934,6 @@ describe("TextField", () => {
                         validate={validate}
                     />,
                 );
-                // Act
 
                 // Assert
                 expect(validate).not.toHaveBeenCalled();
@@ -993,6 +997,8 @@ describe("TextField", () => {
                 // Arrange
                 const handleValidate = jest.fn();
                 const errorMsg = "error message";
+
+                // Act
                 render(
                     <TextField
                         value="text"
@@ -1001,7 +1007,6 @@ describe("TextField", () => {
                         onValidate={handleValidate}
                     />,
                 );
-                // Act
 
                 // Assert
                 expect(handleValidate).toHaveBeenCalledExactlyOnceWith(
@@ -1012,6 +1017,8 @@ describe("TextField", () => {
             it("should call the onValidate prop with null if the validate prop returns null", () => {
                 // Arrange
                 const handleValidate = jest.fn();
+
+                // Act
                 render(
                     <TextField
                         value="text"
@@ -1020,7 +1027,6 @@ describe("TextField", () => {
                         onValidate={handleValidate}
                     />,
                 );
-                // Act
 
                 // Assert
                 expect(handleValidate).toHaveBeenCalledExactlyOnceWith(null);
@@ -1029,6 +1035,8 @@ describe("TextField", () => {
             it("should call the onValidate prop with null if the validate prop is a void function", () => {
                 // Arrange
                 const handleValidate = jest.fn();
+
+                // Act
                 render(
                     <TextField
                         value="text"
@@ -1037,7 +1045,6 @@ describe("TextField", () => {
                         onValidate={handleValidate}
                     />,
                 );
-                // Act
 
                 // Assert
                 expect(handleValidate).toHaveBeenCalledExactlyOnceWith(null);
@@ -1047,6 +1054,7 @@ describe("TextField", () => {
         describe("required prop", () => {
             it("should initially render with no error if it is required and the value is empty", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextField
                         value=""
@@ -1055,8 +1063,6 @@ describe("TextField", () => {
                     />,
                 );
 
-                // Act
-
                 // Assert
                 const field = await screen.findByRole("textbox");
                 expect(field).toHaveAttribute("aria-invalid", "false");
@@ -1064,6 +1070,7 @@ describe("TextField", () => {
 
             it("should initially render with no error if it is required and the value is not empty", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextField
                         value="Text"
@@ -1072,8 +1079,6 @@ describe("TextField", () => {
                     />,
                 );
 
-                // Act
-
                 // Assert
                 const field = await screen.findByRole("textbox");
                 expect(field).toHaveAttribute("aria-invalid", "false");
@@ -1123,6 +1128,8 @@ describe("TextField", () => {
             it("should not call onValidate on first render if the value is empty and required prop is used", async () => {
                 // Arrange
                 const handleValidate = jest.fn();
+
+                // Act
                 render(
                     <TextField
                         value=""
@@ -1132,8 +1139,6 @@ describe("TextField", () => {
                     />,
                 );
 
-                // Act
-
                 // Assert
                 expect(handleValidate).not.toHaveBeenCalled();
             });
@@ -1141,6 +1146,8 @@ describe("TextField", () => {
             it("should call onValidate with no error message on first render if the value is not empty and required prop is used", async () => {
                 // Arrange
                 const handleValidate = jest.fn();
+
+                // Act
                 render(
                     <TextField
                         value="Text"
@@ -1150,8 +1157,6 @@ describe("TextField", () => {
                     />,
                 );
 
-                // Act
-
                 // Assert
                 expect(handleValidate).toHaveBeenCalledExactlyOnceWith(null);
             });