From 7b733f065a36b6ff614b79fd8f3c6fee42b00e2b Mon Sep 17 00:00:00 2001
From: Faisal Mumtaz <fascaptech@gmail.com>
Date: Tue, 26 Dec 2023 01:10:52 +0000
Subject: [PATCH] Feat : All the components are now tested and working

---
 src/components/ErrorMessages.tsx              |  9 +++
 src/components/NumberOfBeings.test.tsx        | 58 +++++++++++++
 src/components/NumberOfBeings.tsx             | 29 +++++++
 src/components/PlanetName.test.tsx            | 59 ++++++++++++++
 src/components/PlanetName.tsx                 | 29 +++++++
 src/components/SparingReason.test.tsx         | 63 +++++++++++++++
 src/components/SparingReason.tsx              | 28 +++++++
 src/components/SpeciesName.test.tsx           | 66 +++++++++++++++
 src/components/SpeciesName.tsx                | 29 +++++++
 src/components/TwoPlusTwo.test.tsx            | 81 +++++++++++++++++++
 src/components/TwoPlusTwo.tsx                 | 30 +++++++
 src/components/W12MForm.test.tsx              | 26 +++---
 src/components/W12MForm.tsx                   | 71 ++++++++++++++--
 .../validate_number_of_beings.test.tsx        | 33 ++++++++
 src/validate/validate_number_of_beings.tsx    | 20 +++++
 src/validate/validate_planet_name.test.tsx    | 44 ++++++++++
 src/validate/validate_planet_name.tsx         | 12 +++
 src/validate/validate_sparing_reason.test.tsx | 28 +++++++
 src/validate/validate_sparing_reason.tsx      | 13 +++
 src/validate/validate_species_name.test.tsx   | 40 +++++++++
 src/validate/validate_species_name.tsx        | 15 ++++
 src/validate/validate_two_plus_two.test.tsx   | 14 ++++
 src/validate/validate_two_plus_two.tsx        | 11 +++
 23 files changed, 791 insertions(+), 17 deletions(-)
 create mode 100644 src/components/ErrorMessages.tsx
 create mode 100644 src/components/NumberOfBeings.test.tsx
 create mode 100644 src/components/NumberOfBeings.tsx
 create mode 100644 src/components/PlanetName.test.tsx
 create mode 100644 src/components/PlanetName.tsx
 create mode 100644 src/components/SparingReason.test.tsx
 create mode 100644 src/components/SparingReason.tsx
 create mode 100644 src/components/SpeciesName.test.tsx
 create mode 100644 src/components/SpeciesName.tsx
 create mode 100644 src/components/TwoPlusTwo.test.tsx
 create mode 100644 src/components/TwoPlusTwo.tsx
 create mode 100644 src/validate/validate_number_of_beings.test.tsx
 create mode 100644 src/validate/validate_number_of_beings.tsx
 create mode 100644 src/validate/validate_planet_name.test.tsx
 create mode 100644 src/validate/validate_planet_name.tsx
 create mode 100644 src/validate/validate_sparing_reason.test.tsx
 create mode 100644 src/validate/validate_sparing_reason.tsx
 create mode 100644 src/validate/validate_species_name.test.tsx
 create mode 100644 src/validate/validate_species_name.tsx
 create mode 100644 src/validate/validate_two_plus_two.test.tsx
 create mode 100644 src/validate/validate_two_plus_two.tsx

