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
        };
    }
  • 相关阅读:
    javascript 获取<td>标签内的值。
    关于网页中鼠标动作 onfocus onblur focus()
    web大前端面试——JavaScript
    vue吸顶
    vue单页面应用刷新网页后vuex的state数据丢失的解决方案
    vue 无缝滚动插件vue-seamless-scroll的安装与使用
    杂记
    webpack打包vue项目后,配置可以修改的配置文件
    不知道的CSS
    图片惰性加载(滚动到可视区时 图片才加载)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5123118.html
Copyright © 2011-2022 走看看