Update existing tests and added tests

Code/frontend/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    testEnvironment: 'node',
+    transform: {
+        '^.+\\.jsx?$': 'babel-jest',
+    },
+};

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"
   }
 }

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