zoukankan      html  css  js  c++  java
  • [React Testing] Redux Reducers

    Sometimes we want to test our Redux reducers to make sure they work as expected. In this lesson we will walk through setting up some Redux reducer tests for common situations and edge cases.

    quoteReducer.js

    import {ADD_QUOTE_BY_ID, REMOVE_QUOTE_BY_ID, LIKE_QUOTE_BY_ID, UNLIKE_QUOTE_BY_ID} from './ActionTypes';
    
    export default function quoteReducer(state = [], action) {
    
        function changeLikeCountById(change) {
            const newQuotes = state
                .map(quote => {
                    if(quote.id === action.payload.id) {
                        switch (change) {
                            case 'increment':
                                quote.likeCount++;
                                return quote;
                            case 'decrement':
                                if(quote.likeCount > 0) {
                                    quote.likeCount--;
                                }
                                return quote;
                            default:
                                return quote;
                        }
                    }
                    return quote;
                });
            return newQuotes;
        }
    
        switch(action.type) {
    
            case ADD_QUOTE_BY_ID:
                return state
                    .concat(action.payload);
    
            case REMOVE_QUOTE_BY_ID:
                return state
                    .filter(quote => quote.id !== action.payload.id);
    
            case LIKE_QUOTE_BY_ID:
                return changeLikeCountById('increment');
    
            case UNLIKE_QUOTE_BY_ID:
                return changeLikeCountById('decrement');
    
            default:
                return state;
        }
    }

    quoteReducer.spec.js:

    import expect from 'expect';
    import {addQuoteById, removeQuoteById, likeQuoteById, unlikeQuoteById} from './quoteActionCreator';
    import quoteReducer from './quoteReducer';
    
    describe( 'should render quote component correctly', ()=> {
    
        const initQuoteState = ()=> {
            return [
                {
                    text: 'Lorem ipsum',
                    author: 'Jane Doe',
                    id: 1,
                    likeCount: 7
                },
                {
                    text: 'Ullamco laboris nisi ut aliquip',
                    author: 'John Smith',
                    id: 2,
                    likeCount: 0
                }
            ];
        };
    
        it( 'should add quote by id', ()=> {
    
            const action = addQuoteById({
                text: 'This is a new quote',
                author: 'Someone awesome',
                id: 3,
                likeCount: 0
            });
    
            const actual = quoteReducer(initQuoteState(), action);
    
            const expected = [
                {
                    text: 'Lorem ipsum',
                    author: 'Jane Doe',
                    id: 1,
                    likeCount: 7
                },
                {
                    text: 'Ullamco laboris nisi ut aliquip',
                    author: 'John Smith',
                    id: 2,
                    likeCount: 0
                },
                {
                    text: 'This is a new quote',
                    author: 'Someone awesome',
                    id: 3,
                    likeCount: 0
                }
            ];
    
            expect( actual )
                .toEqual( expected );
        } );
    } )
    ;

    quoteActionCreator.js

    import {ADD_QUOTE_BY_ID, REMOVE_QUOTE_BY_ID, LIKE_QUOTE_BY_ID, UNLIKE_QUOTE_BY_ID} from './ActionTypes';
    
    export function addQuoteById(payload) {
        return {
            type: ADD_QUOTE_BY_ID,
            payload: payload
        };
    }
    
    export function removeQuoteById(payload) {
        return {
            type: REMOVE_QUOTE_BY_ID,
            payload: payload
        };
    }
    
    export function likeQuoteById(payload) {
        return {
            type: LIKE_QUOTE_BY_ID,
            payload: payload
        };
    }
    
    export function unlikeQuoteById(payload) {
        return {
            type: UNLIKE_QUOTE_BY_ID,
            payload: payload
        };
    }
  • 相关阅读:
    Mybaits源码分析九之sql执行流程
    Mybaits源码分析八之sqlSessiion的openSession方法
    Mybaits源码分析七之XMLConfigBuilder类mappers标签解析
    Mybaits源码分析六之XMLConfigBuilder类 environments标签解析
    Mybaits源码分析五之XMLConfigBuilder类 typeAliases 标签解析
    Mybaits源码分析四之XMLConfigBuilder类settings 标签解析
    ajax与axios与fetch的比较
    if else的优化
    js 类型
    模板字符串
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5123118.html
Copyright © 2011-2022 走看看