加入单元测试和并发控制，解决页面卡顿 (#350)

Author: winddies

.babelrc

@@ -10,5 +10,5 @@
       }
     ]
   ],
-  "plugins": ["transform-runtime"]
+  "plugins": ["transform-runtime", "transform-object-rest-spread"]
 }

.eslintignore

@@ -0,0 +1,3 @@
+/src/__mock__
+/src/__tests__
+/test/*

.eslintrc.js

@@ -16,13 +16,15 @@ module.exports = {
       // 允许在全局作用域下使用 return 语句
       "globalReturn":true,
       // impliedStric
-      "impliedStrict":true
+      "impliedStrict":true,
+      "experimentalObjectRestSpread": true
     }
   },
   "rules": {
     "no-console": "off",
     "no-redeclare": 2,
     "keyword-spacing": 1,
+    "prefer-spread": 0,
     "indent":[
       0, 
       2

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-- '4'
+- '6'
 cache:
   directories:
   - node_modules

README.md

@@ -170,6 +170,8 @@ subscription.unsubscribe() // 上传取消
     * config.disableStatisticsReport: 是否禁用日志报告，为布尔值，默认为 `false`。
     * config.region: 选择上传域名区域；当为 `null` 或 `undefined` 时，自动分析上传域名区域。
     * config.retryCount: 上传自动重试次数（整体重试次数，而不是某个分片的重试次数）；默认 3 次（即上传失败后最多重试两次）；**目前仅在上传过程中产生 `599` 内部错误时生效**，**但是未来很可能会扩展为支持更多的情况**。
+    * config.concurrentRequestLimit: 分片上传的并发请求量，`number`，默认为3；因为浏览器本身也会限制最大并发量，所以最大并发量与浏览器有关。
+    * config.checkByMD5: 是否开启 MD5 校验，为布尔值；在断点续传时，开启 MD5 校验会将已上传的分片与当前分片进行 MD5 值比对，若不一致，则重传该分片，避免使用错误的分片。读取分片内容并计算 MD5 需要花费一定的时间，因此会稍微增加断点续传时的耗时，默认为 false，不开启。
 
   * **putExtra**:
 

package.json

@@ -1,12 +1,13 @@
 {
   "name": "qiniu-js",
   "jsName": "qiniu",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "private": false,
   "description": "Javascript SDK for Qiniu Resource (Cloud) Storage AP",
   "main": "dist/qiniu.min.js",
   "scripts": {
-    "build": "eslint src && webpack --optimize-minimize --config webpack.prod.js",
+    "test": "jest --coverage",
+    "build": "eslint src && jest && webpack --optimize-minimize --config webpack.prod.js",
     "dev": "eslint src && webpack-dev-server --open --config webpack.dev.js",
     "serve": "node test/server.js"
   },
@@ -32,6 +33,7 @@
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
     "babel-plugin-syntax-flow": "^6.18.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.0",
     "babel-runtime": "^6.26.0",
@@ -40,6 +42,8 @@
     "es3ify-loader": "^0.2.0",
     "eslint": "^4.18.2",
     "express": "^4.16.2",
+    "jest": "^22.4.2",
+    "jest-environment-jsdom": "^23.0.0-alpha.0",
     "multiparty": "^4.1.3",
     "open-browser-webpack-plugin": "0.0.5",
     "qiniu": "^7.1.1",

src/__mock__/utils.js

@@ -0,0 +1,3 @@
+export function request(){
+  
+}

src/__tests__/image.test.js

@@ -0,0 +1,71 @@
+import { imageView2, imageMogr2, watermark, imageInfo } from '../image';
+import { urlSafeBase64Encode } from "../base64";
+
+import { request } from "../utils";
+jest.mock("../utils")
+describe("image func test", () => {
+  let domain = "http://otxza7yo2.bkt.clouddn.com";
+  let key = "test.png";
+
+  test("imageView2", () => {
+    let m = {
+      "fop": "imageView2",
+      "mode": 2,
+      "h": 450,
+      "q": 100
+    }
+    let url = imageView2(m, key, domain)
+    expect(url).toBe(
+      "http://otxza7yo2.bkt.clouddn.com/" + key + "?" + 
+      "imageView2/" + encodeURIComponent(m.mode) +
+      "/h" + "/" + encodeURIComponent(m.h) +
+      "/q" + "/" + encodeURIComponent(m.q)
+    )
+  });
+
+  test("imageMogr2", () => {
+    let m = {
+      thumbnail: 1,
+      strip: true,
+      gravity: 1,
+      crop: 1,
+      quality: 1,
+      rotate: 1,
+      format: 1,
+      blur: 1
+    };
+
+    let url = imageMogr2(m, key, domain);
+    expect(url).toBe(
+      "http://otxza7yo2.bkt.clouddn.com/" + key + "?imageMogr2/" + 
+      "thumbnail/1/strip/gravity/1/quality/1/crop/1/rotate/1/format/1/blur/1"
+    )
+  });
+
+  test("watermark", () => {
+    let m ={
+      fop: "watermark",
+      mode: 1,
+      image: "http://www.b1.qiniudn.com/images/logo-2.png",
+      dissolve: 100,
+      dx: 100,
+      dy: 100
+    };
+    let url = watermark(m, key, domain);
+    expect(url).toBe(
+      "http://otxza7yo2.bkt.clouddn.com/" + key + "?" +
+      "watermark/" + m.mode + "/image/" + urlSafeBase64Encode(m.image) +
+      "/dissolve/100/dx/100/dy/100"
+    );
+    m.mode = 3;
+    expect(()=> {
+      watermark(m, key, domain)
+    }).toThrow("mode is wrong")
+  });
+
+  test("imageInfo", () => {
+     let info = imageInfo(key, domain)
+     let url = domain + "/" + key + "?imageInfo";
+     expect(request.mock.calls[0]).toEqual([url, { method: "GET" }])
+  })
+})

src/__tests__/pool.test.js

@@ -0,0 +1,21 @@
+import { Pool } from "../pool"
+
+var m = jest.fn()
+var t = jest.fn(() => {
+  return new Promise((resolve, reject) => {
+    m()
+    resolve("123")
+  })
+})
+
+describe("test Pool for control concurrency", () => {
+  var pool = new Pool(t, 2)
+  test("pool.js", () => {
+    return Promise.all([1,2,3,4,5,6].map(value => {
+      pool.enqueue(value)
+      expect(pool.processing.length).toBeLessThanOrEqual(2)
+    })).then(()=> {
+      expect(m.mock.calls.length).toBe(6)
+    })
+  })
+})

src/pool.js

@@ -0,0 +1,38 @@
+export class Pool {
+  constructor(runTask, limit) {
+    this.runTask = runTask;
+    this.queue = [];
+    this.processing = [];
+    this.limit = limit;
+  }
+
+  enqueue(task){
+    return new Promise((resolve, reject) => {
+      this.queue.push({
+        task,
+        resolve,
+        reject
+      });
+      this.check();
+    });
+  }
+  run(item){
+    this.queue = this.queue.filter(v => v !== item);
+    this.processing.push(item);
+    this.runTask(item.task).then(
+      () => {
+        this.processing = this.processing.filter(v => v !== item);
+        item.resolve();
+        this.check();
+      },
+      (err) => item.reject(err)
+    );
+  }
+  check(){
+    let processingNum = this.processing.length;
+    let availableNum = this.limit - processingNum;
+    this.queue.slice(0, availableNum).forEach((item, index) => {
+      this.run(item);
+    });
+  }
+}