$ npm run unit

> vue-esri@1.0.1 unit F:\documentbak\4_18\bak\vue-esri
> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

Hash: d0bd46439cb895b505fe
Version: webpack 2.7.0
Time: 12851ms
                                                Asset     Size  Chunks                    Chunk Names
         static/fonts/Avenir_Next_W00_600.4f0b009.ttf   104 kB          [emitted]
         static/fonts/Avenir_Next_W00_400.f848561.eot  35.9 kB          [emitted]
  static/fonts/Avenir_Next_W00_Italic_400.929fd7f.eot  37.1 kB          [emitted]
  static/fonts/Avenir_Next_W00_Italic_600.18f1e29.eot  37.7 kB          [emitted]
           static/img/Avenir_Next_W00_400.0c370e0.svg   197 kB          [emitted]
           static/img/Avenir_Next_W00_600.1ef6952.svg   197 kB          [emitted]
    static/img/Avenir_Next_W00_Italic_400.98adb91.svg   206 kB          [emitted]
    static/img/Avenir_Next_W00_Italic_600.25ad77b.svg   203 kB          [emitted]
           static/img/CalciteWebCoreIcons.5254856.svg    95 kB          [emitted]
         static/fonts/Avenir_Next_W00_400.e2038c5.ttf   104 kB          [emitted]
        static/fonts/Avenir_Next_W00_400.a870140.woff  45.9 kB          [emitted]
       static/fonts/Avenir_Next_W00_400.851774d.woff2  31.9 kB          [emitted]
         static/fonts/Avenir_Next_W00_600.f07b2ae.eot    36 kB          [emitted]
        static/fonts/Avenir_Next_W00_600.516afcf.woff  46.5 kB          [emitted]
       static/fonts/Avenir_Next_W00_600.34cde5c.woff2  32.1 kB          [emitted]
  static/fonts/Avenir_Next_W00_Italic_400.fe69b4d.ttf   107 kB          [emitted]
 static/fonts/Avenir_Next_W00_Italic_400.888d0be.woff    48 kB          [emitted]
static/fonts/Avenir_Next_W00_Italic_400.d97f2f7.woff2  33.1 kB          [emitted]
  static/fonts/Avenir_Next_W00_Italic_600.bda8b01.ttf   107 kB          [emitted]
 static/fonts/Avenir_Next_W00_Italic_600.1562bef.woff  48.2 kB          [emitted]
static/fonts/Avenir_Next_W00_Italic_600.9cc667d.woff2  33.4 kB          [emitted]
         static/fonts/CalciteWebCoreIcons.c8c9692.ttf  29.1 kB          [emitted]
        static/fonts/CalciteWebCoreIcons.a7f9bdf.woff  29.2 kB          [emitted]
                                             index.js  4.25 MB       0  [emitted]  [big]  index.js
chunk    {0} index.js (index.js) 1.73 MB [entry] [rendered]
   [16] ./~/_vue@2.5.16@vue/dist/vue.esm.js 292 kB {0} [built]
   [32] ./src/components/maps/Views/MapView.vue 1.84 kB {0} [built]
   [33] ./src/pages/Default.vue 1.79 kB {0} [built]
   [34] ./src/pages/Feature.vue 1.79 kB {0} [built]
   [35] ./src/pages/Hello.vue 1.78 kB {0} [built]
   [36] ./src/pages/Manage.vue 1.78 kB {0} [built]
   [38] ./src/service/loStorage.js 8.55 kB {0} [built]
   [52] ./src/components/maps/Draw/Draw.vue 1.43 kB {0} [built]
   [53] ./src/components/maps/Draw/LineSymbol.vue 1.46 kB {0} [built]
   [54] ./src/components/maps/Draw/PictureMarkerSymbol.vue 1.49 kB {0} [built]
   [55] ./src/components/maps/Draw/PolygonSymbol.vue 1.47 kB {0} [built]
   [56] ./src/components/maps/Views/ScreenView.vue 1.86 kB {0} [built]
  [124] ./src ^\.\/(?!main(\.js)?$) 2.26 kB {0} [built]
  [125] ./test/unit/specs \.spec$ 177 bytes {0} [built]
  [175] ./test/unit/index.js 452 bytes {0} [built]
     + 353 hidden modules

ERROR in ./test/unit/specs/Hello.spec.js
Module not found: Error: Can't resolve '@/components/Hello' in 'F:\documentbak\4_18\bak\vue-esri\test\unit\specs'
 @ ./test/unit/specs/Hello.spec.js 7:13-42
 @ ./test/unit/specs \.spec$
 @ ./test/unit/index.js
18 04 2018 10:44:16.425:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
18 04 2018 10:44:16.436:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
18 04 2018 10:44:16.733:INFO [launcher]: Starting browser PhantomJS
18 04 2018 10:44:21.935:INFO [PhantomJS 2.1.1 (Windows 7.0.0)]: Connected on socket locyKIEQ5UEtku9lAAAA with id 38984880
PhantomJS 2.1.1 (Windows 7.0.0) ERROR
  Error: Cannot find module "@/components/Hello"
  at webpack:///test/unit/specs/Hello.spec.js:2:0 <- index.js:43994

PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 0 ERROR (0.615 secs / 0 secs)

PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 0 ERROR (0 secs / 0 secs)

=============================== Coverage summary ===============================
Statements   : 100% ( 0/0 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 0/0 )
Lines        : 100% ( 0/0 )
================================================================================
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-esri@1.0.1 unit: `cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-esri@1.0.1 unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-04-18T02_44_22_738Z-debug.log

修改了`Hello.spec.js`

修改前

import Vue from 'vue'
import Hello from '@/components/Hello'

describe('Hello.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(Hello)
    const vm = new Constructor().$mount()
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App')
  })
})

修改后

import Vue from 'vue'
import Hello from '@/pages/Hello'

describe('Hello.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(Hello)
    const vm = new Constructor().$mount()
    expect(vm.$el.querySelector('p.alert-success').textContent)
      .to.equal('由西瓜酱提供包含三种颜色主题的vue后台操作模板')
  })
})

重新尝试单元检测

npm run unit

提示[vuex] vuex requires a Promise polyfill in this browser.，即我应该要装一个babel-polyfill的依赖包

配置`babel-polyfill`

第一步安装依赖

cnpm i babel-polyfill -S

第二步在 Webpack/Browserify/Node中使用在build/webpack.base.conf.js文件中

module.exports = {
  entry: {
    app:  './src/main.js'
  }
}
// 替换为
module.exports = {
  entry: {
    app: ["babel-polyfill", "./src/main.js"]
  }
};

重新尝试单元检测

npm run unit

卒，报错和上文一样

删除node_modules，重新安装一遍所以依赖

$ cnpm i
/ [56/74] Installing string-width@^1.0.2platform unsupported babel-cli@6.26.0 › chokidar@1.7.0 › fsevents@^1.0.0 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 74 packages
√ Linked 884 latest versions
Downloading https://tnpm-hz.oss-cn-hangzhou.aliyuncs.com/dist/chromedriver/2.37/chromedriver_win32.zip
Saving to D:\Users\ADMINI~1\AppData\Local\Temp\chromedriver\chromedriver_win32.zip
Received 781K...
Received 1563K...
Received 2345K...
Received 3127K...
Received 3270K total.
Extracting zip contents
Copying to target path F:\documentbak\4_18\bak\vue-esri\node_modules\_chromedriver@2.37.0@chromedriver\lib\chromedriver
Done. ChromeDriver binary available at F:\documentbak\4_18\bak\vue-esri\node_modules\_chromedriver@2.37.0@chromedriver\lib\chromedriver\chromedriver.exe
PhantomJS not found on PATH
Download already available at D:\Users\ADMINI~1\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
Verified checksum of previously downloaded file
Extracting zip contents
Removing F:\documentbak\4_18\bak\vue-esri\node_modules\_phantomjs-prebuilt@2.1.16@phantomjs-prebuilt\lib\phantom
Copying extracted folder D:\Users\ADMINI~1\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip-extract-1524025590466\phantomjs-2.1.1-windows -> F:\documentbak\4_18\bak\vue-esri\node_modules\_phantomjs-prebuilt@2.1.16@phantomjs-prebuilt\lib\phantom
Writing location.js file
Done. Phantomjs binary available at F:\documentbak\4_18\bak\vue-esri\node_modules\_phantomjs-prebuilt@2.1.16@phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe
Cached binary found at D:\Users\Administrator\.npminstall_tarball\node-sass\4.8.3\win32-x64-57_binding.node
Binary found at F:\documentbak\4_18\bak\vue-esri\node_modules\_node-sass@4.8.3@node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
√ Run 3 scripts
peerDependencies link ajv@4.11.8 in F:\documentbak\4_18\bak\vue-esri\node_modules\_ajv-keywords@1.5.1@ajv-keywords unmet with F:\documentbak\4_18\bak\vue-esri\node_modules\ajv(5.5.2)
anti semver karma@1.7.1 › useragent@2.3.0 › tmp@0.0.x delcares tmp@0.0.x(resolved as 0.0.33) but using ancestor(karma)'s dependency tmp@0.0.31(resolved as 0.0.31)
deprecate nightwatch@0.9.20 › proxy-agent@2.0.0 › socks-proxy-agent@2.1.1 › socks@~1.1.5 If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
deprecate karma-sinon-chai@1.3.4 › sinon@2.4.1 › formatio@1.2.0 This package is unmaintained. Use @sinonjs/formatio instead
Recently updated (since 2018-04-11): 22 packages (detail see file F:\documentbak\4_18\bak\vue-esri\node_modules\.recently_updates.txt)
  Today:
    → copy-webpack-plugin@4.5.1 › serialize-javascript@^1.4.0(1.5.0) (08:08:05)
    → babel-loader@6.4.1 › webpack@2.7.0 › node-libs-browser@2.1.0 › timers-browserify@^2.0.4(2.0.9) (06:26:13)
    → babel-loader@6.4.1 › webpack@2.7.0 › node-libs-browser@2.1.0 › buffer@4.9.1 › base64-js@^1.0.2(1.3.0) (07:11:58)
√ All packages installed (1127 packages installed from npm registry, used 1m, speed 167.57kB/s, json 958(13.45MB), tarball 0B)

尝试在`build/webpack.base.conf.js`文件中`import babel-polyfill`，然后执行单元测试，失败

修改`build/webpack.base.conf.js`文件的`babel-loader`配置

修改前

      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },

修改后

      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          plugins: [
            "transform-runtime"
          ],
          presets: ['es2015', 'stage-0']
        },
        include: [resolve('src'), resolve('test')]
      },

重新尝试单元检测

$ npm run unit

> vue-esri@1.0.1 unit F:\documentbak\4_18\bak\vue-esri
> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

(node:9264) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: cfc91bc079f6419d2ae5
Version: webpack 2.7.0
Time: 1824ms
   Asset     Size  Chunks             Chunk Names
index.js  8.14 kB       0  [emitted]  index.js
chunk    {0} index.js (index.js) 1.78 kB [entry] [rendered]
    [0] ./test/unit/index.js 1.78 kB {0} [built] [failed] [1 error]

ERROR in ./test/unit/index.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "F:\\documentbak\\4_18\\bak\\vue-esri\\test\\unit"
    at F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\index.js:212:65)
    at new File (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-loader@6.4.1@babel-loader\lib\index.js:46:20)
    at Object.module.exports (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-loader@6.4.1@babel-loader\lib\index.js:163:20)
18 04 2018 13:52:39.219:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
18 04 2018 13:52:39.225:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
18 04 2018 13:52:39.244:INFO [launcher]: Starting browser PhantomJS
18 04 2018 13:52:43.309:INFO [PhantomJS 2.1.1 (Windows 7.0.0)]: Connected on socket NX2qUTX-O7gNA8qwAAAA with id 28537933
18 04 2018 13:52:43.916:WARN [reporter]: SourceMap position not found for trace: undefined
PhantomJS 2.1.1 (Windows 7.0.0) ERROR
  Error: Module build failed: Error: Couldn't find preset "es2015" relative to directory "F:\\documentbak\\4_18\\bak\\vue-esri\\test\\unit"
      at F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:293:19
      at Array.map (<anonymous>)
      at OptionManager.resolvePresets (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:275:20)
      at OptionManager.mergePresets (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:264:10)
      at OptionManager.mergeOptions (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:249:14)
      at OptionManager.init (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:368:12)
      at File.initOptions (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\index.js:212:65)
      at new File (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\index.js:135:24)
      at Pipeline.transform (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\pipeline.js:46:16)
      at transpile (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-loader@6.4.1@babel-loader\lib\index.js:46:20)
      at Object.module.exports (F:\documentbak\4_18\bak\vue-esri\node_modules\_babel-loader@6.4.1@babel-loader\lib\index.js:163:20)
  at index.js:73

PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 0 ERROR (0.615 secs / 0 secs)

PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 0 ERROR (0 secs / 0 secs)

=============================== Coverage summary ===============================
Statements   : 100% ( 0/0 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 0/0 )
Lines        : 100% ( 0/0 )
================================================================================
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-esri@1.0.1 unit: `cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-esri@1.0.1 unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-04-18T05_52_44_159Z-debug.log

