สรุปจากงาน The Art of Testing ReactJS and The Emerging Reasonreact นะครับโดยตัวงานจะเป็นการพูดถึง React จะ test ยังไง การ test มีกี่แบบและแตกต่างกันยังไง อะไรสำคัญ อีกเรื่องหนึ่งคือตัว Reason React ( อันนี้เป็นชื่อภาษานะครับ ) ว่ามันเจ๋งยังไง ครับ
โดยทางทีมงานบอกว่า งานไม่ใช่การนั่งฟังให้คุยกันเหมือน meet up จะพยายามจัดทุกเดือนเกี่ยวกับ techenology ถ้าใครอยากฟังอะไรก็ให้เสนอเขาได้หรืออยากพูดก็ตามทีน่าจะเป็นโอกาสให้หลายๆคนอยากคุยเรื่องเทคโนโลยีได้มาคุยกันครับ
https://www.facebook.com/events/2032107576853136/?notif_t=plan_reminder¬if_id=1539253945610997
Testing React App ( แฮม )
– Why tests ?
ช่วยเรื่องเอกสารไปในตัว และบอกว่า code เราทำหน้าที่อะไร เช่น เรามี regex password แล้วต้องประกอบด้วยตัวเล็กตัวใหญ่ ตัวเลข ตัวอักษรพิเศษ แต่ถ้าเราเขียน test นั้นจะช่วยบอกว่ามันทำอะไรตรงไหน
ช่วยเรื่องการแก้ไขได้เร็วเพราะว่าไม่ต้องกังวลว่าอะไรพังหรือเปล่า สุดท้ายคือเรื่องความมั่นใจ
– Forms of test
ก็พวก Unit integration E2E แต่ที่นี้เขาบอกว่ามี static test อีกด้วย หมายถึงพวก typescript , eslint, flow type พวกนี้มาช่วยเกี่ยวกับตอนเราเขียนโค้ดเลยซึ่งจะช่วยเราก่อนเราจะเขียน test ซะอีก
- Unit Jest ( ชื่อ tool )
- Integration การ test แบบเอา function มาเชื่อมต่อกัน tool Jest , jsdom
- E2E ( End to End ) ตั้งแต่ต้นจนจบ tools พวก Selenium, Robot Framework, Puppeteer
หากเรียงจากบนลงล่างในรูป 3 เหลี่ยมความเร็วในการ test ก็จะช้าลง ก็จะเกิดคำถามว่าทำไมเราไม่เขียน unit หมดเลยในเมื่อเร็วและราคาถูก เพราะเราจะไม่รู้เลยว่าเวลาเอา function มารวมกันมันทำงานได้จริงไหม และสุดท้ายความมั่นใจที่เขียนยิ่งระดับมันสูงเมื่อไหร่มันยิ่งมีผลเยอะขึ้น
แต่ทางคุณแฮมแนะนำว่าให้เขียน integration ไปเลยหน้าตาจะเป็นประมาณนี้
Bad test
คือเขามีการเขียน test เช็คค่าตัวแปรชื่อว่า checked แล้ววันหนึ่งเปลี่ยนชื่อตัวแปร test พังแต่ระบบยังทำงานได้นะ โดยเราต้องเปลี่ยนการเช็คตรง state เช็คเป็นการเช็คแบบ User perspective หมายถึง การให้ผลลัพธ์เป็นสิ่งที่ user อยากเห็นก็พอ เช่น
มี function หนึ่งทำหน้าที่เป็นปุ่ม ปิด (off) / เปิด (on) เหมือน switch ไฟ โดยใน code มีการเขียนให้ตัวแปรที่จะเปลี่ยนแปลงนั้นชื่อว่า checked ถ้าใน react ก็ประมาณ
this.state = {
checked: false
}
โดยใน test นั้นมีการเอาตัวแปร this.state.checked มีค่าเท่ากับ true หรือ false ตาม assertion ของการ test ( หากใครงงแนะนำไปอ่านบทความสอนเขียนเทสเบื้องต้นทางนี้ครับ https://oxygenyoyo.com/2017/08/20/just-test-it-part-1/ ) ซึ่งหากวันหนึ่งเรา refector code เปลี่ยนตัวแปรจาก “checked” เป็น “on” แน่นอนว่า React component ตัวนั้นไม่ได้พังหรือทำงานไม่ได้แต่ Test ของเราพังจ้า ~~~
เขาเลยแนะนำว่าให้เขียน test แบบ user perspective ของมันต้องเป็น on นะของมันต้องเป็น off นะ หมายถึง ผลลัพธ์ของการเขียน Function ปุ่มเปิด/ปิด ของมันต้องเป็นคำว่า “on” ในสุดท้าย ไม่ใช่เข้าถึงตัวแปรหลักๆทำนองนี้ครับ
enzyme ( tool ) เป็นเครื่องมือในการ Test เหมือนกันแต่มันอาจจะไม่ดีเท่าไรในมุมองคนพูดเพราะว่ามัน Detect การหยิบ Dom เป็น index ของ input เลยใช้ react-testing-library ( ชื่อ tool ) จากตอนแรก test เขาหยิบ input index ที่ 0 ก็ให้เลือกชื่อมาแทน แต่ถ้าหากเป็นสองภาษาก็ต้องเขียนทั้งสองภาษาเลย
Cypress
ตัวนี้มันดีตรงที่ว่ามันเทสได้หลายแบบและมีพวก bundle ติดมาด้วย เช่น ถ้าคุณถนัดใช้ jquery ก็มีให้คุณเขียนหยิบ dom เพื่อมา test ได้อย่างง่ายความเจ๋งอีกอย่างคือมันทำ vdo กับ time travel ได้หมายถึงสามารถดูได้ว่าแต่ละ step คุณกรอกอะไรตรงไหนแล้วผลมันเป็นยังไงได้อีกด้วย ไว้จะทำ Blog เล่านะคิดว่าน่าใช้ดีสำหรับตัวนี้ครับ
- All in one (bundled: mocha, chai, sinon, lodash, jQuery, moment, Bluebird and etc. )
- Time travel
- Screenshot and video
สรุปของ React testing
- เน้น test integration
- avoid implementation details พยายามอย่า test พวกค่าในตัวแปร
- test by user perspective พยายามคิด test แบบผลลัพธ์ที่ user เห็นจริงๆ
— พักเบรก 5 นาที —
Reason React
ให้มองว่ามันเหมือนภาษาที่เขียนเพื่อให้มัน compile react เป็น component ถ้าคุณนึกไม่ออกก็ให้นึกถึงพวก scss ของ css หรือพวก coffee script อารมณ์ประมาณนั้นเหมือนเขียนสั้นลงและมัน gen ต่างๆให้และผู้พูดบอกว่าสิ่งที่มัน gen ออกมานั้นเล็กและเร็วกว่าสิ่งที่เราเขียนซะอีก สิ่งที่ดีนั้นอีกอย่างคือ error message บอกให้ละเอียดมากๆ อยากลองก่อนเชิญ link ด้านล่าง
https://reasonml.github.io/reason-react/docs/en/what-and-why
Live coding
ตรงนี้จะเป็นแสดงให้ดูว่าตัว ReasonReact มันเขียนอะไรได้อะไร มีการเขียน error แล้วมันแจ้งยังไง ตามรูปนะครับ โดยที่มันง่ายคือ ตอนเราสร้างไฟล์ใหม่ขึ้นมานั้นตัว RE ( ReasonReact ) มันจะมองเป็น module ใหม่ได้ทันทีและเรียกใช้ในตัวไฟล์อื่นได้เลย เช่นในตอนที่เขาทำให้ดูนั้นเขาสร้างไฟล์ชื่อว่า Counter.re แล้วในไฟล์ index.re สามารถเรียกใช้ Counter component ได้เลยไม่ต้องมานั่ง import บ้าบออะไรเลย
จากตอนที่ดูเขา coding สดนั้นตัวภาษา RE เนี้ยมันค่อนข้างฉลาดในการให้ error จริงๆนะ น่าสนใจจริงๆ แต่ก็ต้องแลกด้วยการเรียนรู้หน่อยๆ สำหรับคนเคยเขียนอยู่แล้ว แต่สำหรับผมก็คงยากเหมือนกัน ฮ่าๆ
Production Ready ?
พร้อมใช้งานจริงหรือยัง ตอบเลยว่ายัง เพราะว่าตัว test ยังไม่ดีพอและคนทำบอกว่าให้มาช่วยทำเลยทีเดียว และ style ยังต้องเขียนลงไปใน js อีกด้วย community ยังกำลังเติบโต
สรุป
React test สำหรับใครกำลังมองหาเครื่องมือว่าเขาใช้อะไรยังไงก็แนะนำลองเอาในบทความนี้ได้เลยมีหลายตัวมากหามาใช้อันที่ถนัดดูครับ ส่วน Reason React คิดว่าเป็นอนาคตที่กำลังมารออีกซัก 1 ปีก็ได้คิดว่ามันน่าจะโอเคขึ้นจากนี้ครับ เพราะ FB ได้เอามาใช้กับส่วนของ messager ประมาณ 40% แล้ว อันนี้ทาง speaker บอกมานะ
หากบทความนี้สรุปไม่ครบหรือไม่ถูกต้องอย่างไรแนะนำ comment ไว้ได้เลยครับผมมาอ่านแน่นอนและหากคิดว่าบทความนี้เป็นประโยชน์ก็เพียงกดแชร์บทความออกไปก็จะเป็นกำลังใจให้ผู้เขียนมากๆครับ ^_^
ทางทีมงานที่จัดบอกว่าจะพยายามจัดให้ได้เดือนละ 1 ครั้งถ้าใครอยาก join ก็ติดตามข่าวสารได้ทาง AIS DC เลยสถานที่สวยมากๆจริงครับ และมีที่พร้อมสำหรับ start up ด้วยอ่านรายละเอียดได้ทางนี้เลย
เพิ่มเติม
มีคนเขียนบทความแนะนำอ่านต่อได้เลยครับตามนี้ รู้จัก Cypress: Web Test Framework ที่จะทำให้คุณลืม Selenium ไปได้เลย
