From ffee8fe99b1514b6a04ac95123677e35d03dbcd0 Mon Sep 17 00:00:00 2001
From: Rutvik Vishwas Kulkarni <kulkarnirutvikvishwas@gmail.com>
Date: Fri, 1 Nov 2024 16:12:45 -0400
Subject: [PATCH] Update existing tests and added tests

---
 Code/frontend/jest.config.js                  |   6 +
 Code/frontend/package.json                    |   6 +
 Code/frontend/src/App.test.js                 |  52 +--
 Code/frontend/src/components/AddRecipe.js     | 231 -------------
 Code/frontend/src/components/Form.js          | 316 ------------------
 Code/frontend/src/components/Header.js        |  10 -
 Code/frontend/src/components/Login.js         |   1 +
 Code/frontend/src/components/Recipe.js        |  78 -----
 Code/frontend/src/components/RecipeCard.js    |  50 ---
 Code/frontend/src/components/RecipeList.js    |  66 ----
 .../frontend/src/components/SearchByRecipe.js |  41 ---
 .../src/components/__tests__/Form.test.js     |  29 --
 .../src/components/__tests__/Login.test.js    |  33 +-
 .../components/__tests__/RecipeCard.test.js   |  23 --
 .../components/__tests__/RecipeList.test.js   |  69 ----
 .../src/service/firestoreService.test.js      | 147 ++++++++
 16 files changed, 222 insertions(+), 936 deletions(-)
 create mode 100644 Code/frontend/jest.config.js
 delete mode 100644 Code/frontend/src/components/AddRecipe.js
 delete mode 100644 Code/frontend/src/components/Form.js
 delete mode 100644 Code/frontend/src/components/Header.js
 delete mode 100644 Code/frontend/src/components/Recipe.js
 delete mode 100644 Code/frontend/src/components/RecipeCard.js
 delete mode 100644 Code/frontend/src/components/RecipeList.js
 delete mode 100644 Code/frontend/src/components/SearchByRecipe.js
 delete mode 100644 Code/frontend/src/components/__tests__/Form.test.js
 delete mode 100644 Code/frontend/src/components/__tests__/RecipeCard.test.js
 delete mode 100644 Code/frontend/src/components/__tests__/RecipeList.test.js
 create mode 100644 Code/frontend/src/service/firestoreService.test.js

diff --git a/Code/frontend/jest.config.js b/Code/frontend/jest.config.js
new file mode 100644
index 00000000..c576fa08
--- /dev/null
+++ b/Code/frontend/jest.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    testEnvironment: 'node',
+    transform: {
+        '^.+\\.jsx?$': 'babel-jest',
+    },
+};
\ No newline at end of file
diff --git a/Code/frontend/package.json b/Code/frontend/package.json
index 1365d334..bf5fa0a1 100644
--- a/Code/frontend/package.json
+++ b/Code/frontend/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@chakra-ui/react": "^2.10.3",
+    "@chakra-ui/utils": "^2.2.2",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@testing-library/jest-dom": "^5.14.1",
@@ -27,6 +28,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "test:firestore": "react-scripts test src/service/firestoreService.test.js",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -46,5 +48,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@firebase/testing": "^0.20.11",
+    "jest": "^27.5.1"
   }
 }
diff --git a/Code/frontend/src/App.test.js b/Code/frontend/src/App.test.js
index 7cd6cfb4..53cd75f5 100644
--- a/Code/frontend/src/App.test.js
+++ b/Code/frontend/src/App.test.js
@@ -1,26 +1,36 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import App from "./App";
 
-test("renders learn react link", () => {
-  render(<App />);
-  const linkElement = screen.getByText(/Recipe/i);
-  expect(linkElement).toBeInTheDocument();
-});
-
-test("renders learn react link", () => {
-  render(<App />);
-  const linkElement = screen.getByText(/Recommender/i);
-  expect(linkElement).toBeInTheDocument();
-});
+jest.mock("./components/Navbar", () => (props) => <div>Navbar</div>);
+jest.mock("./components/Login", () => (props) => (
+  <div>
+    <button onClick={() => props.handleLogin("testuser", "password123")}>Login</button>
+    <button onClick={() => props.handleSignup("testuser", "password123")}>Signup</button>
+  </div>
+));
+jest.mock("./components/BookMarksRecipeList", () => () => <div>Bookmarks</div>);
+jest.mock("./components/SearchBlock", () => () => <div>Search Block</div>);
+jest.mock("./firebase/auth", () => ({
+  doSignInWithEmailAndPassword: jest.fn(),
+  doCreateUserWithEmailAndPassword: jest.fn(),
+  doSignOut: jest.fn(),
+}));
+jest.mock("./contexts/authContext/index", () => ({
+  useAuth: () => ({
+    currentUser: null,
+    userLoggedIn: false,
+  }),
+  AuthProvider: ({ children }) => <div>{children}</div>,
+}));
 