决定尝试一下代码检测

$ npm run lint

> vue-esri@1.0.1 lint F:\documentbak\4_18\bak\vue-esri
> eslint --ext .js,.vue src test/unit/specs test/e2e/specs

F:\documentbak\4_18\bak\vue-esri\src\App.vue
  35:39  error  Extra semicolon                                  semi
  37:13  error  Missing space before function parentheses        space-before-function-paren
  37:15  error  Missing space before opening brace               space-before-blocks
  38:52  error  Extra semicolon                                  semi
  41:14  error  Missing space before value for key 'components'  key-spacing

F:\documentbak\4_18\bak\vue-esri\src\components\maps\Draw\Draw.vue
   21:14  error  Missing space before value for key 'drawType'    key-spacing
   23:16  error  Strings must use singlequote                     quotes
   23:26  error  A space is required after ','                    comma-spacing
   23:27  error  Expected space or tab after '//' in comment      spaced-comment
   29:13  error  Missing space before value for key 'items'       key-spacing
   30:15  error  Missing space before value for key 'point'       key-spacing
   31:20  error  Missing space before value for key 'multipoint'  key-spacing
   32:18  error  Missing space before value for key 'polyline'    key-spacing
   33:17  error  Missing space before value for key 'polygon'     key-spacing
   37:10  error  Missing space before function parentheses        space-before-function-paren
   37:12  error  Missing space before opening brace               space-before-blocks
   38:21  error  Extra semicolon                                  semi
   39:5   error  Expected space(s) after "if"                     keyword-spacing
   39:9   error  Redundant double negation                        no-extra-boolean-cast
   39:21  error  Missing space before opening brace               space-before-blocks
   40:7   error  'EventBus' is not defined                        no-undef
   40:29  error  A space is required after ','                    comma-spacing
   40:38  error  Missing space before function parentheses        space-before-function-paren
   40:44  error  Missing space before opening brace               space-before-blocks
   41:26  error  Extra semicolon                                  semi
   42:9   error  Extra semicolon                                  semi
   44:21  error  Extra semicolon                                  semi
   47:23  error  Missing space before function parentheses        space-before-function-paren
   48:23  error  Extra semicolon                                  semi
   49:31  error  Strings must use singlequote                     quotes
   49:56  error  A space is required after ','                    comma-spacing
   49:57  error  Strings must use singlequote                     quotes
   52:11  error  Extra semicolon                                  semi
   55:49  error  Extra semicolon                                  semi
   55:50  error  Expected space or tab after '//' in comment      spaced-comment
   56:28  error  Extra semicolon                                  semi
   59:19  error  Strings must use singlequote                     quotes
   59:54  error  Extra semicolon                                  semi
   62:19  error  Strings must use singlequote                     quotes
   62:57  error  Extra semicolon                                  semi
   65:19  error  Strings must use singlequote                     quotes
   65:37  error  Multiple spaces found before '_this'             no-multi-spaces
   65:58  error  Extra semicolon                                  semi
   68:19  error  Strings must use singlequote                     quotes
   68:55  error  Extra semicolon                                  semi
   69:9   error  Extra semicolon                                  semi
   71:17  error  Missing space before function parentheses        space-before-function-paren
   72:23  error  Extra semicolon                                  semi
   74:7   error  Expected space(s) after "switch"                 keyword-spacing
   74:29  error  Missing space before opening brace               space-before-blocks
   75:14  error  Strings must use singlequote                     quotes
   75:22  error  Missing space before opening brace               space-before-blocks
   81:16  error  Extra semicolon                                  semi
   83:14  error  Strings must use singlequote                     quotes
   83:27  error  Missing space before opening brace               space-before-blocks
   89:16  error  Extra semicolon                                  semi
   91:14  error  Strings must use singlequote                     quotes
   91:25  error  Missing space before opening brace               space-before-blocks
   92:13  error  Expected indentation of 10 spaces but found 12   indent
   96:16  error  Extra semicolon                                  semi
   98:14  error  Strings must use singlequote                     quotes
   98:24  error  Missing space before opening brace               space-before-blocks
  103:16  error  Extra semicolon                                  semi
  105:17  error  Missing space before opening brace               space-before-blocks
  106:13  error  Expected indentation of 10 spaces but found 12   indent
  110:16  error  Extra semicolon                                  semi
  121:19  error  Missing space before function parentheses        space-before-function-paren
  122:23  error  Extra semicolon                                  semi
  123:20  error  Infix operators must be spaced                   space-infix-ops
  123:23  error  Strings must use singlequote                     quotes
  124:32  error  Extra semicolon                                  semi
  128:14  error  Missing space before value for key 'components'  key-spacing

F:\documentbak\4_18\bak\vue-esri\src\components\maps\Draw\LineSymbol.vue
  13:12  error  Missing space before value for key 'lPaths'                key-spacing
  18:12  error  Missing space before value for key 'lColor'                key-spacing
  22:12  error  Missing space before value for key 'lWidth'                key-spacing
  23:20  error  A space is required after ','                              comma-spacing
  31:10  error  Missing space before function parentheses                  space-before-function-paren
  31:12  error  Missing space before opening brace                         space-before-blocks
  32:21  error  Extra semicolon                                            semi
  33:21  error  Extra semicolon                                            semi
  36:23  error  Missing space before function parentheses                  space-before-function-paren
  37:23  error  Extra semicolon                                            semi
  38:31  error  Strings must use singlequote                               quotes
  38:45  error  A space is required after ','                              comma-spacing
  38:46  error  Strings must use singlequote                               quotes
  40:17  error  Strings must use singlequote                               quotes
  43:10  error  Extra semicolon                                            semi
  46:17  error  Strings must use singlequote                               quotes
  49:16  error  Strings must use singlequote                               quotes
  50:17  error  Strings must use singlequote                               quotes
  51:10  error  Extra semicolon                                            semi
  53:17  error  Strings must use singlequote                               quotes
  53:27  error  Infix operators must be spaced                             space-infix-ops
  53:46  error  Unexpected trailing comma                                  comma-dangle
  54:10  error  Extra semicolon                                            semi
  60:11  error  Extra semicolon                                            semi
  62:50  error  Extra semicolon                                            semi
  63:9   error  Extra semicolon                                            semi
  68:1   error  Too many blank lines at the end of file. Max of 1 allowed  no-multiple-empty-lines

F:\documentbak\4_18\bak\vue-esri\src\components\maps\Draw\PictureMarkerSymbol.vue
  13:12  error  Missing space before value for key 'imgUrl'                key-spacing
  15:16  error  Strings must use singlequote                               quotes
  17:11  error  Missing space before value for key 'iLong'                 key-spacing
  22:11  error  Missing space before value for key 'iLati'                 key-spacing
  27:12  error  Missing space before value for key 'iWidth'                key-spacing
  28:20  error  A space is required after ','                              comma-spacing
  29:16  error  Strings must use singlequote                               quotes
  31:13  error  Missing space before value for key 'iHeight'               key-spacing
  32:20  error  A space is required after ','                              comma-spacing
  33:16  error  Strings must use singlequote                               quotes
  35:13  error  Missing space before value for key 'xOffset'               key-spacing
  36:20  error  A space is required after ','                              comma-spacing
  39:13  error  Missing space before value for key 'yOffset'               key-spacing
  40:20  error  A space is required after ','                              comma-spacing
  48:10  error  Missing space before function parentheses                  space-before-function-paren
  48:12  error  Missing space before opening brace                         space-before-blocks
  49:21  error  Extra semicolon                                            semi
  50:21  error  Extra semicolon                                            semi
  53:23  error  Missing space before function parentheses                  space-before-function-paren
  54:23  error  Extra semicolon                                            semi
  55:31  error  Strings must use singlequote                               quotes
  55:45  error  A space is required after ','                              comma-spacing
  55:46  error  Strings must use singlequote                               quotes
  57:17  error  Strings must use singlequote                               quotes
  60:10  error  Extra semicolon                                            semi
  63:17  error  Strings must use singlequote                               quotes
  64:16  error  Strings must use singlequote                               quotes
  64:52  error  Infix operators must be spaced                             space-infix-ops
  67:19  error  Missing space before value for key 'xoffset'               key-spacing
  68:19  error  Missing space before value for key 'yoffset'               key-spacing
  69:10  error  Extra semicolon                                            semi
  73:11  error  Extra semicolon                                            semi
  76:45  error  Extra semicolon                                            semi
  78:7   error  Block must not be padded by blank lines                    padded-blocks
  78:9   error  Extra semicolon                                            semi
  83:1   error  Too many blank lines at the end of file. Max of 1 allowed  no-multiple-empty-lines

F:\documentbak\4_18\bak\vue-esri\src\components\maps\Draw\PolygonSymbol.vue
  13:12  error  Missing space before value for key 'PRings'                key-spacing
  13:13  error  Expected space or tab after '//' in comment                spaced-comment
  15:21  error  Missing space after =>                                     arrow-spacing
  16:18  error  Extra semicolon                                            semi
  20:12  error  Missing space before value for key 'PColor'                key-spacing
  20:13  error  Expected space or tab after '//' in comment                spaced-comment
  21:20  error  A space is required after ','                              comma-spacing
  22:21  error  Missing space after =>                                     arrow-spacing
  23:36  error  Extra semicolon                                            semi
  26:13  error  Missing space before value for key 'PlColor'               key-spacing
  26:14  error  Expected space or tab after '//' in comment                spaced-comment
  27:20  error  A space is required after ','                              comma-spacing
  28:21  error  Missing space after =>                                     arrow-spacing
  29:30  error  Extra semicolon                                            semi
  32:13  error  Missing space before value for key 'PlWidth'               key-spacing
  32:14  error  Expected space or tab after '//' in comment                spaced-comment
  33:20  error  A space is required after ','                              comma-spacing
  41:10  error  Missing space before function parentheses                  space-before-function-paren
  41:12  error  Missing space before opening brace                         space-before-blocks
  42:21  error  Extra semicolon                                            semi
  43:21  error  Extra semicolon                                            semi
  46:23  error  Missing space before function parentheses                  space-before-function-paren
  47:23  error  Extra semicolon                                            semi
  48:31  error  Strings must use singlequote                               quotes
  48:45  error  A space is required after ','                              comma-spacing
  48:46  error  Strings must use singlequote                               quotes
  50:17  error  Strings must use singlequote                               quotes
  53:10  error  Extra semicolon                                            semi
  56:17  error  Strings must use singlequote                               quotes
  58:18  error  Strings must use singlequote                               quotes
  62:18  error  Strings must use singlequote                               quotes
  63:19  error  Strings must use singlequote                               quotes
  65:10  error  Extra semicolon                                            semi
  68:17  error  Strings must use singlequote                               quotes
  68:26  error  Infix operators must be spaced                             space-infix-ops
  68:45  error  Unexpected trailing comma                                  comma-dangle
  69:10  error  Extra semicolon                                            semi
  75:11  error  Extra semicolon                                            semi
  76:49  error  Extra semicolon                                            semi
  77:9   error  Extra semicolon                                            semi
  82:1   error  Too many blank lines at the end of file. Max of 1 allowed  no-multiple-empty-lines

