Skip to content

I
istanbul-middleware-ry
Commit b5e09ee6 by lxyang
Options

feat：0.0.3修改说明文档

parent a83200b9
Showing with 117 additions and 230 deletions
README.md
istanbul-middleware-ry
===================
## 新增使用方法
需先全局安装pm2： npm install pm2@5.2.0 -g --save-dev
## Istanbul-middleware-ry is modified from istanbul-middleware
## istanbul-middleware-ry是由istanbul-middleware修改而来
## istanbul-middleware documentation can be found here
http://www.javascriptcn.com/post/50323
## istanbul-middleware 文档可参考
https://blog.csdn.net/heromps/article/details/109356164
代码查看npm包安装：
```javascript
启动查看服务命令（本地调试）
coverage -n || coverage --nodemon（本地调试方案建议使用此方案退出ctrl + c或control + c）
启动查看服务命令coverage -s || coverage --serve
关闭查看服务命令coverage -c || coverage --close
查看命令使用方法coverage -h || coverage --help
```
可传入参数
是否收集上报数据进行展示如为false则其他的不触发
IS_PITCHING_PILE (string)：true/false 默认 true
自动启动服务时的端口号 FRACTION_OF_COVERAGE_PORT(string)： 默认10000
### npm install it:
项目中添加js文件以vue为例：
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)
npm install istanbul-middleware -g
```
添加按钮主动上报：
```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);
### npm安装方法
```
启动命令事例：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());
npm install istanbul-middleware -g
```
* npm address：https://www.npmjs.com/package/istanbul-middleware-ry
* Gitlab address：https://git.minrow.com/ry/istanbul-middleware-ry
* npm 地址：https://git.minrow.com/ry/istanbul-middleware-ry
* Gitlab 地址：https://git.minrow.com/ry/babel-plugin-ry-istanbul
## Add global command `coverage` description
| property | explain | Other |
| ------------------- | ------------------------------------------------------------ | -------- |
| coverage -n || coverage --nodemon | Start the view service command (nodemon listening service mode) | This command is a local debugging solution |
| coverage -s || coverage --serve | Start the view service command (pm2 listening service mode) | This command is a local debugging solution |
| coverage -c || coverage --close | Close the view service command | Used when a service port fails to close properly |
| coverage -h || coverage --help | See how to use the command | without |
| 属性 | 说明 | 其他 |
| ------------------- | ------------------------------------------------------------ | -------- |
| coverage -n || coverage --nodemon | 启动查看服务命令(nodemon监听服务方式) | 此命令为本地调试方案 |
| coverage -s || coverage --serve | 启动查看服务命令(pm2监听服务方式) | 此命令为本地调试方案 |
| coverage -c || coverage --close | 关闭查看服务命令 | 当服务端口未能正常关闭时使用 |
| coverage -h || coverage --help | 查看命令使用方法 | 无 |
## Use method and delete interface description
### New usage methods
* New global order 'coverage - n' startup code coverage check service, provide code coverage check services, access: 'http://localhost:10000/coverage/client' can view, related command to view above.
* To use the command, install pm2: `npm install pm2@5.2.0 -g --save-dev`
* It is recommended that `nyc` be installed in the project to collect instrumentation files：`npm install nyc --save-dev`
* `nyc` Configuration Using `vue` as an example, add an `nyc` object to `package.json` at the same level as `scripts`, as shown in the following code.
* Add nyc configuration to package.js：
```
{
"script": {
......
},
"dependencies": {
......
},
"devDependencies": {
......
},
"nyc": {
"include": [
"html",
"text-summary"
],
"extension": [
".js",
".vue",
".jsx"
]
}
}
//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
### Cut the interface
* Remove the `GET /download` interface
## 使用方法和删减接口说明
### 新增使用方法
* 新增全局命令`coverage -n`启动代码覆盖率查看服务，提供代码覆盖率查看服务，访问：'http://localhost:10000/coverage/client’ 即可查看,相关命令可查看上方命令说明。
* 使用命令前需在项目代码中安装pm2: `npm install pm2@5.2.0 -g --save-dev`
* 推荐项目中安装`nyc`用于收集插装文件：`npm install nyc --save-dev`
* `nyc`配置以`vue`为例，`package.json`中与`scripts`平级添加`nyc` 对象，如下代码所示。
* Add nyc configuration to package.js：
```
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();
{
"script": {
......
},
"dependencies": {
......
},
"devDependencies": {
......
},
"nyc": {
"include": [
"html",
"text-summary"
],
"extension": [
".js",
".vue",
".jsx"
]
}
});
}
```
### 删减接口
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)`
* 删除 `GET /download`接口
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.
## Description of New Features
* A new global command `coverage` is added to start or stop the coverage viewing service
1. Through the (`coverage - n | | coverage - nodemon`) or (`coverage -s || coverage --serve`) start the coverage checking service.
2. Through the `coverage - c | | coverage - close` close coverage checking service.
3. Through the `coverage - h | | coverage -- help` query service coverage
## 新增功能说明
* 新增全局命令`coverage`用于启动或关闭覆盖率查看服务
1. 通过（`coverage -n || coverage --nodemon`）或（`coverage -s || coverage --serve`）启动覆盖率查看服务。
2. 通过`coverage -c || coverage --close`关闭覆盖率查看服务。
3. 通过`coverage -h || coverage --help`查询覆盖率服务执行命令
### `istanbulMiddleware.getInstrumenter()`
## ry-istanbul-web
* NPM address：https://www.npmjs.com/package/ry-istanbul-web
* GitLab address：https://git.minrow.com/ry/istanbul-web
* NPM地址：https://www.npmjs.com/package/ry-istanbul-web
* GitLab地址：https://git.minrow.com/ry/istanbul-web
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.
* [ry-istok-web](https://www.npmjs.com/package/ry-istanbul-web) is modified from [istanbul](https://www.npmjs.com/package/istanbul), adding the changeLists array of window.__coverage__ for viewing the incremental code
* [ry-istok-web](https://www.npmjs.com/package/ry-istanbul-web)是由[istanbul](https://www.npmjs.com/package/istanbul)改装而来，增加window.__coverage__的changeLists数组用于查看增量代码
Third-party libraries
---------------------
### babel-plugin-istanbul-ry
* NPM address：https://www.npmjs.com/package/babel-plugin-istanbul-ry
* GitLab address：https://git.minrow.com/ry/babel-plugin-ry-istanbul
* NPM地址：https://www.npmjs.com/package/babel-plugin-istanbul-ry
* GitLab地址：https://git.minrow.com/ry/babel-plugin-ry-istanbul
The following third-party libraries are used by this module:
* [babel-plugin-istanbul-ry](https://www.npmjs.com/package/babel-plugin-istanbul-ry) bable instrumentation plugin is modified from [babel-plugin-istanbul](https://www.npmjs.com/package/babel-plugin-istanbul) to add incremental code instrumentation methods.
* express: https://github.com/visionmedia/express - to implement the middleware
* archiver: https://github.com/ctalkington/node-archiver - for zip functionality
* [babel-plugin-istanbul-ry](https://www.npmjs.com/package/babel-plugin-istanbul-ry) bable插桩插件由[babel-plugin-istanbul](https://www.npmjs.com/package/babel-plugin-istanbul)改造而来，增加增量代码插桩方法。
package.json
{
"name": "istanbul-middleware-ry",
"description": "Connect middleware for Istanbul to handle server-side as well as browser coverage use-cases for node apps",
"version": "0.0.2",
"version": "0.0.3",
"main": "lib/index.js",
"files": [
"lib"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment