tools tutorial - เริ่มต้นเขียน Test AngularJS ขำๆ แบบรวบรัดทำเป็นเทสผ่าน

|


สวัสดีครับ ช่วงเริ่มต้นบทความเนี่ยลำบากใจทุกทีไม่รู้จะเขียนทักทายยังไง …

โอเค เข้าเรื่องดีกว่า เชื่อว่าพวก unit test อะไรคงมีสอนกันเยอะมากในเน็ต แต่ละคนก็เขียนกันคนละแบบเลยก็สูตรใครสูตรมันละกันครับ แนะนำว่าให้อ่านศึกษาดูตัวอย่างเยอะๆนะครับ พอดีมีแววว่าจะต้องได้เขียน test angularjs ก็เลยมาดูๆเพื่อไว้ก่อน สำหรับบทความนี้พยายามตั้งค่าอะไรให้น้อยที่สุด เพื่อให้ง่ายต่อความเข้าใจไม่ยุ่งยาก (*บทความนี้มีไว้ให้เจ้าของกันลืม 555)

 

โอเคครับก่อนอื่นเนี่ย เราต้องรู้จักกับ unit-test ก่อน … โอเค เอาเป็นว่าน่าจะรู้จักกันอยู่แล้วแหละนะ ถ้าไม่รู้จักนี่แนะนำให้หาอ่านก่อนนะครับ โดย จะเขียน test เนี่ยแต่ละภาษาก็จะมีวิธีมีเครื่องมือที่แตกต่างกันไปครับ ซึ่งในบทความนี้จะเขียน test angularjs โดยใช้ karma jasmine ครับ นั่นๆงงๆ โอเคมาทำความรู้จักกันก่อน

  • Karma เป็นเหมือนเครื่องมือช่วยจัดการกับสภาพแวดล้อมให้เราสามารถรัน test ได้ (เอาจริงๆบอกแค่นี้คง งงๆเดียวดูตัวอย่างว่ามันมีประโยชน์อะไรก็น่าจะ อ๋อ) ซึ่งสามารถติดตั้งปลั้กอินต่างๆเพิ่มเข้าไปได้อีกด้วย รายชื่อปลั้กอิน
  • Jasmine เป็น  framework สำหรับทำ testing โดยเฉพาะ ซึ่งจริงๆมีหลายเจ้ามากถ้าเราไม่ใช้ jasmine ก็ยังมีทางเลือกอื่นๆอีกมาก

 

โดยจริงๆถ้าเราจะ test javascriptใช้แค่ jasmine ก็ได้ครับไม่พึ่ง Karma เลยแต่เชื่อเถอะครับไม่เวิค เราควรใช้งานมันเริ่มกันแหละ โอเคหลักๆที่ควรจะรู้ก็มีสองอย่างนี้แหละครับทีนี้เรามาติดตั้ง เครื่องมือเรากันดีกว่าครับ

 

อันนี้ไฟล์ package.json จริงๆสามารถ copy อันนี้ไปใช้ได้เลยนะครับ หรือใครอยาก init เองก็ก็อบแค่ส่วน devDependencies ไปแค่นั้นก็ได้ครับแล้วก็ npm install กันโล้ดดดด

โอเคเมื่อติดตั้งเครื่องมืออะไรกันเรียบร้อยก็มาเริ่มกันเลยครับก่อนอื่นเนี่ยเราต้องเริ่มจากตั้งค่า karma ก่อนเพื่อให้รู้ว่าเราจะรันไฟล์เทสเราที่ไหน หรือจะมีการตั้งค่าติดตั้งปลั้กอินอะไรเพิ่ม โดยเริ่มต้นให้เราพิมคำสั่ง (ในกรณีมีปัญหาการใช้งานคำสั่ง karma ให้พิม npm install karma -g เพิ่มเข้าไปนะครับ)

 

หลังจากนั้นก็จะมีคำถามเกี่ยวกับการตั้งค่าพื้นฐานให้เราเลือกซึ่งถ้าเรา ไม่พิมอะไรแล้ว enter ก็จะถือเป็นก็ข้ามไป ซึ่งให้เราเลือก jasmine เรานะครับ อะไรที่ไม่รู้เว้นว่างไว้ก็ได้ครับ หลังจากนั้นเราก็จะได้ไฟล์ karma.conf.js ทีนี้เรามาแก้ไขไฟล์นี้กัน (ข้างล่างคือที่แก้ไขแล้วนะครับ)

 

โดยหลักที่ควรจะต้องรู้คือ

  • framework: อันนี้คือ framework ที่ใช้ในการ test ควรเป็น jasmine
  • files: อันนี้เป็นการ include files ก่อนที่เราจะเข้าสู่การเทสซึ่ง karma ก็รู้ว่าต้องใช้ไฟล์อะไรบ้างในที่นี้ก็จะมีพวก angular หรือไฟล์ต่างๆในโปรเจค (แล้วก็อย่าไปทะลึ่ง include ไฟล์ angular.min.js นะครับ มันจะพัง 555+ )
  • browsers: อาจจะดูเหมือนไม่สำคัญใส่อะไรก็ได้ แต่บางคำสั่งก็ไม่รองรับบนบาง browser นะอันนี้สำคัญ

