มา Vue.js Thailand Meetup เลยมา TDD กันหน่อย

มาร่วมงาน Vue.js Thailand Meetup #4 ของกลุ่ม Vue.js Thailand บอกตามตรงว่า ไม่เคยใช้งานมันเลย ดังนั้นเพื่อให้เข้าใจมากขึ้นมาลองศึกษากันบ้าง เริ่มด้วย TDD with Vue.js กันหน่อย มาเริ่มกันเลย

ขั้นตอนแรก เพื่อความง่ายต้องติดตั้ง Vue CLI 3 ก่อน

[code] $yarn global add @vue/cli $yarn global add @vue/cli-init $vue —version 3.0.4 [/code]

ขั้นตอนที่สอง ทำการสร้าง project ที่มี test กันสิ

ทำการสร้าง project ด้วย template ชื่อว่า webpack ดังนี้ [code] $vue init webpack hello-tdd [/code] จากนั้นก็เพิ่ม unit test และ e2e test เข้าไปใน project ด้วย จากตัวอย่างผมใช้ Jest ในการเขียน unit test แสดงดังรูป

ขั้นตอนที่ 3 ทำการ start server ทดสอบสิ

[code] $yarn run dev [/code] จากนั้นเปิด browser ไปยัง url = http://localhost:8080 แสดงผลการทำงานดังรูป

ขั้นตอนที่ 4 เมื่อทุกอย่างพร้อมทำการเขียน test กันดีกว่า

หลังจากที่สร้าง project ด้วย Vue CLI แล้ว จะทำการสร้าง test มาให้ แน่นอนว่า มี HelloWorld ให้ด้วย แสดงดังรูป มาลอง run unit test กันหน่อย [code] $yarn run unit [/code] ผลที่ได้คือ 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 ดังนี้ 27a66c49a37adf931d8fb6b376f3d72d Test.js [gist id="27a66c49a37adf931d8fb6b376f3d72d" file="test.js"] คำอธิบาย ทำการตรวจสอบค่าใน tag h1 ซึ่งเป็น tag ลูกที่อยู่ภายใต้ tag ที่ใช้ class ชื่อว่า hello

เย้ ๆ เพียงเท่านี้น่าจะพร้อมแล้วววว มาเขียน test กัน

นี่แหละ First impression กับการเขียน test สำหรับระบบที่พัฒนาด้วย Vue.js มาเขียน code กัน ปล. Source code ตัวอย่างอยู่ที่ Github::Up1::TDD with Vue