diff --git a/src/components/ErrorMessages.tsx b/src/components/ErrorMessages.tsx
new file mode 100644
index 00000000..04f6e252
--- /dev/null
+++ b/src/components/ErrorMessages.tsx
@@ -0,0 +1,9 @@
+interface ErrorMessagesProps {
+  messages: string[];
+}
+
+const ErrorMessages: React.FC<ErrorMessagesProps> = ({ messages }) => {
+  return <div className="errorMsg">{messages.join(", ")}</div>;
+};
+
+export default ErrorMessages;
diff --git a/src/components/NumberOfBeings.test.tsx b/src/components/NumberOfBeings.test.tsx
new file mode 100644
index 00000000..8c0cf898
--- /dev/null
+++ b/src/components/NumberOfBeings.test.tsx
@@ -0,0 +1,58 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import NumberOfBeings from "./NumberOfBeings";
+
+test("renders form element and displays numberOfBeing props", () => {
+  const mockOnChange = jest.fn();
+  const mockValidateNumberOfBeings = jest.fn();
+  mockValidateNumberOfBeings.mockReturnValue([]);
+
+  render(
+    <NumberOfBeings
+      numberOfBeings="2"
+      onChangeBeings={mockOnChange}
+      validateField={mockValidateNumberOfBeings}
+    />
+  );
+
+  const labelText = screen.getByLabelText(/Number Of Beings/i);
+  expect(labelText).toBeInTheDocument();
+  const inputText = screen.getByDisplayValue("2");
+  expect(inputText).toBeInTheDocument();
+  const errorMessage = screen.queryByText("Error message on beings number");
+  expect(errorMessage).toBe(null);
+});
+
+test("calls the onChange function in input with correct value", () => {
+  const mockOnChange = jest.fn();
+  const mockValidateNumberOfBeings = jest.fn();
+  mockValidateNumberOfBeings.mockReturnValue([]);
+  render(
+    <NumberOfBeings
+      numberOfBeings="2"
+      onChangeBeings={mockOnChange}
+      validateField={mockValidateNumberOfBeings}
+    />
+  );
+
+  const input = screen.getByRole("textbox");
+  fireEvent.change(input, { target: { value: "10" } });
+  expect(mockOnChange).toHaveBeenCalledWith("10");
+});
+
+test("error messages are displayed when invalid number of beings is used", () => {
+  const mockOnChange = jest.fn();
+  const mockValidateNumberOfBeings = jest.fn();
+  mockValidateNumberOfBeings.mockReturnValue(["Beings should be more than 3"]);
+
+  render(
+    <NumberOfBeings
+      numberOfBeings="2"
+      onChangeBeings={mockOnChange}
+      validateField={mockValidateNumberOfBeings}
+    />
+  );
+
+  const errorMessage = screen.getByText("Beings should be more than 3");
+
+  expect(errorMessage).toBeInTheDocument();
+});
diff --git a/src/components/NumberOfBeings.tsx b/src/components/NumberOfBeings.tsx
new file mode 100644
index 00000000..f6edd7b5
--- /dev/null
+++ b/src/components/NumberOfBeings.tsx
@@ -0,0 +1,29 @@
+import ErrorMessages from "./ErrorMessages";
+
+interface NumberOfBeingsProps {
+  numberOfBeings: string;
+  onChangeBeings: (value: string) => void;
+  validateField: (name: string) => string[];
+}
+
+const NumberOfBeings: React.FC<NumberOfBeingsProps> = ({
+  numberOfBeings,
+  onChangeBeings,
+  validateField,
+}) => (
+  <>
+    <div>
+      <label htmlFor="number-of-beings">Number Of Beings</label>
+      <input
+        type="text"
+        name="number-of-beings"
+        id="number-of-beings"
+        value={numberOfBeings}
+        onChange={(e) => onChangeBeings(e.target.value)}
+      />
+    </div>
+    <ErrorMessages messages={validateField(numberOfBeings)} />
+  </>
+);
+
+export default NumberOfBeings;
diff --git a/src/components/PlanetName.test.tsx b/src/components/PlanetName.test.tsx
new file mode 100644
index 00000000..64c35b89
--- /dev/null
+++ b/src/components/PlanetName.test.tsx
@@ -0,0 +1,59 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import PlanetName from "./PlanetName";
+
+test("renders form element and displays planetName props", () => {
+  const mockOnChange = jest.fn();
+  const mockValidatePlanetName = jest.fn();
+  mockValidatePlanetName.mockReturnValue([]);
+
+  render(
+    <PlanetName
+      planetName="mars"
+      onChangePlanetName={mockOnChange}
+      validateField={mockValidatePlanetName}
+    />
+  );
+
+  const labelText = screen.getByLabelText(/Planet Name/i);
+  expect(labelText).toBeInTheDocument();
+  const inputText = screen.getByDisplayValue("mars");
+  expect(inputText).toBeInTheDocument();
+
+  const errorMessage = screen.queryByText("Planet name: error!panic!");
+  expect(errorMessage).toBe(null);
+});
+
+test("calls the onChange function in input with correct value", () => {
+  const mockOnChange = jest.fn();
+  const mockValidatePlanetName = jest.fn();
+  mockValidatePlanetName.mockReturnValue([]);
+
+  render(
+    <PlanetName
+      planetName="mars"
+      onChangePlanetName={mockOnChange}
+      validateField={mockValidatePlanetName}
+    />
+  );
+
+  const input = screen.getByRole("textbox");
+  fireEvent.change(input, { target: { value: "Earth" } });
+  expect(mockOnChange).toHaveBeenCalledWith("Earth");
+});
+
+test("error messages are displayed when invalid planet name is used", () => {
+  const mockOnChange = jest.fn();
+  const mockValidatePlanetName = jest.fn();
+  mockValidatePlanetName.mockReturnValue(["panic!"]);
+
+  render(
+    <PlanetName
+      planetName="mars"
+      onChangePlanetName={mockOnChange}
+      validateField={mockValidatePlanetName}
+    />
+  );
+
+  const errorMessage = screen.getByText("panic!");
+  expect(errorMessage).toBeInTheDocument();
+});
diff --git a/src/components/PlanetName.tsx b/src/components/PlanetName.tsx
new file mode 100644
index 00000000..52f29d80
--- /dev/null
+++ b/src/components/PlanetName.tsx
@@ -0,0 +1,29 @@
+import ErrorMessages from "./ErrorMessages";
+
+interface PlanetNameProps {
+  planetName: string;
+  onChangePlanetName: (value: string) => void;
+  validateField: (name: string) => string[];
+}
+
+const PlanetName: React.FC<PlanetNameProps> = ({
+  planetName,
+  onChangePlanetName,
+  validateField,
+}) => (
+  <>
+    <div>
+      <label htmlFor="planet-name">Planet Name</label>
+      <input
+        type="text"
+        name="planet-name"
+        id="planet-name"
+        value={planetName}
+        onChange={(e) => onChangePlanetName(e.target.value)}
+      />
+    </div>
+    <ErrorMessages messages={validateField(planetName)} />
+  </>
+);
+
+export default PlanetName;
diff --git a/src/components/SparingReason.test.tsx b/src/components/SparingReason.test.tsx
new file mode 100644
index 00000000..e80b3f2e
--- /dev/null
+++ b/src/components/SparingReason.test.tsx
@@ -0,0 +1,63 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import SparingReason from "./SparingReason";
+test("renders form element and displays sparingReason props", () => {
+  const mockOnChange = jest.fn();
+  const mockValidateSparingReason = jest.fn();
+  mockValidateSparingReason.mockReturnValue([]);
+
+  render(
+    <SparingReason
+      sparingReason="Life is good!"
+      onChangeSparingReason={mockOnChange}
+      validateField={mockValidateSparingReason}
+    />
+  );
+
+  const labelText = screen.getByLabelText("Reason for Sparing");
+  expect(labelText).toBeInTheDocument();
+  const inputText = screen.getByDisplayValue("Life is good!");
+  expect(inputText).toBeInTheDocument();
+  const errorMessage = screen.queryByText(
+    "Reason for sparing: Must be between 17 and 153 characters"
+  );
+  expect(errorMessage).toBe(null);
+});
+
+test("calls the onChange function in input with correct value", () => {
+  const mockOnChange = jest.fn();
+  const mockValidateSparingReason = jest.fn();
+  mockValidateSparingReason.mockReturnValue([]);
+
+  render(
+    <SparingReason
+      sparingReason="Life is good!"
+      onChangeSparingReason={mockOnChange}
+      validateField={mockValidateSparingReason}
+    />
+  );
+  const input = screen.getByRole("textbox");
+  fireEvent.change(input, { target: { value: "Yes it is" } });
+  expect(mockOnChange).toHaveBeenCalledWith("Yes it is");
+});
+
+test("error messages are displayed when invalid sparing reason is used", () => {
+  const mockOnChange = jest.fn();
+  const mockValidateSparingReason = jest.fn();
+  mockValidateSparingReason.mockReturnValue([
+    "Reason for sparing: Must be between 17 and 153 characters",
+  ]);
+
+  render(
+    <SparingReason
+      sparingReason="Life is good!"
+      onChangeSparingReason={mockOnChange}
+      validateField={mockValidateSparingReason}
+    />
+  );
+
+  const errorMessage = screen.getByText(
+    "Reason for sparing: Must be between 17 and 153 characters"
+  );
+
+  expect(errorMessage).toBeInTheDocument();
+});
diff --git a/src/components/SparingReason.tsx b/src/components/SparingReason.tsx
new file mode 100644
index 00000000..44a64100
--- /dev/null
+++ b/src/components/SparingReason.tsx
@@ -0,0 +1,28 @@
+import ErrorMessages from "./ErrorMessages";
+
+interface SparingReasonProps {
+  sparingReason: string;
+  onChangeSparingReason: (value: string) => void;
+  validateField: (name: string) => string[];
+}
+
+const SparingReason: React.FC<SparingReasonProps> = ({
+  sparingReason,
+  onChangeSparingReason,
+  validateField,
+}) => (
+  <>
+    <div>
+      <label htmlFor="sparing-reason">Reason for Sparing</label>
+      <textarea
+        name="sparing-reason"
+        id="sparing-reason"
+        value={sparingReason}
+        onChange={(e) => onChangeSparingReason(e.target.value)}
+      />
+    </div>
+    <ErrorMessages messages={validateField(sparingReason)} />
+  </>
+);
+
+export default SparingReason;
diff --git a/src/components/SpeciesName.test.tsx b/src/components/SpeciesName.test.tsx
new file mode 100644
index 00000000..399843dc
--- /dev/null
+++ b/src/components/SpeciesName.test.tsx
@@ -0,0 +1,66 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import SpeciesName from "./SpeciesName";
+
+test("renders form element and displays speciesName props", () => {
+  const mockOnChange = jest.fn();
+  const mockValidateSpeciesName = jest.fn();
+  mockValidateSpeciesName.mockReturnValue([]);
+
+  render(
+    <SpeciesName
+      speciesName="humans"
+      onChangeSpeciesName={mockOnChange}
+      validateField={mockValidateSpeciesName}
+    />
+  );
+
+  const labelText = screen.getByLabelText(/Species Name/i);
+  expect(labelText).toBeInTheDocument();
+  const inputText = screen.getByDisplayValue("humans");
+  expect(inputText).toBeInTheDocument();
+  const errorMessage = screen.queryByText(
+    "Species Name: Must be between 3 and 23 characters"
+  );
+  expect(errorMessage).toBe(null);
+});
+
+test("calls the onChange function in input with correct value", () => {
+  const mockOnChange = jest.fn();
+  const mockValidateSpeciesName = jest.fn();
+  mockValidateSpeciesName.mockReturnValue([]);
+
+  render(
+    <SpeciesName
+      speciesName="humans"
+      onChangeSpeciesName={mockOnChange}
+      validateField={mockValidateSpeciesName}
+    />
+  );
+
+  const input = screen.getByRole("textbox");
+  fireEvent.change(input, { target: { value: "Blue Whale" } });
+  expect(mockOnChange).toHaveBeenCalledWith("Blue Whale");
+});
+
+test("error messages are displayed when invalid species name is used", () => {
+  const mockOnChange = jest.fn();
+  const mockValidateSpeciesName = jest.fn();
+  mockValidateSpeciesName.mockReturnValue([
+    "Species Name: Must be between 3 and 23 characters",
+    "another error",
+  ]);
+
+  render(
+    <SpeciesName
+      speciesName="ab"
+      onChangeSpeciesName={mockOnChange}
+      validateField={mockValidateSpeciesName}
+    />
+  );
+
+  const errorMessage = screen.getByText(
+    "Species Name: Must be between 3 and 23 characters, another error"
+  );
+
+  expect(errorMessage).toBeInTheDocument();
+});
diff --git a/src/components/SpeciesName.tsx b/src/components/SpeciesName.tsx
new file mode 100644
index 00000000..3aca2953
--- /dev/null
+++ b/src/components/SpeciesName.tsx
@@ -0,0 +1,29 @@
+import ErrorMessages from "./ErrorMessages";
+
+interface SpeciesNameProps {
+  speciesName: string;
+  onChangeSpeciesName: (value: string) => void;
+  validateField: (name: string) => string[];
+}
+
+const SpeciesName: React.FC<SpeciesNameProps> = ({
+  speciesName,
+  onChangeSpeciesName,
+  validateField,
+}) => (
+  <>
+    <div>
+      <label htmlFor="species-name">Species Name</label>
+      <input
+        type="text"
+        name="species-name"
+        id="species-name"
+        value={speciesName}
+        onChange={(e) => onChangeSpeciesName(e.target.value)}
+      />
+    </div>
+    <ErrorMessages messages={validateField(speciesName)} />
+  </>
+);
+
+export default SpeciesName;
diff --git a/src/components/TwoPlusTwo.test.tsx b/src/components/TwoPlusTwo.test.tsx
new file mode 100644
index 00000000..8233e435
--- /dev/null
+++ b/src/components/TwoPlusTwo.test.tsx
@@ -0,0 +1,81 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import TwoPlusTwo from "./TwoPlusTwo";
+test("renders form element and displays twoPlusTwoValue props", () => {
+  const mockOnChange = jest.fn();
+  const mockValidateTwoPlusTwo = jest.fn();
+  mockValidateTwoPlusTwo.mockReturnValue([]);
+
+  render(
+    <TwoPlusTwo
+      twoPlusTwoValue="4"
+      onChangeTwoPlusTwoValue={mockOnChange}
+      validateField={mockValidateTwoPlusTwo}
+    />
+  );
+
+  const labelText = screen.getByLabelText("What is 2 + 2?");
+  expect(labelText).toBeInTheDocument();
+  const inputText = screen.getByDisplayValue("4");
+  expect(inputText).toBeInTheDocument();
+  const errorMessage = screen.queryByText(
+    "Two plus two is 4! Choose 4 to be spared!"
+  );
+  expect(errorMessage).toBe(null);
+});
+
+describe("onChange functionality", () => {
+  test("calls the onChange function in input with correct value", () => {
+    const mockOnChange = jest.fn();
+    const mockValidateTwoPlusTwo = jest.fn();
+    mockValidateTwoPlusTwo.mockReturnValue([]);
+
+    render(
+      <TwoPlusTwo
+        twoPlusTwoValue="4"
+        onChangeTwoPlusTwoValue={mockOnChange}
+        validateField={mockValidateTwoPlusTwo}
+      />
+    );
+    const input = screen.getByLabelText("What is 2 + 2?");
+    fireEvent.change(input, { target: { value: "not-4" } });
+    expect(mockOnChange).toHaveBeenCalledWith("not-4");
+  });
+
+  test("calls the onChange function ignores values not in the option list", () => {
+    const mockOnChange = jest.fn();
+    const mockValidateTwoPlusTwo = jest.fn();
+    mockValidateTwoPlusTwo.mockReturnValue([]);
+
+    render(
+      <TwoPlusTwo
+        twoPlusTwoValue="4"
+        onChangeTwoPlusTwoValue={mockOnChange}
+        validateField={mockValidateTwoPlusTwo}
+      />
+    );
+    const input = screen.getByLabelText("What is 2 + 2?");
+    fireEvent.change(input, { target: { value: "42" } });
+    expect(mockOnChange).toHaveBeenCalledWith("");
+  });
+});
+
+test("error messages are displayed when invalid option is used used", () => {
+  const mockOnChange = jest.fn();
+  const mockValidateTwoPlusTwo = jest.fn();
+  mockValidateTwoPlusTwo.mockReturnValue([
+    "Two plus two is 4! Choose 4 to be spared!",
+  ]);
+
+  render(
+    <TwoPlusTwo
+      twoPlusTwoValue="4"
+      onChangeTwoPlusTwoValue={mockOnChange}
+      validateField={mockValidateTwoPlusTwo}
+    />
+  );
+  const errorMessage = screen.getByText(
+    "Two plus two is 4! Choose 4 to be spared!"
+  );
+
+  expect(errorMessage).toBeInTheDocument();
+});
diff --git a/src/components/TwoPlusTwo.tsx b/src/components/TwoPlusTwo.tsx
new file mode 100644
index 00000000..5ad58e01
--- /dev/null
+++ b/src/components/TwoPlusTwo.tsx
@@ -0,0 +1,30 @@
+import ErrorMessages from "./ErrorMessages";
+interface TwoPlusTwoProps {
+  twoPlusTwoValue: string;
+  onChangeTwoPlusTwoValue: (value: string) => void;
+  validateField: (name: string) => string[];
+}
+
+const TwoPlusTwo: React.FC<TwoPlusTwoProps> = ({
+  twoPlusTwoValue,
+  onChangeTwoPlusTwoValue,
+  validateField,
+}) => (
+  <>
+    <div>
+      <label htmlFor="two-plus-two">What is 2 + 2?</label>
+      <select
+        name="two-plus-two"
+        id="two-plus-two"
+        onChange={(e) => onChangeTwoPlusTwoValue(e.target.value)}
+        value={twoPlusTwoValue}
+      >
+        <option value="4">4</option>
+        <option value="not-4">Not 4</option>
+      </select>
+    </div>
+    <ErrorMessages messages={validateField(twoPlusTwoValue)} />
+  </>
+);
+
+export default TwoPlusTwo;
diff --git a/src/components/W12MForm.test.tsx b/src/components/W12MForm.test.tsx
index 42dee3b1..1549d687 100644
--- a/src/components/W12MForm.test.tsx
+++ b/src/components/W12MForm.test.tsx
@@ -1,12 +1,20 @@
-import { render } from '@testing-library/react';
-import W12MForm from './W12MForm';
+import { render, screen, fireEvent } from "@testing-library/react";
+import W12MForm from "./W12MForm";
 
