introduce jest and travis-ci (#541)

introduce jest and travis-ci

web/src/common/ApiUtil.js

@@ -1,7 +1,7 @@
 /**
 * AJAX操作工具类
 */
-import PromiseUtil from './PromiseUtil';
+import PromiseUtil from './promiseUtil';
 export function getJSON(url, data) {
     const d = PromiseUtil.defer();
     fetch(url + serializeQuery(data))
@@ -53,10 +53,10 @@ export function isApiSuccess (response) {
     return response.status === 'success';
 }
 
-const ApiUtil = {
+const apiUtil = {
     getJSON,
     postJSON,
     isApiSuccess
 };
 
-export default ApiUtil;
+export default apiUtil;

web/src/common/Constant.js

@@ -1,9 +1,9 @@
 /**
-* define all Constant variables here
+* define all constant variables here
 */
 
 module.exports.MenuKeyMap = {
     RECORD_FILTER: 'RECORD_FILTER',
     MAP_LOCAL: 'MAP_LOCAL',
     ROOT_CA: 'ROOT_CA'
-};
+};

web/src/common/WsUtil.js

@@ -39,3 +39,4 @@ export function initWs(wsPort = location.port, path = 'do-not-proxy') {
 export default {
   initWs: initWs
 };
+

web/src/common/apiUtil.js

@@ -0,0 +1,62 @@
+/**
+* AJAX操作工具类
+*/
+import PromiseUtil from './promiseUtil';
+export function getJSON(url, data) {
+    const d = PromiseUtil.defer();
+    fetch(url + serializeQuery(data))
+        .then((data) => {
+            d.resolve(data.json());
+        })
+        .catch((error) => {
+            console.error(error);
+            d.reject(error);
+        });
+    return d.promise;
+}
+
+export function postJSON(url, data) {
+    const d = PromiseUtil.defer();
+    fetch(url, {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+    })
+        .then((data) => {
+
+            d.resolve(data.json());
+        })
+        .catch((error) => {
+            console.error(error);
+            d.reject(error);
+        });
+    return d.promise;
+}
+
+function serializeQuery (data = {}) {
+    data['__t'] = Date.now();// disable the cache
+    const queryArray = [];
+
+    for (let key in data) {
+        queryArray.push(`${key}=${data[key]}`);
+    }
+
+    const queryStr = queryArray.join('&');
+
+    return queryStr ? '?' + queryStr : '';
+}
+
+export function isApiSuccess (response) {
+    return response.status === 'success';
+}
+
+const apiUtil = {
+    getJSON,
+    postJSON,
+    isApiSuccess
+};
+
+export default apiUtil;

web/src/common/constant.js

@@ -0,0 +1,9 @@
+/**
+* define all constant variables here
+*/
+
+module.exports.MenuKeyMap = {
+    RECORD_FILTER: 'RECORD_FILTER',
+    MAP_LOCAL: 'MAP_LOCAL',
+    ROOT_CA: 'ROOT_CA'
+};

web/src/common/curlUtil.js

@@ -1,25 +1,27 @@
-export function curlify(recordDetail) {
-  const headers = { ...recordDetail.reqHeader };
-  const acceptEncoding = headers['Accept-Encoding'] || headers['accept-encoding'];
-  // escape reserve character in url
-  const url = recordDetail.url.replace(/([\[\]])/g, '\\$1');
-  const curlified = ['curl', `'${url}'`];
+module.exports = {
+  curlify(recordDetail) {
+    const headers = { ...recordDetail.reqHeader };
+    const acceptEncoding = headers['Accept-Encoding'] || headers['accept-encoding'];
+    // escape reserve character in url
+    const url = recordDetail.url.replace(/([\[\]])/g, '\\$1');
+    const curlified = ['curl', `'${url}'`];
 
-  if (recordDetail.method.toUpperCase() !== 'GET') {
-    curlified.push('-X', recordDetail.method);
+    if (recordDetail.method.toUpperCase() !== 'GET') {
+      curlified.push('-X', recordDetail.method);
+    }
+
+    Object.keys(headers).forEach((key) => {
+      curlified.push('-H', `'${key}: ${headers[key]}'`);
+    });
+
+    if (recordDetail.reqBody) {
+      curlified.push('-d', `'${recordDetail.reqBody}'`);
+    }
+
+    if (/deflate|gzip/.test(acceptEncoding)) {
+      curlified.push('--compressed');
+    }
+
+    return curlified.join(' ');
   }
-
-  Object.keys(headers).forEach((key) => {
-    curlified.push('-H', `'${key}: ${headers[key]}'`);
-  });
-
-  if (recordDetail.reqBody) {
-    curlified.push('-d', `'${recordDetail.reqBody}'`);
-  }
-
-  if (/deflate|gzip/.test(acceptEncoding)) {
-    curlified.push('--compressed');
-  }
-
-  return curlified.join(' ');
-}
+};

web/src/common/wsUtil.js

@@ -0,0 +1,42 @@
+/*
+* Utility for websocket
+*
+*/
+import { message } from 'antd';
+
+/**
+* Initiate a ws connection.
+* The default path `do-not-proxy` means the ws do not need to be proxied.
+* This is very important for AnyProxy‘s own server, such as WEB UI, 
+* and the websocket detail panel in it, to prevent a recursive proxy.
+* @param {wsPort} wsPort the port of websocket
+* @param {key} path the path of the ws url
+*
+*/
+export function initWs(wsPort = location.port, path = 'do-not-proxy') {
+  if(!WebSocket){
+    throw (new Error('WebSocket is not supported on this browser'));
+  }
+
+  const wsClient = new WebSocket(`ws://${location.hostname}:${wsPort}/${path}`);
+
+  wsClient.onerror = (error) => {
+    console.error(error);
+    message.error('error happened when setup websocket');
+  };
+
+  wsClient.onopen = (e) => {
+    console.info('websocket opened: ', e);
+  };
+
+  wsClient.onclose = (e) => {
+    console.info('websocket closed: ', e);
+  };
+
+  return wsClient;
+}
+
+export default {
+  initWs: initWs
+};
+

web/src/component/download-root-ca.jsx

@@ -10,8 +10,8 @@ import { connect } from 'react-redux';
 import { message, Button, Spin } from 'antd';
 import ResizablePanel from 'component/resizable-panel';
 import { hideRootCA, updateIsRootCAExists } from 'action/globalStatusAction';
-import { MenuKeyMap } from 'common/Constant';
-import { getJSON, ajaxGet, postJSON } from 'common/ApiUtil';
+import { MenuKeyMap } from 'common/constant';
+import { getJSON, ajaxGet, postJSON } from 'common/apiUtil';
 
 import Style from './download-root-ca.less';
 import CommonStyle from '../style/common.less';

web/src/component/header-menu.jsx

@@ -7,8 +7,8 @@ import ClassBind from 'classnames/bind';
 import { connect } from 'react-redux';
 import InlineSVG from 'svg-inline-react';
 import { message, Modal, Popover, Button } from 'antd';
-import { getQueryParameter } from 'common/CommonUtil';
-import { MenuKeyMap } from 'common/Constant';
+import { getQueryParameter } from 'common/commonUtil';
+import { MenuKeyMap } from 'common/constant';
 
 import {
   resumeRecording,
@@ -27,7 +27,7 @@ const {
   RECORD_FILTER: RECORD_FILTER_MENU_KEY
 } = MenuKeyMap;
 
-import { getJSON } from 'common/ApiUtil';
+import { getJSON } from 'common/apiUtil';
 
 import Style from './header-menu.less';
 

web/src/component/left-menu.jsx

@@ -5,7 +5,7 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import InlineSVG from 'svg-inline-react';
-import { getQueryParameter } from 'common/CommonUtil';
+import { getQueryParameter } from 'common/commonUtil';
 
 import Style from './left-menu.less';
 import ClassBind from 'classnames/bind';
@@ -15,7 +15,7 @@ import {
   showRootCA
 } from 'action/globalStatusAction';
 
-import { MenuKeyMap } from 'common/Constant';
+import { MenuKeyMap } from 'common/constant';
 
 const StyleBind = ClassBind.bind(Style);
 const {

web/src/component/map-local.jsx

@@ -4,14 +4,12 @@
  */
 
 import React, { PropTypes } from 'react';
-import ReactDOM from 'react-dom';
-import ClassBind from 'classnames/bind';
 import { connect } from 'react-redux';
 import { Tree, Form, Input, Button } from 'antd';
 import ResizablePanel from 'component/resizable-panel';
-import PromiseUtil from 'common/PromiseUtil';
+import PromiseUtil from 'common/promiseUtil';
 import { fetchDirectory, hideMapLocal, fetchMappedConfig, updateRemoteMappedConfig } from 'action/globalStatusAction';
-import { MenuKeyMap } from 'common/Constant';
+import { MenuKeyMap } from 'common/constant';
 
 import Style from './map-local.less';
 import CommonStyle from '../style/common.less';

web/src/component/record-filter.jsx

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { Input, Alert } from 'antd';
 import ResizablePanel from 'component/resizable-panel';
 import { hideFilter, updateFilter } from 'action/globalStatusAction';
-import { MenuKeyMap } from 'common/Constant';
+import { MenuKeyMap } from 'common/constant';
 
 import Style from './record-filter.less';
 import CommonStyle from '../style/common.less';

web/src/component/record-request-detail.jsx

@@ -10,7 +10,7 @@ import clipboard from 'clipboard-js'
 import JsonViewer from 'component/json-viewer';
 import ModalPanel from 'component/modal-panel';
 import { hideRecordDetail } from 'action/recordAction';
-import { selectText } from 'common/CommonUtil';
+import { selectText } from 'common/commonUtil';
 import { curlify } from 'common/curlUtil';
 
 import Style from './record-detail.less';

web/src/component/record-row.jsx

@@ -3,7 +3,7 @@
 */
 
 import React, { PropTypes } from 'react';
-import { formatDate } from 'common/CommonUtil';
+import { formatDate } from 'common/commonUtil';
 
 import Style from './record-row.less';
 import CommonStyle from '../style/common.less';

web/src/component/record-ws-message-detail.jsx

@@ -5,8 +5,8 @@
 
 import React, { PropTypes } from 'react';
 import { message, Button, Icon } from 'antd';
-import { formatDate } from 'common/CommonUtil';
-import { initWs } from 'common/WsUtil';
+import { formatDate } from 'common/commonUtil';
+import { initWs } from 'common/wsUtil';
 import ClassBind from 'classnames/bind';
 
 import Style from './record-ws-message-detail.less';

web/src/component/table-panel.jsx

@@ -5,7 +5,7 @@
 import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import { Table } from 'antd';
-import { formatDate } from 'common/CommonUtil';
+import { formatDate } from 'common/commonUtil';
 
 import Style from './table-panel.less';
 import ClassBind from 'classnames/bind';

web/src/component/title-bar.jsx

@@ -5,7 +5,7 @@
 
 import React, { PropTypes } from 'react';
 import { Icon } from 'antd';
-import { getQueryParameter } from 'common/CommonUtil';
+import { getQueryParameter } from 'common/commonUtil';
 
 import Style from './title-bar.less';
 

web/src/component/ws-listener.jsx

@@ -5,14 +5,14 @@
 
 import React, { PropTypes } from 'react';
 import { message } from 'antd';
-import { initWs } from 'common/WsUtil';
+import { initWs } from 'common/wsUtil';
 import { updateWholeRequest } from 'action/recordAction';
 import {
   updateShouldClearRecord,
   updateShowNewRecordTip
 } from 'action/globalStatusAction';
 const RecordWorker = require('worker-loader?inline!./record-worker.jsx');
-import { getJSON } from 'common/ApiUtil';
+import { getJSON } from 'common/apiUtil';
 
 const myRecordWorker = new RecordWorker(window.URL.createObjectURL(new Blob([RecordWorker.toString()])));
 const fetchLatestLog = function () {

web/src/index.jsx

@@ -6,8 +6,8 @@ import { LocaleProvider } from 'antd';
 import enUS from 'antd/lib/locale-provider/en_US';
 import createSagaMiddleware from 'redux-saga';
 import rootSaga from 'saga/rootSaga';
-import { MenuKeyMap } from 'common/Constant';
-import { getQueryParameter } from 'common/CommonUtil';
+import { MenuKeyMap } from 'common/constant';
+import { getQueryParameter } from 'common/commonUtil';
 
 import reducer from 'reducer/rootReducer';
 import HeaderMenu from 'component/header-menu';

web/src/reducer/globalStatusReducer.js

@@ -21,7 +21,7 @@ const defaultStatus = {
   mappedConfig:[] // configured map config
 };
 
-import { MenuKeyMap } from 'common/Constant';
+import { MenuKeyMap } from 'common/constant';
 
 import {
   STOP_RECORDING,

web/src/saga/rootSaga.js

@@ -29,7 +29,7 @@ import {
   updateLocalGlobalProxyFlag
 } from 'action/globalStatusAction';
 
-import { getJSON, postJSON, isApiSuccess } from 'common/ApiUtil';
+import { getJSON, postJSON, isApiSuccess } from 'common/apiUtil';
 
 function* doFetchRequestList() {
   const data = yield call(getJSON, '/latestLog');