Angular Tour of Heroes Testing part 1/3

ยังคงต้องเขียนและดูแลโปรเจกต์ Angular สิ่งที่ขาดไม่ได้คือเรื่องของการ test โดยเฉพาะ unit test ของ Angular ที่รันด้วย Karma บทความนี้จึงอยากนำเสนอพื้นฐานการเขียน unit test จากตัวอย่างที่ชื่อ Tour of Heroes ของ Angular เองครับ

Tour of Heroes

เกือบทุกครั้งที่ Angular ออกเวอร์ชันใหม่ tutorial นี้มักถูกแต่งเติมด้วยเสมอจึงอยากแนะนำมือใหม่หัด Angular ให้เข้าไปอ่านจะได้เป็นการ update features ใหม่ๆของ Angular ที่เขาอาจนำมาเสนอด้วย

เราเน้นอ่านเร็ว — ทำงานไว — ได้ concept ที่ถูกต้อง งานของเราจะได้ไม่ดูเด็กจบใหม่หรือดูหละหลวมจนเกินไป

tour of heroes ว่าด้วยเรื่องการ view, add, edit และ delete เหล่า hero ยอดมนุษย์ของหนังเรื่องดัง การ view, add, edit และ delete ที่ว่าเขาก็จะสอนให้รู้จักองค์ประกอบต่างๆของ Angular เช่น component, service, directive, pipe และอื่นๆ

ตัวอย่าง tour of heroes จากต้นฉบับ (ถ้าเกิดไม่อยากพิมพ์เอง)

มาเริ่มโค้ดจาก zero กัน!

ของแบบนี้จะฝึกให้มันส์ มันต้องเริ่มจากสร้างโปรเจกต์เอง เรียนแล้วทำความเข้าใจหัวใจของมัน

ติดตั้ง node ลง angular cli แล้วจัด

ng new tour-of-heroes

node ผมเวอร์ชัน v15.2.1 ส่วน ng ผมเวอร์ชัน 11.0.2

รัน test

เมื่อสร้างโปรเจกต์เสร็จใหม่ๆ เรามาทดสอบรัน test กันเถอะ คำสั่ง

ng test

ผลลัพธ์

ผลลัพธ์ของ ng test

ผล test บอกว่า

• ประกอบด้วย 3 การทดสอบ (3 specs)
• ไม่มีความผิดพลาด (0 failures)

ใจชื้นแล้วใช่ไหม ตัวที่รันขึ้นมาเรียกว่า Karma เรียกเต็มๆว่า Karma JavaScript test runner โดย default แล้วมันจะเรียก Chrome browser ให้เปิดขึ้นมาเองอัตโนมัติ แต่หากต้องการให้ผล test รันอยู่แค่ terminal ให้ทำดังนี้

Karma — Headless Chrome

เราสามารถ config ให้รัน test โดยไม่ต้องเปิด Chrome browser ก็ได้

มองหาไฟล์ karma.conf.js แล้วเพิ่มสิ่งนี้

customLaunchers: {
  ChromeHeadlessCI: {
    base: 'ChromeHeadless',
    flags: ['--no-sandbox']
  }
},

ดูรูป

จากในรูปเห็นบรรทัดที่ 34 นั่นไหม ให้เปลี่ยนจาก Chrome เป็น ChromeHeadless

ดูรูป

หยุด test เดิม (ถ้ารันอยู่) ด้วย ctl + c

จากนั้นรัน test อีกครั้ง

ng test

ผลลัพธ์จะยังคงเดิมแต่จะไม่ปรากฏ Chrome browser ขึ้นมาอีกแล้ว

e2e testing

สายเขียน unit test ทราบดีแก่ใจว่าสำหรับ Angular แล้ว Karma กับ Protractor เป็นเพื่อนกัน การทำ end-to-end testing เราสามารถ config ตัว Protractor ได้ดังนี้

มองหาไฟล์ protractor.conf.js เราต้องการ extend ไฟล์นี้เพื่อสร้างรายงานผล test ของเราเอง ซึ่งมันอยู่ใน folder ชื่อ e2e