F:\documentbak\4_18\bak\vue-esri\src\components\maps\Views\MapView.vue
  20:13  error  Missing space before value for key 'evt'         key-spacing
  20:16  error  Missing space before value for key 'x'           key-spacing
  20:18  error  A space is required after ','                    comma-spacing
  20:21  error  Missing space before value for key 'y'           key-spacing
  21:14  error  Missing space before value for key 'view'        key-spacing
  24:12  error  Missing space before function parentheses        space-before-function-paren
  24:14  error  Missing space before opening brace               space-before-blocks
  25:23  error  Extra semicolon                                  semi
  26:23  error  Extra semicolon                                  semi
  31:30  error  Extra semicolon                                  semi
  36:7   error  Expected space or tab after '//' in comment      spaced-comment
  37:15  error  Missing space before function parentheses        space-before-function-paren
  37:17  error  Missing space before opening brace               space-before-blocks
  42:33  error  Extra semicolon                                  semi
  45:31  error  Extra semicolon                                  semi
  50:13  error  Extra semicolon                                  semi
  53:27  error  Extra semicolon                                  semi
  57:16  error  Missing space before function parentheses        space-before-function-paren
  58:19  error  Infix operators must be spaced                   space-infix-ops
  58:24  error  Extra semicolon                                  semi
  60:33  error  Strings must use singlequote                     quotes
  60:45  error  Strings must use singlequote                     quotes
  60:72  error  A space is required after ','                    comma-spacing
  62:22  error  Strings must use singlequote                     quotes
  63:13  error  Extra semicolon                                  semi
  65:24  error  Strings must use singlequote                     quotes
  68:40  error  A space is required after ','                    comma-spacing
  69:13  error  Extra semicolon                                  semi
  70:35  error  Extra semicolon                                  semi
  71:11  error  Extra semicolon                                  semi
  74:17  error  Missing space before function parentheses        space-before-function-paren
  75:51  error  A space is required after ','                    comma-spacing
  75:76  error  Extra semicolon                                  semi
  78:22  error  Missing space before function parentheses        space-before-function-paren
  79:25  error  Extra semicolon                                  semi
  80:9   error  Expected space(s) after "if"                     keyword-spacing
  80:26  error  Missing space before opening brace               space-before-blocks
  82:27  error  Missing space before function parentheses        space-before-function-paren
  82:32  error  Missing space before opening brace               space-before-blocks
  83:42  error  Extra semicolon                                  semi
  84:15  error  Expected space(s) after "if"                     keyword-spacing
  84:32  error  Missing space before opening brace               space-before-blocks
  85:19  error  Expected indentation of 14 spaces but found 16   indent
  85:40  error  Extra semicolon                                  semi
  86:19  error  Expected indentation of 14 spaces but found 16   indent
  86:40  error  Extra semicolon                                  semi
  88:11  error  Expected indentation of 10 spaces but found 8    indent
  88:13  error  Extra semicolon                                  semi
  92:16  error  Missing space before value for key 'components'  key-spacing

F:\documentbak\4_18\bak\vue-esri\src\components\maps\Views\ScreenView.vue
  16:13  error  Missing space before value for key 'evt'        key-spacing
  16:16  error  Missing space before value for key 'x'          key-spacing
  16:18  error  A space is required after ','                   comma-spacing
  16:21  error  Missing space before value for key 'y'          key-spacing
  17:16  error  Missing space before value for key 'camera'     key-spacing
  20:12  error  Missing space before function parentheses       space-before-function-paren
  20:14  error  Missing space before opening brace              space-before-blocks
  21:23  error  Extra semicolon                                 semi
  22:23  error  Extra semicolon                                 semi
  26:34  error  Expected '===' and instead saw '=='             eqeqeq
  27:30  error  Extra semicolon                                 semi
  33:7   error  Expected space or tab after '//' in comment     spaced-comment
  34:15  error  Missing space before function parentheses       space-before-function-paren
  34:17  error  Missing space before opening brace              space-before-blocks
  39:33  error  Extra semicolon                                 semi
  42:31  error  Extra semicolon                                 semi
  47:13  error  Extra semicolon                                 semi
  50:27  error  Extra semicolon                                 semi
  55:19  error  Infix operators must be spaced                  space-infix-ops
  55:24  error  Extra semicolon                                 semi
  57:33  error  Strings must use singlequote                    quotes
  57:45  error  Strings must use singlequote                    quotes
  57:67  error  A space is required after ','                   comma-spacing
  57:68  error  Strings must use singlequote                    quotes
  57:91  error  A space is required after ','                   comma-spacing
  59:22  error  Strings must use singlequote                    quotes
  60:21  error  Strings must use singlequote                    quotes
  61:13  error  Extra semicolon                                 semi
  63:24  error  Strings must use singlequote                    quotes
  66:40  error  A space is required after ','                   comma-spacing
  71:13  error  Extra semicolon                                 semi
  72:35  error  Extra semicolon                                 semi
  73:11  error  Extra semicolon                                 semi
  77:51  error  A space is required after ','                   comma-spacing
  77:76  error  Extra semicolon                                 semi
  80:32  error  Missing space before function parentheses       space-before-function-paren
  81:25  error  Extra semicolon                                 semi
  83:25  error  Missing space before function parentheses       space-before-function-paren
  83:30  error  Missing space before opening brace              space-before-blocks
  84:48  error  Extra semicolon                                 semi
  85:13  error  Expected space(s) after "if"                    keyword-spacing
  85:30  error  Missing space before opening brace              space-before-blocks
  86:17  error  Expected indentation of 12 spaces but found 14  indent
  86:38  error  Extra semicolon                                 semi
  87:17  error  Expected indentation of 12 spaces but found 14  indent
  87:38  error  Extra semicolon                                 semi
  89:9   error  Expected indentation of 8 spaces but found 6    indent
  89:11  error  Extra semicolon                                 semi

F:\documentbak\4_18\bak\vue-esri\src\components\maps\Widgets\CameraInfo.vue
  16:12  error  Missing space before value for key 'camera'  key-spacing
  19:9   error  Unexpected labeled statement                 no-labels
  27:20  error  Missing space before function parentheses    space-before-function-paren
  28:23  error  Extra semicolon                              semi
  29:40  error  Extra semicolon                              semi
  33:9   error  Extra semicolon                              semi
  34:38  error  Extra semicolon                              semi

F:\documentbak\4_18\bak\vue-esri\src\components\maps\Widgets\ScaleBar.vue
  13:14  error  Missing space before value for key 'position'  key-spacing
  15:16  error  Strings must use singlequote                   quotes
  15:29  error  Expected space or tab after '//' in comment    spaced-comment
  22:10  error  Missing space before function parentheses      space-before-function-paren
  22:12  error  Missing space before opening brace             space-before-blocks
  23:21  error  Extra semicolon                                semi
  24:21  error  Extra semicolon                                semi
  27:23  error  Missing space before function parentheses      space-before-function-paren
  28:23  error  Extra semicolon                                semi
  29:31  error  Strings must use singlequote                   quotes
  29:54  error  A space is required after ','                  comma-spacing
  29:55  error  Strings must use singlequote                   quotes
  32:17  error  Missing space before value for key 'style'     key-spacing
  32:17  error  Strings must use singlequote                   quotes
  32:23  error  A space is required after ','                  comma-spacing
  32:24  error  Expected space or tab after '//' in comment    spaced-comment
  33:16  error  Missing space before value for key 'unit'      key-spacing
  33:16  error  Strings must use singlequote                   quotes
  33:24  error  Expected space or tab after '//' in comment    spaced-comment
  34:11  error  Extra semicolon                                semi
  38:11  error  Extra semicolon                                semi
  39:9   error  Extra semicolon                                semi

F:\documentbak\4_18\bak\vue-esri\src\components\maps\Widgets\SizeSlider.vue
  20:12  error  Missing space before value for key 'view'   key-spacing
  23:10  error  Missing space before function parentheses   space-before-function-paren
  23:12  error  Missing space before opening brace          space-before-blocks
  24:21  error  Extra semicolon                             semi
  25:21  error  Extra semicolon                             semi
  28:23  error  Missing space before function parentheses   space-before-function-paren
  29:11  error  '_this' is assigned a value but never used  no-unused-vars
  29:23  error  Extra semicolon                             semi
  30:31  error  Strings must use singlequote                quotes
  30:56  error  A space is required after ','               comma-spacing
  30:57  error  Strings must use singlequote                quotes
  32:17  error  Strings must use singlequote                quotes
  33:18  error  Strings must use singlequote                quotes
  34:20  error  Strings must use singlequote                quotes
  35:20  error  Strings must use singlequote                quotes
  38:10  error  Extra semicolon                             semi
  41:47  error  Unexpected trailing comma                   comma-dangle
  42:12  error  Strings must use singlequote                quotes
  42:24  error  Extra semicolon                             semi
  44:39  error  Extra semicolon                             semi
  45:9   error  Extra semicolon                             semi

F:\documentbak\4_18\bak\vue-esri\src\components\pages\LeftAside.vue
   81:5   error  Expected indentation of 2 spaces but found 4     indent
   82:5   error  Expected indentation of 2 spaces but found 4     indent
   82:9   error  Missing space before function parentheses        space-before-function-paren
   84:20  error  A space is required after ','                    comma-spacing
   85:29  error  A space is required after ','                    comma-spacing
   87:9   error  Expected indentation of 6 spaces but found 8     indent
   89:5   error  Expected indentation of 2 spaces but found 4     indent
   92:5   error  Expected indentation of 2 spaces but found 4     indent
   93:28  error  Missing space before function parentheses        space-before-function-paren
   94:28  error  Extra semicolon                                  semi
   96:25  error  Missing space before function parentheses        space-before-function-paren
   96:34  error  A space is required after ','                    comma-spacing
   97:37  error  Infix operators must be spaced                   space-infix-ops
   97:42  error  Infix operators must be spaced                   space-infix-ops
   97:52  error  Extra semicolon                                  semi
  100:5   error  Expected indentation of 2 spaces but found 4     indent
  100:16  error  Missing space before value for key 'components'  key-spacing
  104:11  error  Missing space before value for key 'created'     key-spacing
  104:19  error  Missing space before function parentheses        space-before-function-paren
  104:21  error  Missing space before opening brace               space-before-blocks
  105:20  error  Extra semicolon                                  semi
  108:21  error  Strings must use singlequote                     quotes
  108:33  error  Extra semicolon                                  semi
  109:35  error  Extra semicolon                                  semi
  110:40  error  Extra semicolon                                  semi
  113:29  error  Extra semicolon                                  semi
  114:9   error  Extra semicolon                                  semi
  116:3   error  Expected indentation of 0 spaces but found 2     indent

F:\documentbak\4_18\bak\vue-esri\src\components\pages\Message.vue
  22:6  error  Extra semicolon  semi

F:\documentbak\4_18\bak\vue-esri\src\components\pages\TopBar.vue
   40:18  error  Missing space before value for key 'changeType'  key-spacing
   41:18  error  Missing space before value for key 'themeColor'  key-spacing
   42:16  error  Missing space before value for key 'btngroup'    key-spacing
   44:19  error  Missing space before value for key 'content'     key-spacing
   45:16  error  Missing space before value for key 'icon'        key-spacing
   47:19  error  Missing space before value for key 'divided'     key-spacing
   50:19  error  Missing space before value for key 'content'     key-spacing
   51:16  error  Missing space before value for key 'icon'        key-spacing
   56:19  error  Missing space before value for key 'content'     key-spacing
   57:16  error  Missing space before value for key 'icon'        key-spacing
   66:56  error  A space is required after ','                    comma-spacing
   66:65  error  Extra semicolon                                  semi
   70:5   error  Expected space or tab after '//' in comment      spaced-comment
   71:18  error  Missing space before function parentheses        space-before-function-paren
   71:27  error  Missing space before opening brace               space-before-blocks
   72:23  error  Extra semicolon                                  semi
   73:49  error  Extra semicolon                                  semi
   74:23  error  Extra semicolon                                  semi
   74:24  error  Expected space or tab after '//' in comment      spaced-comment
   76:16  error  Missing space before function parentheses        space-before-function-paren
   76:22  error  Missing space before opening brace               space-before-blocks
   77:32  error  Infix operators must be spaced                   space-infix-ops
   77:38  error  Extra semicolon                                  semi
   78:23  error  Extra semicolon                                  semi
   79:37  error  A space is required after ','                    comma-spacing
   79:43  error  Extra semicolon                                  semi
   81:16  error  Missing space before function parentheses        space-before-function-paren
   81:18  error  Missing space before opening brace               space-before-blocks
   82:33  error  Extra semicolon                                  semi
   84:39  error  A space is required after ','                    comma-spacing
   84:46  error  Extra semicolon                                  semi
   85:29  error  Strings must use singlequote                     quotes
   85:37  error  Extra semicolon                                  semi
   87:14  error  Missing space before function parentheses        space-before-function-paren
   87:16  error  Missing space before opening brace               space-before-blocks
   88:31  error  Extra semicolon                                  semi
   90:39  error  A space is required after ','                    comma-spacing
   90:45  error  Extra semicolon                                  semi
   91:29  error  Strings must use singlequote                     quotes
   91:38  error  Extra semicolon                                  semi
   93:13  error  Missing space before function parentheses        space-before-function-paren
   93:15  error  Missing space before opening brace               space-before-blocks
   94:23  error  Extra semicolon                                  semi
   95:39  error  A space is required after ','                    comma-spacing
   95:45  error  Extra semicolon                                  semi
   97:30  error  Extra semicolon                                  semi
   99:19  error  Missing space before function parentheses        space-before-function-paren
   99:26  error  Missing space before opening brace               space-before-blocks
  100:23  error  Extra semicolon                                  semi
  101:37  error  A space is required after ','                    comma-spacing
  101:44  error  Extra semicolon                                  semi
  102:30  error  Infix operators must be spaced                   space-infix-ops
  102:37  error  Extra semicolon                                  semi
  104:15  error  Missing space before function parentheses        space-before-function-paren
  105:9   error  Expected indentation of 6 spaces but found 8     indent
  105:62  error  Extra semicolon                                  semi
  106:9   error  Expected indentation of 6 spaces but found 8     indent
  106:66  error  Extra semicolon                                  semi
  107:9   error  Expected indentation of 6 spaces but found 8     indent
  107:44  error  Extra semicolon                                  semi
  108:9   error  Expected indentation of 6 spaces but found 8     indent
  108:25  error  Extra semicolon                                  semi

