README.md 9.11 KB
Newer Older
1 2 3 4
istanbul-middleware-ry
===================
## 新增使用方法
需先全局安装pm2: npm install pm2@5.2.0 -g --save-dev
5

6
代码查看npm包安装:
7 8 9 10 11 12 13
```javascript
    启动查看服务命令(本地调试) 
    coverage -n || coverage --nodemon(本地调试方案建议使用此方案退出ctrl + ccontrol + c
    启动查看服务命令coverage -s || coverage --serve
    关闭查看服务命令coverage -c || coverage --close
    查看命令使用方法coverage -h  || coverage --help
```
14
可传入参数
15 16 17 18

是否收集上报数据进行展示如为false则其他的不触发 

IS_PITCHING_PILE (string):true/false 默认 true 
19
自动启动服务时的端口号 FRACTION_OF_COVERAGE_PORT(string): 默认10000 
20

21
项目中添加js文件以vue为例:
22

23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249
src目录下添加xxxx.js,在main.js下引用import './xxxx.js'
.gitignore下添加忽略文件/src/xxxx.js,上传提交时记得注释main.js下的import './xxxx.js'
请求地址为启动覆盖服务的地址如服务端口号为10001: 'http://localhost:10001/coverage/client',
上报覆盖率调用接口写法:
点击上报:
```javascript
import axios from 'axios'
let istanbulSync = () => {
  if (window.__coverage__) {
    console.log(window.__coverage__, 'window.__coverage__')
    axios({
      method: 'post',
      url: 'http://localhost:10000/coverage/client',
      contentType: 'application/json',
      data: window.__coverage__
    })
  }
}
window.onload = () => {
  istanbulSync()
}
// 点击上报
document.body.addEventListener('click', istanbulSync)
```
轮询上报:
```javascript
// 循环上报
 setInterval(function () {
            istanbulSync()
  }, REGULAR_REPORT_TO_DATA)
```
添加按钮主动上报:
```javascript
// 按钮主动上报
        var element = document.createElement("input");
        element.setAttribute("type", "button");
        element.setAttribute("value", "点击上报");
        element.setAttribute("style", "background: rgb(45, 140, 240); border: 0; position: fixed; color: #fff; bottom: 50px; right: 50px; width: 60px; height: 60px; border-radius: 50%; font-size: 12px; text-align: center; padding: 0; z-index: 9999")
        element.setAttribute("onclick", "istanbulSync()");
        document.body.appendChild(element);
```
启动命令事例:coverage -n FRACTION_OF_COVERAGE_PORT=10001 || coverage -s FRACTION_OF_COVERAGE_PORT=10001
Connect middleware for getting code coverage numbers in functional tests for nodejs apps using istanbul.

Run the sample app at `test/app` to get a feel for how this works.

All of this is experimental and is known to work for narrow use-cases such as an express3 app. YMMV.

Server-side code coverage
-------------------------

This involves:

* hooking `require()` in the server process
* exposing coverage information on special endpoints (e.g. `/coverage`)
* allowing reset of coverage numbers to ensure clean slate
* allowing users to download coverage reports after tests have run

```javascript
var im = require('istanbul-middleware'),
    isCoverageEnabled = (process.env.COVERAGE == "true"); // or a mechanism of your choice
//before your code is require()-ed, hook the loader for coverage
if (isCoverageEnabled) {
    console.log('Hook loader for coverage - ensure this is not production!');
    im.hookLoader(__dirname);
        // cover all files except under node_modules
        // see API for other options
}
// now require the rest of your code
var stuff = require('./lib'),
    express = require('express'),
    app = express();
// set up basic middleware
// ...
// add the coverage handler
if (isCoverageEnabled) {
    //enable coverage endpoints under /coverage
    app.use('/coverage', im.createHandler());
}
//add your router and other endpoints
//...
app.listen(80);
```

The above snippet adds the following endpoints to your app under `/coverage`

