This document summarizes an presentation about measuring CSS coverage in ES2015. It introduces Clairvoyance, a CSS coverage measurement tool, and how the author reworked it to use ES2015 features like Gulp, Babel, ESLint, and tools like remap-istanbul and Codecov to handle coverage mapping and reporting for ES2015 code. Key points covered include using Babel to transpile ES2015 code, configuring ESLint with Airbnb style rules, and using sourcemaps and coverage remapping to get accurate coverage metrics.

1. ES2015のカバレッジ計測
2016/06/02(木) 表参道.rb #12

2. 自己紹介
● HN: 神速
● twitter: @sinsoku_listy
● github: sinsoku
● 所属: 株式会社grooves
● 言語: Ruby, Node.js, Swift

3. CSSのカバレッジ計測ツール
clairvoyance (クレアボヤンス: 千里眼)
https://github.com/sinsoku/clairvoyance

4. なぜ作ったのか？
● 別ページのデザインが壊れる
● 使ってなさそうだけど、怖くて消せない
● grep ができない
● 上書きが多い
● 突然の !important
● 書いた人はもういない・・・

5. 1. PhantomJS で描画

6. 2. document.querySelectorAll() でチェック
描画されたhtml

7. 使い方
$ npm install -g clairvoyance
$ clairvoyance --css path/application.css
--html path/index.html

8. {
"/user/sinsoku/app/path/application.css": [
null, 1, 1, 1, null, 0, 0, 0
]
}
coverage/css-coverage.json
null => disabled, 0 => uncoverd, 1 => coverd

9. HTMLレポート
--reporter のオプションでJSON以外でも出力でき
ます。
$ npm install -g clairvoyance-html
$ clairvoyance --css path/application.css
--html path/index.html
--reporter clairvoyance-html

12. ここから本題

13. これをES2015で直した
● gulp + babel
● ESLint (airbnb)
● remap-istanbul + codecov

14. gulp + babel
clairvoyance
├ lib/
└ test/
元のディレクトリ構成

15. gulp + babel
clairvoyance
└ src/
├ lib/
└ test/
変更後のディレクトリ構成

16. gulp + babel
clairvoyance
├ lib/
├ test/
└ src/
├ lib/
└ test/
gulp build 後のディレクトリ構成

17. ESLint

18. ESLint
$ npm install -g eslint
$ eslint --init
Answer questions about your style
❯ Use a popular style guide
Inspect your JavaScript file(s)

19. ESLint
$ eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? (Use arrow keys)
Google
❯ AirBnB
Standard

20. $ gulp lint
[19:52:41] Requiring external module babel-register
[19:52:43] Using gulpfile ~/projects/github/sinsoku/clairvoyance/gulpfile.babel.js
[19:52:43] Starting 'lint'...
[19:52:44]
/Users/sinsoku/projects/github/sinsoku/clairvoyance/src/lib/clairvoyance.js
1:1 error Unexpected var, use let or const instead no-var
2:1 error Unexpected var, use let or const instead no-var
4:28 error 'Clairvoyance' was used before it was defined no-use-before-define
17:30 warning Missing function expression name func-names
17:38 error Missing space before function parentheses space-before-function-paren
22:3 error Unexpected var, use let or const instead no-var
22:3 error All 'var' declarations must be at the top of the function scope vars-on-top
22:7 error Unexpected dangling '_' in '_this' no-underscore-dangle
24:11 error '_createPhantom' was used before it was defined no-use-before-define
24:33 error '_findCssFiles' was used before it was defined no-use-before-define
24:54 error '_findHtmlFiles' was used before it was defined no-use-before-define
25:11 warning Missing function expression name func-names
25:11 error Unexpected function expression prefer-arrow-callback
25:19 error Missing space before function parentheses space-before-function-paren
26:7 error Unexpected var, use let or const instead no-var
28:12 error Unexpected var, use let or const instead no-var
28:12 error All 'var' declarations must be at the top of the function scope vars-on-top
29:14 error All 'var' declarations must be at the top of the function scope vars-on-top
29:14 error Unexpected var, use let or const instead no-var
（以下略

21. あとは頑張って直すだけ！

22. remap-istanbul + codecov
babel を使うとカバレッジがうまく取れない
=> floridoo/gulp-sourcemaps で sourcemap 生成
=> SitePen/remap-istanbul でカバレッジ修正

23. gulp.task('build', ['clean'], () =>
gulp.src('src/lib/**/*.js')
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(sourcemaps.write('../maps', {
includeContent: false, sourceRoot: '../src/lib'
}))
.pipe(gulp.dest('lib'))
);

24. gulp.task('remap-istanbul', ['test'], () =>
gulp.src('coverage/coverage-final.json')
.pipe(remapIstanbul({
basePath: 'maps/',
reports: {
json: 'coverage/coverage.json',
html: 'coverage/lcov-report',
lcovonly: 'coverage/lcov.info',
},
}))
);

25. Codecov

27. ご清聴ありがとうございました。