From b01f0536f67059f95135ad0a911935307e13d184 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aljoscha=20Z=C3=B6ller?= <mail@aljoschazoeller.com>
Date: Mon, 10 Jun 2024 00:36:00 +0200
Subject: [PATCH] Update RestaurantForm tests for initial form data and button
 text

The tests for the RestaurantForm component have been updated to include new props: initialFormData and buttonText. The tests now properly render and validate the component with initial form data and customizable button text, replacing hardcoded 'save' button text, hence, improving test coverage and component versatility.
---
 .../RestaurantForm.component.test.tsx         | 53 ++++++++++++++++---
 1 file changed, 46 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/RestaurantForm/RestaurantForm.component.test.tsx b/frontend/src/components/RestaurantForm/RestaurantForm.component.test.tsx
index 9866640..a295de3 100644
--- a/frontend/src/components/RestaurantForm/RestaurantForm.component.test.tsx
+++ b/frontend/src/components/RestaurantForm/RestaurantForm.component.test.tsx
@@ -2,11 +2,18 @@ import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import RestaurantForm from "./RestaurantForm.tsx";
 import { MemoryRouter } from "react-router-dom";
+import { NewRestaurantDTOType } from "../../model/Restaurant.ts";
+
+const initialFormData: NewRestaurantDTOType = { title: "", city: "" };
 
 test('RestaurantForm component displays label "title"', () => {
   render(
     <MemoryRouter>
-      <RestaurantForm onSubmit={jest.fn()} restaurantData={null} />
+      <RestaurantForm
+        onSubmit={jest.fn()}
+        initialFormData={initialFormData}
+        buttonText="Create"
+      />
     </MemoryRouter>
   );
   const titleInput = screen.getByLabelText("Title");
@@ -16,7 +23,11 @@ test('RestaurantForm component displays label "title"', () => {
 test('RestaurantForm component displays input field "title"', () => {
   render(
     <MemoryRouter>
-      <RestaurantForm onSubmit={jest.fn()} restaurantData={null} />
+      <RestaurantForm
+        onSubmit={jest.fn()}
+        initialFormData={initialFormData}
+        buttonText="Create"
+      />
     </MemoryRouter>
   );
   const titleInput = screen.getByRole("textbox", {
@@ -28,7 +39,11 @@ test('RestaurantForm component displays input field "title"', () => {
 test('RestaurantForm component displays label "city"', () => {
   render(
     <MemoryRouter>
-      <RestaurantForm onSubmit={jest.fn()} restaurantData={null} />
+      <RestaurantForm
+        onSubmit={jest.fn()}
+        initialFormData={initialFormData}
+        buttonText="Create"
+      />
     </MemoryRouter>
   );
   const titleLabel = screen.getByLabelText("City");
@@ -38,7 +53,11 @@ test('RestaurantForm component displays label "city"', () => {
 test('RestaurantForm component displays input field "city"', () => {
   render(
     <MemoryRouter>
-      <RestaurantForm onSubmit={jest.fn()} restaurantData={null} />
+      <RestaurantForm
+        onSubmit={jest.fn()}
+        initialFormData={initialFormData}
+        buttonText="Create"
+      />
     </MemoryRouter>
   );
   const cityInput = screen.getByRole("textbox", {
@@ -47,14 +66,34 @@ test('RestaurantForm component displays input field "city"', () => {
   expect(cityInput).toBeInTheDocument();
 });
 
-test('RestaurantForm component displays "save" button', () => {
+test('RestaurantForm component displays "create" button', () => {
+  render(
+    <MemoryRouter>
+      <RestaurantForm
+        onSubmit={jest.fn()}
+        initialFormData={initialFormData}
+        buttonText="Create"
+      />
+    </MemoryRouter>
+  );
+  const saveButton = screen.getByRole("button", {
+    name: /create/i,
+  });
+  expect(saveButton).toBeInTheDocument();
+});
+
+test('RestaurantForm component displays "create" button', () => {
   render(
     <MemoryRouter>
-      <RestaurantForm onSubmit={jest.fn()} restaurantData={null} />
+      <RestaurantForm
+        onSubmit={jest.fn()}
+        initialFormData={initialFormData}
+        buttonText="Update"
+      />
     </MemoryRouter>
   );
   const saveButton = screen.getByRole("button", {
-    name: /save/i,
+    name: /update/i,
   });
   expect(saveButton).toBeInTheDocument();
 });