-test('renders form element', () => {
-	// we can hold onto the object returned from render()
-	// this object has a container property that we can destructure and inspect
-	const { container } = render(<W12MForm />);
+test("renders form element", () => {
+  // we can hold onto the object returned from render()
+  // this object has a container property that we can destructure and inspect
+  const { container } = render(<W12MForm />);
 
-	// the container is just a normal DOM element, so we can look at normal properties like '.firstChild'
-	// for example, the firstChild of our container should be our form element
-	expect(container.firstChild).toHaveClass('w12MForm');
+  // the container is just a normal DOM element, so we can look at normal properties like '.firstChild'
+  // for example, the firstChild of our container should be our form element
+  expect(container.firstChild).toHaveClass("w12MForm");
+});
+
+describe("submit of form functionality", () => {
+  test("renders button", () => {
+    render(<W12MForm />);
+    const button = screen.getByRole("button");
+    expect(button).toBeInTheDocument();
+  });
 });
diff --git a/src/components/W12MForm.tsx b/src/components/W12MForm.tsx
index 6aa1ba58..41f4d09b 100644
--- a/src/components/W12MForm.tsx
+++ b/src/components/W12MForm.tsx
@@ -1,13 +1,68 @@
-import { useState } from 'react';
-import W12MHeader from './W12MHeader';
+import { useState } from "react";
+import W12MHeader from "./W12MHeader";
+import SpeciesName from "./SpeciesName";
+import PlanetName from "./PlanetName";
+import NumberOfBeings from "./NumberOfBeings";
+import TwoPlusTwo from "./TwoPlusTwo";
+import SparingReason from "./SparingReason";
+import validateSpeciesName from "../validate/validate_species_name";
+import validatePlanetName from "../validate/validate_planet_name";
+import validateSparingReason from "../validate/validate_sparing_reason";
+import validateNumberOfBeings from "../validate/validate_number_of_beings";
+import validateTwoPlusTwo from "../validate/validate_two_plus_two";
 
 const W12MForm = () => {
-	return (
-		<section className='w12MForm'>
-			<W12MHeader />
-			{/* REST OF FORM GOES HERE */}
-		</section>
-	);
+  const [speciesName, setSpeciesName] = useState("humans");
+  const [planetName, setPlanetName] = useState("Earth");
+  const [numberOfBeings, setNumberOfBeings] = useState("1000000000");
+  const [twoPlusTwoValue, setTwoPlusTwoPlusValue] = useState("4");
+  const [sparingReason, setSparingReason] = useState(
+    "Life on my planet is great!"
+  );
+
+  function logFormResponse() {
+    console.log(
+      speciesName,
+      planetName,
+      numberOfBeings,
+      twoPlusTwoValue,
+      sparingReason
+    );
+  }
+
+  return (
+    <section className="w12MForm">
+      <W12MHeader />
+      <SpeciesName
+        speciesName={speciesName}
+        onChangeSpeciesName={(e) => setSpeciesName(e)}
+        validateField={validateSpeciesName}
+      />
+      <PlanetName
+        planetName={planetName}
+        onChangePlanetName={(e) => setPlanetName(e)}
+        validateField={validatePlanetName}
+      />
+      <NumberOfBeings
+        numberOfBeings={numberOfBeings}
+        onChangeBeings={(e) => setNumberOfBeings(e)}
+        validateField={validateNumberOfBeings}
+      />
+      <TwoPlusTwo
+        twoPlusTwoValue={twoPlusTwoValue}
+        onChangeTwoPlusTwoValue={(e) => setTwoPlusTwoPlusValue(e)}
+        validateField={validateTwoPlusTwo}
+      />
+      <SparingReason
+        sparingReason={sparingReason}
+        onChangeSparingReason={(e) => setSparingReason(e)}
+        validateField={validateSparingReason}
+      />
+      <button type="button" onClick={() => logFormResponse()}>
+        Submit
+      </button>
+    </section>
+  );
 };
 
 export default W12MForm;
diff --git a/src/validate/validate_number_of_beings.test.tsx b/src/validate/validate_number_of_beings.test.tsx
new file mode 100644
index 00000000..1a4d1688
--- /dev/null
+++ b/src/validate/validate_number_of_beings.test.tsx
@@ -0,0 +1,33 @@
+import validateNumberOfBeings from "./validate_number_of_beings";
+
+const CHARACTER_ERROR = "Number of beings: Numbers ONLY please";
+const MIN_ERROR =
+  "Number of beings: Must be at least 1,000,000,000 (no commas!).";
+
+describe("valid number of beings", () => {
+  test("number of beings should be valid", () => {
+    expect(validateNumberOfBeings("1000000000")).toEqual([]);
+
+    expect(validateNumberOfBeings("1999332457213")).toEqual([]);
+  });
+});
+
+describe("validation for special characters and numbers", () => {
+  test("species name should not special characters or alphabet characters", () => {
+    expect(validateNumberOfBeings("hello world")).toEqual([CHARACTER_ERROR]);
+
+    expect(validateNumberOfBeings("hellooooo3Me")).toEqual([CHARACTER_ERROR]);
+
+    expect(validateNumberOfBeings("not @llowed o£k")).toEqual([
+      CHARACTER_ERROR,
+    ]);
+  });
+});
+
+describe("validation for number of characters", () => {
+  test("planet name should return error message if numbers less than 1,000,000,000", () => {
+    expect(validateNumberOfBeings("100")).toEqual([MIN_ERROR]);
+
+    expect(validateNumberOfBeings("999999999")).toEqual([MIN_ERROR]);
+  });
+});
diff --git a/src/validate/validate_number_of_beings.tsx b/src/validate/validate_number_of_beings.tsx
new file mode 100644
index 00000000..21dc43b2
--- /dev/null
+++ b/src/validate/validate_number_of_beings.tsx
@@ -0,0 +1,20 @@
+const CHARACTER_ERROR = "Number of beings: Numbers ONLY please";
+const MIN_ERROR =
+  "Number of beings: Must be at least 1,000,000,000 (no commas!).";
+
+const validateNumberOfBeings: (numberOfBeings: string) => string[] = (
+  numberOfBeings
+) => {
+  const errorMessages = Array<string>();
+  let num = 0;
+
+  if (numberOfBeings.match("[^0-9]")) errorMessages.push(CHARACTER_ERROR);
+  else num = Number(numberOfBeings);
+
+  if (num < 1000000000 && !errorMessages.includes(CHARACTER_ERROR))
+    errorMessages.push(MIN_ERROR);
+
+  return errorMessages;
+};
+
+export default validateNumberOfBeings;
diff --git a/src/validate/validate_planet_name.test.tsx b/src/validate/validate_planet_name.test.tsx
new file mode 100644
index 00000000..b0ccf03e
--- /dev/null
+++ b/src/validate/validate_planet_name.test.tsx
@@ -0,0 +1,44 @@
+import validatePlanetName from "./validate_planet_name";
+
+const LENGTH_ERROR = "Planet Name: Must be between 2 and 49 characters";
+const CHARACTER_ERROR = "Planet Name: No special characters allowed";
+describe("valid planet name", () => {
+  test("planet name should be valid", () => {
+    expect(validatePlanetName("mars")).toEqual([]);
+
+    expect(validatePlanetName("mars venus")).toEqual([]);
+
+    expect(validatePlanetName("6mars33 ")).toEqual([]);
+    expect(validatePlanetName("77")).toEqual([]);
+
+    const longWord = Array(49).fill("a");
+    expect(validatePlanetName(longWord.join(""))).toEqual([]);
+  });
+});
+
+describe("validation for number of characters", () => {
+  test("planet name should return error message if characteres outside of 2 to 49", () => {
+    const smallWord = "m";
+    expect(validatePlanetName(smallWord)).toEqual([LENGTH_ERROR]);
+
+    const longWord = Array(50).fill("b");
+    expect(validatePlanetName(longWord.join(""))).toEqual([LENGTH_ERROR]);
+  });
+});
+
+describe("validation for special characters and numbers", () => {
+  test("species name should not allow numbers or special characters", () => {
+    expect(validatePlanetName("hello!world")).toEqual([CHARACTER_ERROR]);
+
+    expect(validatePlanetName("not @llowed 0£k")).toEqual([CHARACTER_ERROR]);
+  });
+});
+
+describe("more than 1 error in planet name", () => {
+  expect(validatePlanetName("!")).toEqual([LENGTH_ERROR, CHARACTER_ERROR]);
+  const longWord = Array(50).fill("#");
+  expect(validatePlanetName(longWord.join(""))).toEqual([
+    LENGTH_ERROR,
+    CHARACTER_ERROR,
+  ]);
+});
diff --git a/src/validate/validate_planet_name.tsx b/src/validate/validate_planet_name.tsx
new file mode 100644
index 00000000..d8348288
--- /dev/null
+++ b/src/validate/validate_planet_name.tsx
@@ -0,0 +1,12 @@
+const LENGTH_ERROR = "Planet Name: Must be between 2 and 49 characters";
+const CHARACTER_ERROR = "Planet Name: No special characters allowed";
+
+const validatePlanetName: (planetName: string) => string[] = (planetName) => {
+  const errorMessages = Array<string>();
+  if (planetName.length < 2 || planetName.length > 49)
+    errorMessages.push(LENGTH_ERROR);
+  if (planetName.match("[^a-zA-Z0-9 ]")) errorMessages.push(CHARACTER_ERROR);
+  return errorMessages;
+};
+
+export default validatePlanetName;
diff --git a/src/validate/validate_sparing_reason.test.tsx b/src/validate/validate_sparing_reason.test.tsx
new file mode 100644
index 00000000..9a8bdf92
--- /dev/null
+++ b/src/validate/validate_sparing_reason.test.tsx
@@ -0,0 +1,28 @@
+import validateSparingReason from "./validate_sparing_reason";
+
+const LENGTH_ERROR =
+  "Reason for sparing: Must be between 17 and 153 characters";
+describe("valid sparing reasons", () => {
+  test("reason should be valid", () => {
+    const minimumSparingReason = Array(17).fill("a").join("");
+    expect(validateSparingReason(minimumSparingReason)).toEqual([]);
+
+    const maximumSparingReason = Array(153).fill("3").join("");
+    expect(validateSparingReason(maximumSparingReason)).toEqual([]);
+
+    expect(validateSparingReason("l1fe oN e4arth is gR8!!!!@@")).toEqual([]);
+  });
+});
+
+describe("validation for number of characters", () => {
+  test("reason should return error message if characteres outside of 17 to 153", () => {
+    expect(validateSparingReason("")).toEqual([LENGTH_ERROR]);
+    expect(validateSparingReason("a")).toEqual([LENGTH_ERROR]);
+
+    const smallWord = Array(16).fill("b").join("");
+    expect(validateSparingReason(smallWord)).toEqual([LENGTH_ERROR]);
+
+    const longWord = Array(154).fill("3").join("");
+    expect(validateSparingReason(longWord)).toEqual([LENGTH_ERROR]);
+  });
+});
diff --git a/src/validate/validate_sparing_reason.tsx b/src/validate/validate_sparing_reason.tsx
new file mode 100644
index 00000000..a850ba05
--- /dev/null
+++ b/src/validate/validate_sparing_reason.tsx
@@ -0,0 +1,13 @@
+const LENGTH_ERROR =
+  "Reason for sparing: Must be between 17 and 153 characters";
+
+const validateSparingReason: (sparingReason: string) => string[] = (
+  sparingReason
+) => {
+  const errorMessages = Array<string>();
+  if (sparingReason.length < 17 || sparingReason.length > 153)
+    errorMessages.push(LENGTH_ERROR);
+  return errorMessages;
+};
+
+export default validateSparingReason;
diff --git a/src/validate/validate_species_name.test.tsx b/src/validate/validate_species_name.test.tsx
new file mode 100644
index 00000000..abbf3bc5
--- /dev/null
+++ b/src/validate/validate_species_name.test.tsx
@@ -0,0 +1,40 @@
+import validateSpeciesName from "./validate_species_name";
+
+const LENGTH_ERROR = "Species Name: Must be between 3 and 23 characters";
+const CHARACTER_ERROR =
+  "Species Name: No special numbers or special characters allowed";
+
+describe("valid species name", () => {
+  test("species name should be valid", () => {
+    expect(validateSpeciesName("hello world")).toEqual([]);
+
+    expect(validateSpeciesName("yoo")).toEqual([]);
+
+    expect(validateSpeciesName("hello world ")).toEqual([]);
+
+    const longWord = Array(23).fill("a");
+    expect(validateSpeciesName(longWord.join(""))).toEqual([]);
+  });
+});
+describe("validation for number of characters", () => {
+  test("species name should return error message if characteres outside of 3 to 23", () => {
+    const smallWord = "to";
+    expect(validateSpeciesName(smallWord)).toEqual([LENGTH_ERROR]);
+
+    const longWord = Array(24).fill("a");
+    expect(validateSpeciesName(longWord.join(""))).toEqual([LENGTH_ERROR]);
+  });
+});
+describe("validation for special characters and numbers", () => {
+  test("species name should not allow numbers or special characters", () => {
+    expect(validateSpeciesName("hello!world")).toEqual([CHARACTER_ERROR]);
+
+    expect(validateSpeciesName("hellooooo3Me")).toEqual([CHARACTER_ERROR]);
+
+    expect(validateSpeciesName("not @llowed o£k")).toEqual([CHARACTER_ERROR]);
+  });
+});
+
+describe("more than 1 error in species name", () => {
+  expect(validateSpeciesName("n0")).toEqual([LENGTH_ERROR, CHARACTER_ERROR]);
+});
diff --git a/src/validate/validate_species_name.tsx b/src/validate/validate_species_name.tsx
new file mode 100644
index 00000000..79609d15
--- /dev/null
+++ b/src/validate/validate_species_name.tsx
@@ -0,0 +1,15 @@
+const LENGTH_ERROR = "Species Name: Must be between 3 and 23 characters";
+const CHARACTER_ERROR =
+  "Species Name: No special numbers or special characters allowed";
+
+const validateSpeciesName: (speciesName: string) => string[] = (
+  speciesName
+) => {
+  const errorMessages = Array<string>();
+  if (speciesName.length < 3 || speciesName.length > 23)
+    errorMessages.push(LENGTH_ERROR);
+  if (speciesName.match("[^a-zA-Z ]")) errorMessages.push(CHARACTER_ERROR);
+  return errorMessages;
+};
+
+export default validateSpeciesName;
diff --git a/src/validate/validate_two_plus_two.test.tsx b/src/validate/validate_two_plus_two.test.tsx
new file mode 100644
index 00000000..1ea979fc
--- /dev/null
+++ b/src/validate/validate_two_plus_two.test.tsx
@@ -0,0 +1,14 @@
+import validateTwoPlusTwo from "./validate_two_plus_two";
+
+const ERROR = "Two plus two is 4! Choose 4 to be spared!";
+
+describe("two plus two result", () => {
+  test("two plus two should be 4", () => {
+    expect(validateTwoPlusTwo("4")).toEqual([]);
+  });
+
+  test("anyhing but 4 is not a valid two plus two option", () => {
+    expect(validateTwoPlusTwo("not-4")).toEqual([ERROR]);
+    expect(validateTwoPlusTwo("42!")).toEqual([ERROR]);
+  });
+});
diff --git a/src/validate/validate_two_plus_two.tsx b/src/validate/validate_two_plus_two.tsx
new file mode 100644
index 00000000..fbe193f0
--- /dev/null
+++ b/src/validate/validate_two_plus_two.tsx
@@ -0,0 +1,11 @@
+const ERROR = "Two plus two is 4! Choose 4 to be spared!";
+
+const validateTwoPlusTwo: (twoPlusTwo: string) => string[] = (twoPlusTwo) => {
+  const errorMessages = Array<string>();
+
+  if (twoPlusTwo !== "4") errorMessages.push(ERROR);
+
+  return errorMessages;
+};
+
+export default validateTwoPlusTwo;