2 |
<html> |
<html> |
3 |
<head> |
<head> |
4 |
<title>JSCoverage user manual</title> |
<title>JSCoverage user manual</title> |
5 |
<link type="text/css" href="doc.css" rel="stylesheet"> |
<link rel="stylesheet" type="text/css" href="sh_nedit.min.css"> |
6 |
|
<script src="sh_main.min.js"></script> |
7 |
|
<script src="sh_html.min.js"></script> |
8 |
|
<script src="sh_javascript.min.js"></script> |
9 |
|
<link rel="stylesheet" type="text/css" href="doc.css"> |
10 |
</head> |
</head> |
11 |
<body> |
<body onload="sh_highlightDocument();"> |
12 |
|
|
13 |
<h1>JSCoverage user manual</h1> |
<h1>JSCoverage user manual</h1> |
14 |
|
|
15 |
<p> |
<p> |
16 |
JSCoverage is a tool used to measure code coverage in JavaScript programs. |
JSCoverage is a tool that measures code coverage in JavaScript programs. |
17 |
</p> |
</p> |
18 |
|
|
19 |
<p> |
<p> |
78 |
<h2>Using the <code>jscoverage</code> program</h2> |
<h2>Using the <code>jscoverage</code> program</h2> |
79 |
|
|
80 |
<p> |
<p> |
81 |
Using the <code>jscoverage</code> program requires the following steps: |
Using the <code>jscoverage</code> program involves the following steps: |
82 |
</p> |
</p> |
83 |
|
|
84 |
<h3>1. Instrumenting code</h3> |
<h3>1. Instrumenting code</h3> |
272 |
you launch JSCoverage. To do this you need to add some code to your test page: |
you launch JSCoverage. To do this you need to add some code to your test page: |
273 |
</p> |
</p> |
274 |
|
|
275 |
<pre> |
<pre class="sh_javascript"> |
276 |
window.open("path/to/jscoverage.html"); |
window.open('path/to/jscoverage.html'); |
277 |
</pre> |
</pre> |
278 |
|
|
279 |
<p> |
<p> |
288 |
attach it to a button: |
attach it to a button: |
289 |
</p> |
</p> |
290 |
|
|
291 |
<pre> |
<pre class="sh_html"> |
292 |
<button onclick='window.open("path/to/jscoverage.html");'>Coverage report</button> |
<button onclick="window.open('path/to/jscoverage.html');">Coverage report</button> |
293 |
</pre> |
</pre> |
294 |
|
|
295 |
<p> |
<p> |
375 |
<h2>Using the <code>jscoverage-server</code> program</h2> |
<h2>Using the <code>jscoverage-server</code> program</h2> |
376 |
|
|
377 |
<p> |
<p> |
378 |
The <code>jscoverage-server</code> program is a simple web server which will |
The <code>jscoverage-server</code> program is a simple web server. You can use |
379 |
serve files from the current directory. You can use |
<code>jscoverage-server</code> to serve files from the <code>doc/example/</code> |
380 |
<code>jscoverage-server</code> to serve <code>doc/example</code>: |
directory: |
381 |
</p> |
</p> |
382 |
|
|
383 |
<pre> |
<pre> |
386 |
</pre> |
</pre> |
387 |
|
|
388 |
<p> |
<p> |
389 |
By default, the server runs on port 8080. URLs are mapped to files in the |
Once the server is running, you can access the JSCoverage web interface by |
390 |
<code>doc/example</code> directory: e.g., the URL |
visiting the URL <code>http://127.0.0.1:8080/jscoverage.html</code>, and you can |
391 |
<code>http://127.0.0.1:8080/index.html</code> can be used to request |
load the <code>doc/example/index.html</code> file by entering |
392 |
<code>doc/example/index.html</code>. In addition, the special URL |
<code>index.html</code> in the "URL" input field. (Or you can do this all in |
393 |
<code>http://127.0.0.1:8080/jscoverage.html</code> provides the JSCoverage web |
one step by loading the URL |
394 |
interface. Note that it is not necessary that a file named |
<code>http://127.0.0.1:8080/jscoverage.html?index.html</code> in your web |
395 |
<code>jscoverage.html</code> exist; the JSCoverage web |
browser.) The |
396 |
interface is built into the server, and it will automatically be served when the special |
<code>jscoverage-server</code> program automatically instruments any served |
|
<code>/jscoverage.html</code> URL is requested. |
|
|
</p> |
|
|
|
|
|
<p> |
|
|
You can use the <code>/jscoverage.html</code> URL in the same way as the |
|
|
<code>jscoverage.html</code> file generated by the <code>jscoverage</code> |
|
|
program. For example, you can visit the URL |
|
|
<code>http://127.0.0.1:8080/jscoverage.html?index.html</code> to execute the |
|
|
JavaScript associated with the <code>index.html</code> page. The |
|
|
<code>jscoverage-server</code> program automatically instruments all served |
|
397 |
JavaScript code, so that code coverage data will be gathered as the code is |
JavaScript code, so that code coverage data will be gathered as the code is |
398 |
executed in your browser. |
executed in your browser. |
399 |
</p> |
</p> |
409 |
<p> |
<p> |
410 |
When you click the "Store" button, the coverage data will be saved to a directory named <code>jscoverage-report/</code>. |
When you click the "Store" button, the coverage data will be saved to a directory named <code>jscoverage-report/</code>. |
411 |
You can view this stored report at any time by opening the file <code>jscoverage-report/jscoverage.html</code> in |
You can view this stored report at any time by opening the file <code>jscoverage-report/jscoverage.html</code> in |
412 |
your web browser - you don't need the <code>jscoverage-server</code> running to see it. |
your web browser - you don't need the <code>jscoverage-server</code> running to access it. |
413 |
</p> |
</p> |
414 |
|
|
415 |
<p> |
<p> |
420 |
</p> |
</p> |
421 |
|
|
422 |
<p> |
<p> |
|
You can also store data programmatically from your tests by adding the following to your |
|
|
JavaScript code: |
|
|
</p> |
|
|
|
|
|
<pre> |
|
|
if (top.jscoverage_report) { |
|
|
top.jscoverage_report(); |
|
|
} |
|
|
</pre> |
|
|
|
|
|
<p> |
|
423 |
You can stop the server by running another instance of <code>jscoverage-server</code> with the |
You can stop the server by running another instance of <code>jscoverage-server</code> with the |
424 |
<code>--shutdown</code> option: |
<code>--shutdown</code> option: |
425 |
</p> |
</p> |
485 |
|
|
486 |
<h2>Advanced topics</h2> |
<h2>Advanced topics</h2> |
487 |
|
|
488 |
|
<h3>Storing coverage reports programmatically</h3> |
489 |
|
|
490 |
|
<p> |
491 |
|
If you are executing a test suite using <code>jscoverage-server</code>, you can |
492 |
|
store a coverage report programmatically by having your test suite call the |
493 |
|
<code>jscoverage_report</code> function (automatically generated by |
494 |
|
<code>jscoverage-server</code>) after all your tests have finished running: |
495 |
|
</p> |
496 |
|
|
497 |
|
<pre class="sh_javascript"> |
498 |
|
if (top.jscoverage_report) { |
499 |
|
top.jscoverage_report(); |
500 |
|
} |
501 |
|
</pre> |
502 |
|
|
503 |
|
<p> |
504 |
|
You can specify the name of the directory in which to store the report by |
505 |
|
passing the name as a parameter to the <code>jscoverage_report</code> function: |
506 |
|
</p> |
507 |
|
|
508 |
|
<pre class="sh_javascript"> |
509 |
|
if (top.jscoverage_report) { |
510 |
|
// determine the directory name based on the browser |
511 |
|
var directory; |
512 |
|
if (/MSIE/.test(navigator.userAgent)) { |
513 |
|
directory = 'IE'; |
514 |
|
} |
515 |
|
else { |
516 |
|
directory = 'other'; |
517 |
|
} |
518 |
|
top.jscoverage_report(directory); |
519 |
|
} |
520 |
|
</pre> |
521 |
|
|
522 |
|
<p> |
523 |
|
This directory will be a subdirectory under the <code>jscoverage-report/</code> |
524 |
|
directory (or whatever is specified with the <code>--report-dir</code> option). |
525 |
|
Using the above example, the report would be stored to either |
526 |
|
<code>jscoverage-report/IE/</code> or <code>jscoverage-report/other/</code>. |
527 |
|
</p> |
528 |
|
|
529 |
<h3>Conditional directives</h3> |
<h3>Conditional directives</h3> |
530 |
|
|
531 |
<p> |
<p> |
532 |
Sometimes you may wish to exclude certain lines of code from coverage |
Sometimes you may wish to exclude certain lines of code from coverage |
533 |
statistics. Some lines of code may be executed only in certain browsers; other |
statistics. Some lines of code may be executed only in certain browsers; other |
534 |
lines should never be executed at all (they may only be present to detect |
lines should never be executed at all (they may be present only to detect |
535 |
programming errors). You can use specially formatted comments in your code, |
programming errors). You can use specially formatted comments in your code, |
536 |
called <dfn>conditional directives</dfn>, to tell JSCoverage when to exclude |
called <dfn>conditional directives</dfn>, to tell JSCoverage when to exclude |
537 |
those lines from coverage statistics. These lines will be ignored in the |
those lines from coverage statistics. These lines will be ignored in the |
620 |
statements, you may get strange results. |
statements, you may get strange results. |
621 |
<li>JSCoverage uses frames. Some web pages that use frames may not function properly when run under JSCoverage, especially |
<li>JSCoverage uses frames. Some web pages that use frames may not function properly when run under JSCoverage, especially |
622 |
those which try to access the top-level frame (<code>window.top</code>, <code>target="_top"</code>, etc.). |
those which try to access the top-level frame (<code>window.top</code>, <code>target="_top"</code>, etc.). |
623 |
<li>JSCoverage is alpha software. Use at your own risk. |
<li>JSCoverage is distributed without any warranty. See the <a href="license.html">license</a> for more details. |
624 |
</ul> |
</ul> |
625 |
|
|
626 |
<address> |
<address> |