jeudi 4 mars 2021

testing by enzyme login component

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