-test("renders learn react link", () => {
-  render(<App />);
-  const linkElement = screen.getByText(/Email/i);
-  expect(linkElement).toBeInTheDocument();
-});
+describe("App component", () => {
+  test("renders Navbar", () => {
+    render(<App />);
+    expect(screen.getByText(/Navbar/i)).toBeInTheDocument();
+  });
 
-test("renders learn react link", () => {
-  render(<App />);
-  const linkElement = screen.getByText(/Ingredient/i);
-  expect(linkElement).toBeInTheDocument();
+  test("renders Search Block by default", () => {
+    render(<App />);
+    expect(screen.getByText(/Search Block/i)).toBeInTheDocument();
+  });
 });
diff --git a/Code/frontend/src/components/AddRecipe.js b/Code/frontend/src/components/AddRecipe.js
deleted file mode 100644
index 5bccb843..00000000
--- a/Code/frontend/src/components/AddRecipe.js
+++ /dev/null
@@ -1,231 +0,0 @@
-import React from "react";
-import {Box, HStack, Text, Input, InputGroup, InputRightElement, Button, VStack, Textarea, Badge, Alert, AlertIcon} from "@chakra-ui/react";
-import recipeDB from "../apis/recipeDB";
-
-const AddRecipe = () => {
-
-    const [recipe, setRecipe] = React.useState({
-        recipeName: "",
-        cookingTime: 0,
-        dietType: "",
-        recipeRating: 0,
-        cuisine: "",
-        recipeURL: "",
-        imageURL: "",
-        instructions: "",
-        ingredientCount: 0,
-        ingredients: [],
-        restaurants: [],
-        locations: []
-    });
-
-    const [ingredientCount, setIngredientCount] = React.useState(0);
-
-    const addIngredient = () => {
-        const ingredient = document.getElementById("ingredients").value;
-        setRecipe(prevValue => {
-            return {
-                ...prevValue,
-                ingredients: [...prevValue.ingredients, ingredient],
-                ingredientCount: prevValue.ingredientCount + 1
-            }
-        })
-        document.getElementById("ingredients").value = "";
-    };
-
-    const addRestaurant = () => {
-        const restaurant = document.getElementById("restaurant").value;
-        setRecipe(prevValue => {
-            return {
-                ...prevValue,
-                restaurants: [...prevValue.restaurants, restaurant]
-            }
-        })
-        document.getElementById("restaurant").value = "";
-    };
-
-    const addLocation = () => {
-        const location = document.getElementById("location").value;
-        setRecipe(prevValue => {
-            return {
-                ...prevValue,
-                locations: [...prevValue.locations, location]
-            }
-        })
-        document.getElementById("location").value = "";
-    }; 
-
-
-    const handleChange = (event) => {
-        setRecipe(prevValue => {
-            return {
-                ...prevValue,
-                [event.target.id]: event.target.value
-            }
-        })
-    }
-
-    const addRecipe = () => {
-        recipeDB.post("/recipes/addRecipe", recipe)
-            .then(res => {
-                console.log(res.data);
-                // clear all fields
-                setRecipe({
-                    recipeName: "",
-                    cookingTime: 0,
-                    dietType: "",
-                    recipeRating: 0,
-                    cuisine: "",
-                    recipeURL: "",
-                    imageURL: "",
-                    instructions: "",
-                    ingredientCount: 0,
-                    ingredients: [],
-                    restaurants: [],
-                    locations: []
-                });
-                document.getElementById("recipeName").value = "";
-                document.getElementById("cookingTime").value = "";
-                document.getElementById("dietType").value = "";
-                document.getElementById("recipeRating").value = "";
-                document.getElementById("cuisine").value = "";
-                document.getElementById("recipeURL").value = "";
-                document.getElementById("imageURL").value = "";
-                document.getElementById("instructions").value = "";
-
-                // Alert user that recipe was added
-                <Alert status="success">
-                    <AlertIcon />
-                    Recipe Added!
-                </Alert>
-            })
-            .catch(err => console.log(err));
-    }
-
-    const ingredientPrintHandler = () => {
-        const ingredientList = recipe.ingredients;
-
-        var ingredient_list = ingredientList.map((ingredient) =>
-            <Badge id={ingredient} m={1} _hover={{cursor: "pointer"}} onClick={ingredientRemoveHandler} colorScheme="green">
-                {ingredient}
-            </Badge>
-        );
-
-        return  <ul class="IngredientList">{ingredient_list}</ul>;
-    }
-
-    const ingredientRemoveHandler = (event) => {
-        const ingredient = event.target.id;
-        const ingredientList = recipe.ingredients;
-        const index = ingredientList.indexOf(ingredient);
-        if (index > -1) {
-            ingredientList.splice(index, 1);
-        }
-        setRecipe(prevValue => {
-            return {
-                ...prevValue,
-                ingredients: ingredientList
-            }
-        })
-    }
-
-    const restaurantPrintHandler = () => {
-        const restaurantList = recipe.restaurants;
-
-        const restaurant_list = restaurantList.map((restaurant) =>
-            <Badge id={restaurant} m={1} _hover={{cursor: "pointer"}} onClick={restaurantRemoveHandler} colorScheme="green">
-                {restaurant}
-            </Badge>
-        );
-
-        return <ul class="RestaurantList">{restaurant_list}</ul>;
-    }
-
-    const restaurantRemoveHandler = (event) => {
-        const restaurant = event.target.id;
-        const restaurantList = recipe.restaurants;
-        const index = restaurantList.indexOf(restaurant);
-        if (index > -1) {
-            restaurantList.splice(index, 1);
-        }
-        setRecipe(prevValue => {
-            return {
-                ...prevValue,
-                restaurants: restaurantList
-            }
-        })
-    }
-
-    const locationPrintHandler = () => {
-        const locationList = recipe.locations;
-
-        const location_list = locationList.map((location) =>
-            <Badge id={location} m={1} _hover={{cursor: "pointer"}} onClick={locationRemoveHandler} colorScheme="green">
-                {location}
-            </Badge>
-        );
-    }
-
-    const locationRemoveHandler = (event) => {
-        const location = event.target.id;
-        const locationList = recipe.locations;
-        const index = locationList.indexOf(location);
-        if (index > -1) {
-            locationList.splice(index, 1);
-        }
-        setRecipe(prevValue => {
-            return {
-                ...prevValue,
-                locations: locationList
-            }
-        })
-    }
-
-    return (
-        <>
-            <Box borderRadius={"lg"} border="2px" boxShadow={"lg"} borderColor={"gray.100"} fontFamily="regular" m={'auto'} marginTop={10} width={"50%"} p={5}>
-                <Text fontSize={"3xl"} textAlign={'center'} fontWeight={"bold"}>Add New Recipe</Text>
-                <VStack spacing={'5'} alignItems={"flex-center"} >
-                    <HStack spacing={'5'} alignItems={"flex-start"} >
-                        <Input type={"text"} id="recipeName" onChange={handleChange} placeholder={"Recipe Name"} />
-                        <Input type={"number"} id="cookingTime" onChange={handleChange} placeholder={"Cooking Time in Mins"} />
-                    </HStack>
-                    <HStack spacing={'5'} alignItems={"flex-start"} >
-                        <Input type={"text"} id="dietType" onChange={handleChange} placeholder={"Diet Type"} />
-                        <Input type={"number"} id="recipeRating" onChange={handleChange} placeholder={"Recipe Rating"} />
-                        <Input type={"text"} id="cuisine" onChange={handleChange} placeholder={"Cuisine"} />
-                    </HStack>
-                    <HStack spacing={'5'} alignItems={"flex-start"} >
-                        <Input type={"URL"} id="recipeURL" onChange={handleChange} placeholder={"Recipe URL"} />
-                        <Input type={"URL"} id="imageURL" onChange={handleChange} placeholder={"Image URL"} />
-                    </HStack>
-                    <HStack direction="row">
-                        <InputGroup variant={"filled"}>
-                        <Input type={"text"} marginEnd={"5px"} id="ingredients" placeholder={"Ingredients"} width={"45%"}/>
-                        <Button mr={10} width={"5%"} onClick={addIngredient} id="addIngredientButton" _hover={{ bg: 'black', color: "gray.100" }} color={"gray.600"} bg={"green.300"}>Add</Button>
-                        </InputGroup>
-                        {ingredientPrintHandler()}
-                    </HStack>
-                    <HStack spacing={'5'} alignItems={"flex-start"} >
-                        <InputGroup variant={"filled"}>
-                            <Input type="text" marginEnd={"5px"} id="restaurant" placeholder={"Restaurannt"} width="45%"/>
-                            <Button id="restaurantButton" width="5%" mr={10} onClick={addRestaurant} _hover={{ bg: 'black', color: "gray.100" }} color={"gray.600"} bg={"green.300"}>Add</Button>
-                            {restaurantPrintHandler()}
-                        </InputGroup>  
-                    </HStack> 
-                    <HStack spacing={'5'} alignItems={"flex-start"} >
-                        <InputGroup variant={"filled"}>
-                            <Input type="text" marginEnd={"5px"} id="location" placeholder={"Restaurant-Location"} width="45%" />
-                            <Button id="locationButton" width="5%" mr={10} onClick={addLocation} _hover={{ bg: 'black', color: "gray.100" }} color={"gray.600"} bg={"green.300"}>Add</Button>
-                            {locationPrintHandler()}
-                        </InputGroup>  
-                    </HStack> 
-                    <Textarea onChange = {handleChange} id="instructions" placeholder={"Write Cooking Instructions Here"} />
-                    <Button width={"30%"} m={'auto'} id="addRecipeButton" onClick={addRecipe} _hover={{ bg: 'black', color: "gray.100" }} color={"gray.600"} bg={"green.300"}>Add Recipe</Button>
-                </VStack>
-            </Box>
-        </>
-    )
-};
-
-export default AddRecipe;
\ No newline at end of file
diff --git a/Code/frontend/src/components/Form.js b/Code/frontend/src/components/Form.js
deleted file mode 100644
index a1f48cff..00000000
--- a/Code/frontend/src/components/Form.js
+++ /dev/null
@@ -1,316 +0,0 @@
-import React, { Component } from "react";
-import { HStack, Button, Input, InputGroup, Switch, Box, VStack, Text, InputRightElement, FormLabel, Badge } from "@chakra-ui/react";
-import recipeDB from "../apis/recipeDB";
-import TypeAheadDropDown from "./TypeAheadDropDown";
-
-// Form component to maintain input form
-class Form extends Component {
-  // constructor for Form Component
-  // We maintain user input as a state object
-  constructor() {
-    super();
-
-    this.state = {
-      // cuisine : "Any",
-      //numberIngredients : 0,
-      ingredients: new Set(),
-      cuisineState: 0,
-      cuisine: "",
-    };
-  }
-
-  async componentDidMount(){
-    try {
-      const response = await recipeDB.get("/recipes/callIngredients/");
-      this.setState({
-        ingredient_list: response.data,
-        cuisine_list: ['Mexican','South Indian','Chinese','Thai','Japanese','Gujarati','North Indian','Lebanese','Mediterranean',
-        'Middle East','Italian','Korean','Continental','Greek','Latin','American', "Other", "Swedish", "Latvian", "Italian",
-        "Spanish", "American","Scottish","British","Thai","Japanese","Indian","Canadian","Russian","Jewish","Polish","German","French","Hawaiian",
-        "Brazilian", "Peruvian","Cuban","Tibetian","Salvadorian","Egyptian","Greek","Belgian","Irish","Welsh","Mormon","Cajun","Portugese","Turkish","Haitian",
-        "Tahitian","Kenyan","Korean","Algerian","Nigerian","Libyan"]
-      });
-    } catch (err) {
-      console.log(err);
-    }
-  }
-  //  cuisine_list =   ['Mexican','South Indian','Chinese','Thai','Japanese','Gujarati','North Indian','Lebanese','Mediterranean',
-  // 'Middle East','Italian','Korean','Continental','Greek','Latin','American', "Other", "Swedish", "Latvian", "Italian",
-  // "Spanish", "American","Scottish","British","Thai","Japanese","Indian","Canadian","Russian","Jewish","Polish","German","French","Hawaiian",
-  // "Brazilian", "Peruvian","Cuban","Tibetian","Salvadorian","Egyptian","Greek","Belgian","Irish","Welsh","Mormon","Cajun","Portugese","Turkish","Haitian",
-  // "Tahitian","Kenyan","Korean","Algerian","Nigerian","Libyan"]
-
-  // function to change cuisine state, triggered on selection of a cuisine item.
-  /*cuisineUpdate = (event) => {
-
-        this.setState (
-            {
-                cuisine : event.target.value,
-                numberIngredients : this.state.numberIngredients,
-                ingredients : this.state.ingredients
-            }, () => console.log( this.state )
-        )
-    }
-    */
-  // function to update the maximum number of ingredients in the state.
-  /*numberUpdate = (event) =>
-    {
-        this.setState (
-            {
-                cuisine : this.state.cuisine,
-                numberIngredients: event.target.value,
-                ingredients:this.state.ingredients
-            }, () => console.log( this.state )
-        )
-    }*/
-
-  
-
-  // function to display the ingredients added by the user upto that point.
-  printHander = () => {
-    // converting the set into an array, to make it iterable
-    const items = [...this.state.ingredients];
-
-    // mapping each item to be displayed as a list item
-    const list_items = items.map((item) => (
-      <Badge id={item} m={1} _hover={{cursor: "pointer"}} onClick={this.removeHandler} colorScheme="green">
-        {item}
-      </Badge>
-    ));
-
-    return <ul class="addedIngredientList">{list_items}</ul>;
-  };
-
-  // fucntion to add ingredients to the inredients (set datastructure) in App's state
-  // triggered by clicking add item button
-  addHandler = (event) => {
-    const ingredient = document.getElementById("ingredient").value;
-
-    this.setState(
-      {
-        //cuisine : this.state.cuisine,
-        //numberIngredients : this.state.numberIngredients,
-        ingredients: new Set(this.state.ingredients).add(ingredient),
-      },
-      () => console.log(this.state)
-    );
-
-    document.getElementById("ingredient").value = "";
-  };
-
-  // fucntion to add ingredients to the inredients (set datastructure) in App's state
-  // triggered by clicking item that is displayed ysing printHandler function
-  removeHandler = (event) => {
-    console.log("clicked tag")
-    var discardIngredient = event.target.id;
-    var ingredientList = this.state.ingredients;
-
-    ingredientList.delete(discardIngredient);
-
-    this.setState(
-      {
-        //cuisine : this.state.cuisine,
-        //numberIngredients : this.state.numberIngredients,
-        ingredients: ingredientList,
-      },
-      () => console.log(this.state)
-    );
-  };
-
-  handleSendEmail = (event) => {
-    console.log(event.target.checked);
-  }
-
-  // function to send the data to the parent App component
-  // uses the function that is sent through props from the App Component
-  handleSubmit = (event) => {
-    // this.setState(
-    //   {
-    //     //cuisine : this.state.cuisine,
-    //     //numberIngredients : this.state.numberIngredients,
-    //
-    //     ingredients: new Set(this.state.ingredients).add(
-    //       document.getElementById("cuisine").value
-    //     ),
-    //   },
-    //   () => console.log(this.state)
-    // );
-
-    this.setState(
-      {
-        //cuisine : this.state.cuisine,
-        //numberIngredients : this.state.numberIngredients,
-
-        cuisine: document.getElementById("cuisine").value,
-      },
-      () => console.log(this.state)
-    );
-
-    event.preventDefault();
-    var dict = {};
-    dict["ingredient"] = this.state.ingredients;
-    dict["cuisine"] = document.getElementById("cuisine").value;
-    dict["email_id"] = document.getElementById("email_id").value;
-    dict["flag"] = document.getElementById("Send_email").checked;
-    //this.props.sendFormData(this.state.cuisine, this.state.numberIngredients,this.state.ingredients)
-    this.props.sendFormData(dict);
-    console.log(dict);
-    document.getElementById("cuisine").value = "";
-    document.getElementById("email_id").value = "";
-  };
-
-  
-
-
-  // render function dispays the UI content i.e the form content
-  render() {
-    {
-      /* const cuisine_list = [ "Any", "Swedish", "Latvian", "Italian",
-        "Spanish", "American","Scottish","British","Thai","Japanese",
-        "Indian","Canadian","Russian","Jewish","Polish","German","French","Hawaiian",
-        "Brazilian", "Peruvian","Cuban","Tibetian","Salvadorian","Egyptian","Greek",
-        "Belgian","Irish","Welsh","Mormon","Cajun","Portugese","Turkish","Haitian",
-    "Tahitian","Kenyan","Korean","Algerian","Nigerian","Libyan" ]*/
-  
-    }
-
-    // returns jsx element
-    return (
-      <>
-        <Box borderRadius={"lg"} border="2px" boxShadow={"lg"} borderColor={"gray.100"} fontFamily="regular" m={10} width={"23%"} height="fit-content" p={5}>
-          <VStack spacing={'5'} alignItems={"flex-start"}>
-            <Text fontSize={"larger"} fontWeight={"semibold"}>Get A Recipe</Text>
-            <InputGroup variant={"filled"} zIndex={+2}>
-              {/* <InputLeftElement pointerEvents='none'>
-                            <FontAwesomeIcon size="lg" icon={faLocationDot} />
-                        </InputLeftElement> */}
-              <TypeAheadDropDown  iteams={this.state.ingredient_list} placeholder_inp = {'Ingredients'} id_inp={'ingredient'} />
-              {/* <Input size={"lg"} type='text' id="ingredient" placeholder='Ingredients'/> */}
-              <InputRightElement>
-                <Button mt={2} mr={2} onClick={this.addHandler}>Add</Button>
-              </InputRightElement>
-            </InputGroup>
-            <HStack direction="row"> 
-               {this.printHander()}
-            </HStack>
-            <InputGroup variant={"filled"} zIndex={+1}>
-              {/* <InputLeftElement pointerEvents='none'>
-                            <FontAwesomeIcon size="lg" icon={faCalendarDays} />
-                            </InputLeftElement> */}
-              <TypeAheadDropDown  iteams={this.state.cuisine_list} placeholder_inp = {'Cuisine'} id_inp={'cuisine'} />
-
-              {/* <Input type="text" id="cuisine" color={"gray.500"} size={"lg"} placeholder='Cuisine' /> */}
-            </InputGroup>
-            <InputGroup variant={"filled"}>
-              {/* <InputLeftElement pointerEvents='none'>
-                            <FontAwesomeIcon size="lg" icon={faClock} />
-                            </InputLeftElement> */}
-              {/* <Select textAlign={"left"} size={"lg"} color={"gray.500"} variant={"filled"} placeholder="Time" >
-                            <option value='option1'>Option 1</option>
-                            <option value='option2'>Option 2</option>
-                            <option value='option3'>Option 3</option>
-                        </Select> */}
-              <Input data-testid="email_id" type="text" id="email_id" color={"gray.500"} size={"lg"} placeholder='Email' />
-              </InputGroup>
-              <InputGroup variant={"filled"}>
-                <FormLabel htmlFor='email-alerts' mb='0'>
-                  Enable email alert?
-                  <Switch ml={2} id="Send_email" name="email" size='md' />
-                </FormLabel>
-              </InputGroup>
-
-            <Button data-testid="submit" id="submit" onClick={this.handleSubmit} width={"100%"} _hover={{ bg: 'black', color: "gray.100" }} color={"gray.600"} bg={"green.300"}>Search Recipes</Button>
-
-          </VStack>
-        </Box>
-        {/* <div class="formOutercontainer">
-        <form onSubmit={this.handleSubmit}>
-          <div className="row pb-1">
-            <div className="input-group col-lg-4 bg-danger text-white">
-              <label class="sideLabel"> Ingredient: </label> <br />
-              <div className="input-group-append">
-                <Input type="text" id="ingredient" />
-
-                <Button onClick={this.addHandler} type="button" id="addButton">
-                  {" "}
-                  Add item{" "} 
-                </Button>
-              </div>
-            </div>
-          </div>
-
-          <div className="row pb-1">
-            <div className="input-group col-lg-4 bg-danger text-white">
-              <label class="sideLabel"> Cuisine: </label> <br />
-              <div className="input-group-append">
-                <Input type="text" id="cuisine" />
-              </div>
-            </div>
-          </div>
-
-          <div className="row pb-1">
-            <div className="input-group col-lg-4 bg-danger text-white">
-              <label class="sideLabel"> Enter Email ID: </label> <br />
-              <div className="input-group-append">
-                <input type="text" id="email_id" />
-                <div>
-                  <label>
-                     <Input type="checkbox" id="Send_email" name="email" /> 
-                    <Switch id="Send_email" name="email" size='md' />
-                    Send
-                    me email
-                  </label>
-                </div>
-
-                <div className="row pb-1">
-                  <div className="input-group col-lg-4">
-                    <label class="sideLabel">Added Items:</label>
-                    <br />
-                    <br />
-                    <br />
-                    {this.printHander()}
-                  </div>
-                </div>
-                {/*
-                     <div className="row pb-1">
-                    <div className="input-group col-lg-4">
-                        <label class='sideLabel'>Maximum Number of Ingredients: </label><br/>
-                        <div className="input-group-append">
-                        <input type = "number" id = "NoIngredient" onChange = {this.numberUpdate} />
-                        </div>
-                    </div>
-                    </div>
-
-                    <div className="row pb-1">
-                    <div className="input-group col-lg-4">
-                        <label class='sideLabel'> Cusine Selection: </label><br/><br/>
-                        <select value={this.state.cuisine} onChange={this.cuisineUpdate} >
-                            {
-                                cuisine_list.map( (category, i) => <option key = {i}> {category} </option> )
-                            }
-                        </select>
-                    </div>
-                        </div>*/}
-
-        {/*<div className="row pb-1">
-                  <div className="input-group col-lg-4">
-                    <Button
-                      type="button"
-                      id="submit"
-                      onClick={this.handleSubmit}
-                    >
-                      <h4> Search Recipes </h4>
-                    </Button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </form>
-      </div> */}
-      </>
-    );
-  }
-}
-
-export default Form;
diff --git a/Code/frontend/src/components/Header.js b/Code/frontend/src/components/Header.js
deleted file mode 100644
index 8f37ac06..00000000
--- a/Code/frontend/src/components/Header.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-
-function Header() {
-  return (
-    <div id="head_container">
-      <h1 id="head"> Recipe Recommender</h1>
-    </div>
-  );
-}
-export default Header;
diff --git a/Code/frontend/src/components/Login.js b/Code/frontend/src/components/Login.js
index 31a04bdc..3235db65 100644
--- a/Code/frontend/src/components/Login.js
+++ b/Code/frontend/src/components/Login.js
@@ -25,6 +25,7 @@ const Login = (props) => {
   }
 
   const handleSignup = (e) => {
+    e.preventDefault(); 
     props.handleSignup(userName, password);
   }
 
diff --git a/Code/frontend/src/components/Recipe.js b/Code/frontend/src/components/Recipe.js
deleted file mode 100644
index 20a82c27..00000000
--- a/Code/frontend/src/components/Recipe.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from "react";
-import "../video.css";
-import VideoURL from "./VideoURL";
-import background from "./componentImages/bg-card2.jpg";
-
-// Recipe component dealing with individial recipe items
-const Recipe = (recipe) => {
-  // splitting the ingredients with seperator as a comma
-  var ingredients_seperated = recipe.recipe["Cleaned-Ingredients"].split(",");
-  var translated_instruction = recipe.recipe["TranslatedInstructions"];
-  var cooking_time = recipe.recipe["TotalTimeInMins"];
-  var recipe_rating = recipe.recipe["Recipe-rating"];
-  var diet_type = recipe.recipe["Diet-type"];
-  var restaurant = recipe.recipe["Restaurant"].split("%");
-  var location = recipe.recipe["Restaurant-Location"].split("%");
-  var restaurant_location = [];
-  for (let i = 0; i < restaurant.length; i++) {
-    restaurant_location.push(restaurant[i] + ": " + location[i]);
-  }
-  var youtube_videos =
-    "https://www.youtube.com/results?search_query=" +
-    recipe.recipe["TranslatedRecipeName"];
-  // mapping each ingredient to be displayes as a list item
-  ingredients_seperated = ingredients_seperated.map((ingredient) => (
-    <li class="recipe_ingredient_item"> {ingredient}</li>
-  ));
-  restaurant_location = restaurant_location.map((restaurantitem) => (
-    <li class="recipe_restaurant_item"> {restaurantitem}</li>
-  ));
-  <p>{translated_instruction}</p>;
-
-  // returns individual container for each recipe
-
-  return (
-    <div
-      style={{
-        backgroundImage: `url(${background})`,
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "cover",
-      }}
-      className="col-lg-2 pb-1"
-      id="resultContainer"
-    >
-      <div className="card">
-        <div className="card-body">
-          <h2>{recipe.recipe.TranslatedRecipeName}</h2>
-          <p className="card.text">
-            <h3>Ingredients: </h3>
-            <br />
-            <ul class="result_ingredients"> {ingredients_seperated} </ul>
-            <h3>Cooking Time (in Mins): </h3>
-            <ul class="result_cookingtime"> {cooking_time} </ul>
-            <h3>Diet Type: </h3>
-            <ul class="result_diettype"> {diet_type} </ul>
-            <h3>Recipe Rating: </h3>
-            <ul class="result_reciperating"> {recipe_rating} </ul>
-            <h3>Restaurants: </h3>
-            <br />
-            <ul class="result_restaurants"> {restaurant_location} </ul>
-            <h3>Instructions: </h3>
-            <br />
-            <ol class="result_instructions"> {translated_instruction} </ol>
-            <h3>Videos: </h3>
-            <a href={youtube_videos}> {youtube_videos} </a>
-            <br />
-            <img
-              src={recipe.recipe["image-url"]}
-              alt={recipe.recipe.TranslatedRecipeName}
-            />
-          </p>
-          <div className="row"></div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Recipe;
diff --git a/Code/frontend/src/components/RecipeCard.js b/Code/frontend/src/components/RecipeCard.js
deleted file mode 100644
index d16d867a..00000000
--- a/Code/frontend/src/components/RecipeCard.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from "react";
-import { Box, SimpleGrid, Card, CardHeader, Heading, Text, CardBody, CardFooter, Button, Image, Tag } from "@chakra-ui/react"
-import recipeDB from "../apis/recipeDB";
-
-
-const RecipeCard = (props) => {
-    const handleClick = ()=> {
-        props.handler(props.recipe);
-    }
-    const handleSave = ()=> {
-        console.log("saved")
-        var userName = localStorage.getItem("userName")
-        try {
-            const response = recipeDB.post("/recipes/addRecipeToProfile", {
-                "userName": userName,
-                "recipe": props.recipe
-            })
-            alert("Recipe saved to your profile!")
-        } catch(e) {
-            console.log(`Error adding recipe to user-${userName}`)
-            console.log("caught exception")
-        }
-    }
-    return (
-        <>
-            <Card data-testid="recipeCard" _hover={{transform: "scale(1.05)", bg: "green.300", transitionDuration: "4" ,cursor: "pointer"}}>
-                <CardHeader onClick={handleClick}>
-                    <Heading data-testid="recipeName" size='md'>{props.recipe.TranslatedRecipeName}</Heading>
-                </CardHeader>
-                <CardBody>
-                    <Text data-testid="time">Cooking Time: {props.recipe.TotalTimeInMins} mins</Text>
-                    <Text data-testid="rating">Rating: {props.recipe['Recipe-rating']}</Text>
-                    <Text data-testid="diet">Diet Type: {props.recipe['Diet-type']}</Text>
-                    <Tag onClick={handleSave} _hover={{bg: "white"}} ml={"160px"} bg={"gray.300"}>save recipe</Tag>
-                </CardBody>
-                <Image
-                    data-testid="recipeImg"
-                    objectFit='cover'
-                    src={props.recipe["image-url"]}
-                    width={"90%"}
-                    height={"40%"}
-                    m={"auto"}
-                    mb="2"
-                />
-            </Card>
-        </>
-    )
-}
-
-export default RecipeCard;
\ No newline at end of file
diff --git a/Code/frontend/src/components/RecipeList.js b/Code/frontend/src/components/RecipeList.js
deleted file mode 100644
index f4c2142d..00000000
--- a/Code/frontend/src/components/RecipeList.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, { useState } from "react";
-import { Avatar, Flex, Modal, ModalBody, ModalCloseButton, ModalOverlay, ModalHeader, ModalFooter, ModalContent, Box, SimpleGrid, Text, Button } from "@chakra-ui/react"
-import RecipeCard from "./RecipeCard";
-
-// component to handle all the recipes
-const RecipeList = ({ recipes }) => {
-  // mapping each recipe item to the Recipe container
-  // const renderedRecipes = recipes.map((recipe) => {
-  //   // return <Recipe key={recipe._id} recipe={recipe} />;
-  //   return(
-
-  //   )
-  // });
-  console.log(recipes)
-  const [isOpen, setIsOpen] = useState(false);
-  const [currentRecipe, setCurrentRecipe] = useState({});
-  var youtube_videos =
-    "https://www.youtube.com/results?search_query=" +
-    currentRecipe["TranslatedRecipeName"];
-  const handleViewRecipe = (data) => {
-    setIsOpen(true)
-    console.log(data)
-    setCurrentRecipe(data);
-  }
-  const onClose = () => {
-    setIsOpen(false)
-  }
-  // all the recipes are being returned in the form of a table
-  return (
-    <>
-      <Box borderRadius={"lg"} border="1px" boxShadow={"10px"} borderColor={"gray.100"} fontFamily="regular" m={10} width={"70%"} p={5}>
-        <SimpleGrid spacing={5} templateColumns='repeat(auto-fill, minmax(250px, 1fr))'>
-          {recipes.length !==0 ? recipes.map((recipe) => (
-            <RecipeCard handler={handleViewRecipe} recipe={recipe} />
-          )) : <Text data-testid="noResponseText" fontSize={"lg"} color={"gray"}>Searching for a recipe?</Text>}
-        </SimpleGrid>
-      </Box>
-      <Modal size={"6xl"} isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent data-testid="recipeModal" >
-          <ModalHeader>{currentRecipe.TranslatedRecipeName}</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <Flex >
-            <Avatar size="2xl" mr={2} mb={2} src={currentRecipe["image-url"]} />
-              <Box mt={4}>
-                <Text><Text as={"b"}>Cooking Time: </Text>{currentRecipe.TotalTimeInMins} mins</Text>
-                <Text><Text as={"b"}>Rating: </Text> {currentRecipe['Recipe-rating']}</Text>
-                <Text mb={2}><Text as={"b"}>Diet Type: </Text> {currentRecipe['Diet-type']}</Text>
-              </Box>
-            </Flex>
-            <Text><Text as={"b"}>Instructions: </Text> {currentRecipe["TranslatedInstructions"]}</Text>
-            <Text color={"blue"}><Text color={"black"}  as={"b"}>Video Url: </Text><a href={youtube_videos}>Youtube</a></Text>
-          </ModalBody>
-
-          <ModalFooter>
-            <Button colorScheme='teal' mr={3} onClick={onClose}>
-              Close
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  )
-};
-export default RecipeList;
diff --git a/Code/frontend/src/components/SearchByRecipe.js b/Code/frontend/src/components/SearchByRecipe.js
deleted file mode 100644
index 16896776..00000000
--- a/Code/frontend/src/components/SearchByRecipe.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/* MIT License
-
-Copyright (c) 2023 Pannaga Rao, Harshitha, Prathima, Karthik  */
-
-import { Box, Input, InputGroup, InputRightElement, Button } from "@chakra-ui/react";
-import { useState } from "react";
-import recipeDB from "../apis/recipeDB";
-
-const SearchByRecipe = (props) => {
-    const [recipeName, setRecipeName] = useState("");
-    const [recipes, setRecipes] = useState([])
-    const handleNameChange = (e) => {
-        e.preventDefault();
-        setRecipeName(e.target.value)
-    }
-    const handleSearchByRecipeClick = (e) => {
-        e.preventDefault();
-        // console.log(recipeName)
-        props.sendRecipeData(recipeName)
-    }
-    return (
-        <>
-            <Box mr={10} ml={10}>
-                <InputGroup size='md'>
-                    <Input  
-                        pr='4.5rem'
-                        placeholder='Enter Recipe Name'
-                        onChange={handleNameChange}
-                    />
-                    <InputRightElement width='4.5rem'>
-                        <Button h='1.75rem' size='sm' onClick={handleSearchByRecipeClick}>
-                            Search
-                        </Button>
-                    </InputRightElement>
-                </InputGroup>
-            </Box>
-        </>
-    )
-}
-
-export default SearchByRecipe;
\ No newline at end of file
diff --git a/Code/frontend/src/components/__tests__/Form.test.js b/Code/frontend/src/components/__tests__/Form.test.js
deleted file mode 100644
index 8cb9bd10..00000000
--- a/Code/frontend/src/components/__tests__/Form.test.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import {render, screen, cleanup, fireEvent} from "@testing-library/react"
-import Form from "./../Form";
-
-afterEach(()=>{
-    cleanup();
-})
-test("should render the ingredient input element", ()=> {
-    render(<Form />)
-    const ingredientInputElement = screen.getByTestId('ingredient')
-    expect(ingredientInputElement).toBeInTheDocument()
-})
-test("should render the email id input element", ()=> {
-    render(<Form />)
-    const emailInputElement = screen.getByTestId('email_id')
-    expect(emailInputElement).toBeInTheDocument()
-})
-test("should render the cuisine input element", ()=> {
-    render(<Form />)
-    const cuisineInputElement = screen.getByTestId('cuisine')
-    expect(cuisineInputElement).toBeInTheDocument()
-})
-
-test("Search button works as expected", ()=> {
-    const handleMock = jest.fn()
-    render(<Form sendFormData={handleMock} />)
-    const searchRecipeButton = screen.getByTestId('submit')
-    fireEvent.click(searchRecipeButton)
-    expect(handleMock).toHaveBeenCalledTimes(1)
-})
\ No newline at end of file
diff --git a/Code/frontend/src/components/__tests__/Login.test.js b/Code/frontend/src/components/__tests__/Login.test.js
index b5641e3c..fb54928d 100644
--- a/Code/frontend/src/components/__tests__/Login.test.js
+++ b/Code/frontend/src/components/__tests__/Login.test.js
@@ -4,6 +4,23 @@ import Login from "../Login";
 // Mock props
 const mockHandleLogin = jest.fn();
 const mockHandleSignup = jest.fn();
+const mockToggleLoginModal = jest.fn();
+
+jest.mock("@chakra-ui/react", () => {
+    return {
+        Modal: ({ children }) => <div>{children}</div>,
+        ModalOverlay: ({ children }) => <div>{children}</div>,
+        ModalContent: ({ children }) => <div>{children}</div>,
+        ModalHeader: ({ children }) => <div>{children}</div>,
+        ModalCloseButton: () => <button>Close</button>,
+        ModalBody: ({ children }) => <div>{children}</div>,
+        ModalFooter: ({ children }) => <div>{children}</div>,
+        FormControl: ({ children }) => <div>{children}</div>,
+        FormLabel: ({ children }) => <label>{children}</label>,
+        Input: (props) => <input {...props} />,
+        Button: ({ children, ...props }) => <button {...props}>{children}</button>,
+    };
+});
 
 afterEach(() => {
     cleanup();
@@ -22,15 +39,27 @@ test("should render the password input element", () => {
 });
 
 test("Login button calls handleLogin on click", () => {
-    render(<Login handleLogin={mockHandleLogin} handleSignup={mockHandleSignup} />);
+    render(<Login handleLogin={mockHandleLogin} handleSignup={mockHandleSignup} toggleLoginModal={mockToggleLoginModal} />);
+
+    fireEvent.change(screen.getByPlaceholderText('User name'), { target: { value: 'testuser' } });
+    fireEvent.change(screen.getByPlaceholderText('Password'), { target: { value: 'password123' } });
+
     const loginButton = screen.getByText('Login');
     fireEvent.click(loginButton);
+
+    expect(mockHandleLogin).toHaveBeenCalledWith('testuser', 'password123');
     expect(mockHandleLogin).toHaveBeenCalledTimes(1);
 });
 
 test("Signup button calls handleSignup on click", () => {
-    render(<Login handleLogin={mockHandleLogin} handleSignup={mockHandleSignup} />);
+    render(<Login handleLogin={mockHandleLogin} handleSignup={mockHandleSignup} toggleLoginModal={mockToggleLoginModal} />);
+
+    fireEvent.change(screen.getByPlaceholderText('User name'), { target: { value: 'testuser' } });
+    fireEvent.change(screen.getByPlaceholderText('Password'), { target: { value: 'password123' } });
+
     const signupButton = screen.getByText('Sign up');
     fireEvent.click(signupButton);
+
+    expect(mockHandleSignup).toHaveBeenCalledWith('testuser', 'password123');
     expect(mockHandleSignup).toHaveBeenCalledTimes(1);
 });
\ No newline at end of file
diff --git a/Code/frontend/src/components/__tests__/RecipeCard.test.js b/Code/frontend/src/components/__tests__/RecipeCard.test.js
deleted file mode 100644
index b2c8292b..00000000
--- a/Code/frontend/src/components/__tests__/RecipeCard.test.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { render, cleanup, screen, fireEvent } from "@testing-library/react";
-import RecipeList from "../RecipeList";
-
-const recipes=[
-    {
-        TranslatedRecipeName: "Spicy Tomato Rice (Recipe)",
-        TotalTimeInMins: 15,
-        'Recipe-rating':2,
-        'Diet-type': "Vegan", 
-        'image-url': "https://www.archanaskitchen.com/images/archanaskitchen/1-Author/b.yojana-gmail.com/Spicy_Thakkali_Rice_Tomato_Pulihora-1_edited.jpg",
-        TranslatedInstructions: "To make tomato puliogere, first cut the tomatoes.\r\nNow put in a mixer grinder and puree it.\r\nNow heat oil in a pan.\r\nAfter the oil is hot, add chana dal, urad dal, cashew and let it cook for 10 to 20 seconds.\r\nAfter 10 to 20 seconds, add cumin seeds, mustard seeds, green chillies, dry red chillies and curry leaves.\r\nAfter 30 seconds, add tomato puree to it and mix.\r\nAdd BC Belle Bhat powder, salt and mix it.\r\nAllow to cook for 7 to 8 minutes and then turn off the gas.\r\nTake it out in a bowl, add cooked rice and mix it.\r\nServe hot.\r\nServe tomato puliogre with tomato cucumber raita and papad for dinner.",
-        youtube_videos: "https://www.youtube.com/results?search_query=Spicy Tomato Rice (Recipe)"
-    }
-]
-
-test("should render recipe details modal on click", ()=>{
-    render(<RecipeList recipes={recipes} />)
-    const cardElement = screen.getByTestId('recipeCard')
-    expect(cardElement).toBeInTheDocument()
-    fireEvent.click(cardElement)
-    const modalElement = screen.getByTestId('recipeModal')
-    expect(modalElement).toBeInTheDocument()
-})
\ No newline at end of file
diff --git a/Code/frontend/src/components/__tests__/RecipeList.test.js b/Code/frontend/src/components/__tests__/RecipeList.test.js
deleted file mode 100644
index 4b2929ac..00000000
--- a/Code/frontend/src/components/__tests__/RecipeList.test.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { render, cleanup, screen, fireEvent } from "@testing-library/react";
-import RecipeList from "../RecipeList";
-
-const recipes=[
-    {
-        TranslatedRecipeName: "Spicy Tomato Rice (Recipe)",
-        TotalTimeInMins: 15,
-        'Recipe-rating':2,
-        'Diet-type': "Vegan", 
-        'image-url': "https://www.archanaskitchen.com/images/archanaskitchen/1-Author/b.yojana-gmail.com/Spicy_Thakkali_Rice_Tomato_Pulihora-1_edited.jpg",
-        TranslatedInstructions: "To make tomato puliogere, first cut the tomatoes.\r\nNow put in a mixer grinder and puree it.\r\nNow heat oil in a pan.\r\nAfter the oil is hot, add chana dal, urad dal, cashew and let it cook for 10 to 20 seconds.\r\nAfter 10 to 20 seconds, add cumin seeds, mustard seeds, green chillies, dry red chillies and curry leaves.\r\nAfter 30 seconds, add tomato puree to it and mix.\r\nAdd BC Belle Bhat powder, salt and mix it.\r\nAllow to cook for 7 to 8 minutes and then turn off the gas.\r\nTake it out in a bowl, add cooked rice and mix it.\r\nServe hot.\r\nServe tomato puliogre with tomato cucumber raita and papad for dinner.",
-        youtube_videos: "https://www.youtube.com/results?search_query=Spicy Tomato Rice (Recipe)"
-    }
-]
-
-const emptyRecipes=[]
-
-test("should render recipe card name", ()=>{
-    render(<RecipeList recipes={recipes} />)
-    const recipeNameElement = screen.getByTestId('recipeName')
-    expect(recipeNameElement).toBeInTheDocument()
-    expect(recipeNameElement).toHaveTextContent(recipes[0].TranslatedRecipeName)
-})
-
-test("should render recipe card time", ()=>{
-    render(<RecipeList recipes={recipes} />)
-    const recipeTimeElement = screen.getByTestId('time')
-    expect(recipeTimeElement).toBeInTheDocument()
-    expect(recipeTimeElement).toHaveTextContent(recipes[0].TotalTimeInMins)
-
-})
-
-test("should render recipe card rating", ()=>{
-    render(<RecipeList recipes={recipes} />)
-    const recipeRatingElement = screen.getByTestId('rating')
-    expect(recipeRatingElement).toBeInTheDocument()
-    expect(recipeRatingElement).toHaveTextContent(recipes[0]['Recipe-rating'])
-
-})
-
-test("should render recipe card diet", ()=>{
-    render(<RecipeList recipes={recipes} />)
-    const dietElement = screen.getByTestId('diet')
-    expect(dietElement).toBeInTheDocument()
-    expect(dietElement).toHaveTextContent(recipes[0]['Diet-type'])
-
-})
-
-test("should render recipe card image", ()=>{
-    render(<RecipeList recipes={recipes} />)
-    const imageElement = screen.getByTestId('recipeImg')
-    expect(imageElement).toBeInTheDocument()
-})
-
-test("should not render recipe cards", ()=>{
-    render(<RecipeList recipes={emptyRecipes} />)
-    const noResponseElement = screen.getByTestId('noResponseText')
-    expect(noResponseElement).toBeInTheDocument()
-    expect(noResponseElement).toHaveTextContent("Searching for a recipe?")
-})
-
-test("should render recipe details modal on click", ()=>{
-    render(<RecipeList recipes={recipes} />)
-    const cardElement = screen.getByTestId('recipeCard')
-    expect(cardElement).toBeInTheDocument()
-    fireEvent.click(cardElement)
-    const modalElement = screen.getByTestId('recipeModal')
-    expect(modalElement).toBeInTheDocument()
-})
\ No newline at end of file
diff --git a/Code/frontend/src/service/firestoreService.test.js b/Code/frontend/src/service/firestoreService.test.js
new file mode 100644
index 00000000..4c2ec7f4
--- /dev/null
+++ b/Code/frontend/src/service/firestoreService.test.js
@@ -0,0 +1,147 @@
+import { bookmarkRecipe, unbookmarkRecipe, isRecipeBookmarked, fetchBookmarkedRecipes, fetchBookmarkedIngredients } from './firestoreService';
+import { auth, db } from "../firebase/firebase";
+import { doc, setDoc, deleteDoc, getDoc, getDocs, query, where, collection } from "firebase/firestore";
+
+// Mock Firebase imports
+jest.mock("firebase/firestore", () => ({
+    doc: jest.fn(),
+    setDoc: jest.fn(),
+    deleteDoc: jest.fn(),
+    getDoc: jest.fn(),
+    collection: jest.fn(),
+    query: jest.fn(),
+    where: jest.fn(),
+    getDocs: jest.fn(),
+}));
+jest.mock("../firebase/firebase", () => ({
+    auth: { currentUser: { uid: "testUserId" } },
+    db: {},
+}));
+
+describe("firestoreService", () => {
+    const mockRecipe = {
+        name: "Test Recipe",
+        ingredients: ["ingredient1", "ingredient2"],
+        time: 30,
+        process: ["Step 1", "Step 2"],
+    };
+    const mockRecipeName = "Test Recipe";
+    
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test("bookmarkRecipe should set a new document with recipe data", async () => {
+        const documentId = `${auth.currentUser.uid}_${mockRecipe.name}`;
+        const bookmarkRef = { id: documentId };
+
+        doc.mockReturnValue(bookmarkRef);
+
+        await bookmarkRecipe(mockRecipe);
+
+        expect(doc).toHaveBeenCalledWith(db, "bookmarks", documentId);
+        expect(setDoc).toHaveBeenCalledWith(bookmarkRef, {
+            userId: auth.currentUser.uid,
+            recipeName: mockRecipe.name,
+            ingredients: mockRecipe.ingredients,
+            cookingTime: mockRecipe.time,
+            steps: mockRecipe.process,
+        });
+    });
+
+    test("unbookmarkRecipe should delete the recipe document", async () => {
+        const documentId = `${auth.currentUser.uid}_${mockRecipeName}`;
+        const bookmarkRef = { id: documentId };
+
+        doc.mockReturnValue(bookmarkRef);
+
+        await unbookmarkRecipe(mockRecipeName);
+
+        expect(doc).toHaveBeenCalledWith(db, "bookmarks", documentId);
+        expect(deleteDoc).toHaveBeenCalledWith(bookmarkRef);
+    });
+
+    test("isRecipeBookmarked should return true if the document exists", async () => {
+        const documentId = `${auth.currentUser.uid}_${mockRecipeName}`;
+        const bookmarkRef = { id: documentId };
+
+        doc.mockReturnValue(bookmarkRef);
+        getDoc.mockResolvedValue({ exists: () => true });
+
+        const isBookmarked = await isRecipeBookmarked(mockRecipeName);
+
+        expect(doc).toHaveBeenCalledWith(db, "bookmarks", documentId);
+        expect(getDoc).toHaveBeenCalledWith(bookmarkRef);
+        expect(isBookmarked).toBe(true);
+    });
+
+    test("isRecipeBookmarked should return false if the document does not exist", async () => {
+        const documentId = `${auth.currentUser.uid}_${mockRecipeName}`;
+        const bookmarkRef = { id: documentId };
+
+        doc.mockReturnValue(bookmarkRef);
+        getDoc.mockResolvedValue({ exists: () => false });
+
+        const isBookmarked = await isRecipeBookmarked(mockRecipeName);
+
+        expect(doc).toHaveBeenCalledWith(db, "bookmarks", documentId);
+        expect(getDoc).toHaveBeenCalledWith(bookmarkRef);
+        expect(isBookmarked).toBe(false);
+    });
+
+    test("fetchBookmarkedRecipes should return all bookmarked recipes for the user", async () => {
+        const bookmarksRef = {};
+        const q = {};
+        const mockRecipes = [
+            { recipeName: "Recipe1", ingredients: ["ingredient1"] },
+            { recipeName: "Recipe2", ingredients: ["ingredient2"] },
+        ];
+
+        collection.mockReturnValue(bookmarksRef);
+        query.mockReturnValue(q);
+        where.mockReturnValue(q);
+        getDocs.mockResolvedValue({
+            docs: mockRecipes.map((recipe) => ({ data: () => recipe })),
+        });
+
+        const recipes = await fetchBookmarkedRecipes();
+
+        expect(collection).toHaveBeenCalledWith(db, "bookmarks");
+        expect(query).toHaveBeenCalledWith(bookmarksRef, where("userId", "==", auth.currentUser.uid));
+        expect(getDocs).toHaveBeenCalledWith(q);
+        expect(recipes).toEqual(mockRecipes);
+    });
+
+    test('fetchBookmarkedIngredients should return all unique ingredients', async () => {
+        // Arrange
+        const bookmarksRef = { id: 'bookmarksRef' };
+        const mockData = [
+            { userId: 'testUserId', recipeName: 'Recipe 1', ingredients: ['Ingredient 1', 'Ingredient 2'], cookingTime: '30 mins', steps: 'Step 1' },
+            { userId: 'testUserId', recipeName: 'Recipe 2', ingredients: ['Ingredient 2', 'Ingredient 3'], cookingTime: '15 mins', steps: 'Step 2' }
+        ];
+
+        collection.mockReturnValue(bookmarksRef);
+        query.mockReturnValue('mockedQuery');
+        where.mockReturnValue('mockedWhere');
+        
+        // Mocking getDocs to return an iterable object with a forEach method
+        getDocs.mockResolvedValue({
+            docs: mockData.map(data => ({
+                data: () => data
+            })),
+            forEach: function(callback) {
+                this.docs.forEach(callback);
+            }
+        });
+
+        // Act
+        const ingredients = await fetchBookmarkedIngredients();
+
+        // Assert
+        expect(ingredients).toEqual(['Ingredient 1', 'Ingredient 2', 'Ingredient 3']);
+        expect(collection).toHaveBeenCalledWith(expect.anything(), "bookmarks");
+        expect(query).toHaveBeenCalled();
+        expect(where).toHaveBeenCalledWith("userId", "==", "testUserId");
+        expect(getDocs).toHaveBeenCalledWith('mockedQuery');
+    });
+});