*_test.js  หมายถึงไฟล์ไหนก็ตามที่มีชื่อลงท้ายด้วย _test.js เช่น user_test.js , test_test.js , app_test.js

 

หลักๆที่น่าจะต้องรู้แต่จริงๆค่าอื่นๆก็สำคัญนะครับ แต่แนะนำให้อ่านเพิ่มเติมนะครัชชชช โอเคเรามาเริ่มเขียน angular กับไฟล์ test ของเรากันเถอะครับ

เริ่มจาก src/myapp.js จะเป็นว่ามี controller SimpleCtrl กับโค้ดนิดๆหน่อยๆ ^,^ (ตัวอย่างนะครับ)

 

ต่อไปเราอยากจะทดสอบว่าเจ้า SimpleCtrl เนี่ย message มีค่าเท่ากับ “Hello World” ไหมหรือว่า function add เราทำงานได้ถูกต้องรึเปล่าก็จะเริ่มกันเลย  เวลาเขียน test ก็จะประมาณนี้ครับ

 

(เดียวๆใจเย็นๆก่อนอย่าพึ่งตกใจ!!)

โอเคมาเริ่มอธิบายกันเถอะครัช คือว่าอาจจะเริ่มงงๆนิดนึง มาถึงอะไรเยอะแยะฟะ จริงๆแล้วสำคัญๆคือ เรื่องของเรื่องเนี่ยคือ

เป็นการบอกให้ ว่ามีการจำลอง module myapp (อ่านเพิ่มเติม mock.module) ของขึ้นมาก่อนที่จะทำการเริ่ม test (beforeEach และก็มี AfterEach ด้วยคือหลังจากทดสอบเสร็จ) ต่อมาเนี่ยเพื่อที่เราจะเริ่มจะบอกว่าการเทสนี้จะเทส SimpleCtrl ก็ต้องเรียกเข้ามาด้วยโดยใช้ $controller เป็นคำสั่งที่ใช้ในการสร้าง controller พร้อมกับ inject ค่า และจะเห็นว่ามีการเรียกใช้  inject()  มันคือ 1 ในความสามารถของ ngMock module ที่ช่วยให้เรา inject dependencies

 

ส่วน expect บรรทัดนี้หมายถึงคาดหวังว่า function scope.add เนี่ยจะทำงานได้ถูกต้องคือ มีค่าเท่ากับ 2 ซึ่งถ้าผลลัพธ์ที่ได้ไม่เท่ากับ 2 จะถือว่าการทำงานผิดไม่ตรงกับเป้าหมายที่หวังไว้จะ test failed นะครับ

describe กับ it เข้าใจว่ามันเหมือนพวกคำอธิบายละกันครัชช

 

ทีนี้ไฟล์ต่างๆจะอยู่ในในโฟลเดอร์เราก็จะหน้าตาประมาณนี้นะครับ path ต่างๆก็จะตรงตั้งกับค่าที่เราตั้งใน karma

Screen Shot 2558-06-13 at 10.53.06 PM

 

โอเคมารันกันได้ละ เหนื่อยๆวิธีการรัน karma เนี่ยคือเราต้องไปอยู่ที่โฟลเดอร์เดียวกับไฟล์ karma.config.js จากนั้นให้เราพิมคำสั่ง

หรือ

เพราะว่าผมไปตั้งค่าไว้ใน package.json ว่าถ้าพิม npm test เนี่ยจะรันคำสั่ง karma start มันสั้นดีนะครับแต่นำให้ลองตั้งดูหรือดูจากตัวอย่างก็ได้ครับ

 

เอาละทีนี้ได้ผลลัพธ์ดังภาพ และก็จะมี browser เด้งขึ้นมาตามที่เราตั้งว่าจะเทสกับ browser อะไรปล่อยมันยังงั้นละครับ

Screen Shot 2558-06-14 at 1.31.45 AM

Screen Shot 2558-06-13 at 10.55.32 PM

ทีนี้ karma จะบอกเราว่า test เราสำเร็จหรือไม่ อะไรยังไง 🙂 โหทำตั้งนานเพื่อดูสองบรรทัด Y.Y ทีนี้ถ้าใครได้ Failed นี่ก็ตามแก้เอานะครับ 555+ (karma จะรันใหม่ทุกครั้งที่มีการแก้ไขไฟล์ใน path ที่เรากำหนดนะครับ)

ส่วนอันนี้คือโค้ดที่เราทำกันมาทั้งหมดนะครับใครขี้เกียจก็โหลดไปรันเล่นกันได้นะครับ https://github.com/zier/beginner-angular-testing

โอเค หวังว่าจะช่วยให้ใครที่อยากจะ test angular ให้เข้าใจได้เร็วขึ้นหรืออย่างน้อยๆก็รู้ว่าต้องเริ่มจากไหนนะครับ

Share Button

Comments

comments