F:\documentbak\4_18\bak\vue-esri\src\components\tools\ToolBar.vue
  38:7    error  Missing space before function parentheses     space-before-function-paren
  39:7    error  Expected indentation of 4 spaces but found 6  indent
  42:8    error  Extra semicolon                               semi
  43:5    error  Expected indentation of 2 spaces but found 4  indent
  45:7    error  Expected indentation of 4 spaces but found 6  indent
  45:18   error  Missing space before function parentheses     space-before-function-paren
  48:19   error  Extra semicolon                               semi
  50:26   error  Extra semicolon                               semi
  52:7    error  Expected indentation of 4 spaces but found 6  indent
  52:19   error  Missing space before function parentheses     space-before-function-paren
  53:36   error  Extra semicolon                               semi
  55:7    error  Expected indentation of 4 spaces but found 6  indent
  55:20   error  Missing space before function parentheses     space-before-function-paren
  56:26   error  Extra semicolon                               semi
  58:7    error  Expected indentation of 4 spaces but found 6  indent
  58:19   error  Missing space before function parentheses     space-before-function-paren
  59:115  error  Extra semicolon                               semi
  61:7    error  Expected indentation of 4 spaces but found 6  indent
  61:19   error  Missing space before function parentheses     space-before-function-paren
  62:36   error  Unexpected space(s) after '${'                template-curly-spacing
  62:49   error  Unexpected space(s) before '}'                template-curly-spacing
  62:53   error  Extra semicolon                               semi
  64:7    error  Expected indentation of 4 spaces but found 6  indent
  64:11   error  Missing space before function parentheses     space-before-function-paren
  69:11   error  Extra semicolon                               semi
  72:7    error  Expected indentation of 4 spaces but found 6  indent
  72:13   error  Missing space before function parentheses     space-before-function-paren
  73:38   error  Extra semicolon                               semi
  81:11   error  Extra semicolon                               semi
  83:7    error  Expected indentation of 4 spaces but found 6  indent
  83:14   error  Missing space before function parentheses     space-before-function-paren
  89:33   error  Unexpected space(s) after '${'                template-curly-spacing
  89:43   error  Unexpected space(s) before '}'                template-curly-spacing
  90:15   error  Extra semicolon                               semi
  92:11   error  Extra semicolon                               semi
  94:5    error  Expected indentation of 2 spaces but found 4  indent

F:\documentbak\4_18\bak\vue-esri\src\components\tools\ToolBox.vue
  13:7   error  Missing space before function parentheses       space-before-function-paren
  14:7   error  Expected indentation of 4 spaces but found 6    indent
  16:14  error  Missing space before value for key 'view'       key-spacing
  17:17  error  Missing space before value for key 'widgets'    key-spacing
  18:8   error  Extra semicolon                                 semi
  20:10  error  Missing space before function parentheses       space-before-function-paren
  20:12  error  Missing space before opening brace              space-before-blocks
  21:21  error  Extra semicolon                                 semi
  22:5   error  Expected space(s) after "if"                    keyword-spacing
  22:9   error  Redundant double negation                       no-extra-boolean-cast
  22:21  error  Missing space before opening brace              space-before-blocks
  23:7   error  'EventBus' is not defined                       no-undef
  23:29  error  A space is required after ','                   comma-spacing
  23:38  error  Missing space before function parentheses       space-before-function-paren
  23:44  error  Missing space before opening brace              space-before-blocks
  24:26  error  Extra semicolon                                 semi
  25:9   error  Extra semicolon                                 semi
  27:24  error  Extra semicolon                                 semi
  30:7   error  Expected indentation of 4 spaces but found 6    indent
  31:11  error  Expected indentation of 8 spaces but found 10   indent
  31:15  error  Identifier 't_widgets' is not in camel case     camelcase
  31:39  error  Extra semicolon                                 semi
  32:11  error  Expected indentation of 8 spaces but found 10   indent
  33:15  error  Expected indentation of 12 spaces but found 14  indent
  34:13  error  Extra semicolon                                 semi
  38:7   error  Expected indentation of 4 spaces but found 6    indent
  38:18  error  Missing space before function parentheses       space-before-function-paren
  38:20  error  Missing space before opening brace              space-before-blocks
  39:25  error  Extra semicolon                                 semi
  42:25  error  Strings must use singlequote                    quotes
  42:38  error  Extra semicolon                                 semi
  43:39  error  Extra semicolon                                 semi
  44:48  error  Extra semicolon                                 semi
  47:33  error  Extra semicolon                                 semi
  48:13  error  Extra semicolon                                 semi
  50:7   error  Expected indentation of 4 spaces but found 6    indent
  50:11  error  Missing space before function parentheses       space-before-function-paren
  55:11  error  Extra semicolon                                 semi

F:\documentbak\4_18\bak\vue-esri\src\layouts\HeaderAsideFooterResponsiveLayout\Layout.vue
  35:1   error  More than 1 blank line not allowed               no-multiple-empty-lines
  45:41  error  Extra semicolon                                  semi
  48:11  error  Missing space before value for key 'methods'     key-spacing
  50:14  error  Missing space before value for key 'components'  key-spacing

F:\documentbak\4_18\bak\vue-esri\src\layouts\HeaderFooterResponsiveLayout\Layout.vue
  27:41  error  Extra semicolon                                  semi
  30:11  error  Missing space before value for key 'methods'     key-spacing
  32:14  error  Missing space before value for key 'components'  key-spacing

F:\documentbak\4_18\bak\vue-esri\src\main.js
  24:1  error  Do not use 'new' for side effects  no-new

F:\documentbak\4_18\bak\vue-esri\src\pages\Default.vue
  16:14  error  Missing space before value for key 'components'  key-spacing

F:\documentbak\4_18\bak\vue-esri\src\pages\Feature.vue
  25:11  error  Missing space before value for key 'created'  key-spacing
  25:19  error  Missing space before function parentheses     space-before-function-paren
  25:21  error  Missing space before opening brace            space-before-blocks
  26:20  error  Extra semicolon                               semi
  29:21  error  Strings must use singlequote                  quotes
  29:36  error  Extra semicolon                               semi
  30:35  error  Extra semicolon                               semi
  31:41  error  Extra semicolon                               semi
  34:29  error  Extra semicolon                               semi
  35:9   error  Extra semicolon                               semi

F:\documentbak\4_18\bak\vue-esri\src\pages\Hello.vue
  18:11  error  Missing space before value for key 'msg'  key-spacing
  18:11  error  Strings must use singlequote              quotes

F:\documentbak\4_18\bak\vue-esri\src\pages\Login.vue
   71:28  error  Extra semicolon                                semi
   76:21  error  Extra semicolon                                semi
   79:38  error  Extra semicolon                                semi
   80:14  error  Block must not be padded by blank lines        padded-blocks
   82:50  error  Infix operators must be spaced                 space-infix-ops
   82:84  error  Extra semicolon                                semi
   85:45  error  Extra semicolon                                semi
   87:19  error  Extra semicolon                                semi
   89:6   error  Extra semicolon                                semi
   93:37  error  Extra semicolon                                semi
   96:57  error  Extra semicolon                                semi
   97:10  error  Expected space(s) before "else"                keyword-spacing
   97:32  error  Missing space before opening brace             space-before-blocks
   98:57  error  Infix operators must be spaced                 space-infix-ops
   98:92  error  Extra semicolon                                semi
  100:44  error  Extra semicolon                                semi
  103:19  error  Extra semicolon                                semi
  105:6   error  Extra semicolon                                semi
  108:7   error  Expected space(s) after "if"                   keyword-spacing
  108:22  error  Missing space before opening brace             space-before-blocks
  110:43  error  Extra semicolon                                semi
  112:44  error  Extra semicolon                                semi
  114:21  error  Extra semicolon                                semi
  116:8   error  Expected space(s) before "else"                keyword-spacing
  116:8   error  Expected space(s) after "else"                 keyword-spacing
  117:19  error  Extra semicolon                                semi
  120:5   error  Block must not be padded by blank lines        padded-blocks
  120:6   error  Extra semicolon                                semi
  122:16  error  Missing space before value for key 'ruleForm'  key-spacing
  139:6   error  Extra semicolon                                semi
  143:23  error  Extra semicolon                                semi
  146:32  error  Extra semicolon                                semi
  147:41  error  A space is required after ','                  comma-spacing
  147:93  error  Extra semicolon                                semi
  148:42  error  A space is required after ','                  comma-spacing
  148:94  error  Extra semicolon                                semi
  149:43  error  A space is required after ','                  comma-spacing
  149:50  error  Extra semicolon                                semi
  150:44  error  A space is required after ','                  comma-spacing
  150:51  error  Extra semicolon                                semi
  153:42  error  Extra semicolon                                semi
  155:9   error  Extra semicolon                                semi
  157:5   error  Block must not be padded by blank lines        padded-blocks
  159:23  error  Extra semicolon                                semi
  162:32  error  Extra semicolon                                semi
  163:41  error  A space is required after ','                  comma-spacing
  163:93  error  Extra semicolon                                semi
  164:42  error  A space is required after ','                  comma-spacing
  164:94  error  Extra semicolon                                semi
  165:43  error  A space is required after ','                  comma-spacing
  165:50  error  Extra semicolon                                semi
  166:44  error  A space is required after ','                  comma-spacing
  166:51  error  Extra semicolon                                semi
  169:54  error  Extra semicolon                                semi
  171:9   error  Extra semicolon                                semi
  173:5   error  Block must not be padded by blank lines        padded-blocks
  175:8   error  Expected indentation of 6 spaces but found 7   indent
  175:42  error  Extra semicolon                                semi
  176:8   error  Expected indentation of 6 spaces but found 7   indent
  176:25  error  Extra semicolon                                semi
  179:41  error  Extra semicolon                                semi
  180:25  error  Extra semicolon                                semi
  182:15  error  Missing space before function parentheses      space-before-function-paren
  183:9   error  Expected indentation of 6 spaces but found 8   indent
  183:58  error  Extra semicolon                                semi
  184:9   error  Expected indentation of 6 spaces but found 8   indent
  184:57  error  Extra semicolon                                semi
  185:9   error  Expected indentation of 6 spaces but found 8   indent
  185:39  error  Extra semicolon                                semi
  186:9   error  Expected indentation of 6 spaces but found 8   indent
  186:23  error  Extra semicolon                                semi
  188:15  error  Missing space before function parentheses      space-before-function-paren
  189:9   error  Expected indentation of 6 spaces but found 8   indent
  189:62  error  Extra semicolon                                semi
  190:9   error  Expected indentation of 6 spaces but found 8   indent
  190:66  error  Extra semicolon                                semi
  191:9   error  Expected indentation of 6 spaces but found 8   indent
  191:44  error  Extra semicolon                                semi
  192:9   error  Expected indentation of 6 spaces but found 8   indent
  192:25  error  Extra semicolon                                semi
  194:12  error  Missing space before function parentheses      space-before-function-paren
  194:17  error  Missing space before opening brace             space-before-blocks
  199:18  error  Missing space before value for key 'duration'  key-spacing
  200:9   error  Extra semicolon                                semi
  202:12  error  Missing space before function parentheses      space-before-function-paren
  202:17  error  Missing space before opening brace             space-before-blocks
  207:9   error  Extra semicolon                                semi
  211:2   error  Extra semicolon                                semi

