react-front1 v1.0.0

egg-node

$ back

Mock library for testing Egg applications, plugins and custom Egg frameworks with ease. egg-mock inherits all APIs from node_modules/mm, offering more flexibility.

Install

Usage

$ npm i react-front --save-dev

Create testcase Launch a mock server with mm.app

$ src/api/api
import axios from '../utils/httpAxios'
export const registry = (params) => axios.post('/registry', params);
export const login = (params) => axios.post('/login', params);
export const getuser = (params) => axios.get('/getuser', { params });
export const addlist = (params) => axios.post('/list', params);
export const editlist = (params) => axios.put('/list/'+params.id, params);
export const getlist = (params) => axios.get('/list', {params});
export const dellist = (params) => axios.delete('/list/'+params.id, {params});

Retrieve Agent instance through app.agent after mm.app started.

Using mm.cluster launch cluster server, you can use the same API as mm.app;

Test Application baseDir is optional that is process.cwd() by default.

$ src/router/index

import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'
import RouterView from './routerview'
import routes from './routerconfig'
function RootRouter() {
    return <BrowserRouter>
        <RouterView routes={routes} />
    </BrowserRouter>
}

export default RootRouter;

Test Framework

framework is optional, it's node_modules/egg by default.

$ src/router/routerconfig

const Loadable = require('react-loadable');
function Loading() {
    return <div>loading...</div>
}
const Login = Loadable({
    loader: () => import('../views/login/login'),
    loading: Loading
})
const Registry = Loadable({
    loader: () => import('../views/registry/registry'),
    loading: Loading
})
const Index = Loadable({
    loader: () => import('../views/index'),
    loading: Loading
})
const Home = Loadable({
    loader: () => import('../views/index/home/home'),
    loading: Loading
})
const People = Loadable({
    loader: () => import('../views/index/people/people'),
    loading: Loading
})
const My = Loadable({
    loader: () => import('../views/index/my/my'),
    loading: Loading
})
const routes = [
    {
        path: '/login',
        component: Login
    },
    {
        path: '/registry',
        component: Registry
    },
    {
        path: '/index',
        component: Index,
        children: [
            {
                path: '/index/home',
                component: Home,
                auth: false
            },
            {
                path: '/index/people',
                component: People,
                auth: true
            },
            {
                path: '/index/my',
                component: My,
                auth: true
            },
            {
                path: '/index',
                to: '/index/home'
            }
        ]
    },
    {
        path: '/',
        to: '/login'
    }

]
export default routes;

Test Plugin

If eggPlugin.name is defined in package.json, it's a plugin that will be loaded to plugin list automatically.

You can also test the plugin in different framework, e.g. test aliyun-egg and framework-b in one plugin.

If it's detected as an plugin, but you don't want it to be, you can use plugin = false.

$ src/router/routerview


import { Switch, Route, Redirect } from 'react-router-dom'
function RouterView({ routes }) {
    let routerArr = routes.filter(item => !item.to);
    let redirectArr = routes.filter(item => item.to).map((item1, index1) =>
        <Redirect key={index1} from={item1.path} to={item1.to} />)
    return <Switch>
        {
            routerArr.map((item, index) => {
                // let token = localStorage.token;
                let token = localStorage.userInfo ? JSON.parse(localStorage.userInfo).token : '';

                return <Route key={index} path={item.path} render={(props) => {
                    if (item.auth) {
                        return token ? <item.component {...props} child={item.children} /> :
                            <Redirect to={{
                                pathname: '/login',
                                state: {
                                    path: item.path
                                }
                            }} />
                    }
                    return <item.component {...props} child={item.children} />
                }} />
            }).concat(redirectArr)
        }

    </Switch>
}
export default RouterView;

API

mm.app(options) Create a mock application.

mm.cluster(options) Create a mock cluster server, but you can't use API in application, you should test using supertest.

$ app/utils/httpAxios

import axios from 'axios'
import { message } from 'antd'
import {getCookie} from './utils'
const httpAxios = axios.create();
httpAxios.interceptors.request.use(function (config) {
    // What to do before sending the request
    return {
        ...config,
        headers: {
            ...config.headers,
            'x-csrf-token':getCookie('csrfToken'),
            'token': localStorage.userInfo ? JSON.parse(localStorage.userInfo).token : ''
        }
    };
}, function (error) {
    // What to do about request errors
    return Promise.reject(error);
});

// Add response interceptor
httpAxios.interceptors.response.use(function (response) {
    // Do something about the response data
    return response;
}, function (error) {
    // Do something about response errors
    switch (error.response.status) {
        case 401:
            message.warning(error.response.data.mes);
            window.location.href = '/login';
            break;
        case 404:
            message.warning('The page was not found');
            break;
        case 500:
            message.warning('Server error');
            break;
        default: break;
    }
    return Promise.reject(error);
});

export default httpAxios;

You can disable coverage, because it's slow.

$ app/utils/oauth

    import {getuser} from '../api/api'
const config = {
    client_id: '509e6a7b04da2018bb277b628984d6fc8cdc6b7759323a64ace470228c3a43d1',
    client_secret: '985fdbc4ec574a7e75d12d92d505dcb0acf8eb70af5f0362d1a27215c4234fd0',
    redirect_uri: 'http://localhost:3000/login'
}
export const getCode = () => {
    let url = `https://gitee.com/oauth/authorize?client_id=${config.client_id}&redirect_uri=${config.redirect_uri}&response_type=code`;
    window.location.href = url;
}
export const getParams = (name) => {
    let params = window.location.search.slice(1);
    let code;
    params.split('&').forEach(item => {
        if (item.split('=')[0] == name) {
            code = item.split('=')[1]
        }
    })
    return code;
}
export const getUser = async (callback) => {
    let code = getParams('code');
    if(code){
        let res = await getuser({code});
        if(res.data.code == 0){
            callback(res.data.data,res.data.token);
        }
    }
}

mm.env(env) Mock env when starting

$ app/utils/utils

 export const getCookie = (name) => {
    let params = document.cookie;
    let val;
    params.split(';').forEach(item => {
        if (item.split('=')[0] == name) {
            val = item.split('=')[1];
        }
    })
    return val;
}

package

$ package

    "antd": "^3.26.20",
    "axios": "^0.21.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-loadable": "^5.5.0",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"