Slide 1

Slide 1 text

Code Coverage Javascript Frontend + Backend Yuren Ju

Slide 2

Slide 2 text

Me Yuren Ju (⼩小朱) COSCUP, KaLUG, Hacking Thursday, g0v Vectr - http://vectr.com/

Slide 3

Slide 3 text

Code Coverage

Slide 4

Slide 4 text

Criteria line coverage function coverage branch coverage statement coverage

Slide 5

Slide 5 text

Why? https://www.flickr.com/photos/doctabu/342220423/

Slide 6

Slide 6 text

Knows coverage changes in a pull request

Slide 7

Slide 7 text

Which parts you haven’t tested

Slide 8

Slide 8 text

https://www.flickr.com/photos/jerkalertproductions/3128973842/

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Istanbul https://www.flickr.com/photos/chanc/4734493571/

Slide 11

Slide 11 text

JSON Array CSV Example: CSV module

Slide 12

Slide 12 text

https://github.com/yurenju/cover-example/blob/master/csv.js

Slide 13

Slide 13 text

Testing tools mocha npm install mocha chai

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

https://github.com/yurenju/cover-example/blob/master/test.js

Slide 16

Slide 16 text

npm test

Slide 17

Slide 17 text

csv.js test.js Which case we haven’t tested?

Slide 18

Slide 18 text

npm install istanbul

Slide 19

Slide 19 text

npm run coverage

Slide 20

Slide 20 text

open coverage/lcov-report/index.html

Slide 21

Slide 21 text

How does it work? hello.js

Slide 22

Slide 22 text

istanbul instrument hello.js

Slide 23

Slide 23 text

How to handle require?

Slide 24

Slide 24 text

Useful testing tools https://github.com/thlorenz/proxyquire Proxies nodejs require in order to allow overriding dependencies during testing.

Slide 25

Slide 25 text

Front End

Slide 26

Slide 26 text

Why not mocha? mocha

Slide 27

Slide 27 text

Complex environment CommonJS AMD Unit Test Functional Test

Slide 28

Slide 28 text

Intern npm install intern

Slide 29

Slide 29 text

Intern Well-documented AMD loader Istanbul inside! Support Selenium Support Sauce Labs, BrowserStack, TestingBot Unit test/Functional Test

Slide 30

Slide 30 text

intern-example https://github.com/theintern/intern-examples/

Slide 31

Slide 31 text

Example - Bifrost 物資管理平台 https://github.com/bifrostio/bifrost Loopback (node.js) + Angular.js

Slide 32

Slide 32 text

Project Hierarchy

Slide 33

Slide 33 text

intern.js

Slide 34

Slide 34 text

all.js

Slide 35

Slide 35 text

login.js

Slide 36

Slide 36 text

tests/login.js

Slide 37

Slide 37 text

Running test on browser remove reporters in intern.js $ http-server $ open http://localhost:8080/node_modules/intern/client.html?config=tests/intern

Slide 38

Slide 38 text

ChromeDriver WebDriver for Chrome https://sites.google.com/a/chromium.org/ chromedriver/ ./chromedriver --port=4444 --url-base=wd/hub

Slide 39

Slide 39 text

node_modules/intern/bin/intern-runner.js config=tests/intern

Slide 40

Slide 40 text

Added ‘lcovhtml’ to reporters and open html-report/index.html

Slide 41

Slide 41 text

CI x Coverage service

Slide 42

Slide 42 text

Pull request build & invoke test runner Run tests on multiple browsers Track code coverage

Slide 43

Slide 43 text

Send a pull request & wait result :-) git push upstream more-login-test hub pull-request

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

.travis.yml Notice: SauceLabsTunnel doesn’t support node.js 0.12

Slide 46

Slide 46 text

package.json gulpfile.js

Slide 47

Slide 47 text

https://travis-ci.org/profile/

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Running tests on Browser Selenium

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Connect to SauceLabs on local machine environment variables tests/intern.js

Slide 52

Slide 52 text

But on Travis-CI for open source project! Don’t put your API token to .travis.yml use travis encrypt SAUCE_USERNAME= --add travis encrypt SAUCE_ACCESS_KEY= --add

Slide 53

Slide 53 text

secure vars will be added to .travis.yml

Slide 54

Slide 54 text

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/

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Last Mile!

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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