มาร่วมงาน Vue.js Thailand Meetup #4 ของกลุ่ม Vue.js Thailand
บอกตามตรงว่า ไม่เคยใช้งานมันเลย
ดังนั้นเพื่อให้เข้าใจมากขึ้นมาลองศึกษากันบ้าง
เริ่มด้วย TDD with Vue.js กันหน่อย
มาเริ่มกันเลย
ขั้นตอนแรก เพื่อความง่ายต้องติดตั้ง Vue CLI 3 ก่อน
$yarn global add @vue/cli $yarn global add @vue/cli-init $vue —version 3.0.4
ขั้นตอนที่สอง ทำการสร้าง project ที่มี test กันสิ
ทำการสร้าง project ด้วย template ชื่อว่า webpack ดังนี้
$vue init webpack hello-tdd
จากนั้นก็เพิ่ม unit test และ e2e test เข้าไปใน project ด้วย
จากตัวอย่างผมใช้ Jest ในการเขียน unit test แสดงดังรูป
ขั้นตอนที่ 3 ทำการ start server ทดสอบสิ
$yarn run dev
จากนั้นเปิด browser ไปยัง url = http://localhost:8080
แสดงผลการทำงานดังรูป
ขั้นตอนที่ 4 เมื่อทุกอย่างพร้อมทำการเขียน test กันดีกว่า
หลังจากที่สร้าง project ด้วย Vue CLI แล้ว
จะทำการสร้าง test มาให้ แน่นอนว่า มี HelloWorld ให้ด้วย
แสดงดังรูป
มาลอง run unit test กันหน่อย
$yarn run unit
ผลที่ได้คือ Error สิครับ ไม่พอ warning เกี่ยวกับ Jest config อีก
สงสัยไม่ค่อยมีใครใช้ Jest ไหมหว่า
ผลการทำงานเป็นดังนี้
ดังนั้นมาแก้ไข 2 ปัญหานี้กันหน่อย (จะได้เขียน code กันไหมเนี่ย)
ปัญหาแรกคือ SecurityError: localStorage is not available for opaque origins
ทำการแก้ไขปัญหาด้วยการแก้ไขไฟล์ jest.conf.js
ด้วยการเพิ่ม testURL: ‘http://localhost’ เข้าไป
จากนั้นทำการ run unit test ใหม่ได้ผลการทำงานดังนี้
ปัญหาที่สอง ก็คือ coverage ของ Jest อีกแล้ว
นั่นคือ Option “mapCoverage” has been removed, as it’s no longer necessary
mapCoverage จะมีค่า true โดย default
ดังนั้นลบออกไปจากไฟล์ jest.conf.js เท่านั้นก็เรียบร้อย
Run unit test ผ่านแล้วววววว นี่แหละชีวิต …
ขั้นตอนที่ 5 มาดู Unit test กันหน่อย
เป็นตัวอย่าง code ที่ถูกสร้างขึ้นมาจาก Vue CLI ดังนี้
คำอธิบาย
ทำการตรวจสอบค่าใน tag h1 ซึ่งเป็น tag ลูกที่อยู่ภายใต้ tag ที่ใช้ class ชื่อว่า hello
เย้ ๆ เพียงเท่านี้น่าจะพร้อมแล้วววว มาเขียน test กัน
นี่แหละ First impression กับการเขียน test สำหรับระบบที่พัฒนาด้วย Vue.js
มาเขียน code กัน
ปล. Source code ตัวอย่างอยู่ที่ Github::Up1::TDD with Vue
