how can I check if there is a text on the screen using enzyme testing, I used to do it on react-testing-library by screen method but now I can't do it with enzyme! ( in the last test in test file )
also is this a good way to test my login component ?
import React, { useState } from 'react';
import { login } from '../../../services/account-service';
import validate from '../../../utility/login-validate';
import { Button, Error, Form, Input, Label, NavLink, Sign, SignBtn } from './signin-style';
/**
* Component to log in the website if you have valid information, and display errors if the information is invalid.
*/
function Signin() {
const [email, setemail] = useState('');
const [errors, setErrors] = useState(null);
const [password, setPassword] = useState('');
/**
*this methode called when the user presses the submit button, first it will check if there is errors, if not it will submit the form!
*
* @param {React.SyntheticEvent} event click on submit button event!
*/
const handleSubmit = async (event) => {
event.preventDefault();
/**
* Function that check if the user inserted wrong information and put it on `error` variable!, then it will update the 'errors' state!
*/
const error = validate(email, password);
setErrors(error);
await login(email, password);
};
/**
* Method that handle the change on { email input } by taking the input value and setting it on 'email' state!
*
* @param {React.SyntheticEvent} event when user type in email input!
*/
const handleemailChange = (event) => {
const user = event.currentTarget.value;
setemail(user);
};
/**
* Method that handle the change on { password input } by taking the input value and setting it on 'password' state!
*
* @param {React.SyntheticEvent} event When user type in password input
*/
const handlePasswordChange = (event) => {
const pass = event.currentTarget.value;
setPassword(pass);
};
return (
<Sign>
<h1>Sign In</h1>
<NavLink to="/login">Need an account?</NavLink>
{errors ? <Error id="error">* Invalid email or password!</Error> : null}
<Form>
<div>
<Label htmlFor="email">
<Input
id="email"
onChange={handleemailChange}
placeholder="Email"
type="text"
value={email}
/>
</Label>
</div>
<div>
<Label htmlFor="password">
<Input
id="password"
onChange={handlePasswordChange}
placeholder="Password"
type="password"
value={password}
/>
</Label>
</div>
<SignBtn>
<Button type="submit" onClick={handleSubmit}>
Sign in
</Button>
</SignBtn>
</Form>
</Sign>
);
}
export default Signin;
and here is my test file .....
import { shallow } from 'enzyme';
import React from 'react';
import '../../../setup-tests';
import Signin from './Signin';
describe('Signin component', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(<Signin />);
});
it('should render Signin component without crashing', () => {
expect(wrapper).toMatchSnapshot();
});
it('should check email input value', () => {
const emailInput = wrapper.find('#email');
emailInput.simulate('change', { currentTarget: { value: 'alaa@gmail.com' } });
expect(wrapper.find('#email').prop('value')).toEqual('alaa@gmail.com');
});
it('should check password input value', () => {
const passwordInput = wrapper.find('#password');
passwordInput.simulate('change', { currentTarget: { value: '123' } });
expect(wrapper.find('#password').prop('value')).toEqual('123');
});
it('should display error on the screen on click', () => {
const emailInput = wrapper.find('#email');
const passwordInput = wrapper.find('#password');
passwordInput.simulate('change', { currentTarget: { value: '' } });
emailInput.simulate('change', { currentTarget: { value: '' } });
const submitButton = wrapper.find('[type="submit"]');
submitButton.simulate('click');
// put some code here !
});
});
Aucun commentaire:
Enregistrer un commentaire