Merge pull request #31 from gfa-cc-after/SCRUM-48

Scrum 48

frontend/package.json

@@ -12,7 +12,7 @@
     "test:watch": "vitest --watch"
   },
   "dependencies": {
-    "msw": "^2.3.1",
+    "axios": "^1.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "validator": "^13.12.0"
@@ -37,6 +37,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^24.1.0",
+    "msw": "^2.3.1",
     "react-router-dom": "^6.23.1",
     "ts-jest": "^29.2.2",
     "ts-node": "^10.9.2",

frontend/setup-tests.ts

@@ -1 +1,12 @@
-import '@testing-library/jest-dom'
+import '@testing-library/jest-dom'
+
+import { server } from './src/mocks/server'
+// Establish API mocking before all tests.
+beforeAll(() => server.listen())
+
+// Reset any request handlers that we may add during the tests,
+// so they don't affect other tests.
+afterEach(() => server.resetHandlers())
+
+// Clean up after the tests are finished.
+afterAll(() => server.close())

frontend/src/mocks/handler.ts

@@ -0,0 +1,9 @@
+import { http, HttpResponse } from 'msw'
+
+export const handlers = [
+
+    http.post('http://localhost:8080/register', () => {
+        return HttpResponse.json({ message: 'User registered successfully' })
+
+    })
+]

frontend/src/mocks/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node'
+import { handlers } from './handler'
+
+export const server = setupServer(...handlers)

frontend/src/pages/Register.test.tsx

@@ -49,4 +49,34 @@ describe("Register component", () => {
         // Assert
         expect(screen.queryByLabelText('passworderrors')).toBeNull();
     });
+
+
+    test("successfull registration should clear the form", async () => {
+        // Arrange
+        render(
+            <Router>
+                <Register />
+            </Router>
+        );
+        const user = userEvent.setup();
+        const passwordField = screen.getByLabelText('pass');
+
+        const firstNameField = screen.getByLabelText("firstName")
+        const lastNameField = screen.getByLabelText("lastName")
+        const emailField = screen.getByLabelText("email")
+
+        // Act
+        await user.type(passwordField, "Ajg65657h")
+        await user.type(firstNameField, "John")
+        await user.type(lastNameField, "Doe")
+        await user.type(emailField, "johndoe@gmail.com")
+
+        await user.click(screen.getByRole('button', { name: 'Register' }));
+
+        // Assert
+        expect(firstNameField).toHaveTextContent("")
+        expect(lastNameField).toHaveTextContent("")
+        expect(passwordField).toHaveTextContent("")
+        expect(emailField).toHaveTextContent("")
+    });
 });

frontend/src/pages/Register.tsx

@@ -3,6 +3,9 @@ import { Link } from "react-router-dom";
 import validator from "validator";
 import { PasswordStrengthValidator } from "../components/PasswordStrengthValidator";
 
+import axios from "axios";
+
+
 function Register() {
     const [firstName, setFirstName] = useState("");
     const [lastName, setLastName] = useState("");
@@ -13,23 +16,25 @@ function Register() {
 
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault()
-
+setMessage (" ");
         if (validator.isEmail(email)) {
             setErrMessage("");
-            fetch('http://localhost:8080/register', {
-                mode: 'cors',
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    firstName: firstName,
-                    lastName: lastName,
-                    email: email,
-                    password: password,
-                })
+            axios.post('http://localhost:8080/register', {
+                firstName,
+                lastName,
+                email,
+                password,
             })
-            setMessage("Successful registration!");
+                .then((_response) => {
+                    setMessage("Successful registration!");
+                    setFirstName("");
+                    setLastName("");
+                    setEmail("");
+                    setPassword("");
+                })
+                .catch((error) => {
+                    setErrMessage(error.response.data);
+                });
         } else if (!validator.isEmail(email)) {
             setErrMessage("Please, enter valid email!");
         }
@@ -59,14 +64,20 @@ function Register() {
         <>
             <h1>Register</h1>
             <form onSubmit={handleSubmit}>
-                <label>First Name:</label>
-                <input type='text' name={"firstName"} value={firstName} onChange={saveFormData}></input>
-                <label>Last Name:</label>
-                <input type='text' name={"lastName"} value={lastName} onChange={saveFormData}></input>
-                <label>Email:</label>
-                <input type='email' name={"email"} value={email} onChange={saveFormData}></input>
+                <label htmlFor="firstName">First Name:</label>
+                <input
+                    type='text'
+                    required aria-label="firstName"
+                    name={"firstName"}
+                    value={firstName}
+                    onChange={saveFormData}
+                ></input>
+                <label htmlFor="lastName">Last Name:</label>
+                <input type='text' required aria-label="lastName" name={"lastName"} value={lastName} onChange={saveFormData}></input>
+                <label htmlFor="email">Email:</label>
+                <input type='email' required aria-label="email" name={"email"} value={email} onChange={saveFormData}></input>
                 <span style={{ fontWeight: "bold", color: "red" }}>{errMessage}</span>
-                <label>Password:</label>
+                <label htmlFor="password">Password:</label>
                 <input type='password' aria-label={"pass"} name={"password"} value={password} onChange={saveFormData}></input>
                 <PasswordStrengthValidator password={password}></PasswordStrengthValidator>
                 <button type='submit'>Register</button>