I have start my first unit test in react with jest this afternoon. The 5 firsts tests that i have to do are about testing the return functions. No so difficult.
But i have difficulty to understand how to unit test my function login that return something i dont understand yet. Is someone see what i have to put in my action.test.js, show me and explain me ?
How can i unit testing login and what represent the dispatch that return the login function ?
**In action.js**
<pre>
import { userConstants } from '../shared/constants';
import { userService } from '../shared/services';
import { history } from '../shared/helpers';
function request(user) {
return { type: userConstants.LOGIN_REQUEST, user };
}
function success(user) {
return { type: userConstants.LOGIN_SUCCESS, user };
}
function failure(error) {
return { type: userConstants.LOGIN_FAILURE, error };
}
function login(username, password) {
return (dispatch) => {
dispatch(request({ username }));
userService.login(username, password).then(
(user) => {
dispatch(success(user));
history.push('/');
},
(error) => {
dispatch(failure(error));
console.error(error); // eslint-disable-line no-console
},
);
};
}
function logout() {
userService.logout();
return { type: userConstants.LOGOUT };
}
function oldLogin() {
return { type: userConstants.OLD_LOGIN };
}
export const userActions = {
login,
logout,
oldLogin,
};
</pre>
**In service.js**
<pre>
function logout() {
// remove user from local storage to log user out
if (localStorage.getItem('user')) {
localStorage.removeItem('user');
}
}
function handleResponse(response) {
return response.text().then((text) => {
const data = text && JSON.parse(text);
if (!response.ok) {
if (response.status === 401) {
// auto logout if 401 response returned from api
logout();
window.location.reload(true);
}
const error = (data && data.message) || response.statusText;
return Promise.reject(error);
}
return data;
});
}
function login(username, password) {
return fetch(
'https://mon-api',
{
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
username,
password,
context: {
deviceToken: '1cb1b51d19665cb45dc1caf254b02af',
},
}),
},
)
.then(handleResponse)
.then((user) => {
// login successful if there's a jwt token in the response
if (user.sessionToken) {
// store user details and jwt token in local storage to
// keep user logged in between page refreshes
localStorage.setItem('user', JSON.stringify(user));
}
return user;
});
}
export const userService = {
login,
logout,
};
</pre>
dispatch is a redux action. To be able to test you need to mock it. There are utilities like redux-mock-store that facilitate this task, refer to the following article for more details.
Related
i have a function called login that redirects the user to the main page if everything was ok. Then, on the main page, i want to fetch some user info with useEffect using the token the was stored when the user logged in, but nothing happens. Only when i refresh the page i get the data.
login function
export const login = ({ email, password, history }) => {
return async (dispatch) => {
try {
const response = await fetch("http://localhost:5000/api/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email,
password,
}),
});
const data = await response.json();
if (data.status === 200) {
localStorage.setItem("userToken", data.user);
history.push("/");
} else {
dispatch(
setNotification({
variant: "error",
message: data.message,
})
);
}
} catch (e) {
console.log(e.message);
}
};
};
fetch user funtion
export const fetchUser = () => {
return async (dispatch) => {
try {
const response = await fetch("http://localhost:5000/userInfo", {
headers: {
"x-access-token": localStorage.getItem("userToken"),
},
});
const data = await response.json();
dispatch(setUser({
id: data.id,
fullname: data.fullname,
email: data.email
}))
} catch (error) {}
};
};
useEffect on my main page
useEffect(() => {
dispatch(fetchUser());
}, []);
backend function
module.exports.getCurrentUser = async (req, res) => {
const token = req.headers["x-access-token"];
try {
const verifyToken = jwt.verify(token, "123");
const user = await User.findOne({ email: verifyToken.email });
return res.json({
id: user._id,
fullname: user.fullname,
email: user.email
})
} catch (error) {}
};
The 2nd parameter to useEffect tells it when it needs to run. It only runs if one of the values in the array has changed. Since you pass an empty array, none of the values in it have changed.
This is presuming your app probably starts at '/', then detects there is no user so switches to the login screen. When it goes back to the root, it only executes useEffect if something in the array has changed from the previous render.
As it is, the isMounted doesn't make much sense. This could simply be:
useEffect(() => {
dispatch(fetchUser());
});
You're calling setUser, but what is calling your login function?
I am working on an app that has refresh token functionality. For that, I tried to implement this function after learning about Axios interceptor online. But still, it is not resolved. this how I added this.
I don't know whether it is right or wrong. I just tried implementing refresh token. I had no idea of refresh token before.
Any help would be great.
index.js
axios.interceptors.request.use(
(config) => {
console.log("step-1", config);
const token = localStorageService.getAccessToken();
if (token) {
config.headers["Authorization"] = "Bearer" + token;
}
return config;
},
(error) => {
Promise.reject(error);
}
);
axios.interceptors.response.use(
(response) => {
console.log("step-2", response);
return response;
},
function (error) {
const originalRequest = error.config;
// if (error.response && error.response.status === 401 && !originalRequest._retry) {
// history.push("/");
// return Promise.reject(error);
// }
if (
error.response &&
error.response.status === 401 &&
!originalRequest._retry
) {
originalRequest._retry = true;
const token = UserServices.getOAuth2().createToken(
"refresh_token",
localStorageService.getRefreshToken(),
{ grant_type: "refresh_token" }
);
return token
.refresh()
.then((res) => {
console.log("step3", res);
if (res.status === 201) {
// 1) put token to LocalStorage
localStorageService.setToken(res.data);
// 2) Change Authorization header
axios.defaults.headers.common["Authorization"] =
"Bearer " + localStorageService.getAccessToken();
// 3) return originalRequest object with Axios.
return axios(originalRequest);
}
})
.catch((error) => {
// Dispatch Logout Function here
store.dispatch({
type: LOGIN_ERROR,
});
localStorageService.clearToken();
});
}
}
);
userServices.js
const localStorageService = LocalStorageService.getService();
class UserServices {
getOAuth2 = () => {
var ClientOAuth2 = require("client-oauth2");
const OAuth2 = new ClientOAuth2({
clientId: "development",
clientSecret: "development",
accessTokenUri: "https://api.xxxx.in/oauth/token",
authorizationUri: "https://api.xxxx.in/oauth/authorize",
redirectUri: "https://api.xxxx.in/oauth/callback",
scopes: ["read", "write", "trust"],
});
return OAuth2;
};
logout() {
localStorageService.clearToken();
}
}
I believe you need to call resolve in you error handler and it should fix it:
return token
.refresh()
.then((res) => {
console.log("step3", res);
if (res.status === 201) {
// 1) put token to LocalStorage
localStorageService.setToken(res.data);
// 2) Change Authorization header
axios.defaults.headers.common["Authorization"] =
"Bearer " + localStorageService.getAccessToken();
// 3) return originalRequest object with Axios.
res(axios(originalRequest)); // <- call resolve here
}
})
.catch((error) => {
// Dispatch Logout Function here
store.dispatch({
type: LOGIN_ERROR,
});
localStorageService.clearToken();
});
is a bit of a situation
after simple login
i'v tried to properly handle the server error response but at first i thought it will be simple. i was wrong.
the press login function rely on the login function to pass the login status to check if the user is or not logged.
in a way the code works but it will be great if can get the server response and display.
i've tried to use catch or get a response from the login function. either way still not getting the responde. please someone could spare a hint related to this of problem?
login handler on login.jsx
pressLogin() {
return auth
.login(this.state.email, this.state.password)
.then(response => {
this.props.updateAuth();
let res = response.text();
if (response.login_status == false) {
let errors = res;
throw response.json();
//this.setState({ error: errors });
} else {
// console.log('asdasd')
// this.forceUpdate();
this.setState({ redirectToHome: true });
}
})
.catch(errors => {
return errors;
console.log("Error");
});
}
}
if i set a state in catch just setting a string works but it will be great if can get the server side errors
the login on auth.js
login(email, password) {
return fetch("/login", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify({
email: email,
password: password
})
})
.then(resp => {
if (resp.status >= 200 && resp.status < 300) {
return resp.text();
} else {
throw resp.json();
}
})
.then(response => {
if (!response.status) {
window.localStorage.setItem("auth_token", response);
return {
login_status: true
};
} else {
return {
login_status: false
};
}
})
.catch(error => {
console.log("Error" + error);
return {
login_status: false
};
});
},
I am totally new to the react-redux. I am using redux-thunk . Here, I have one login action. On that action I am calling an API which will give me some token, that I have to store in the state. Then immediately, after success of this action, I have to make another API request which will have this token in the header and will fetch more data. Based on this, I would like to redirect the user.
so,
import { generateToken } from '../APIs/login';
import HttpStatus from 'http-status-codes';
import { LOGIN_FAILED, LOGIN_SUCCESS } from '../constants/AppConstants';
import { fetchUserJd } from './GetUserJd';
import history from '../history';
export function fetchToken(bodyjson) {
return (dispatch) => {
getLoginDetails(dispatch, bodyjson);
}
}
export function getLoginDetails(dispatch, bodyjson) {
generateToken(bodyjson)
.then((response) => {
if (response.status === 200)
dispatch(sendToken(response.payload))
else
dispatch(redirectUser(response.status));
})
}
export function sendToken(data) {
return {
type: LOGIN_SUCCESS,
data: data,
}
}
export function redirectUser(data) {
return {
type: LOGIN_FAILED,
data: data,
}
}
This is my login action.
import { FETCHING_JOBDESCRIPTION_SUCCESS, FETCHING_DATA_FAILED,FETCHING_JOBS } from '../constants/AppConstants';
import { getUserJobs } from '../APIs/GetUserJd';
import history from '../history';
export function fetchUserJd(token) {
console.log(token);
return (dispatch) => {
dispatch(fetchingJobDescription());
}
};
export function getUserJd(dispatch, token) {
getUserJobs(token)
.then((response) => {
if (response.status === 200)
dispatch(sendUserJd(response.payload))
else
dispatch(fetchFailure(response.status));
})
}
export function fetchFailure(data) {
return {
type: FETCHING_DATA_FAILED,
data: data,
}
}
export function sendUserJd(data) {
return {
type: FETCHING_JOBDESCRIPTION_SUCCESS,
data: data,
}
}
export function fetchingJobDescription() {
return {
type: FETCHING_JOBS
}
}
This is my 2nd action.
Now,
handleClick(event) {
event.preventDefault();
var bodyJson = {
"username": this.state.UserName,
"password": this.state.password
}
this.props.fetchToken(bodyJson);
}
This is from the container will get called on click of login button.
Now, so, how can I call the second action after a successful login request? I also want to dispatch both the actions.
I tried ->
export function getLoginDetails(dispatch, bodyjson) {
generateToken(bodyjson)
.then((response) => {
if (response.status === 200)
dispatch(sendToken(response.payload))
dispatch(fetchUserJd(dispatch))
else
dispatch(redirectUser(response.status));
})
}
But No luck . Can any one help me with this ?
When you have an if/else clause with more than one line you must use curly braces.
export function getLoginDetails(dispatch, bodyjson) {
generateToken(bodyjson)
.then((response) => {
if (response.status === 200) {
dispatch(sendToken(response.payload));
dispatch(fetchUserJd(dispatch));
} else {
dispatch(redirectUser(response.status));
}
})
}
So I'm trying to send the information from a login form to an action, then set the app's state's userLogged property to true if the login procedure is successful.
renderForm() {
return (
<Form
onSubmit={(values) => {
// call the login function.
// if called with this.props.login, I get the error
// 'cannot read `type` of undefined'
login(values.email, values.password);
}}
validate={({ email, password }) => {
// validation rules
}}>
{({submitForm}) => {
return (
<form onSubmit={submitForm}>
// form fields
</form>
);
}}
</Form>
);
}
Now, after the declaration of the component I have the following:
function mapDispatchToProps(dispatch) {
return bindActionCreators({ login }, dispatch);
}
function mapStateToProps(state) {
return { userLogged: state.userLogged.userLogged };
}
export default connect(mapStateToProps, mapDispatchToProps)(LoginComponent);
The action receives the information, calls the API, but does not get to the reducer, and the app gives the 'dispatch not defined' error, even though the store, middleware and bindActionCreators have already been imported.
export function login(email, password) {
const request = axios({
headers: {
'content-type': 'application/json'
},
method: 'post',
url: `${ROOT_URL}login/login`,
params: {
email,
password
}
})
.then((data) => dispatch(dispatchLogin(data)));
}
function dispatchLogin(data) {
return {
type: 'USER_LOGIN',
payload: data
};
}
The reducer should retrieve the action's type and act edit the app's state.
export default function (state = {}, action) {
switch (action.type) {
case 'USER_LOGIN': {
console.log(action.payload.data);
state.userLogged = action.payload.data.status;
return { ...state }
}
default: return state;
}
}
Redux actions are synchronous by default, you have to use a middleware like redux-thunk for asynchronous actions: https://github.com/gaearon/redux-thunk
Example (untested):
export function login(email, password) {
return async (dispatch, getState) => {
let data = await axios({
headers: {
'content-type': 'application/json'
},
method: 'post',
url: `${ROOT_URL}login/login`,
params: {
email,
password
}
});
dispatch(dispatchLogin(data));
};
}