F:\documentbak\4_18\bak\vue-esri\src\pages\Manage.vue
  16:14  error  Missing space before value for key 'components'  key-spacing

✖ 598 problems (598 errors, 0 warnings)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-esri@1.0.1 lint: `eslint --ext .js,.vue src test/unit/specs test/e2e/specs`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-esri@1.0.1 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-04-18T06_00_50_258Z-debug.log

尝试e2e测试（类似于黑盒测试）

注意本地需要有JDK环境，初始启动环境的时间会有点长，需要耐心等待

$ npm run e2e

> vue-esri@1.0.1 e2e F:\documentbak\4_18\bak\vue-esri
> node test/e2e/runner.js

> Starting dev server...
(node:11188) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

Starting to optimize CSS...
Processing static/css/app.c99a364e7ec43738abdd8f68c78d2bec.css...
Processed static/css/app.c99a364e7ec43738abdd8f68c78d2bec.css, before: 263302, after: 237888, ratio: 90.35%
> Listening at http://localhost:8081

Starting selenium server... started - PID:  11160

[Test] Test Suite
=====================

Running:  default e2e tests
 √ Element <#app> was visible after 266 milliseconds.
 × Testing if element <.hello> is present.  - expected "present" but got: "not present"
    at Object.defaultE2eTests [as default e2e tests] (F:/documentbak/4_18/bak/vue-esri/test/e2e/specs/test.js:14:15)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)

FAILED:  1 assertions failed and 1 passed (27.892s)

 _________________________________________________

 TEST FAILURE:  1 assertions failed, 1 passed. (28.287s)

 × test

   - default e2e tests (27.892s)
   Testing if element <.hello> is present.  - expected "present" but got: "not present"
       at Object.defaultE2eTests [as default e2e tests] (F:/documentbak/4_18/bak/vue-esri/test/e2e/specs/test.js:14:15)
       at _combinedTickCallback (internal/process/next_tick.js:131:7)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-esri@1.0.1 e2e: `node test/e2e/runner.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-esri@1.0.1 e2e script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-04-18T06_05_58_154Z-debug.log

修改`test/e2e/specs/test.js`配置

修改前

// For authoring Nightwatch tests, see
// http://nightwatchjs.org/guide#usage

module.exports = {
  'default e2e tests': function (browser) {
    // automatically uses dev Server port from /config.index.js
    // default: http://localhost:8080
    // see nightwatch.conf.js
    const devServer = browser.globals.devServerURL

    browser
      .url(devServer)
      .waitForElementVisible('#app', 5000)
      .assert.elementPresent('.hello')
      .assert.containsText('h1', 'Welcome to Your Vue.js App')
      .assert.elementCount('img', 1)
      .end()
  }
}

修改后

// For authoring Nightwatch tests, see
// http://nightwatchjs.org/guide#usage

module.exports = {
  'default e2e tests': function (browser) {
    // automatically uses dev Server port from /config.index.js
    // default: http://localhost:8080
    // see nightwatch.conf.js
    const devServer = browser.globals.devServerURL

    browser
      .url(devServer)
      .waitForElementVisible('#app', 5000)
      .assert.elementCount('login', 1)
      .assert.elementCount('el-container', 1)
      .assert.elementCount('top-bar', 1)
      .assert.elementCount('manage', 1)
      .assert.elementCount('default', 1)
      .end()
  }
}

重新执行测试

$ npm run e2e

> vue-esri@1.0.1 e2e F:\documentbak\4_18\bak\vue-esri
> node test/e2e/runner.js

> Starting dev server...

Starting to optimize CSS...
Processing static/css/app.c99a364e7ec43738abdd8f68c78d2bec.css...
Processed static/css/app.c99a364e7ec43738abdd8f68c78d2bec.css, before: 263302, after: 237888, ratio: 90.35%
> Listening at http://localhost:8081

Starting selenium server... started - PID:  11124

[Test] Test Suite
=====================

Running:  default e2e tests
 √ Element <#app> was visible after 268 milliseconds.
 × Testing if element <login> has count: 1  - expected "1" but got: "0"
    at Object.defaultE2eTests [as default e2e tests] (F:/documentbak/4_18/bak/vue-esri/test/e2e/specs/test.js:15:15)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)

FAILED:  1 assertions failed and 1 passed (28.615s)

 _________________________________________________

 TEST FAILURE:  1 assertions failed, 1 passed. (28.786s)

 × test

   - default e2e tests (28.615s)
   Testing if element <login> has count: 1  - expected "1" but got: "0"
       at Object.defaultE2eTests [as default e2e tests] (F:/documentbak/4_18/bak/vue-esri/test/e2e/specs/test.js:15:15)
       at _combinedTickCallback (internal/process/next_tick.js:131:7)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-esri@1.0.1 e2e: `node test/e2e/runner.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-esri@1.0.1 e2e script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-04-18T06_27_31_873Z-debug.log

前端实现自动化就要借助到unit和e2e端到端测试了

unit测试

站在程序员的角度测试

unit测试是把代码看成是一个个的组件。从而实现每一个组件的单独测试，测试内容主要是组件内每一个函数的返回结果是不是和期望值一样。


const compare = (a,b) => a>b?a:b
// 对这个函数进行测试　　
expect(compare(1,2)).to.equal(2) //ok　　
expect(compare(2,1)).to.equal(1) //ok　　
// 测试完成

而代码覆盖率是指代码中每一个函数的每一中情况的测试情况，上述测试的代码覆盖率是100%

const compare = (a,b) => a>b?a:b
// 对这个函数进行测试
expect(compare(2,1)).to.equal(1) //ok
// 测试完成

这样代码覆盖率是50%，因为else情况没有测试到

e2e测试

站在用户角度的测试

e2e测试是把我们的程序堪称是一个黑盒子，我不懂你内部是怎么实现的，我只负责打开浏览器，把测试内容在页面上输入一遍，看是不是我想要得到的结果。

总结

两者的存在都是很有意义的。 unit测试是程序员写好自己的逻辑后可以很容易的测试自己的逻辑返回的是不是都正确。 e2e代码是测试所有的需求是不是都可以正确的完成，而且最终要的是在代码重构，js改动很多之后，需要对需求进行测试的时候测试代码是不需要改变的，你也不用担心在重构后不能达到客户的需求。

https://www.cnblogs.com/cqhaibin/p/6581350.html

此篇文章是续webpack多入口文件、热更新等体验，主要说明单元测试与e2e测试的基本配置以及相关应用。

一、单元测试

实现单元测试框架的搭建、es6语法的应用、以及测试覆盖率的引入。

1. 需要安装的项目：

jasmine：单元测试库
karma：测试框架，配置选择phantomjs浏览器
karma-jasmine：操作jasmine的插件
karma-webpack：webpack与karma的连接
mock：用于数据模拟，用'npm install --save-dev mockjs'安装
karma-coverage：测试覆盖率报表
karma-spec-reporter：命令行输出测试用户的运行结果
babel-plugin-istanbul: 测试覆盖率显示未通过webpack打包的源码

由于babel-plugin-istanbul是babel的一个插件，所以需要修改.babelrc文件，代码如下:

{
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

2. 配置参数及运行命令：

~~运行命令 .\node_modules\.bin\karma start .\test\karma.conf.js~~

文件路径 \unit\karma.conf.js

karma命令为私有安装，karma配置文件指定在test文件夹下。

配置文件如下：

// This is a karma config file. For more details see
//   http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
//   https://github.com/webpack/karma-webpack
var webpackConfig = require('../../build/webpack.test.conf')
module.exports = function(config) {
  config.set({

    // 基路径：表示karma从那个位置开始找文件
    basePath: '',
    // 框架
    frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
    // 测试的入口文件
    files: ['.index.js'],
    // 排除的文件，可以是正则
    exclude: [
    ],
    // 对指定文件的preprocess(预处理)
    preprocessors: {
      '../test/unit/index.js': ['webpack', 'sourcemap'],
      '../src/**/*.js': ['webpack','sourcemap', 'coverage', 'coverage'] //表示那些代码需要生成测试覆盖率报表
    },
    // 结果报表
    reporters: ['progress'],

    // 服务器端口
    port: 9876,

    // 报表中是否有颜色区分
    colors: true,

    // 输出的日志级别
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // 文件变化是否自动刷新
    autoWatch: true,

    // 测试的测试器环境
    browsers: ['PhantomJS'],

    // 是否依附浏览器运行
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // 并发个数，同时支持在多少个浏览器运行
    // how many browser should be started simultaneous
    concurrency: Infinity,

    //webpack配置
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    //代码覆盖率配置节点
    coverageReporter:{
      dir: './converage',
      reporters:[
        { type: 'lcov', subdir: '.' },
        {type: 'text-summary'}
      ],

    }
  })
}

*.spec.js(测试代码)如下：

import {init} from '../../src/ma'
import data from '../mocks/demo'

describe('demo_spec', function(){
    it('body',() => {
        init();
        let button = document.querySelector('.btn');
        button.textContent = data.btnName;
        expect(button.textContent).toEqual(data.btnName);
    })
});

src/ma:会向dom插件一个button标签

mocks/demo.js的代码：

import Mock from 'mockjs';
var template = {
    'title': 'Demo01',
    'btnName|1-3': '*'
}
export default Mock.mock(template);

mocks/demo：用mockjs模拟的一些数据

配置执行命令，然后在终端输入`npm run unit`就可以进行单元测试了

  "scripts": {
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"
  },

二、e2e(模拟用户行为的测试)

1. 需要安装的npm包

selenium-server：webdriver测试服务器的nodejs搭建
nightwatch：对selenium-server的包装，简化其配置
chromedriver：selenium的chrome测试环境插件，如果是firefox、ie等都需要重新下测试环境插件。

2. 原理简要说明

selenium-server由于浏览器同源策略(域名、协议、端口相同才是同源，如不明白可以baidu)的限制，selenimue就以代理的方式进行目标站点的测试(也就是测试环境跑的浏览器连接是selenium-server产生的代理服务器)，selenium-server代理服务器=selenium核心Js + 测试目标站点(proxy)。

3. 相关代码展示

nightwatch配置参数

文件路径test/e2e/nightwatch.conf.js

require('babel-register')
var config = require('../../config')

// http://nightwatchjs.org/gettingstarted#settings-file
module.exports = {
  src_folders: ['test/e2e/specs'],
  output_folder: 'test/e2e/reports',
  custom_assertions_path: ['test/e2e/custom-assertions'],

  selenium: {
    start_process: true,
    server_path: require('selenium-server').path,
    host: '127.0.0.1',
    port: 4444,
    cli_args: {
      'webdriver.chrome.driver': require('chromedriver').path
    }
  },

  test_settings: {
    default: {
      selenium_port: 4444,
      selenium_host: 'localhost',
      silent: true,
      globals: {
        devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
      }
    },

    chrome: {
      desiredCapabilities: {
        browserName: 'chrome',
        javascriptEnabled: true,
        acceptSslCerts: true
      }
    },

    firefox: {
      desiredCapabilities: {
        browserName: 'firefox',
        javascriptEnabled: true,
        acceptSslCerts: true
      }
    }
  }
}

selenium.server_path指向为selenium的jar包
selenium.cli_args：配置运行时的必要参数，webdriver.chrome.driver指定适合selenium的chrome安装位置
test.default.globals.devServerURL：需要测试的目标站点，此站点必须处于活动状态。

添加测试工具包

文件路径test/e2e/custom-assertions/elementCount.js

// A custom Nightwatch assertion.
// the name of the method is the filename.
// can be used in tests like this:
//
//   browser.assert.elementCount(selector, count)
//
// for how to write custom assertions see
// http://nightwatchjs.org/guide#writing-custom-assertions
exports.assertion = function (selector, count) {
  this.message = 'Testing if element <' + selector + '> has count: ' + count
  this.expected = count
  this.pass = function (val) {
    return val === this.expected
  }
  this.value = function (res) {
    return res.value
  }
  this.command = function (cb) {
    var self = this
    return this.api.execute(function (selector) {
      return document.querySelectorAll(selector).length
    }, [selector], function (res) {
      cb.call(self, res)
    })
  }
}

增加测试代码

文件路径test/e2e/specs/test.js

// For authoring Nightwatch tests, see
// http://nightwatchjs.org/guide#usage

module.exports = {
  'default e2e tests': function (browser) {
    // automatically uses dev Server port from /config.index.js
    // default: http://localhost:8080
    // see nightwatch.conf.js
    const devServer = browser.globals.devServerURL

    browser
      .url(devServer)
      .waitForElementVisible('#app', 5000)
      .assert.elementPresent('.hello')
      .assert.containsText('h1', 'Welcome to Your Vue.js App')
      .assert.elementCount('img', 1)
      .end()
  }
}

编写`runner.js`

// 1. start the dev server using production config
process.env.NODE_ENV = 'testing'
var server = require('../../build/dev-server.js')

server.ready.then(() => {
  // 2. run the nightwatch test suite against it
  // to run in additional browsers:
  //    1. add an entry in test/e2e/nightwatch.conf.json under "test_settings"
  //    2. add it to the --env flag below
  // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
  // For more information on Nightwatch's config file, see
  // http://nightwatchjs.org/guide#settings-file
  var opts = process.argv.slice(2)
  if (opts.indexOf('--config') === -1) {
    opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
  }
  if (opts.indexOf('--env') === -1) {
    opts = opts.concat(['--env', 'chrome'])
  }

  var spawn = require('cross-spawn')
  var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })

  runner.on('exit', function (code) {
    server.close()
    process.exit(code)
  })

  runner.on('error', function (err) {
    server.close()
    throw err
  })
})

