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.
neuefische · Jun 9, 2024 · b01f053 · b01f053
1 parent 5352a6b
commit b01f053
Showing 1 changed file with 46 additions and 7 deletions.
diff --git 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();
 });