โชว์ Code Coverage ของ Angular Project ใน Github
เข้าไปเห็น repo ใน github ของหลาย ๆ คน เขาแสดง code coverage เป็น badge แล้วมันดูเท่ไม่หยอก ที่สำคัญมันออโต้ด้วย ไม่ต้องมานั่งพิมพ์เองหลังจาก run unit test เสร็จว่า code coverage เราเท่านี้แล้วนะ ให้มันอัพเดทโดยอัตโนมัติดีกว่า จิ้ม ๆ ดูเห็นเขาใช้ service ของ codecov.io เลยไปลองมั่งดีกว่า
จริง ๆ วิธีนี้ใช้กับ provider เจ้าอื่นได้ด้วย ไม่ใช่แค่ github พวก bitbucket, gitlab ก็ได้นะ
ไอเดียของ codecov ก็เหมือนกับการแสดงผล code coverage ทั่วไปคือ ทำหน้าที่เอา code coverage report มาโชว์เท่านั้น ตัว codecov ก็เอา code coverage report มาโชว์ในรูปแบบของ badge นั่นเอง ดังนั้นสิ่งที่เราต้องทำทั้งหมดคือ หา code coverage แล้วทำเป็น report ที่ codecov รู้จัก เสร็จแล้วก็อัพโหลด report มาที่ codecov เพื่อให้มันเอาไปสร้าง badge ให้เราใช้งานต่อไป
เริ่มจากเข้าไปสมัครสมาชิกกับ codecov ก่อน แล้วเลือกให้มัน integrate กับ Github หรือ provider ที่เขาสนับสนุน เสร็จแล้วก็เลือก repository ที่เป็น Angular ของเรา มันก็จะแสดงหน้าวิธีการเอา code coverage ไปติดตามรูปข้างล่าง
สิ่งที่สำคัญในหน้านี้คือตัว token ที่เราจะต้องเอาไปใช้ตอนอัพโหลด coverage report ก็ก๊อปปี้เอาไว้ เดี๋ยวเราจะเอามันไปใช้ต่อ
ใน package.json ของ project ตัวอย่างมันมี code coverage reporter เป็น istanbul มาให้อยู่แล้วก็จะใช้ตัวนี้ต่อเลย จะได้ไม่ต้องเสียเวลาลงใหม่อีก ถ้ายังไม่มีก็ลงเลย
yarn add -D karma-coverage-istanbul-reporterหรือ
npm install — save-dev karma-coverage-istanbul-reporterต่อมาก็ไปแก้ใน karma.conf.js โดยการเพิ่ม *coverage-istanbul* ลงไปใน reporters
ทดสอบการสร้าง code coverage report ได้โดยสั่ง ng test อีกที จะต้องมี coverage folder ถูกสร้างออกมา
ที่เหลือก็แค่อัพโหลด code coverage report ด้วย codecov command
ก่อนที่จะใช้ codecov command ได้ก็ไปเอามันมาก่อน
yarn global add codecovหรือ
npm install -g codecovเสร็จแล้วสั่ง
codecov -t <CODECOV_TOKEN>โดยที่ CODECOV_TOKEN คือ token ที่เราก๊อปไว้แล้วก่อนหน้านี้นั่นเอง
เมื่อสั่งเสร็จแล้ว ผล code coverage จะถูกส่งไปที่ codecov.io ให้เราได้เข้าไปดู เราก็เข้าไปที่ Tab Setting แล้วเลือก code ที่เป็น Markdown มาแปะใน README.md แล้ว commit กลับเข้าไปที่ github เป็นอันเรียบร้อย
ถ้าใครอยากให้ระบบตรงนี้อัตโนมัติ ก็แค่เอาไปเป็นส่วนหนึ่งใน Continuous Integration เท่านั้นเอง ในตัวอย่างที่ลองทำ ใช้ TravisCI เป็นตัวทำ Continuous Integration ผ่านไฟล์ .travis.yaml ดังนั้นหน้าตาของ .travis.yaml ก็จะประมาณนี้
language: node_js
node_js:
— “9”
branches:
only:
— master
sudo: required
dist: trusty
cache:
directories:
— node_modules
addons:
chrome: stablebefore_script:
— npm install -g firebase-tools
— npm install -g codecovscript:
— npm run test:headless — code-coverage
— codecov -t $CODECOV_TOKEN
— npm run buildafter_success:
— firebase deploy — token $FIREBASE_TOKEN — project $PROJECT_ID
ตัวอย่าง project ที่ใช้ codecov แสดงผล code coverage แล้ว
pingback: http://www.chonla.com/embed-angular-project-code-coverage-in-github/
