สรุปบทที่ 7 เรื่อง Unit Testing in the Browser with Javascript จากหนังสือ The Way of the Web Tester

ปัจจุบันนี้ Javascript ถือว่ามีบทบาทสำคัญในเว็บในทุกๆวันนี้ และในบทนี้ถ้าอ่านจะทำให้รู้ว่าจะเขียนtest ด้วย Javascript อย่างไร? ในบทนี้สำหรับ Developer จะเป็นบทที่ดีสำหรับตัวเองในการเขียน JavaScript และมองหาไอเดียใหม่ๆในการทำ test อย่างไร สำหรับ Tester ก็ดีเหมือนกัน คุณอาจจะได้รู้อะไรเบื้องต้นในการที่จะเริ่มเขียน Javascript ในการทำ Automated Testing

Magic in the Browser

The Magic of Ajax
Ajax (Asynchronous Javascript and XML) เป็นเทคนิคที่ทำการรับส่งข้อมูลระหว่าง Client กับ Server ได้โดยที่เราไม่ต้องทำการ Refresh หน้า Browser หลักการทำงานของ Ajax คือจะมี Javascript ชุดหนึ่งจะทำหน้าที่ Request ข้อมูลจากทาง Server ผ่านทาง XMLHttpRequest และทำการนำค่าที่ได้นั้นออกมาแสดงที่หน้า Browser อีกที โดยข้อมูลที่จะรับเข้ามานั้นจะเป็น XML หรือว่าเป็น Text plan ธรรมดาก็ได้

Javascript แตกต่างจาก Ruby อย่างไร แล้วมันทำงานขนาดไหน?

เจ้าตัว Ruby เนี่ยจะรันอยู่บน Server การรันบน Server หมายความว่ามันจะมี Request เข้ามา แล้วเจ้า Ruby ก็ทำอะไรบางอย่างเพื่อที่จะได้ผลลัพธ์ออกมาแล้วส่งกลับไป ทั้งหมดของเหตุการณ์เนี่ยเกิดขึ้นที่ Server ทั้งหมด


แต่ในทางกลับกันเจ้าตัว Javascript เนี่ยจะรันอยู่ในฝั่ง Client หมายความว่าการกระทำทั้งหมดใน Browser ทั้งหมด นั่นจึงบอกว่า ทำไม Javascript มันถึงเร็ว เพราะทุกอย่างมันทำงานบน Device


ในส่วนของบทนี้ก็จะเขียน Unit Tests ด้วย Javascript ในฝั่ง Cilent อย่างไร?

DOM (Document Object Model) 
คือการจัดเอกสาร HTML ให้อยู่ในรูปแบบของ DOM Tree โดยนิยาม objects และ properties เพื่อให้โปรแกรมหรือสคริปต์ สามารถปรับเปลี่ยนโครงสร้าง, ข้อมูล และ styles ของ HTML DOM ผ่าน methods ได้

นี่ก็เป็นรูปของโปรแกรม Javascript ที่ฝังอยู่ใน HTML page 
และนี่ก็เป็นโค้ดของเจ้าตัวโปรแกรมนี้


JavaScript and the Pyramid

ถึงแม้ว่าเราจะ Test UI แต่จริงๆแล้วเราก็อย่าลืมที่จะทำการ test ตั้งแต่ Unit tests 
แต่จริงๆแล้ว UI Test ไม่จำเป็นที่จะต้องทำ end-to-end อยู่ตลอด ในความเป็นจริง เราอาจจะทำอะไรให้มันดีขึ้น ให้มันไวขึ้นได้ให้รันแบบ localในตัวของ UI มันเอง 
จึงบอกได้ว่า UI Tests เนี่ยอยู่บนสุดของพีระมิดนะ


ใครก็ได้ช่วย Dave หา Bug หน่อย

จากรูปด้านบนไฮไลท์คนทางฝั่งขวา แล้วกดลูกศรไปทางซ้าย แล้วมันไม่เกิดอะไรขึ้น ทำไมมันถึงไม่อัพเดทละ มาดูกันว่าขั้นตอนควรทำยังไงกัน

Step 1 : Scan the HTML
กำหนด ID ให้กับทุก element
Step 2 : Check the Javascript
Step 3 : Write the Tests
Test Function ในการเก็บข้อมูล Model 4 ตัว
การ Set function ให้กับปุ่มลูกศร แล้วก็ปุ่มSave

ถ้าอยากรู้ว่า Code ของ Step พวกนี้เป็นยังไง ลองหาหนังสือเล่มนี้มาอ่านดูนะครับผม


มาต่อกันเรื่อง Static vs. Dynamic Typing

Static type คือ มีการรวมกันของ stage เป็นภาษาที่ต้องกำหนด type ในการประกาศตัวแปรเช่น c,c++,java, etc. และสามารถแก้ไขข้อผิดพลาดก่อนที่คุณจะรันโปรแกรม
Dynamic type คือ ไม่มีการรวมกันของ step ที่จำเป็น และมันง่ายต่อการรัน ภาษาที่ไม่ต้องกำหนด type ในการประกาศตัวแปรเช่น php,python,java script,etc.

เป็นเรื่องที่ดีที่เราลองทำซ้ำและทดลองโค้ดให้มันรวดเร็วขึ้น โดยพื้นฐานถ้าเราพิมพ์อะไรบางอย่างผิด เราจะไม่สามารถหามันเจอ จนกว่าเราจะจับมันได้ใน Unit test หรือจนกว่าจะพบมันตอนที่อยู่บน Browser แล้วนั่นเอง


สิ่งสำคัญที่ได้จากบทนี้ก็คงจะเป็น
1.เราสามารถที่จะเขียน Unit test ได้ว่าอะไรจะเกิดขึ้นใน Browser 
2.UI test ไม่จำเป็นที่จะ test แบบ end-to-end อยู่ตลอด
3.Javascript เนี่ยไม่ใช่ภาษาที่เป็น stactic type

Reference : https://pragprog.com/book/jrtest/the-way-of-the-web-tester