Code Coverage -- Javascript Frontend + Backend

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/

A357616c0a9197fccbaf5aceb92d94f3?s=128

Yuren Ju

June 25, 2015
Tweet

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/

  9. None
  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

  14. None
  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
  44. None
  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>

  48. None
  49. Running tests on Browser Selenium

  50. None
  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/
  55. None
  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
  58. None
  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/