Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrum 48 #31

Merged
merged 3 commits into from
Jul 16, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 105 additions & 22 deletions frontend/package-lock.json

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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",
Expand Down
13 changes: 12 additions & 1 deletion frontend/setup-tests.ts
Original file line number Diff line number Diff line change
@@ -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())
9 changes: 9 additions & 0 deletions frontend/src/mocks/handler.ts
Original file line number Diff line number Diff line change
@@ -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' })

})
]
4 changes: 4 additions & 0 deletions frontend/src/mocks/server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { setupServer } from 'msw/node'
import { handlers } from './handler'

export const server = setupServer(...handlers)
46 changes: 46 additions & 0 deletions frontend/src/pages/Register.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,50 @@ describe("Register component", () => {
// Assert
expect(screen.queryByLabelText('passworderrors')).toBeNull();
});


test("passworderrors dissappear after successfull password input", async () => {
// Arrange
render(
<Router>
<Register />
</Router>
);
const user = userEvent.setup();
const passwordInput = screen.getByLabelText('pass');
// Act
await user.type(passwordInput, "Ajg65657h")

// Assert
expect(screen.queryByLabelText('passworderrors')).toBeNull();
});
markkovari marked this conversation as resolved.
Show resolved Hide resolved

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("")
});
});
51 changes: 31 additions & 20 deletions frontend/src/pages/Register.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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("");
Expand All @@ -16,20 +19,22 @@ function Register() {

markkovari marked this conversation as resolved.
Show resolved Hide resolved
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!");
}
Expand Down Expand Up @@ -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>
Expand Down
Loading