โชว์ 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 ไปติดตามรูปข้างล่าง

codecov

สิ่งที่สำคัญในหน้านี้คือตัว 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 ถูกสร้างออกมา

coverage folder content

ที่เหลือก็แค่อัพโหลด 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: stable

before_script:
  - npm install -g firebase-tools
  - npm install -g codecov

script:
  - npm run test:headless --code-coverage
  - codecov -t $CODECOV_TOKEN
  - npm run build

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --project $PROJECT_ID

ตัวอย่าง project ที่ใช้ codecov แสดงผล code coverage แล้ว

https://github.com/chonla/ng-calculator

Leave a Reply

Your email address will not be published. Required fields are marked *