Блог

//Login.js

импорт {useSelector, useDispatch } из «react-redux»;

импортируйте заголовок из ‘./Заголовок’;

импорт {Форма отправки, изменение вручную} из «../действия/аутентификация»;

заголовок журнала const = () => {

 const selector = useSelector(state => state.authentication);
const dispatch = useDispatch();

const submitFormagin = (e) => {
    e.preventDefault();
    let params =  {
        email : selector.email.replace(/s/g, '').toLowerCase(),
        password : selector.password.replace(/s/g, ''),
        user_ip  : selector.login_ip
    }
    
    //Hit api
    dispatch(submitForm(params,"login"))
    
}
return(
        <>
            <Header/>
            <section className="height100 create-account">
                <div className="signup_left">
                    <div className="white-bg">
                        <div className="signup_form">
                                    
                        <form onSubmit = {e => submitFormagin(e)} data-testid="form">
                            <div className="form-group">
                                <input type="text" data-testid = "email" className="form-control" name="email" placeholder="Email*" value={selector.email} onChange = {e => dispatch(handleChange(e))}/>
                            
                            </div>
                            <div className="form-group">
                                <input type={selector.passattibutetype} data-testid = "password" className="form-control eye-close"  name="password" placeholder="Password*" value={selector.password} onChange = {e => dispatch(handleChange(e))}/>
                                
                            </div>
                            
                            <button type="submit" className="loginbtn" data-testid = "button">
                                <div className="d-flex align-items-center justify-content-center h-100 w-100"> 
                                    <div className={selector.loader}>
                                        <img src={selector.loaderimage} alt="loader"/>
                                    </div> 
                                    <div>
                                        {selector.submitval}
                                    </div>
                                </div>
                            </button>
                        </form>
                    
                                        
                        </div>
                        
                    </div>
                </div>
            </section>
            
            </>
    ) 
} 
 

заголовок журнала экспорта по умолчанию;

//Login.test.js

импорт { визуализация, событие пожара, очистка, ожидание } из ‘@testing-library/react’;

  import Loginheader from './Login';


 import store from '../store';
 

импорт { BrowserRouter } из ‘react-router-dom’;

импорт { Поставщик } из «react-redux»;

опишите(«Вход», () => {

 afterEach(cleanup);
test("Check Snapshot", () => {
    const {container} = render(<BrowserRouter><Provider store={store}><Loginheader /></Provider></BrowserRouter>)
    expect(container).toMatchSnapshot();
})

test("Form submit", async () => {
   
    const { getByTestId} = render(<BrowserRouter><Provider store={store}><Loginheader /></Provider></BrowserRouter>)
    const emailval = "xyz";
    fireEvent.change(getByTestId('email'), { target : {
        value:emailval
    }});
    fireEvent.change(getByTestId('password'), { target : {
        value:"123456"
    }});
    
    fireEvent.submit(getByTestId('form'));
    await waitFor(() => {
       expect(getByTestId('password').value).toBe(emailval)
       expect(getByTestId('email').value).toBe(emailval)
    })
})
 

})