配置执行命令，然后在终端输入`npm run e2e`就可以进行单元测试了

  "scripts": {
    "e2e": "node test/e2e/runner.js"
  },

重新修改test/e2e/specs/test.js配置

// For authoring Nightwatch tests, see
// http://nightwatchjs.org/guide#usage

module.exports = {
  'default e2e tests': function (browser) {
    // automatically uses dev Server port from /config.index.js
    // default: http://localhost:8080
    // see nightwatch.conf.js
    const devServer = browser.globals.devServerURL

    browser
      .url(devServer)
      .waitForElementVisible('#app', 5000)
      // .assert.elementPresent('.Login')
      .assert.elementCount('div.loginBox', 1)
      .assert.elementCount('form.el-form', 1)
      .end()
  }
}

重新尝试黑盒检测

$ npm run e2e

> vue-esri@1.0.1 e2e F:\documentbak\4_18\bak\vue-esri
> node test/e2e/runner.js

> Starting dev server...

Starting to optimize CSS...
Processing static/css/app.c99a364e7ec43738abdd8f68c78d2bec.css...
Processed static/css/app.c99a364e7ec43738abdd8f68c78d2bec.css, before: 263302, after: 237888, ratio: 90.35%
> Listening at http://localhost:8081

Starting selenium server... started - PID:  13268

[Test] Test Suite
=====================

Running:  default e2e tests
 √ Element <#app> was visible after 186 milliseconds.
 √ Testing if element <div.loginBox> has count: 1
 √ Testing if element <form.el-form> has count: 1

OK. 3 assertions passed. (23.781s)

好歹完整通过了一个测试，日常捂脸.jpg

编写测试脚本nightwatch 在测试用例编写的时候还是很舒服的。我们在test/e2e/specs文件夹下建立对页面的测试。

module.exports = {
  'default e2e tests': function (browser) {
    const devServer = browser.globals.devServerURL
    browser
      .url(devServer)
      ... // 你的测试代码
      .end()
  }
}

无回调的链式操作

.url('http://www.google.com') // 打开地址
.waitForElementVisible('body', 1000) // 等待界面显示
.assert.title('Google') // 断言title为Google
.assert.visible('input[type=text]') // 断言输入框显示
.setValue('input[type=text]', 'rembrandt van rijn') // 设置输入框的值
.waitForElementVisible('button[name=btnG]', 1000) // 等待按钮显示
.click('button[name=btnG]') // 点击按钮
.pause(1000) // 暂停等待请求
.assert.containsText('ol#rso li:first-child', 'Rembrandt - Wikipedia')
// 断言包含字符串
.end();

丰富的API

clearValue
click
deleteCookie
deleteCookies
end
getAttribute
getCookie
getCookies
getCssProperty
getElementSize
getLocation
getLocationInView
getTagName
getText
getTitle
getValue
init
injectScript
isVisible
maximizeWindow
moveToElement
pause
resizeWindow
saveScreensshot
setCookie
setValue
submitForm
switchWindow
urlHash
waitForElementNotPresent
waitForElementNotVisible
waitForElementPresent
waitForElementVisible

内置断言库

attriuteEquals
containsText
cssClassPresent
cssClassNotPresent
cssProperty
elementPresent
elementNotPresent
hidden
title
urlContains
value
valueContains
visible

支持Xpath...

.setValue("//div[@class='form-container']//input[1]", 'test')
.click("//button[@type='button']/span[text()='搜索']")
.saveScreenshot('test/e2e/reports/table.png')

根据api重新修改test/e2e/specs/test.js配置，整个复杂点的

// For authoring Nightwatch tests, see
// http://nightwatchjs.org/guide#usage

module.exports = {
  'default e2e tests': function (browser) {
    // automatically uses dev Server port from /config.index.js
    // default: http://localhost:8080
    // see nightwatch.conf.js
    const devServer = browser.globals.devServerURL

    browser
      .url(devServer)
      .waitForElementVisible('#app', 5000)
      // .assert.elementPresent('.Login')
      .assert.elementCount('div.loginBox', 1)
      .assert.elementCount('form.el-form', 1)
      .end()
  }
}

再次尝试单元测试

修改文件`test/unit/karma.conf.js`

修改前

// This is a karma config file. For more details see
//   http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
//   https://github.com/webpack/karma-webpack

var webpackConfig = require('../../build/webpack.test.conf')

module.exports = function (config) {
  config.set({
    // to run in additional browsers:
    // 1. install corresponding karma launcher
    //    http://karma-runner.github.io/0.13/config/browsers.html
    // 2. add it to the `browsers` array below.
    browsers: ['PhantomJS'],
    frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
    reporters: ['spec', 'coverage'],
    files: ['./index.js'],
    preprocessors: {
      './index.js': ['webpack', 'sourcemap']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    }
  })
}

修改后


// This is a karma config file. For more details see
//   http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
//   https://github.com/webpack/karma-webpack

var webpackConfig = require('../../build/webpack.test.conf')

