chore(frontend):add tests and refacto components

frontend-web/.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
     "env": {
+        "node": true,
         "browser": true,
         "es2021": true
     },

frontend-web/.npmrc

@@ -1 +1,2 @@
-8.19.2
+engine-strict=true
+registry=https://registry.npmjs.org/

frontend-web/jest.config.js

@@ -1,5 +1,16 @@
-/** @type {import('ts-jest').JestConfigWithTsJest} */
-module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'node',
-};
+/** @type {import('jest').Config} */
+const config = {
+    testEnvironment: "jsdom",
+    coveragePathIgnorePatterns: [
+        "/node_modules/",
+        "/coverage",
+        "package.json",
+        "package-lock.json",
+        "reportWebVitals.ts",
+        "setupTests.ts",
+        "index.tsx"
+    ],
+    setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+}
+
+module.exports = config

frontend-web/jest.setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom"

frontend-web/package.json

@@ -6,11 +6,15 @@
     "name": "Thibaut MOUTON",
     "email": "[email protected]"
   },
+  "engines": {
+    "node": ">= 20",
+    "npm": ">= 8.0.0"
+  },
   "scripts": {
     "start": "react-scripts start",
     "start:test": "tsc && set PORT=8080 && react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --watchAll=false",
     "lint": "eslint -c .eslintrc.json --ext .ts,.tsx .",
     "lint:fix": "npm run lint -- --fix",
     "eject": "react-scripts eject"
@@ -19,8 +23,8 @@
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
     "@mui/icons-material": "5.15.20",
-    "@mui/lab": "^5.0.0-alpha.170",
-    "@mui/material": "5.15.20",
+    "@mui/lab": "5.0.0-alpha.170",
+    "@mui/material": "5.15.21",
     "@stomp/stompjs": "7.0.0",
     "axios": "1.6.8",
     "history": "5.3.0",
@@ -32,15 +36,19 @@
     "react-scripts": "5.0.1",
     "react-toastify": "10.0.5",
     "sockjs-client": "1.6.1",
+    "ts-jest": "29.1.5",
     "typescript": "4.7.4"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
   "devDependencies": {
-    "@jest/globals": "^29.7.0",
-    "@types/react": "18.2.74",
-    "@types/react-dom": "18.2.24",
+    "@testing-library/dom": "10.3.0",
+    "@testing-library/jest-dom": "6.4.6",
+    "@testing-library/react": "16.0.0",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "@types/jest": "29.5.12",
     "@typescript-eslint/eslint-plugin": "7.5.0",
     "@typescript-eslint/parser": "7.5.0",
     "eslint-plugin-react": "7.34.1"

frontend-web/src/components/login/LoginComponent.tsx

@@ -1,5 +1,5 @@
 import {Button, Grid, TextField, Typography} from "@mui/material"
-import React, {useContext, useEffect, useState} from "react"
+import React, {useContext, useState} from "react"
 import {Link, useNavigate} from "react-router-dom"
 import {useThemeContext} from "../../context/theme-context"
 import {generateLinkColorMode} from "../utils/enable-dark-mode"
@@ -21,10 +21,6 @@ export function LoginComponent(): React.JSX.Element {
     const {theme} = useThemeContext()
     const httpService = new HttpGroupService()
 
-    useEffect(() => {
-        document.title = "Login | FLM"
-    }, [])
-
     function handleChange(e: any) {
         e.preventDefault()
         switch (e.target.name) {
@@ -135,7 +131,7 @@ export function LoginComponent(): React.JSX.Element {
                     <Grid container justifyContent={"space-between"}>
                         <Link className={"lnk"}
                               style={{color: generateLinkColorMode(theme)}}
-                              to={"/forgetpassword"}>
+                              to={"/reset/password"}>
                             Forgot your password ?
                         </Link>
                         <Link className={"lnk"}

frontend-web/src/components/login/LoginWrapperComponent.tsx

@@ -0,0 +1,16 @@
+import React, {useEffect} from "react"
+import {WelcomeComponent} from "../welcome/WelcomeComponent"
+import {LoginComponent} from "./LoginComponent"
+
+export function LoginWrapperComponent(): React.JSX.Element {
+
+    useEffect(() => {
+        document.title = "Login | FLM"
+    }, [])
+
+    return <>
+        <WelcomeComponent>
+            <LoginComponent/>
+        </WelcomeComponent>
+    </>
+}

frontend-web/src/components/partials/FooterComponent.test.tsx

@@ -0,0 +1,10 @@
+import React from "react"
+import {render, screen} from "@testing-library/react"
+import {FooterComponent} from "./FooterComponent"
+
+describe(FooterComponent.name, () => {
+    test("should render footer component", () => {
+        render(<FooterComponent/>)
+        expect(screen.getByTestId("footer-title").textContent).toEqual("FastLiteMessage - Open source software")
+    })
+})

frontend-web/src/components/partials/FooterComponent.tsx

@@ -0,0 +1,27 @@
+import {Box, Typography} from "@mui/material"
+import React from "react"
+import {useThemeContext} from "../../context/theme-context"
+import {generateColorMode} from "../utils/enable-dark-mode"
+
+export function FooterComponent(): React.JSX.Element {
+    const {theme} = useThemeContext()
+
+    return (
+        <Box mt={5} display="flex" flexDirection={"column"}>
+            <Typography variant="body2" color="inherit" align="center">
+                <a className={"clrcstm lnk" + generateColorMode(theme)} target={"_blank"} data-testid="footer-title"
+                   href={"https://github.com/Thibaut-Mouton/react-spring-messenger-project"} rel="noreferrer">
+                    FastLiteMessage - Open source software
+                </a>
+                {" | "}
+                {new Date().getFullYear()}
+            </Typography>
+            <Typography variant="caption" color="inherit" align="center">
+                <a role={"gcu"} className={"clrcstm lnk" + generateColorMode(theme)} target={"_blank"}
+                   href={"#"} rel="noreferrer">
+                    GCU
+                </a>
+            </Typography>
+        </Box>
+    )
+}