create sign in test cases

package.json

@@ -20,6 +20,7 @@
     "@mui/icons-material": "5.11.16",
     "@mui/lab": "^5.0.0-alpha.143",
     "@mui/material": "5.12.3",
+    "@types/testing-library__jest-dom": "^6.0.0",
     "axios": "^1.4.0",
     "chart.js": "4.3.0",
     "chroma-js": "2.4.2",
@@ -51,7 +52,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "jest",
+    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -79,6 +80,7 @@
     "@babel/preset-react": "^7.22.15",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^13.5.0",
     "babel-jest": "^29.6.4",
     "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.8.0",
@@ -87,22 +89,10 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "4.6.0",
-    "jest": "^29.6.4",
-    "jest-environment-jsdom": "^29.3.1",
+    "jest": "^29.7.0",
     "prettier": "2.8.8"
   },
   "overrides": {
     "svgo": "3.0.2"
-  },
-  "jest": {
-    "testEnvironment": "jest-environment-jsdom",
-    "transform": {
-    "^.+\\.(js|jsx)$": "babel-jest"
-    },
-    "rootDir": "./src/",
-    "moduleFileExtensions": ["js", "jsx"],
-    "moduleDirectories": ["node_modules", "bower_components", "src"],
-    "verbose": true
-}
-
+  }
 }

src/__test__/Login.test.js

@@ -0,0 +1,142 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event"; // Use @testing-library/react // Import extend-expect to enable toBeInTheDocument
+import Basic from "layouts/authentication/sign-in";
+import Test from "./test";
+import UserProvider from "utils/userContext";
+import { BrowserRouter, MemoryRouter } from "react-router-dom";
+import { MaterialUIControllerProvider } from "context";
+import theme from "assets/theme";
+import themeDark from "assets/theme-dark";
+import { ThemeProvider } from "@mui/material/styles";
+import { useUser } from "utils/userContext";
+
+it("renders welcome message", () => {
+  const component = render(<Test />);
+  const t = screen.getByText("Still in progress of Implementation");
+  expect(t).toBeTruthy();
+  //   expect(screen.getByText("Still in progress of Implementation")).toBeInTheDocument();
+});
+
+describe("Test Login", () => {
+  test("render login", async () => {
+    render(
+      <BrowserRouter>
+        <MaterialUIControllerProvider>
+          <UserProvider>
+            <ThemeProvider theme={theme}>
+              <Basic />
+            </ThemeProvider>
+          </UserProvider>
+        </MaterialUIControllerProvider>
+      </BrowserRouter>
+    );
+    const buttonList = await screen.findAllByRole("button");
+    expect(buttonList).toHaveLength(2);
+  });
+  test("allows the user to input email and password", () => {
+    render(
+      <BrowserRouter>
+        <MaterialUIControllerProvider>
+          <UserProvider>
+            <ThemeProvider theme={theme}>
+              <Basic />
+            </ThemeProvider>
+          </UserProvider>
+        </MaterialUIControllerProvider>
+      </BrowserRouter>
+    );
+
+    // Simulate user input
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+    userEvent.type(emailInput, "[email protected]");
+    userEvent.type(passwordInput, "password123");
+    expect(screen.getByText("Welcome Back")).toBeInTheDocument();
+
+    // Check if the email and password input fields are rendered
+    expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    expect(screen.getByLabelText("Password")).toBeInTheDocument();
+
+    // Check if the "Remember me" switch is rendered
+    expect(screen.getByText("Remember me")).toBeInTheDocument();
+
+    // Check if the "Forget Password?" link is rendered
+    expect(screen.getByText("Forget Password ?")).toBeInTheDocument();
+
+    // Check if the "Log in" button is rendered
+    expect(screen.getByText("Log in")).toBeInTheDocument();
+
+    // Check if the "Or" text is rendered
+    expect(screen.getByText("Or")).toBeInTheDocument();
+
+    // Check if the "Sign up" link is rendered
+    expect(screen.getByText("Sign up")).toBeInTheDocument();
+
+    // Check that the input values are correctly updated
+    // expect(emailInput).toHaveValue("[email protected]");
+    // expect(passwordInput).toHaveValue("password123");
+  });
+});
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useNavigate: () => jest.fn(),
+}));
+
+describe("Sign In Page", () => {
+  it("handles login correctly", () => {
+    render(
+      <UserProvider>
+        <MemoryRouter>
+          <MaterialUIControllerProvider>
+            <ThemeProvider theme={theme}>
+              <Basic />
+            </ThemeProvider>
+          </MaterialUIControllerProvider>
+        </MemoryRouter>
+      </UserProvider>
+    );
+
+    // Mock the fetch function to handle the login request
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            user: {
+              User_Name: "testuser",
+              Full_Name: "Test User",
+              UserID: 123,
+              Role: "user",
+              email: "[email protected]",
+              Contact_Number: "1234567890",
+              Profession: "Tester",
+            },
+          }),
+      })
+    );
+
+    // Fill in the email and password fields
+    fireEvent.change(screen.getByLabelText("Email"), {
+      target: { value: "[email protected]" },
+    });
+    fireEvent.change(screen.getByLabelText("Password"), {
+      target: { value: "password123" },
+    });
+
+    // Click the "Log in" button
+    fireEvent.click(screen.getByText("Log in"));
+
+    // Check if the login function was called with the correct user data
+    expect(useUser().login).toHaveBeenCalledWith({
+      name: "[email protected]",
+      full_name: "Test User",
+      user_ID: 123,
+      role: "user",
+      email: "[email protected]",
+      phone_Number: "1234567890",
+      profession: "Tester",
+    });
+  });
+});

src/__test__/test.js

@@ -0,0 +1,15 @@
+import { Box, Input, Typography } from "@mui/material";
+import React from "react";
+
+export default function Test() {
+  return (
+    <div>
+      <Typography mt={10} mb={10} variant="h2" textAlign="center">
+        Still in progress of Implementation
+      </Typography>
+      <Box mb={2}>
+        <Input type="email" label="Email" fullWidth />
+      </Box>
+    </div>
+  );
+}

src/setupTests.js

@@ -0,0 +1,2 @@
+// src/setupTests.js
+import "@testing-library/jest-dom";