<table>
<thead>
    <tr>
        <th>URL</th>
        <th>Description</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><code>GET&nbsp;/</code></td>
        <td>
            Dynamic code coverage HTML report showing live coverage.
            Clickable  with drill-downs just like the static version
        </td>
    </tr>
    <tr>
        <td><code>POST&nbsp;/reset</code></td>
        <td>Reset coverage to baseline numbers</td>
    </tr>
    <tr>
        <td><code>GET&nbsp;/download</code></td>
        <td>Download a zip file with coverage JSON, HTML and lcov reports</td>
    </tr>
    <tr>
        <td><code>POST&nbsp;/client</code></td>
        <td>
            Allows you to post a coverage object for client-side code coverage from the browser.
            Must be a JSON object with a <code>Content-type: application/json</code> header.
            This object is aggregated with the stats already present on the server
        </td>
    </tr>
</tbody>
</table>

Client-side coverage
--------------------

This involves:

* Delivering instrumented code instead of the original Javascript to the browser
* Having your tests post the coverage information to the server (see `POST /client` endpoint above)
using the `window.__coverage__` object. You need to figure out how to do this using your favorite test runner.
* Aggregating the client and server coverage numbers. This is automatically done for you by the server-side middleware.

The API for this is _highly_ experimental given the number of moving parts. But, it roughly looks like this:

```javascript
var path = require('path'),
    im = require('istanbul-middleware');
// do the server side stuff as described above
// add a client handler at the appropriate place
// (before your static handler, for example)
// all JS files under here will be sent instrumented to the browser
// see API below for additional options (e.g. ignoring framework code)
app.use(im.createClientHandler(__dirname));
// however, it will only reliably work for simple cases
// such as absolute URLs to the JS.
// you still need to post the coverage numbers to the
//server from your browser tests
```

You can write your own custom middleware and completely ignore this library's client handler. As in:

```javascript
app.use(function (req, res, next) {
    if (isJSRequiringCoverage(req)) {
        var file = getFilePath(req), //translate request to file name to be delivered
            code = readTheCodeFromFile(file), //use async for a real implementation
            instrumenter = im.getInstrumenter();
        res.send(instrumenter.instrumentSync(code, file));
            //exception handling omitted for brevity
    } else {
        next();
    }
});
```

API
---

### `istanbulMiddleware.hookLoader(rootOrMatcher, instrumenterOpts)`

hooks `require` for coverage using istanbul.

`rootOrMatcher` can be:

* a string in which case it is assumed to be the root under which you want to cover all files except those under `node_modules`
* a function in which case it is assumed to be a match function with signature `fn(filePath)`
that should return `true` when the supplied `filePath` should be covered and `false` otherwise

`instrumenterOpts` is an optional object with additional options to be passed to the istanbul instrumenter. See the
API docs in istanbul for more information. In addition, options can also contain the `postLoadHook` key that is
passed to `istanbul.hook.hookRequire()`


### `istanbulMiddleware.createHandler(opts)`

returns connect middleware that exposes additional endpoints for coverage. Endpoints exposed are documented in the summary.

`opts` is optional and currently only supports one flag.

* `resetOnGet` - boolean to allow resets of coverage to baseline numbers using `GET` in addition to `POST`

### `istanbulMiddleware.createClientHandler(root, opts)`

returns connect middleware similar to the `static` middleware to return instrumented JS to the client.
The default behavior of the middleware is to intercept all `GET` requests to Javascript files and return the
instrumented version by deriving the path of the file from the URL, instrumenting the code and sending the
instrumented version in the response.

`opts` is an optional object with the following supported keys:

* `matcher` - a function of the form `fn(request)` that returns true if instrumentation
is required and false otherwise.
* `pathTransformer` - a function of the form `fn(request)` that inspects the request URL
and returns the physical path to the JS file on the filesystem.

An example of a matcher function could be:

```javascript
function ignoreFrameworks(req) {
    var parsed = require('url').parse(req.url);
    return parsed.pathname && parsed.pathname.match(/\.js$/) && !parsed.pathname.match(/jquery/);
}
```

For all other cases where the client handler provided by this library is not good enough, just write your own
middleware as documented in the summary.

### `istanbulMiddleware.getInstrumenter()`

returns the instrumenter object that is created as a side-effect of the `hookLoader` call. Useful for custom
client-side instrumentation to ensure that the instrumentation is done with the same options for all code.

Third-party libraries
---------------------

The following third-party libraries are used by this module:

* express: https://github.com/visionmedia/express -  to implement the middleware
* archiver: https://github.com/ctalkington/node-archiver - for zip functionality