ในการพัฒนา application ในปัจจุบันที่มีความเปลี่ยนแปลงอย่างรวดเร็ว ปัญหาที่จะพบตามมาด้วยก็คือ bug ของตัวระบบอันเนื่องมาจากความเร่งรีบในการพัฒนา ซึ่งการที่จะลด bug ที่อาจจะเกิดขึ้นก็จำเป็นที่จะต้องมีการทดสอบ (testing) ในส่วนต่างๆทั้งหมดเพื่อหาความผิดพลาด หรือผลกระทบที่เกิดขึ้นจากการเปลี่ยนแปลง เพิ่มเติม code ใหม่ๆ เข้าสู่ระบบหรือ application การทำ testing ส่วนต่างๆซ้ำทั้งหมดเพื่อหาความผิดพลาดที่เกิดขึ้นจากการเปลี่ยนแปลง เพิ่มเติม code ใหม่ๆ ต้องใช้เวลาค่อนข้างมาก อาจจะทำให้ผู้พัฒนาเลือกที่จะทำการ testing เฉพาะส่วน และนั่นอาจนำมาซึ่ง bug ที่เกิดจากส่วนอื่นๆที่ไม่ได้ทดสอบ การทำการทดสอบแบบอัตโนมัติทำให้สามารถลดเวลาใน testing ลงแต่ยังคงไว้ซึ่งการทดสอบ ส่วนต่างๆทั้งหมด สิ่งจำเป็นที่ควรจะรู้ในการทำ automation test คือการเขียนชุดทดสอบโดยเฉพาะ unit test ที่ดี แต่ละ test case ต้องทำงานได้รวดเร็ว แต่ละ test case มีความเป็นอิสระแก่กัน นั่นคือแต่ละ test case จะไม่เกี่ยวข้องกัน ทำให้สามารถทดสอบแบบสุ่มและแบบขนานได้ แต่สิ่งที่พบเจอเป็นประจำคือ ผลจาก test case ที่ 1 เป็น input ของ test case ที่ 2 แล้วผลจาก test case ที่ 2 เป็น input ของ test case ที่ 3 และ …. ซึ่งถ้าเป็นแบบนี้หมายความว่าแต่ละ test case ผูกมัดกันไปหมด และต้องทำงานแบบเรียงลำดับกันด้วย อีกสิ่งหนึ่งที่สำคัญคือ แต่ละ test case จะต้องไม่มีการทำงานร่วมกับระบบ Network และ Database ใด ๆ ทั้งสิ้น และใช้ Mock หรือ Fake ทำการควบคุมสิ่งที่ควบคุมไม่ได้ ทำให้สามารถเขียน test case ได้ดีขึ้น เนื่องจากการทำงานกับ Network และ Database อาจเกิดเหตุการณ์ที่ไม่สามารถควบคุมได้ทำให้ ผลของการทดสอบผิดพลาด ซึ่งแต่ละ test case ต้องสามารถทำงานซ้ำ ๆ และควรได้ผลเหมือนเดิมทุกครั้ง ไม่ใช่ทำงานผ่านบ้างไม่ผ่านบ้าง ไม่มีความน่าเชื่อถือ สุดท้ายก็จะเลิกใช้ เลิกทำและกลับไปทำแบบเดิมก่อนหน้านี้ โครงสร้างของชุดการทดสอบต้องดีด้วย เริ่มตั้งแต่ชื่อของ test case ต้องสื่อถึงสิ่งที่ต้องการจะทดสอบ ทั้ง input และ expected result ชื่อยาวไม่มีปัญหากับเรื่องของ performance ว่าจะช้าเนื่องจากมันอยู่ในส่วนของการทดสอบไม่ใช่ระบบงานจริง โครงสร้างหลัก ๆ ของแต่ละ test case ควรประกอบไปด้วย การกำหนดหรือจัดการค่าเริ่มต้นที่ต้องการ, การกระทำที่ต้องการทดสอบ และ ตรวจสอบผลการทำงานว่าเป็นไปตามที่คาดหวังหรือไม่ อย่าลืมว่าชุดการทดสอบ มันคือเอกสารชนิดหนึ่งที่ใช้อธิบายการทำงานภายในของระบบ ทั้ง class และ function ต่าง ๆ เพื่อให้คนอื่น ๆ เข้ามาอ่านอีกด้วย การคิดก่อนทำ นั่นคือก่อนที่จะเริ่มต้นทำ จะต้องเข้าใจปัญหาหรือมีเป้าหมายก่อน จากนั้นจึงแบ่งปัญหาใหญ่ออกเป็นปัญหาย่อยเพื่อให้แก้ไขปัญหาได้ง่ายขึ้น การทดสอบจะง่ายหรือไม่นั้นสิ่งที่สำคัญมาก ๆ คือโครงสร้างของ code ที่พัฒนานั้นได้คิดหรือออกแบบการทดสอบกันอย่างไรหรือไม่ ซึ่งถ้าไม่ได้คิดถึงการทดสอบตั้งแต่แรก การทดสอบจะทำได้ยากมาก   แหล่งอ้างอิง : http://www.somkiat.cc/write-automation-test/