module.exports = function (config) {
  config.set({
    // to run in additional browsers:
    // 1. install corresponding karma launcher
    //    http://karma-runner.github.io/0.13/config/browsers.html
    // 2. add it to the `browsers` array below.
    // 测试的测试器环境
    browsers: ['PhantomJS'],
    // 框架
    frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
    // 结果报表
    reporters: ['progress', 'spec', 'coverage'],
    // 测试的入口文件
    files: ['./index.js'],
    // 对指定文件的preprocess(预处理)
    preprocessors: {
      './index.js': ['webpack', 'sourcemap'],
      '../src/**/*.js': ['webpack', 'sourcemap', 'coverage'] // 表示那些代码需要生成测试覆盖率报表
    },
    // webpack配置
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    // 代码覆盖率配置节点
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    },
    // 报表中是否有颜色区分
    colors: true,
    // 输出的日志级别
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // 文件变化是否自动刷新
    autoWatch: true,
    // 是否依附浏览器运行
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,
    // 并发个数，同时支持在多少个浏览器运行
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

修改文件`build/webpack.base.conf.js`

修改前

  entry: {
    app: ["babel-polyfill", "./src/main.js"]
  },

修改后

  entry: {
　　'babel-polyfill': 'babel-polyfill',
　　app: './src/main.js'
  },

执行命令

$ npm run unit

> vue-esri@1.0.1 unit F:\documentbak\4_18\bak\vue-esri
> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

18 04 2018 17:33:13.341:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
18 04 2018 17:33:13.350:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
18 04 2018 17:33:13.369:INFO [launcher]: Starting browser PhantomJS
18 04 2018 17:33:17.542:INFO [PhantomJS 2.1.1 (Windows 7.0.0)]: Connected on socket us3kbciLXcni6zU0AAAA with id 12860677
PhantomJS 2.1.1 (Windows 7.0.0) ERROR
  Error: [vuex] vuex requires a Promise polyfill in this browser.
  at webpack:///~/_vuex@2.5.0@vuex/dist/vuex.esm.js:97:0 <- index.js:57484

PhantomJS 2.1.1 (Windows 7.0.0) ERROR
  Error: [vuex] vuex requires a Promise polyfill in this browser.
  at webpack:///~/_vuex@2.5.0@vuex/dist/vuex.esm.js:97:0 <- index.js:57484

PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 0 ERROR (0.94 secs / 0 secs)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-esri@1.0.1 unit: `cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-esri@1.0.1 unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-04-18T09_33_18_720Z-debug.log

再次尝试单元测试

修改文件`test/unit/karma.conf.js`

修改前


// This is a karma config file. For more details see
//   http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
//   https://github.com/webpack/karma-webpack

var webpackConfig = require('../../build/webpack.test.conf')

module.exports = function (config) {
  config.set({
    // to run in additional browsers:
    // 1. install corresponding karma launcher
    //    http://karma-runner.github.io/0.13/config/browsers.html
    // 2. add it to the `browsers` array below.
    // 测试的测试器环境
    browsers: ['PhantomJS'],
    // 框架
    frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
    // 结果报表
    reporters: ['progress', 'spec', 'coverage'],
    // 测试的入口文件
    files: ['./index.js'],
    // 对指定文件的preprocess(预处理)
    preprocessors: {
      './index.js': ['webpack', 'sourcemap'],
      '../src/**/*.js': ['webpack', 'sourcemap', 'coverage'] // 表示那些代码需要生成测试覆盖率报表
    },
    // webpack配置
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    // 代码覆盖率配置节点
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    },
    // 报表中是否有颜色区分
    colors: true,
    // 输出的日志级别
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // 文件变化是否自动刷新
    autoWatch: true,
    // 是否依附浏览器运行
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,
    // 并发个数，同时支持在多少个浏览器运行
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

修改后

// This is a karma config file. For more details see
//   http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
//   https://github.com/webpack/karma-webpack

var webpackConfig = require('../../build/webpack.test.conf')

module.exports = function (config) {
  config.set({
    // to run in additional browsers:
    // 1. install corresponding karma launcher
    //    http://karma-runner.github.io/0.13/config/browsers.html
    // 2. add it to the `browsers` array below.
    // 测试的测试器环境
    browsers: ['PhantomJS'],
    // 框架
    frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
    // 结果报表
    reporters: ['progress', 'spec', 'coverage'],
    // 测试的入口文件
    files: [
      '../../node_modules/babel-polyfill/dist/polyfill.js',
      './index.js'
    ],
    // 对指定文件的preprocess(预处理)
    preprocessors: {
      './index.js': ['webpack', 'sourcemap'],
      '../src/**/*.js': ['webpack', 'sourcemap', 'coverage'] // 表示那些代码需要生成测试覆盖率报表
    },
    // webpack配置
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    // 代码覆盖率配置节点
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    },
    // 报表中是否有颜色区分
    colors: true,
    // 输出的日志级别
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // 文件变化是否自动刷新
    autoWatch: true,
    // 是否依附浏览器运行
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,
    // 并发个数，同时支持在多少个浏览器运行
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

再次执行单元测试

$ npm run unit

> vue-esri@1.0.1 unit F:\documentbak\4_18\bak\vue-esri
> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

18 04 2018 19:20:05.340:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
18 04 2018 19:20:05.349:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
18 04 2018 19:20:05.368:INFO [launcher]: Starting browser PhantomJS
18 04 2018 19:20:09.570:INFO [PhantomJS 2.1.1 (Windows 7.0.0)]: Connected on socket vE_a3_T9ZLusSa4mAAAA with id 83186055
ERROR: '[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating '_vm.$route.query')"

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating '_vm.$route.query')"

ERROR: TypeError{stack: 'render@http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:53414:46
_render@http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:11422:26
updateComponent@http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:9666:28
get@http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:10020:29
Watcher@http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:10009:15
mountComponent@http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:9673:14
$mount@http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:15418:24
$mount@http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:17817:20
http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:44003:38
callFn@http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4481:25
run@http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4473:13
runTest@http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4969:13
http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:5075:19
next@http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4887:16
http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4897:11
next@http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4821:16
http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4865:9
timeslice@http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:82:27', line: 53414, sourceURL: 'http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523'}
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: TypeError{stack: 'render@http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:53414:46
_render@http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:11422:26
updateComponent@http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:9666:28
get@http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:10020:29
Watcher@http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:10009:15
mountComponent@http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:9673:14
$mount@http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:15418:24
$mount@http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:17817:20
http://localhost:9876/base/index.js?ee5570e025c04344e0eea4f3a9a15f3d7ea0a523:44003:38
callFn@http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4481:25
run@http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4473:13
runTest@http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4969:13
http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:5075:19
next@http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4887:16
http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4897:11
next@http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4821:16
http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4865:9
timeslice@http://localhost:9876/absoluteF:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:82:27', line: 53414, sourceURL: 'http://localhost:9PhantomJS 2.1.1 (Windows 7.0.0) Hello.vue should render correct contents FAILED
        undefined is not a constructor (evaluating 'vm.$el.querySelector('p.alert-success')')
        webpack:///test/unit/specs/Hello.spec.js:8:32 <- index.js:44004:32
        callFn@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4481:25
        run@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4473:13
        runTest@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4969:13
        F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:5075:19
        next@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4887:16
        F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4897:11
        next@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4821:16
        F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4865:9
        timeslice@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:82:27
PhantomJS 2.1.1 (Windows 7.0.0): Executed 1 of 1 (1 FAILED) (0 secs / 0.027 secs)

  Hello.vue
    ×should render correct contents
        undefined is not a constructor (evaluating 'vm.$el.querySelector('p.alert-success')')
        webpack:///test/unit/specs/Hello.spec.js:8:32 <- index.js:44004:32
        callFn@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4481:25
        run@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4473:13
        runTest@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4969:13
        F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:5075:19
        next@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4887:16
        F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4897:11
        next@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4821:16
        F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4865:9
        timeslice@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:82:27
PhantomJS 2.1.1 (Windows 7.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.466 secs / 0.027 secs)

PhantomJS 2.1.1 (Windows 7.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.466 secs / 0.027 secs)

=============================== Coverage summary ===============================
Statements   : 13.81% ( 74/536 )
Branches     : 2.63% ( 5/190 )
Functions    : 2.73% ( 3/110 )
Lines        : 14.37% ( 74/515 )
================================================================================
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-esri@1.0.1 unit: `cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-esri@1.0.1 unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-04-18T11_20_11_739Z-debug.log

提取上文错误重点

ERROR: '[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating '_vm.$route.query')"

(found in <Root>)'

  Hello.vue
    ×should render correct contents
        undefined is not a constructor (evaluating 'vm.$el.querySelector('p.alert-success')')


$ npm run unit

> vue-esri@1.0.1 unit F:\documentbak\4_18\bak\vue-esri
> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

18 04 2018 21:06:55.528:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
18 04 2018 21:06:55.538:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
18 04 2018 21:06:55.556:INFO [launcher]: Starting browser PhantomJS
18 04 2018 21:06:59.704:INFO [PhantomJS 2.1.1 (Windows 7.0.0)]: Connected on socket FWOxVf2Ep6XzEbN_AAAA with id 65337975
ERROR: '[Vue warn]: Unknown custom element: <el-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR: '[Vue warn]: Unknown custom element: <el-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR: '[Vue warn]: Unknown custom element: <el-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR: '[Vue warn]: Unknown custom element: <el-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR: '[Vue warn]: Unknown custom element: <el-form-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-form-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR: '[Vue warn]: Unknown custom element: <el-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR: '[Vue warn]: Unknown custom element: <el-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR: '[Vue warn]: Unknown custom element: <el-form-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-form-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR: '[Vue warn]: Unknown custom element: <el-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR: '[Vue warn]: Unknown custom element: <el-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR: '[Vue warn]: Unknown custom element: <el-form-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-form-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR: '[Vue warn]: Unknown custom element: <el-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR: '[Vue warn]: Unknown custom element: <el-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR: '[Vue warn]: Unknown custom element: <el-form-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-form-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR: '[Vue warn]: Unknown custom element: <el-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR: '[Vue warn]: Unknown custom element: <el-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR: '[Vue warn]: Unknown custom element: <el-form-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-form-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR: '[Vue warn]: Unknown custom element: <el-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
ERROR LOG: '[Vue warn]: Unknown custom element: <el-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

PhantomJS 2.1.1 (Windows 7.0.0) Login.vue should render correct contents FAILED
        null is not an object (evaluating 'vm.$el.querySelector('p.alert-success').textContent')
        webpack:///test/unit/specs/Hello.spec.js:8:51 <- index.js:44004:51
        callFn@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4481:25
        run@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4473:13
        runTest@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4969:13
        F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:5075:19
        next@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4887:16
        F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4897:11
        next@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4821:16
        F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4865:9
        timeslice@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:82:27
PhantomJS 2.1.1 (Windows 7.0.0): Executed 1 of 1 (1 FAILED) (0 secs / 0.075 secs)

  Login.vue
    ×should render correct contents
        null is not an object (evaluating 'vm.$el.querySelector('p.alert-success').textContent')
        webpack:///test/unit/specs/Hello.spec.js:8:51 <- index.js:44004:51
        callFn@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4481:25
        run@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4473:13
        runTest@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4969:13
        F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:5075:19
        next@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4887:16
        F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4897:11
        next@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4821:16
        F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:4865:9
        timeslice@F:/documentbak/4_18/bak/vue-esri/node_modules/_mocha@3.5.3@mocha/mocha.js:82:27
PhantomJS 2.1.1 (Windows 7.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.689 secs / 0.075 secs)

PhantomJS 2.1.1 (Windows 7.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.689 secs / 0.075 secs)

=============================== Coverage summary ===============================
Statements   : 14.55% ( 78/536 )
Branches     : 2.63% ( 5/190 )
Functions    : 2.73% ( 3/110 )
Lines        : 15.15% ( 78/515 )
================================================================================
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-esri@1.0.1 unit: `cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-esri@1.0.1 unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-04-18T13_07_02_174Z-debug.log


$ npm run unit

> vue-esri@1.0.1 unit F:\documentbak\4_18\bak\vue-esri
> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

18 04 2018 21:10:22.795:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
18 04 2018 21:10:22.804:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
18 04 2018 21:10:22.824:INFO [launcher]: Starting browser PhantomJS
18 04 2018 21:10:27.143:INFO [PhantomJS 2.1.1 (Windows 7.0.0)]: Connected on socket voWWsOHewTgYnN5UAAAA with id 90720330
PhantomJS 2.1.1 (Windows 7.0.0) Hello.vue should render correct contents FAILED
        expected '\n    由西瓜酱提供包含三种颜色主题的vue后台操作模板\n  ' to equal '由西瓜酱提供包含三种颜色主题的vue后台操作模板'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 1 of 1 (1 FAILED) (0 secs / 0.032 secs)

  Hello.vue
    ×should render correct contents
        expected '\n    由西瓜酱提供包含三种颜色主题的vue后台操作模板\n  ' to equal '由西瓜酱提供包含三种颜色主题的vue后台操作模板'
PhantomJS 2.1.1 (Windows 7.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.078 secs / 0.032 secs)

PhantomJS 2.1.1 (Windows 7.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.078 secs / 0.032 secs)

=============================== Coverage summary ===============================
Statements   : 13.81% ( 74/536 )
Branches     : 2.63% ( 5/190 )
Functions    : 2.73% ( 3/110 )
Lines        : 14.37% ( 74/515 )
================================================================================
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-esri@1.0.1 unit: `cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-esri@1.0.1 unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-04-18T13_10_29_409Z-debug.log

修改`./test/unit/specs/Hello.spec.js`文件为

import Vue from 'vue'
import Hello from '@/pages/Hello'

describe('Hello.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(Hello)
    const vm = new Constructor().$mount()
    expect(vm.$el.querySelector('p.alert-success').textContent)
      .to.equal('\n    由西瓜酱提供包含三种颜色主题的vue后台操作模板\n  ')
  })
})

执行单元测试

$ npm run unit

> vue-esri@1.0.1 unit F:\documentbak\4_18\bak\vue-esri
> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

18 04 2018 21:15:03.015:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
18 04 2018 21:15:03.024:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
18 04 2018 21:15:03.044:INFO [launcher]: Starting browser PhantomJS
18 04 2018 21:15:07.290:INFO [PhantomJS 2.1.1 (Windows 7.0.0)]: Connected on socket MGiQ9ekueKo13qkcAAAA with id 93646375
PhantomJS 2.1.1 (Windows 7.0.0): Executed 1 of 1 SUCCESS (0 secs / 0.028 secs)

  Hello.vue
PhantomJS 2.1.1 (Windows 7.0.0): Executed 1 of 1 SUCCESS (0.053 secs / 0.028 secs)

PhantomJS 2.1.1 (Windows 7.0.0): Executed 1 of 1 SUCCESS (0.053 secs / 0.028 secs)
TOTAL: 1 SUCCESS

=============================== Coverage summary ===============================
Statements   : 13.81% ( 74/536 )
Branches     : 2.63% ( 5/190 )
Functions    : 2.73% ( 3/110 )
Lines        : 14.37% ( 74/515 )
================================================================================

终于有一个完全通过的案例，可喜可贺。

http://fengmk2.github.io/ppt/unittest-and-bdd-in-nodejs-with-mocha.html

Who am I?我是谁？ Alibaba Data EDP 阿里巴巴数据平台EDP，花名@苏千 CNode, Chinese nodejs community cnodejs.org Github: @fengmk2 Blog: http://fengmk2.github.com Twitter: @fengmk2 Weibo: @Python发烧友 , @FaWave

UnitTest in Nodejs
实战Nodejs单元测试

Who am I?我是谁？

Alibaba Data EDP

阿里巴巴数据平台EDP，花名@苏千

CNode, Chinese nodejs community cnodejs.org

Github: @fengmk2

Blog: http://fengmk2.github.com

Twitter: @fengmk2

Weibo: @Python发烧友 , @FaWave

大纲

为什么要单元测试
Nodejs的单元测试模块
实战短址还原的单元测试

为什么要单元测试

明显没错的代码

connect-redis.js#L80

RedisStore.prototype.get = function(sid, fn){
  sid = this.prefix + sid;
  this.client.get(sid, function(err, data){
    try {
      if (!data) return fn();
      fn(null, JSON.parse(data.toString()));
    } catch (err) {
      fn(err);
    } 
  });
};

没明显错的代码

node-mysql/lib/query.js#L65

if (buffer) {
  row[field.name] += buffer.toString('utf-8');
} else {
  row[field.name] = null;
}

明显有错的代码

node0.6.6 - lib/http.js

Agent.prototype.removeSocket = function(s, name, host, port) {
  if (this.sockets[name]) {
    var index = this.sockets[name].indexOf(s);
    if (index !== -1) {
      this.sockets[name].splice(index, 1);
    }
  } else if (this.sockets[name] && this.sockets[name].length === 0) {
    // don't leak
    delete this.sockets[name];
    delete this.requests[name];
  }
  if (this.requests[name] && this.requests[name].length) {
    // If we have pending requests and a socket gets closed a new one
    // needs to be created to take over in the pool for the one that closed.
    this.createSocket(name, host, port).emit('free');
  }
};

为什么要单元测试

代码质量

代码质量如何度量？如果没有测试你如何保证你的代码质量？

敏捷快速地适应需求

单元测试是否也能让产品经理看得懂？单元测试是否也能成功一个产品需求的Case？

重构

你有足够信心在没有单元测试的情况下发布你的重构代码吗？如何检测你重构的代码符合需要？

增强自信心

全是绿灯！单元测试全部跑通！

眼花缭乱的Nodejs测试模块

unit test in npm

Testing / Spec Frameworks

