From 4aa44b189c7d3d33e8f95bba784e49f227bd9018 Mon Sep 17 00:00:00 2001 From: Said Shah Date: Mon, 26 Oct 2020 16:39:06 -0400 Subject: [PATCH 1/3] Added tests for TextAreaFormField --- .../form-fields/text-area-form-field.test.tsx | 96 ++++++++++++++++++- .../form-fields/text-area-form-field.tsx | 3 +- 2 files changed, 97 insertions(+), 2 deletions(-) diff --git a/src/molecules/form-fields/text-area-form-field.test.tsx b/src/molecules/form-fields/text-area-form-field.test.tsx index 8a1b462..427ce06 100644 --- a/src/molecules/form-fields/text-area-form-field.test.tsx +++ b/src/molecules/form-fields/text-area-form-field.test.tsx @@ -1,6 +1,9 @@ import React from "react"; import { render } from "@testing-library/react"; -import { TextAreaFormField } from "./text-area-form-field"; +import { + TextAreaFormField, + InvalidInputClassName, +} from "./text-area-form-field"; import faker from "faker"; describe("TextAreaFormField", () => { @@ -16,4 +19,95 @@ describe("TextAreaFormField", () => { // Assert expect(getByLabelText(expected)).not.toBeNull(); }); + + test("when has errorsMessages prop, renders text area form field with error message", () => { + // Arrange + const expected = faker.random.words(); + const testErrorMessage = faker.random.words(); + + // Act + const { getByText } = render( + {}} + errorMessages={[testErrorMessage]} + /> + ); + + // Assert + expect(getByText(testErrorMessage)).not.toBeNil(); + }); + + test("when has errorsMessage prop, renders text area form field with error message", () => { + // Arrange + const expected = faker.random.words(); + const testErrorMessage = faker.random.words(); + + // Act + const { getByText } = render( + {}} + errorMessage={testErrorMessage} + /> + ); + + // Assert + expect(getByText(testErrorMessage)).not.toBeNil(); + }); + + test(`when isValid prop is false, renders with ${InvalidInputClassName} class name`, () => { + // Arrange + const expected = faker.random.words(); + + // Act + const { container } = render( + {}} + isValid={false} + /> + ); + const result = container.querySelector("." + InvalidInputClassName); + + // Assert + expect(result).not.toBeNil(); + }); + + test(`when isValid prop is true, renders with out ${InvalidInputClassName} class name`, () => { + // Arrange + const expected = faker.random.words(); + + // Act + const { container } = render( + {}} + isValid={true} + /> + ); + const result = container.querySelector("." + InvalidInputClassName); + + // Assert + expect(result).toBeNil(); + }); + + test("when required prop set, renders with required text", () => { + // Arrange + const expected = faker.random.words(); + const requiredText = "*"; + + // Act + const { container } = render( + {}} + required={true} + /> + ); + const htmlLabelTag = container.getElementsByTagName("label"); + + // Assert + expect(htmlLabelTag[0].textContent).toContain(requiredText); + }); }); diff --git a/src/molecules/form-fields/text-area-form-field.tsx b/src/molecules/form-fields/text-area-form-field.tsx index c9147b5..a377489 100644 --- a/src/molecules/form-fields/text-area-form-field.tsx +++ b/src/molecules/form-fields/text-area-form-field.tsx @@ -8,6 +8,7 @@ import { StringUtils, CollectionUtils } from "andculturecode-javascript-core"; // ----------------------------------------------------------------------------------------- const COMPONENT_CLASS = "c-form-field"; +export const InvalidInputClassName = "-invalid"; // #endregion Constants @@ -60,7 +61,7 @@ const TextAreaFormField: React.FC = ( value, } = props; - const cssIsValid = isValid ? "" : "-invalid"; + const cssIsValid = isValid ? "" : InvalidInputClassName; const fieldId = props.fieldId ?? uuid.v4(); const hasErrorMessage = StringUtils.hasValue(errorMessage); const hasErrors = CollectionUtils.hasValues(errorMessages); From 6f704b2062a4fa3b915b76edb206c07739a45abe Mon Sep 17 00:00:00 2001 From: Said Shah Date: Tue, 27 Oct 2020 13:07:27 -0400 Subject: [PATCH 2/3] Formatting and text changes --- src/molecules/form-fields/text-area-form-field.test.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/molecules/form-fields/text-area-form-field.test.tsx b/src/molecules/form-fields/text-area-form-field.test.tsx index 427ce06..f83ad58 100644 --- a/src/molecules/form-fields/text-area-form-field.test.tsx +++ b/src/molecules/form-fields/text-area-form-field.test.tsx @@ -1,8 +1,8 @@ import React from "react"; import { render } from "@testing-library/react"; import { - TextAreaFormField, InvalidInputClassName, + TextAreaFormField, } from "./text-area-form-field"; import faker from "faker"; @@ -20,7 +20,7 @@ describe("TextAreaFormField", () => { expect(getByLabelText(expected)).not.toBeNull(); }); - test("when has errorsMessages prop, renders text area form field with error message", () => { + test("when has errorMessages prop, renders text area form field with error message", () => { // Arrange const expected = faker.random.words(); const testErrorMessage = faker.random.words(); @@ -38,7 +38,7 @@ describe("TextAreaFormField", () => { expect(getByText(testErrorMessage)).not.toBeNil(); }); - test("when has errorsMessage prop, renders text area form field with error message", () => { + test("when has errorMessage prop, renders text area form field with error message", () => { // Arrange const expected = faker.random.words(); const testErrorMessage = faker.random.words(); @@ -74,7 +74,7 @@ describe("TextAreaFormField", () => { expect(result).not.toBeNil(); }); - test(`when isValid prop is true, renders with out ${InvalidInputClassName} class name`, () => { + test(`when isValid prop is true, renders without ${InvalidInputClassName} class name`, () => { // Arrange const expected = faker.random.words(); From f49fc2a4ab718e24f7f10b2cd970c6b59854ba77 Mon Sep 17 00:00:00 2001 From: Said Shah Date: Wed, 28 Oct 2020 10:21:43 -0400 Subject: [PATCH 3/3] Changes based on PR comments --- .../form-fields/text-area-form-field.test.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/molecules/form-fields/text-area-form-field.test.tsx b/src/molecules/form-fields/text-area-form-field.test.tsx index f83ad58..fe379b3 100644 --- a/src/molecules/form-fields/text-area-form-field.test.tsx +++ b/src/molecules/form-fields/text-area-form-field.test.tsx @@ -20,25 +20,27 @@ describe("TextAreaFormField", () => { expect(getByLabelText(expected)).not.toBeNull(); }); - test("when has errorMessages prop, renders text area form field with error message", () => { + test("when has errorMessages prop, renders with error messages", () => { // Arrange const expected = faker.random.words(); - const testErrorMessage = faker.random.words(); + const firstErrorMessage = faker.random.words(); + const secondErrorMessage = faker.random.words(); // Act const { getByText } = render( {}} - errorMessages={[testErrorMessage]} + errorMessages={[firstErrorMessage, secondErrorMessage]} /> ); // Assert - expect(getByText(testErrorMessage)).not.toBeNil(); + expect(getByText(firstErrorMessage)).not.toBeNil(); + expect(getByText(secondErrorMessage)).not.toBeNil(); }); - test("when has errorMessage prop, renders text area form field with error message", () => { + test("when has errorMessage prop, renders with error message", () => { // Arrange const expected = faker.random.words(); const testErrorMessage = faker.random.words();