Directives คือ สิ่งที่เราเพิ่มเข้าไปใน Tag ของ HTML ซึ่งจะไปสร้าง behavior ให้กับ DOM หรือ เปลี่ยนรูป DOM จะแบ่งออกเป็น 2 ประเภทใหญ่ๆ ได้แก่ 1. Built-in Directive ซึ่งส่วนใหญ่ขึ้นต้นด้วย *ng ที่ Angular มีมาให้ก็จะมีมากมาย อาทิเช่น ng-app : ฺบอกให้ Bootstrap เริ่มทำงาน Angular กับ element ไหน ng-controller : จะใช้ controller จัดการกับ view ไหน ng-model : binding ค่าเข้า view กับ model ng-show/ ng-hide : เพื่อแสดง/ซ่อน element ngFor : ใช้ในการวนลูป ngIf : ใส่เงื่อนไขเช็คค่า 2. Custom Directive ที่เราสามารถกำหนดเอง จะแบ่งเป็น HTML DOMS element – เราสามารถสร้าง element ใหม่ของเราขึ้นมาเองได้ เช่น <ma-directive></ma-directive> attribute เราสามารถสร้าง attribute ให้กับ element เช่น <div ma-directive=”test”></div> class name ตั้งชื่อคลาส เช่น <div class=”ma-directive: test;”></div> comment เช่น <!–directive: ma-directive test –> เราจะมาลองทำทั้งสองแบบ ก่อนอื่นสร้าง component ใหม่ชื่อ user โดยใช้คำสั่งดังภาพที่ 1 และใส่เพิ่ม tag <app-user></app-user> ในหน้า app.component.html ภาพที่ 1 สร้าง user component จากนั้นเปิดไฟล์ user.component.ts เพิ่มโค้ดดังภาพที่ 2 ซึ่งเป็นการกำหนดตัวแปรชื่อ users เก็บข้อมูลแบบ array แต่ละ user ประกอบไปด้วย name, code และ status ซึ่งเราจะนำไปวนลูปแสดงข้อมูล ภาพที่ 2 สร้าง array ของ users การใช้ Built-in Directive ในที่นี้จะยกตัวอย่าง ngFor สำหรับการวนลูป ซึ่งเราสามารถนำไปใส่ใน HTML Tag หรือ HTML Element นั้นๆได้เลยในไฟล์ user.component.html และหากต้องการใส่เงื่อนไข เราสามารถใช้ ngIf เพื่อเช็คค่าต่างๆ ดังภาพที่ 3 ภาพที่ 3 ตัวอย่างการใช้ ngFor และ ngIf จากภาพที่ 3 เราใช้ ngIf เพื่อตรวจสอบสถานะของ user โดยถ้าสถานะเป็น single จะแสดงรูปดาว และสถานะ married จะแสดงรูปหัวใจ เมื่อรันหน้าเว็บจะปรากฎหน้าจอดังภาพที่ 4 ภาพที่ 4 ผลลัพธ์ที่ได้ สำหรับตัวอย่างการทำ Custom Directive เราจะมาสร้าง highlight เมื่อเอาเมาส์ไปชี้ที่ชื่อ user โดยใช้คำสั่งดังภาพที่ 5 เพื่อสร้างDirective ชื่อ highlight ภาพที่ 5 คำสั่งสร้าง Custom Directive จากนั้นเปิดไฟล์ highlight.directive.ts ดังภาพที่ 6 ซึ่ง selector เป็นตัวบอกว่าคอมโพเน้นของเราจะมีชื่อเป็นอะไรเมื่อไปปรากฎที่ HTML Element หรือ Attribute ส่วนการเรียกใช้งานก็ให้อ้าง