จากในนี้ (e2e folder) จงสร้างไฟล์ชื่อ protractor-ci.conf.js แล้วเพิ่ม

const config = require('./protractor.conf').config;
config.capabilities = {
  browserName: 'chrome',
  chromeOptions: {
    args: ['--headless', '--no-sandbox']
  }
};
exports.config = config;

ดูรูป

จากนั้นรัน e2e test

ng e2e --protractor-config=e2e/protractor-ci.conf.js

ผลลัพธ์

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully.
[09:50:23] I/launcher - Running 1 instances of WebDriver
[09:50:23] I/direct - Using ChromeDriver directly...
Jasmine started
[09:50:26] W/element - more than one element found for locator By(css selector, app-root .content span) - the first result will be used
workspace-project App
    ✓ should display welcome message
Executed 1 of 1 spec SUCCESS in 0.342 sec.
[09:50:26] I/launcher - 0 instance(s) of WebDriver still running
[09:50:26] I/launcher - chrome #01 passed

อ่านถึงตรงนี้ผมถือว่าเพื่อนๆได้รู้จักการ test ทั้ง Karma และ e2e ยังมีหัวข้อการ test ที่น่าสนใจให้ติดตามอีก ได้แก่

• code coverage
• testing services
• basics of testing components
• component testing scenarios
• testing attribute directives
• testing pipes
• debugging tests
• testing utility APIs

เรามาเริ่มต้นที่ code coverage

Code Coverage

เป็นตัวบอกว่าภายในโปรเจตก์เราได้เขียน unit test ไปมากน้อยเพียงใด เมื่อสร้างโปรเจกต์แล้วสามารถรันได้เลย คำสั่ง

ng test --no-watch --code-coverage

ผลลัพธ์

Statements   : 100% ( 6/6 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 0/0 )
Lines        : 100% ( 5/5 )

พร้อมกันนั้นมี coverage/tour-of-heroes folder ถูกสร้างขึ้น ให้เปิดไฟล์ index.html

หมายเหตุ อยากเปิดบน localhost (127.0.0.1) ที่ port 8080 เหมือนผม ผมติดตั้ง live-server คำสั่งคือ npm install -g live-server

เข้าไปใน coverage/tour-of-heroes แล้วพิมพ์ live-server มันจะมองหา index.html แล้วเปิด browser ให้อัตโนมัติ

สิ่งคำคัญที่ผมอยากบอกกับมือใหม่คือ เราสนใจแค่ 2 อย่าง

1. ไฟล์สำหรับเขียน unit test มีนามสกุลเป็น .spec.ts
2. code coverage

Code Coverage ที่ 80%

เราสามารถกำหนดให้ code coverage ยอมรับการเขียน unit test เพื่อครอบคลุมโปรเจกต์ตามเปอร์เซ็นต์ที่ต้องการได้ หากไม่กำหนดโดย default คือ 100%

สมมติเราต้องการกำหนด coverage ที่ 80% ทำได้ดังนี้

มองหาไฟล์ karma.conf.js แล้วเพิ่ม key ชื่อ coverageIstanbulReporter เข้าไป

coverageIstanbulReporter: {
  reports: [ 'html', 'lcovonly' ],
  fixWebpackSourcePaths: true,
  thresholds: {
    statements: 80,
    lines: 80,
    branches: 80,
    functions: 80
  }
}

ดูรูป

code coverage reports every time

ถ้าต้องการให้ Angular ฟังและสร้าง code coverage ให้ทุกครั้งที่เขียน test สามารถทำได้ดังนี้

มองหาไฟล์ angular.json เพิ่ม

"test": {
  "options": {
    "codeCoverage": true
  }
}

ดูรูป

เอาล่ะ ประมาณนี้ก่อน ไว้ part ถัดไปเขียนโค้ดยาวๆไปครับ

อ้างอิง

https://angular.io/guide/testing