Code Coverage -- Javascript Frontend + Backend

當開始寫測試後，要怎麼確認專案的那些部份已經測試，哪些又還沒呢？這次將會跟大家介紹與講解要如何設定 node.js 與 front-end 的 code coverage，並且透過整合不同工具與服務讓開發者可以更容易地掌握專案 code coverage 的狀況。

keywords: javascript, node.js, front-end, travis-ci, intern, mocha, istanbul, coveralls, sauce labs

License: https://creativecommons.org/licenses/by/3.0/tw/

Transcript

1. Code Coverage Javascript Frontend + Backend Yuren Ju
2. Me Yuren Ju (⼩小朱) COSCUP, KaLUG, Hacking Thursday, g0v Vectr - http://vectr.com/
3. Code Coverage
4. Criteria line coverage function coverage branch coverage statement coverage
5. Why? https://www.flickr.com/photos/doctabu/342220423/
6. Knows coverage changes in a pull request
7. Which parts you haven’t tested
8. https://www.flickr.com/photos/jerkalertproductions/3128973842/
10. Istanbul https://www.flickr.com/photos/chanc/4734493571/
11. JSON Array CSV Example: CSV module
12. https://github.com/yurenju/cover-example/blob/master/csv.js
13. Testing tools mocha npm install mocha chai
15. https://github.com/yurenju/cover-example/blob/master/test.js
16. npm test
17. csv.js test.js Which case we haven’t tested?
18. npm install istanbul
19. npm run coverage
20. open coverage/lcov-report/index.html
21. How does it work? hello.js
22. istanbul instrument hello.js
23. How to handle require?
24. Useful testing tools https://github.com/thlorenz/proxyquire Proxies nodejs require in order to allow overriding dependencies during testing.
25. Front End
26. Why not mocha? mocha
27. Complex environment CommonJS AMD Unit Test Functional Test
28. Intern npm install intern
29. Intern Well-documented AMD loader Istanbul inside! Support Selenium Support Sauce Labs, BrowserStack, TestingBot Unit test/Functional Test
30. intern-example https://github.com/theintern/intern-examples/
31. Example - Bifrost 物資管理平台 https://github.com/bifrostio/bifrost Loopback (node.js) + Angular.js
32. Project Hierarchy
33. intern.js
34. all.js
35. login.js
36. tests/login.js
37. Running test on browser remove reporters in intern.js $ http-server $ open http://localhost:8080/node_modules/intern/client.html?config=tests/intern
38. ChromeDriver WebDriver for Chrome https://sites.google.com/a/chromium.org/ chromedriver/ ./chromedriver --port=4444 --url-base=wd/hub
39. node_modules/intern/bin/intern-runner.js config=tests/intern
40. Added ‘lcovhtml’ to reporters and open html-report/index.html
41. CI x Coverage service
42. Pull request build & invoke test runner Run tests on multiple browsers Track code coverage
43. Send a pull request & wait result :-) git push upstream more-login-test hub pull-request
45. .travis.yml Notice: SauceLabsTunnel doesn’t support node.js 0.12
46. package.json gulpfile.js
47. https://travis-ci.org/profile/<YOUR_ACCOUNT>
49. Running tests on Browser Selenium
51. Connect to SauceLabs on local machine environment variables tests/intern.js
52. But on Travis-CI for open source project! Don’t put your API token to .travis.yml use travis encrypt SAUCE_USERNAME=<USERNAME> --add travis encrypt SAUCE_ACCESS_KEY=<TOKEN> --add
53. secure vars will be added to .travis.yml
54. Limitation Encrypted environment variables are not available to pull requests from forks due to the security risk of exposing such information to unknown code. http://docs.travis-ci.com/user/environment-variables/
56. Last Mile!
57. Coveralls setup npm install coveralls Added ‘lcov’ reporter to tests/intern.js add variables into .travis.yml COVERALLS_REPO_TOKEN (don’t forget encrypting) COVERALLS_SERVICE_NAME=travis-ci execute coveralls command in after_script section cat lcov.info | ./node_modules/coveralls/bin/ coveralls.js
59. Transpiled code Istanbul: #212 babel-istanbul ibrik - CoffeeScript meets Istanbul transform-coverage.js - generate lcov report with source code by source map https://github.com/hammerlab/pileup.js/blob/master/scripts/transform- coverage.js
60. Resources https://github.com/bifrostio/bifrost http://www.ruanyifeng.com/blog/2015/06/istanbul.html http://www.ncover.com/blog/best-practices-code- coverage-metrics/ https://theintern.github.io/ https://en.wikipedia.org/wiki/Code_coverage
61. License https://creativecommons.org/licenses/by/3.0/tw/