backup

.idea/dictionaries/yaohx_169.xml

@@ -5,8 +5,11 @@
       <w>dropdown</w>
       <w>infos</w>
       <w>lodash</w>
+      <w>parsedkey</w>
       <w>publics</w>
+      <w>roadhog</w>
       <w>sizeme</w>
+      <w>splited</w>
       <w>yyyy</w>
     </words>
   </dictionary>

.roadhogrc.js

-export default {
+module.exports = {
   "entry": "src/index.js",
   "theme": {
     "layout-header-height": "48px",

.roadhogrc.mock.js

-import moment from 'moment';
-import { genModules } from './src/mock/modules';
-import { getTasks } from './src/mock/tasks';
-import toFilters from './mock/filter';
+const moment = require('moment');
+const { genModules } = require('./src/mock/modules');
+const { getTasks } = require('./src/mock/tasks');
+const toFilters = require('./mock/filter');
 
 const modules = genModules();
 const tasks = getTasks();
@@ -105,7 +105,7 @@ const dealWithData = (req) => {
 
 let currentDomainId = null;
 
-export default {
+module.exports = {
 
   '/api/user/login2': (req, res) => {
     currentUser = users[0];

.storybook/.babelrc

+{
+  "presets": [
+    "es2015",
+    "es2016",
+    "es2017",
+    "stage-0",
+    "react"
+  ],
+  "plugins": [
+    "dva-hmr",
+    "transform-runtime",
+    ["import", { "libraryName": "antd", "style": true }]
+  ]
+}

.storybook/middleware.js

+
+require('babel-register')({
+  presets: [
+    'es2015',
+    'es2016',
+    'stage-0'
+  ]
+});
+const createProxy =  require('http-proxy-middleware');
+const _ = require('lodash');
+const assert = require('assert');
+
+const roadhog = require('../.roadhogrc');
+const mock = require('../.roadhogrc.mock');
+
+function parseKey(key) {
+  let method = 'get';
+  let path = key;
+
+  if (key.indexOf(' ') > -1) {
+    const splited = key.split(' ');
+    method = splited[0].toLowerCase();
+    path = splited[1];
+  }
+
+  return { method, path };
+}
+
+function makeProxy(method, path, target) {
+  const filter = (pathname, req) => {
+    return path.test(pathname) && req.method === method.toUpperCase();
+  };
+  return createProxy(filter, { target });
+}
+
+function createMockHandler(value) {
+  return function mockHandler(...args) {
+    const res = args[1];
+    if (typeof value === 'function') {
+      value(...args);
+    } else {
+      res.json(value);
+    }
+  };
+}
+
+module.exports = (router) => {
+  const proxy = roadhog.env.proxy;
+  _.forEach(proxy, (value, key) => {
+    router.use(key, createProxy(key, value));
+  });
+  _.forEach(mock, (value, key) => {
+    const parsedkey = parseKey(key);
+    assert(
+      typeof value === 'function' ||
+      typeof value === 'object' ||
+      typeof value === 'string',
+      `mock value of ${key} should be function or object or string, but got ${typeof value}`
+    );
+    if (typeof value === 'string') {
+      let path = parsedkey.path;
+      if (/\(.+\)/.test(parsedkey.path)) {
+        path = new RegExp(`^${parsedkey.path}$`);
+      }
+      router.use(
+        path,
+        makeProxy(parsedkey.method, path, value)
+      );
+    } else {
+      router[parsedkey.method](
+        parsedkey.path,
+        createMockHandler(value)
+      );
+    }
+  })
+};

.storybook/webpack.config.js

+const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
+const path = require('path');
+
+module.exports = (baseConfig, env) => {
+  const config = genDefaultConfig(baseConfig, env);
+
+  // Extend it as you need.
+
+  // For example, add typescript loader:
+  config.module.rules.push({
+    test: /\.less$/,
+    include: path.resolve(__dirname, '../src'),
+    use: [
+      require.resolve('style-loader'),
+      {
+        loader: require.resolve('css-loader'),
+        options: {
+          modules: true,
+        },
+      },
+      require.resolve('less-loader')
+    ],
+  }, {
+    test: /\.less$/,
+    exclude: path.resolve(__dirname, '../src'),
+    use: [
+      require.resolve('style-loader'),
+      require.resolve('css-loader'),
+      require.resolve('less-loader')
+    ],
+  });
+
+  return config;
+};

karma.conf.js

-// Karma configuration
-// Generated on Thu Jun 29 2017 17:26:36 GMT+0800 (CST)
-
-module.exports = function (config) {
-  config.set({
-
-    // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: '',
-
-
-    // frameworks to use
-    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['mocha'],
-
-
-    // list of files / patterns to load in the browser
-    files: [
-      './test/**/*.js',
-    ],
-
-
-    // list of files to exclude
-    exclude: [
-    ],
-
-
-    // preprocess matching files before serving them to the browser
-    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-    preprocessors: {
-      './test/**/*.js': ['webpack', 'sourcemap'],
-    },
-
-    webpack: {
-      devtool: 'inline-source-map',
-      module: {
-        rules: [{
-          test: /\.js$/,
-          // exclude this dirs from coverage
-          exclude: [/node_modules/],
-          loader: 'babel-loader',
-        }],
-      },
-      watch: true,
-    },
-
-    // test results reporter to use
-    // possible values: 'dots', 'progress'
-    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['progress'],
-
-
-    // web server port
-    port: 9876,
-
-
-    // enable / disable colors in the output (reporters and logs)
-    colors: true,
-
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-
-    // enable / disable watching file and executing tests whenever any file changes
-    autoWatch: true,
-
-
-    // start these browsers
-    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['Chrome', 'Safari'],
-
-
-    // Continuous Integration mode
-    // if true, Karma captures browsers, runs the tests and exits
-    singleRun: false,
-
-    // Concurrency level
-    // how many browser should be started simultaneous
-    concurrency: Infinity,
-  });
-};

package.json

@@ -3,9 +3,11 @@
   "scripts": {
     "start": "roadhog server",
     "build": "roadhog build",
-    "test": "cross-env BABEL_ENV=test karma start karma.config.js",
+    "test": "roadhog test --require ./test_setup.js",
     "lint": "eslint --ext .js src test",
-    "precommit": "npm run lint"
+    "precommit": "npm run lint",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "engines": {
     "install-node": "6.9.2"
@@ -24,17 +26,20 @@
     "moment": "^2.18.1",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.5.10",
-    "react": "^15.4.0",
-    "react-dom": "^15.4.0",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
     "react-sizeme": "^2.3.4",
     "uuid": "^3.1.0",
     "word-wrap": "^1.2.3",
     "xml2js": "^0.4.17"
   },
   "devDependencies": {
+    "@storybook/react": "^3.1.7",
     "babel-eslint": "^7.1.1",
     "babel-plugin-dva-hmr": "^0.3.2",
     "babel-plugin-transform-runtime": "^6.9.0",
+    "babel-preset-es2016": "^6.24.1",
+    "babel-preset-es2017": "^6.24.1",
     "chai": "^4.0.2",
     "cross-env": "^5.0.1",
     "enzyme": "^2.9.1",
@@ -44,9 +49,13 @@
     "eslint-plugin-jsx-a11y": "^2.2.3",
     "eslint-plugin-react": "^6.8.0",
     "expect": "^1.20.2",
+    "http-proxy-middleware": "^0.17.4",
     "husky": "^0.12.0",
-    "karma": "^1.7.0",
+    "jsdom": "^11.0.0",
+    "less": "^2.7.2",
+    "less-loader": "^4.0.0",
     "mockjs": "^1.0.1-beta3",
+    "path": "^0.12.7",
     "react-test-renderer": "^15.6.1",
     "redbox-react": "^1.3.2",
     "roadhog": "^0.6.0"

src/components/hoc/stateful.js

 import React, { Component } from 'react';
-import dva from 'dva';
+import { connect as dvaConnect } from 'dva';
 import { getApp } from '../../data/app';
 
-const connect = (modelCreator, mapStateToProps, mapDispatchToProps, mergeProps, options) => (Comp) => {
+const connect = (modelCreator, { app, mapStateToProps, mapDispatchToProps, mergeProps, options }) => (Comp) => {
   const { name, model } = modelCreator();
-  const app = getApp();
+  const { dispatchVar, namespaceVar } = (options || {});
   class StatefulComponent extends Component {
 
     componentWillMount() {
-      app.model(model);
+      (app || this.props.app || getApp()).model(model);
     }
     componentWillUnmount() {
-      app.unmodel(model);
+      (app || this.props.app || getApp()).unmodel(model);
     }
 
     render() {
@@ -19,9 +19,20 @@ const connect = (modelCreator, mapStateToProps, mapDispatchToProps, mergeProps,
       const mapState = (state) => {
         const props = mapStateToProps ? mapStateToProps(state) : {};
         props[name] = state[model.namespace];
+        props[namespaceVar || 'namespace'] = model.namespace;
         return props;
       };
-      const Output = dva.connect(mapState, mapDispatchToProps, mergeProps, options)(Comp);
+      const mapDispatch = (dispatch) => {
+        const extras = mapDispatchToProps ? mapDispatchToProps(dispatch) : {};
+        return {
+          ...extras,
+          [dispatchVar || 'dispatchLocal'](action) {
+            const { type, payload } = action;
+            return dispatch({ type: `${model.namespace}/${type}`, payload });
+          },
+        };
+      };
+      const Output = dvaConnect(mapState, mapDispatch, mergeProps, options)(Comp);
       return (
         <Output {...rest}>
           { children }

src/components/table/dstable/index.js

@@ -102,7 +102,7 @@ class DsTable extends React.Component {
       ]));
     const psz = this.state.pageSize; // eslint-disable-line no-shadow
     const pst = (this.state.current - 1) * psz;
-    this.props.dispatch({ type: 'task/fetchTasks', payload: { pst, psz, filters: filters0 } });
+    this.props.dispatchLocal({ type: 'fetchTasks', payload: { pst, psz, filters: filters0 } });
   }
   render() {
     const { list, num } = this.props.task;
@@ -110,7 +110,7 @@ class DsTable extends React.Component {
       dataSource: list,
       columns,
       filters: this.state.filters.map(filter => filter.filter),
-      loading: this.props.loading.effects['task/fetchTasks'],
+      loading: this.props.loading.effects[`${this.props.namespace}/fetchTasks`],
       pagination: {
         current: this.state.current,
         total: num,
@@ -143,4 +143,6 @@ class DsTable extends React.Component {
   }
 }
 
-export default connect(modelCreator, ({ loading }) => ({ loading }))(DsTable);
+export default connect(modelCreator, {
+  mapStateToProps: ({ loading }) => ({ loading }),
+})(DsTable);

src/components/table/dstable/model.js

@@ -31,6 +31,7 @@ const modelCreator = () => {
       },
       effects: {
         *fetchTasks({ payload: { pst, psz, filters } }, { put }) {
+          console.log('fetchTasks');
           const num = 100;
           yield put({ type: 'queryCountSuccess', payload: num });
           yield put({

test/just-a-try.js

@@ -4,13 +4,11 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import chai from 'chai';
-import DsTable from '../src/components/table/dstable';
 
 chai.should();
 
 describe('ioc', () => {
   describe('stateful', () => {
-    const table = mount(<DsTable />);
-    console.log(table.find('td').at(0));
+    console.log('111');
   });
 });

test_setup.js

+const { JSDOM } = require('jsdom');
+
+const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
+const { window } = jsdom;
+
+window.matchMedia = window.matchMedia || function () {
+  return {
+    matches: false,
+    addListener() {},
+    removeListener() {},
+  };
+};
+
+function copyProps(src, target) {
+  const props = Object.getOwnPropertyNames(src)
+    .filter(prop => typeof target[prop] === 'undefined')
+    .map(prop => Object.getOwnPropertyDescriptor(src, prop));
+  Object.defineProperties(target, props);
+}
+
+global.window = window;
+global.document = window.document;
+global.navigator = {
+  userAgent: 'node.js',
+};
+copyProps(window, global);