nodeunit TDD
Expresso TDD (Be sure to check out Expresso's successor Mocha.)
Vows BDD
Mocha BDD
should BDD

BDD: behaviour-driven development

如何选择

示例完整，上手容易，特别是本身就带有很好的示例
文档完善
在许多项目中被使用
准确友好的测试报告
持续改进

Mocha ，我喜欢

Mocha's Features

Mocha 强大的特性列表

browser support | 浏览器支持
simple async support | 非常简单自然地支持异步方式
maps uncaught exceptions to the correct test case | 将未捕获异常对应到正确的测试用例
test-specific timeouts | 能指定具体测试超时时间
reports test durations | 测试时间报告
highlights slow tests | 慢测试高亮显示
use any assertion library you want | 使用任意你想使用的断言库
extensible reporting, bundled with 9+ reporters | 可扩展的报告，并默认自动9中报告格式
before, after, before each, after each hooks | 各种想当然的钩子方法
......

should.js 我应该

我承认，我是@TJ 忠实粉丝... 还有，我喜欢 should 的方式:

代码写起来有意思
让懂英文的产品经理能基本看懂测试用例

A cup of `Mocha`,
test cases `should` pass.

实战短址还原的单元测试

短址还原: urlrar preview

代码目录，创建响应空文件

├─┬ lib/
│  └── urllib.js
├─┬ test/
│  ├── app.test.js
│  ├── mocha.opts
│  └── urllib.test.js
├─┬ node_modules/
│  ├── mocha/
│  ├── should/
│  └── supertest/
├── app.js
├── index.html
├── Makefile
├── package.json
└── RERAME.md

Makefile

TESTS = test/*.test.js
REPORTER = spec
TIMEOUT = 10000
JSCOVERAGE = ./node_modules/jscover/bin/jscover

install:
  @npm install

test:
  @NODE_ENV=test ./node_modules/mocha/bin/mocha \
    --reporter $(REPORTER) \
    --timeout $(TIMEOUT) \
    $(TESTS)

test-cov: lib-cov
  @URLRAR_COV=1 $(MAKE) test
  @URLRAR_COV=1 $(MAKE) test REPORTER=html-cov > coverage.html

lib-cov:
  @rm -rf $@
  @$(JSCOVERAGE) lib $@

.PHONY: install test test-cov lib-cov

运行测试

普通单元测试

$ make test

代码覆盖率

$ make test-cov

mocha.opts

自定义mocha更多参数，例如自动引用一些测试依赖的模块

--require should

方便地进行 http 测试

使用 supertest

request(app)
.get('/foo')
.set('x-userid', 'mk2')
.expect('X-Power-By', 'Nodejs')
.expect(200, done);

确定需求和应用功能

需求

将一个短网址 http://t.cn/StVkqS 还原得到最原始网址 http://nodejs.org/community/
有一个应用主页面
提供API，并支持浏览器能直接调用

应用功能

短网址还原应用
主页面显示介绍和表单，用户可以输入短网址，提交后显示还原结果
支持JSONP的短还原API

行为驱动开发: 实现 “主页面显示介绍和表单”

直接写测试吧：test/app.test.js

var request = require('supertest');
var app = require('../app');

describe('urlrar app', function () {
  before(function (done) {
    app.listen(0, done);
  });

将需求变成测试用例

it('GET / should show the title, a form and a text input', function (done) {
  request(app)
  .get('/')
  .expect(200)
  .expect('X-Power-By', 'Nodejs')
  .end(function (err, res) {
    var body = res.text;
    // 主页面显示介绍和表单
    body.should.include('<title>Shorten URL Expand</title>');
    body.should.include('<form');
    body.should.include('</form>');
    body.should.include('<input');
    done(err);
  });
});

疯了吧？！直接运行测试

$ make test

first test error

实现app.js

var http = require('http');
var parse = require('url').parse;
var fs = require('fs');

var indexHtml = fs.readFileSync('./index.html');

var app = http.createServer(function (req, res) {
  res.setHeader('X-Power-By', 'Nodejs');
  res.setHeader('Content-Type', 'text/html');
  var info = parse(req.url, true);
  if (info.pathname === '/') {
    res.end(indexHtml);
  } 
});

module.exports = app;

再次运行测试

$ make test

index page run success

将应用API和404页面完成

it('GET /api should have an api', function (done) {
  request(app)
  .get('/api')
  .expect(200)
  .expect('X-Power-By', 'Nodejs', done);
});
it('GET /other should not found the page', function (done) {
  request(app)
  .get('/noexists')
  .expect(404)
  .expect('Page Not Found!', done);
});

3 more tests

实现还原功能

`lib/urllib.js` 模块来处理

使用方式将大致想象为如下：

var urllib = require('./lib/urllib');
urllib.expand(shortenURL, function (err, longURL, redirectCount) {
  // go on...
});

urllib.test.js

Test Cases

var mapping = [ 
  [ 'http://www.baidu.com/', 'http://www.baidu.com/' ],
  [ 'http://t.cn/StVkqS', 'http://nodejs.org/community/' ],
  [ 'http://url.cn/48JGfK', 'http://baike.baidu.com/view/6341048.htm' ],
  [ 'http://t.cn/aK1IFu', 'http://v.youku.com/v_show/id_XMjc2MjY1NjEy.html' ],
   // 2 times redirect
  [ 'http://url.cn/3OMI3O', 'http://v.youku.com/v_show/id_XMjc2MjY1NjEy.html', 2 ],
  [ 'http://luo.bo/17221/', 'http://luo.bo/17221/' ],
  [ 'http://t.itc.cn/LLHD6', 'http://app.chrome.csdn.net/work_detail.php?id=57' ],
];

正常使用方式测试

var desc = 'should expand ' + mapping.length + ' shorten urls success';
it(desc, function (done) {
  var counter = 0;
  mapping.forEach(function (map) {
    urllib.expand(map[0], function (err, longurl, redirectCounter) {
      should.not.exist(err);
      map[1].should.equal(longurl);
      if (map[2]) {
        redirectCounter.should.equal(map[2]);
      }
      if (++counter === mapping.length) {
        done();
      }
    })
  })
})

urllib.js#expand() 实现

exports.expand = function (url, callback) {
  var info = parse(url);
  var options = {
    hostname: info.hostname,
    path: info.path,
    method: 'HEAD'
  };
  var request = info.protocol === 'https:' ? 
    https.request : http.request;
  var req = request(options);

urllib.js#expand()实现2

  if (callback.__redirectCounter === undefined) {
    callback.__redirectCounter = 0;
  }
  req.on('response', function (res) {
    if (res.statusCode === 301 || res.statusCode === 302) {
      var location = res.headers['location'];
      if (++callback.__redirectCounter > exports.maxRedirect) {
        return callback(null, location, callback.__redirectCounter);
      }
      return exports.expand(location, callback);
    }
    callback(null, url, callback.__redirectCounter);
  });
  req.end();
};

exports.maxRedirect = 5;

非法输入参数情况

it('should return empty string when shorturl set wrong', function (done) {
  urllib.expand('', function (err, longurl) {
    should.not.exist(err);
    should.not.exist(longurl);
    done();
  })
});

it('should throw error when pass null', function () {
  try {
    urllib.expand();
  } catch (e) {
    e.name.should.equal('TypeError');
    e.message.should.equal('undefined is not a function');
  }
  (function () {
    urllib.expand();
  }).should.throw();
  (function () {
    urllib.expand(null);
  }).should.throw();
});

服务器异常怎么办？

  describe('expand() server Error', function () {
    var app = http.createServer(function (req, res) {
      res.destroy();
    });

    before(function (done) {
      app.listen(0, done);
    });

    it('should return error when server error', function (done) {
      var url = 'http://localhost:' + app.address().port + '/foo';
      urllib.expand(url, function (err, longurl) {
        should.exist(err);
        err.should.be.an.instanceof(Error);
        err.message.should.equal('connect ECONNREFUSED');
        done();
      });
    });
  });

处理异常

  var req = request(options);
  req.on('error', function (err) {
    callback(err, url, callback.__redirectCounter);
  });
  req.on('response', function (res) {
    // ...

实现 API 功能

测试先行

it('GET /api?u=http://t.cn/StVkqS should worked', function (done) {
  request(app)
  .get('/api?u=http://t.cn/StVkqS')
  .expect(200)
  .expect('http://nodejs.org/community/', done);
});

实现代码

var app = http.createServer(function (req, res) {
  // ...

  if (info.pathname === '/api') {
    var query = info.query;
    if (!query.u) {
      return res.end('`u` argument required.')
    }
    urllib.expand(query.u, function (err, longurl) {
      if (query.cb) {
        longurl = query.cb + '(' + JSON.stringify(longurl) + ')';
      }
      res.end(longurl);
    });
    return;
  }

  // ...
});

绿灯通行

$ make test

test all pass

辅助模块

pedding: https://github.com/fengmk2/pedding
mm: https://github.com/fengmk2/mm, Mock Mate, Mock伴侣

pedding: Just pedding for callback

例如上面出现的测试用例，验证的输入参数有多种情况，我们会使用计数器来判断是否全部完成。

it(desc, function (done) {
  var counter = 0;
  mapping.forEach(function (map) {
    urllib.expand(map[0], function (err, longurl, redirectCounter) {
      should.not.exist(err);
      longurl.should.equal(map[1]);
      redirectCounter.should.equal(map[2]);
      if (++counter === mapping.length) {
        done();
      }
    })
  })
});

使用 pedding 之后

it(desc + ' with pedding', function (done) {
  done = pedding(mapping.length, done);
  mapping.forEach(function (map) {
    urllib.expand(map[0], function (err, longurl, redirectCounter) {
      should.not.exist(err);
      longurl.should.equal(map[1]);
      redirectCounter.should.equal(map[2]);
      done();
    })
  })
});

mm: Mock伴侣

mock mate, easy to mock http request, fs access and so on.

模拟 `fs.readFile` 返回错误

var mm = require('mm');
var fs = require('fs');

mm.error(fs, 'readFile', 'mock fs.readFile return error');

fs.readFile('/etc/hosts', 'utf8', function (err, content) {
  console.log(err); // should return mock err: err.name === 'MockError'

  mm.restore(); // remove all mock effects.

  fs.readFile('/etc/hosts', 'utf8', function (err, content) {
    console.log(err); // should return null
    console.log(content); // should show the host list
  });
});

模拟任何你想返回的结果

var fs = require('fs');
var mm = require('mm');

mm(fs, 'readFile', function (path, callback) {
  var content = new Buffer('file contents here');
  process.nextTick(callback.bind(null, null, content));
});

mowatermelon / studyNode

2018/04/18 #107

修改了Hello.spec.js

重新尝试单元检测

配置babel-polyfill

重新尝试单元检测

删除node_modules，重新安装一遍所以依赖

尝试在build/webpack.base.conf.js文件中import babel-polyfill，然后执行单元测试，失败

修改build/webpack.base.conf.js文件的babel-loader配置

重新尝试单元检测

决定尝试一下代码检测

尝试e2e测试（类似于黑盒测试）

修改test/e2e/specs/test.js配置

重新执行测试

前端实现自动化就要借助到unit和e2e端到端测试了

unit测试

e2e测试

总结

一、单元测试

1. 需要安装的项目：

2. 配置参数及运行命令：

配置执行命令，然后在终端输入npm run unit就可以进行单元测试了

二、e2e(模拟用户行为的测试)

1. 需要安装的npm包

2. 原理简要说明

3. 相关代码展示

nightwatch配置参数

添加测试工具包

增加测试代码

编写runner.js

配置执行命令，然后在终端输入npm run e2e就可以进行单元测试了

重新尝试黑盒检测

无回调的链式操作

丰富的API

内置断言库

支持Xpath...

再次尝试单元测试

修改文件test/unit/karma.conf.js

修改文件build/webpack.base.conf.js

执行命令

再次尝试单元测试

修改文件test/unit/karma.conf.js

再次执行单元测试

提取上文错误重点

修改./test/unit/specs/Hello.spec.js文件为

执行单元测试

UnitTest in Nodejs 实战Nodejs单元测试

Who am I?我是谁？

Alibaba Data EDP

阿里巴巴数据平台EDP，花名@苏千

CNode, Chinese nodejs community cnodejs.org

Github: @fengmk2

Blog: http://fengmk2.github.com

Twitter: @fengmk2

Weibo: @Python发烧友 , @FaWave

大纲

为什么要单元测试

明显没错的代码

没明显错的代码

明显有错的代码

为什么要单元测试

代码质量

敏捷快速地适应需求

重构

增强自信心

眼花缭乱的Nodejs测试模块

Testing / Spec Frameworks

如何选择

Mocha ，我喜欢

Mocha 强大的特性列表

should.js 我应该

A cup of Mocha, test cases should pass.

实战短址还原的单元测试

代码目录，创建响应空文件

Makefile

运行测试

普通单元测试

代码覆盖率

mocha.opts

自定义mocha更多参数，例如自动引用一些测试依赖的模块

修改了`Hello.spec.js`

配置`babel-polyfill`

尝试在`build/webpack.base.conf.js`文件中`import babel-polyfill`，然后执行单元测试，失败

修改`build/webpack.base.conf.js`文件的`babel-loader`配置

修改`test/e2e/specs/test.js`配置

配置执行命令，然后在终端输入`npm run unit`就可以进行单元测试了

编写`runner.js`

配置执行命令，然后在终端输入`npm run e2e`就可以进行单元测试了

修改文件`test/unit/karma.conf.js`

修改文件`build/webpack.base.conf.js`

修改文件`test/unit/karma.conf.js`

修改`./test/unit/specs/Hello.spec.js`文件为

UnitTest in Nodejs
实战Nodejs单元测试

A cup of `Mocha`,
test cases `should` pass.

`lib/urllib.js` 模块来处理

模拟 `fs.readFile` 返回错误