Написание и тестирование Async Redux Action Creators с шумом

Редукс Действия Создатели

Тип действия Это тип действий. Действия являются простой объектами JavaScript. Действия должны иметь свойство типа, которое указывает тип выполняемого действия. Типы обычно должны быть определены как строковые константы. Как только ваше приложение достаточно велико, вы можете переместить их в отдельный модуль так, как я сделал здесь. Тогда мы импортируем тип действия на наше создание действий

export const SET_CURRENT_USER = 'SET_CURRENT_USER';

Функция помощника Эта функция помогает установить токен на заголовок, так что его можно использовать всякий раз, когда конечная точка, которая требует токена. Мы будем импортировать эту функцию на наше создание действий.

import axios from 'axios';

export const setAuthorizationToken = (token) => {
  if (token) {
    axios.defaults.headers.common.Authorization = `Bearer ${token}`;
  } else {
    delete axios.defaults.headers.common.Authorization;
  }
};

Действие Создатель Создатели Действия именно такие функции, которые создают действия. Легко связать условия «действие» и «Действие Создатель», так что сделайте все возможное, чтобы использовать правильный срок.

Установка AXIOS и JSONWETHOKECKECKS в качестве зависимостей

В Redux Action Creators просто возвращает действие:

import axios from 'axios';
import jsonwebtoken from 'jsonwebtoken';
import { SET_CURRENT_USER } from './types';
import { setAuthorizationToken } from '../helper';

/**
 * @description Request to the API to register a user
 *
 * @param  {object} userDetails the user deatils to be saved
 *
 * @return {object} dispatch object
 *
 */
export const signUpAction = (userDetails) => (dispatch) =>
  axios.post('/api/v1/users/signup', userDetails)
    .then((res) => {
      const token = res.data.data.token;
      localStorage.setItem('token', token);
      setAuthorizationToken(token);
      dispatch({
        type: SET_CURRENT_USER,
        user: jsonwebtoken.decode(token)
      });
    })
    .catch(error => Promise.reject(error.response.data.message));

Тестирование

Вот мой тест для вышеуказанного действия. Все зависимости, используемые для теста, должны быть установлены как dev-зависимости. Здесь мы импортируем нашему действию, издевающийся на вызов API с Moxios (который хорошо работает с Axios), затем возвращает данные о Mock в качестве ответа API и проверку, если наша полезная нагрузка – это то, что мы ожидаем увидеть в конце. Mockdata – это просто копия ответа API AS JSON, SignupData – это просто копия ввода пользователя при попытке зарегистрироваться в приложении, и мы также MocklocalStorage, потому что мы сохраняем токен в локальное хранилище, когда пользователь успешно зарегистрирован.

Mock Data.

export default const mockData = {
  authResponse: {
    status: true,
    message: 'You have successfully signed up',
    data: {
      token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MTM5MzkzMDIsImN1cnJlbnRVc2VyIjp7InVzZXJJZCI6MSwidXNlcm5hbWUiOiJydWtraWV5In0sImlhdCI6MTUxMzg1MjkwMn0.K2P7BAKDkMbk9avQznEE4u8PRtrx3P0mlSzLvFAdH2E'
    }
  },
   signupData: {
    username: 'ruqoyah',
    fullName: 'Rukayat Odukoya',
    email: 'rukayat@gmail.com',
    password: 'oriyomi123'
  }
}

Мачные местные хранения

let localStorage = {};

export default {
  setItem(key, value) {
    return Object.assign(localStorage, { [key]: value });
  }
};

import expect from 'expect';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import moxios from 'moxios';
import jsonwebtoken from 'jsonwebtoken';
import mockData from '../_mocks_/mockData';
import mockLocalStorage from '../_mocks_/mockLocalStorage';
import { signUpAction } from '../../actions/authActions';
import { SET_CURRENT_USER } from '../../actions/types';

const middlewares = [thunk];

const mockStore = configureMockStore(middlewares);

window.localStorage = mockLocalStorage;

describe('Auth actions', () => {
  beforeEach(() => moxios.install());
  afterEach(() => moxios.uninstall());

  it('creates SET_CURRENT_USER when signup action is successful', async (done) => {
    const { authResponse, signupData } = mockData;
    moxios.stubRequest('/api/v1/users/signup', {
      status: 201,
      response: authResponse
    });
    const expectedActions = [{ type: SET_CURRENT_USER,
      user: jsonwebtoken.decode(authResponse.data.token) }];
    const store = mockStore({});
    await store.dispatch(signUpAction(signupData))
      .then(() => {
        expect(store.getActions()).toEqual(expectedActions);
      });
    done();
  });
 });

Теперь, когда мы знаем, как писать и тестировать действия Redux, нам нужно писать и тестировать редукторы, которые я буду охватывать в следующую статью. Следите за обновлениями.

Редукс Действия Создатели

Тестирование

Читайте ещё по теме: