Skip to content

Commit

Permalink
update first half of screenshots in readme see: #3
Browse files Browse the repository at this point in the history
  • Loading branch information
@nelsonic
nelsonic committed Apr 3, 2016
1 parent e61db9b commit e333137
Show file tree
Hide file tree
Showing 10 changed files with 146 additions and 96 deletions.
39 changes: 26 additions & 13 deletions README.md
View file
Expand Up @@ -82,21 +82,27 @@ into the scripts section of your `package.json` and run
npm run coverage
```

This will create a directory called **coverage** where you will find
the generated coverage reports.
In my case:
learning-istanbul/**coverage/lcov-report**/learning-istanbul/**test1.js.html**
This will create a directory in your project called **coverage**
where you will find the generated coverage reports.
In our case:
[learn-istanbul/**coverage/lcov-report**/learning-istanbul/**test1.js.html**]()
If you open the test1.js**.html** file in your browser
you will see a *visual* coverage report:

![Basic coverage report](https://raw.github.com/nelsonic/learning-istanbul/master/screenshots/test1.js-coverage-highlighted.png)


![Basic coverage report](https://cloud.githubusercontent.com/assets/194400/14235269/27f13d9a-f9f1-11e5-9b43-5c8c659717e0.png)

Istanbul gives us four code coverage metrics:
* **Statements**: How many of the [statements](http://www.2ality.com/2012/09/expressions-vs-statements.html) in you code are executed.
* **Branches**: Conditional statements create branches of code which may not be executed (e.g. `if/else`). This metric tells you how many of your branches have been executed.
* **Functions**: The proportion of the functions you have defined which have been called.
* **Lines**: The proportion of lines of code which have been executed.

when you click `test.js` to view the coverage for the file you see:

![learn-istanbul-test js_html](https://cloud.githubusercontent.com/assets/194400/14235369/2e87e3cc-f9f4-11e5-8701-09a5c538f98e.png)

Two things to note in the example above:

- we only get 66.67% coverage because the
Expand All @@ -107,25 +113,32 @@ only 2/3 of the code is being run
This may be a *trivial* example but it shows
exactly where the useless code is.

What is wrong with this picture? :
#### A more "Real World" Example

![97 % Code Coverage](https://raw.github.com/nelsonic/learning-istanbul/master/screenshots/97-percent-code-coverage.png)
What is wrong with the following picture?

I know *plenty* of developers/organisations that can
only *dream* about getting 97% code coverage!
![96 % Code Coverage](https://cloud.githubusercontent.com/assets/194400/14235348/7d80c1de-f9f3-11e5-88bd-de9e4d792c3b.png)

There are *plenty* of developers/organisations that can
only *dream* about getting 96% code coverage!
and yet when we inspect the *detail*, there's
something **Big** slipping through the net!
something ***big*** slipping through the net!

![97 % Code Coverage](https://raw.github.com/nelsonic/learning-istanbul/master/screenshots/97-percent-hides-malicious-code.png)
![learn-istanbul-mischief-on-line-34](https://cloud.githubusercontent.com/assets/194400/14235401/3d8c14fa-f9f5-11e5-946a-d57484b46ce7.png)

We have **100%** *functional* code coverage, but only 75% "**Branch**" Coverage.
We have **100%** *functional* code coverage, but only 50% "**Branch**" Coverage.
This means one or more *conditional execution* branches is not being executed.

We can request that the developer(s) improve the tests to increase coverage:


So everyting is good, *right*?

Most of the time it will be something innocuous but what if a disgruntled
person slipped in something like:

```javascript
if(employee.status == 'terminated' && employee.left - today() > 90) {
if(employee.status === 'terminated' && employee.left - today() > 90) {
selfDestuct();
}
```
Expand Down
2 changes: 1 addition & 1 deletion coverage/coverage.json
View file
@@ -1 +1 @@
{"/Users/Admin/code/learn-istanbul/test.js":{"path":"/Users/Admin/code/learn-istanbul/test.js","s":{"1":1,"2":1,"3":0},"b":{"1":[0,1]},"f":{},"fnMap":{},"statementMap":{"1":{"start":{"line":1,"column":0},"end":{"line":1,"column":6}},"2":{"start":{"line":2,"column":0},"end":{"line":3,"column":11}},"3":{"start":{"line":3,"column":5},"end":{"line":3,"column":11}}},"branchMap":{"1":{"line":2,"type":"if","locations":[{"start":{"line":2,"column":0},"end":{"line":2,"column":0}},{"start":{"line":2,"column":0},"end":{"line":2,"column":0}}]}}}}
{"/Users/Admin/code/learn-istanbul/mischief.js":{"path":"/Users/Admin/code/learn-istanbul/mischief.js","s":{"1":1,"2":4,"3":4,"4":1,"5":3,"6":3,"7":1,"8":4,"9":4,"10":3,"11":8,"12":1,"13":4,"14":1,"15":2,"16":2,"17":2,"18":1,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1},"b":{"1":[3,1],"2":[1,1],"3":[1,1]},"f":{"1":4,"2":3,"3":4,"4":8,"5":2},"fnMap":{"1":{"name":"creditAccount","line":1,"loc":{"start":{"line":1,"column":0},"end":{"line":1,"column":53}}},"2":{"name":"debitAccount","line":9,"loc":{"start":{"line":9,"column":0},"end":{"line":9,"column":52}}},"3":{"name":"getAccountBalance","line":17,"loc":{"start":{"line":17,"column":0},"end":{"line":17,"column":36}}},"4":{"name":"(anonymous_4)","line":21,"loc":{"start":{"line":21,"column":19},"end":{"line":21,"column":35}}},"5":{"name":"transferMoney","line":30,"loc":{"start":{"line":30,"column":0},"end":{"line":30,"column":68}}}},"statementMap":{"1":{"start":{"line":1,"column":0},"end":{"line":7,"column":1}},"2":{"start":{"line":2,"column":1},"end":{"line":5,"column":2}},"3":{"start":{"line":6,"column":1},"end":{"line":6,"column":34}},"4":{"start":{"line":9,"column":0},"end":{"line":15,"column":1}},"5":{"start":{"line":10,"column":1},"end":{"line":13,"column":2}},"6":{"start":{"line":14,"column":1},"end":{"line":14,"column":34}},"7":{"start":{"line":17,"column":0},"end":{"line":28,"column":1}},"8":{"start":{"line":18,"column":1},"end":{"line":18,"column":17}},"9":{"start":{"line":20,"column":1},"end":{"line":26,"column":2}},"10":{"start":{"line":21,"column":2},"end":{"line":23,"column":5}},"11":{"start":{"line":22,"column":6},"end":{"line":22,"column":38}},"12":{"start":{"line":25,"column":2},"end":{"line":25,"column":14}},"13":{"start":{"line":27,"column":1},"end":{"line":27,"column":16}},"14":{"start":{"line":30,"column":0},"end":{"line":37,"column":1}},"15":{"start":{"line":31,"column":1},"end":{"line":31,"column":48}},"16":{"start":{"line":32,"column":1},"end":{"line":32,"column":47}},"17":{"start":{"line":33,"column":1},"end":{"line":35,"column":2}},"18":{"start":{"line":34,"column":2},"end":{"line":34,"column":103}},"19":{"start":{"line":36,"column":1},"end":{"line":36,"column":8}},"20":{"start":{"line":39,"column":0},"end":{"line":39,"column":14}},"21":{"start":{"line":40,"column":0},"end":{"line":40,"column":14}},"22":{"start":{"line":41,"column":0},"end":{"line":41,"column":14}},"23":{"start":{"line":43,"column":0},"end":{"line":43,"column":109}},"24":{"start":{"line":44,"column":0},"end":{"line":44,"column":44}},"25":{"start":{"line":45,"column":0},"end":{"line":45,"column":61}},"26":{"start":{"line":46,"column":0},"end":{"line":46,"column":56}},"27":{"start":{"line":48,"column":0},"end":{"line":48,"column":102}}},"branchMap":{"1":{"line":20,"type":"if","locations":[{"start":{"line":20,"column":1},"end":{"line":20,"column":1}},{"start":{"line":20,"column":1},"end":{"line":20,"column":1}}]},"2":{"line":33,"type":"if","locations":[{"start":{"line":33,"column":1},"end":{"line":33,"column":1}},{"start":{"line":33,"column":1},"end":{"line":33,"column":1}}]},"3":{"line":34,"type":"binary-expr","locations":[{"start":{"line":34,"column":2},"end":{"line":34,"column":51}},{"start":{"line":34,"column":55},"end":{"line":34,"column":102}}]}}}}
36 changes: 18 additions & 18 deletions coverage/lcov-report/index.html
View file
Expand Up @@ -20,28 +20,28 @@ <h1>
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">66.67% </span>
<span class="strong">100% </span>
<span class="quiet">Statements</span>
<span class='fraction'>2/3</span>
<span class='fraction'>27/27</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">50% </span>
<span class="strong">100% </span>
<span class="quiet">Branches</span>
<span class='fraction'>1/2</span>
<span class='fraction'>6/6</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Functions</span>
<span class='fraction'>0/0</span>
<span class='fraction'>5/5</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">66.67% </span>
<span class="strong">100% </span>
<span class="quiet">Lines</span>
<span class='fraction'>2/3</span>
<span class='fraction'>27/27</span>
</div>
</div>
</div>
<div class='status-line medium'></div>
<div class='status-line high'></div>
<div class="pad1">
<table class="coverage-summary">
<thead>
Expand All @@ -59,16 +59,16 @@ <h1>
</tr>
</thead>
<tbody><tr>
<td class="file medium" data-value="learn-istanbul/"><a href="learn-istanbul/index.html">learn-istanbul/</a></td>
<td data-value="66.67" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 66%;"></div><div class="cover-empty" style="width:34%;"></div></div></td>
<td data-value="66.67" class="pct medium">66.67%</td>
<td data-value="3" class="abs medium">2/3</td>
<td data-value="50" class="pct medium">50%</td>
<td data-value="2" class="abs medium">1/2</td>
<td class="file high" data-value="learn-istanbul/"><a href="learn-istanbul/index.html">learn-istanbul/</a></td>
<td data-value="100" class="pic high"><div class="chart"><div class="cover-fill cover-full" style="width: 100%;"></div><div class="cover-empty" style="width:0%;"></div></div></td>
<td data-value="100" class="pct high">100%</td>
<td data-value="27" class="abs high">27/27</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="6" class="abs high">6/6</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="5" class="abs high">5/5</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="0" class="abs high">0/0</td>
<td data-value="66.67" class="pct medium">66.67%</td>
<td data-value="3" class="abs medium">2/3</td>
<td data-value="27" class="abs high">27/27</td>
</tr>

</tbody>
Expand All @@ -77,7 +77,7 @@ <h1>
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Apr 03 2016 23:00:54 GMT+0100 (BST)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Apr 03 2016 23:47:39 GMT+0100 (BST)
</div>
</div>
<script src="prettify.js"></script>
Expand Down
36 changes: 18 additions & 18 deletions coverage/lcov-report/learn-istanbul/index.html
View file
Expand Up @@ -20,28 +20,28 @@ <h1>
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">66.67% </span>
<span class="strong">100% </span>
<span class="quiet">Statements</span>
<span class='fraction'>2/3</span>
<span class='fraction'>27/27</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">50% </span>
<span class="strong">100% </span>
<span class="quiet">Branches</span>
<span class='fraction'>1/2</span>
<span class='fraction'>6/6</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Functions</span>
<span class='fraction'>0/0</span>
<span class='fraction'>5/5</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">66.67% </span>
<span class="strong">100% </span>
<span class="quiet">Lines</span>
<span class='fraction'>2/3</span>
<span class='fraction'>27/27</span>
</div>
</div>
</div>
<div class='status-line medium'></div>
<div class='status-line high'></div>
<div class="pad1">
<table class="coverage-summary">
<thead>
Expand All @@ -59,16 +59,16 @@ <h1>
</tr>
</thead>
<tbody><tr>
<td class="file medium" data-value="test.js"><a href="test.js.html">test.js</a></td>
<td data-value="66.67" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 66%;"></div><div class="cover-empty" style="width:34%;"></div></div></td>
<td data-value="66.67" class="pct medium">66.67%</td>
<td data-value="3" class="abs medium">2/3</td>
<td data-value="50" class="pct medium">50%</td>
<td data-value="2" class="abs medium">1/2</td>
<td class="file high" data-value="mischief.js"><a href="mischief.js.html">mischief.js</a></td>
<td data-value="100" class="pic high"><div class="chart"><div class="cover-fill cover-full" style="width: 100%;"></div><div class="cover-empty" style="width:0%;"></div></div></td>
<td data-value="100" class="pct high">100%</td>
<td data-value="27" class="abs high">27/27</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="6" class="abs high">6/6</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="5" class="abs high">5/5</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="0" class="abs high">0/0</td>
<td data-value="66.67" class="pct medium">66.67%</td>
<td data-value="3" class="abs medium">2/3</td>
<td data-value="27" class="abs high">27/27</td>
</tr>

</tbody>
Expand All @@ -77,7 +77,7 @@ <h1>
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Apr 03 2016 23:00:54 GMT+0100 (BST)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Apr 03 2016 23:47:39 GMT+0100 (BST)
</div>
</div>
<script src="../prettify.js"></script>
Expand Down
35 changes: 19 additions & 16 deletions coverage/lcov-report/learn-istanbul/mischief.js.html
View file
Expand Up @@ -27,7 +27,7 @@ <h1>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Branches</span>
<span class='fraction'>4/4</span>
<span class='fraction'>6/6</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
Expand Down Expand Up @@ -93,7 +93,8 @@ <h1>
48
49
50
51</td><td class="line-coverage quiet"><span class="cline-any cline-yes">1×</span>
51
52</td><td class="line-coverage quiet"><span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-yes">4×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
Expand Down Expand Up @@ -127,8 +128,8 @@ <h1>
<span class="cline-any cline-yes">2×</span>
<span class="cline-any cline-yes">2×</span>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">2×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">1×</span>
Expand All @@ -143,6 +144,7 @@ <h1>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">function creditAccount(account, amount, description) {
transaction = {
value : Math.abs(amount), // ensures the amount being added is positive
Expand All @@ -156,7 +158,7 @@ <h1>
value : -Math.abs(amount), // ensures amount is negative
desc : description
}
return account.push(transaction);
return account.push(transaction);
}
&nbsp;
function getAccountBalance(account) {
Expand All @@ -175,31 +177,32 @@ <h1>
function transferMoney(fromAccount, toAccount, amount, description) {
debitAccount(fromAccount, amount, description);
creditAccount(toAccount, amount, description);
if(getAccountBalance(fromAccount)&gt;10000) {
debitAccount(fromAccount, 0.1, 'Transaction Fee')
creditAccount(account3, 0.1, 'Transaction Fee')
} else { /* Nothing to See here. */ }
if (getAccountBalance(fromAccount) &gt; 10000) {
debitAccount(fromAccount, 0.1, 'Transaction Fee') &amp;&amp; creditAccount(account3, 0.1, 'Transaction Fee');
}
return;
}
&nbsp;
account1 = []
account2 = []
account3 = [] // rogue developer account
console.log("\nExpect Account1 Opening Balance "+getAccountBalance(account1) +" === 0 \u2713 ")
creditAccount(account1, 12000, 'Add Funds')
account1 = [];
account2 = [];
account3 = []; // rogue developer account
&nbsp;
console.log("\nExpect Account1 Opening Balance "+getAccountBalance(account1) +" === 0 \u2713 ");
creditAccount(account1, 20000, 'Add Funds');
transferMoney(account1,account2, 100, 'Give money to friend')
transferMoney(account2,account1, 10, 'Transfer back 10')
&nbsp;
console.log("Expect Account1 Closing Balance "+getAccountBalance(account1) +" === 11909.9 \u2713 \n")
&nbsp;
// console.log("Everything seems fine because my tests are passing... right? \n")
// console.log("WRONG! our Rogue Developer Balance is : " +getAccountBalance(account3) +" === 0.1");</pre></td></tr>
// console.log("WRONG! our Rogue Developer Balance is : " +getAccountBalance(account3) +" === 0.1");
&nbsp;</pre></td></tr>
</table></pre>
<div class='push'></div><!-- for sticky footer -->
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Apr 03 2016 22:48:16 GMT+0100 (BST)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Apr 03 2016 23:47:39 GMT+0100 (BST)
</div>
</div>
<script src="../prettify.js"></script>
Expand Down
7 changes: 2 additions & 5 deletions coverage/lcov-report/learn-istanbul/test.js.html
View file
Expand Up @@ -46,22 +46,19 @@ <h1>
<tr><td class="line-count quiet">1
2
3
4
5</td><td class="line-coverage quiet"><span class="cline-any cline-yes">1×</span>
4</td><td class="line-coverage quiet"><span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">x =42;
<span class="missing-if-branch" title="if path not taken" >I</span>if(false)
<span class="cstat-no" title="statement not covered" > x =-1;</span>
&nbsp;
&nbsp;</pre></td></tr>
</table></pre>
<div class='push'></div><!-- for sticky footer -->
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Apr 03 2016 23:00:54 GMT+0100 (BST)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Apr 03 2016 23:30:14 GMT+0100 (BST)
</div>
</div>
<script src="../prettify.js"></script>
Expand Down

0 comments on commit e333137

Please sign in to comment.