Feat : All the components are now tested and working

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;

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();
+});

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;

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();
+});

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;

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();
+});

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;

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();
+});

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;