ถึงแม้เจ้า AngularJS จะได้ชื่อว่าเป็น Version แรกสุดและเก่าสุดของ Angular Framework แต่ก็ต้องยอมรับว่ายังมี Team Developer อีกพอสมควร ที่ยังคงใช้ AngularJS กันอยู่ ถึงจะได้ชื่อว่าเป็น version บุกเบิก แต่มันก็ยังคงถูก support โดยทีมผู้พัฒนาอยู่เสมอ แม้จะฟังดูเก่า แต่ในการรับงาน ปรับปรุง/แก้ไข/ต่อเติมเว็บไซต์ ก็เป็นอีกเรื่องที่หลีกเลี่ยงไม่ได้เช่นกัน ที่จะต้องเจอกับเจ้า AngularJS Framework เพราะจะทำใหม่หมดก็คงไม่คุ้ม ไหน ๆ ก็ เลี่ยงไม่ได้แล้ว ถ้างั้นยอมจำนนแล้วมารู้จักกับเจ้า Angular ใน Version JS กันซะดีๆ!!

และในบทความนี้จะพูดถึงการใช้ AngularJS เป็นหลักในรูปของ Static Web โดยใช้ HTML CSS + Bootstrap เป็น View และ Javascript เป็น Controller ดังนั้น . . .

• สิ่งที่ควรคุ้นเคยก่อนอ่านบทความนี้
  - HTML CSS Bootstrap
  - Javascript
  - Front-end Framework (คุ้ยเคยหรือเคยเล่น framework ซักตัวมาบ้าง)
  นะจ๊ะ . . เพราะอาจจะไม่ได้สาธยายเกี่ยวกับเจ้าพวกนี้มากนัก แต่ก็จะแป่ะเป็น Link เนื้อหาให้แทนละกัน
• วัตถุประสงค์ของเรา
  1. สร้าง View Table รายการสินค้า
  2. สร้าง Congroller เพื่อจัดการกับ model และทำ Search
  3. สร้าง Service เพื่อให้ Controller เรียกใช้งาน
  เราจะไม่ได้เข้าไปถึงขั้น Advance แต่อย่างใดในบทความนี้ เราจะเอาแค่ Simple ๆ นั้นก็คือเข้าใจเจ้า AngularJS นั้นเอง

เริ่มกันเลยดีกว่า . . . ช้าอยู่ใย Setup Project ให้ได้โครงสร้างตามนี้ซะ

จะ Spoil ให้ว่าทั้งบทความเราก็จะมีไฟล์ Suck ๆ อยู่กันแค่สามตัวนี้แหละจ้าา
ใครจะใช้ IDE อื่น ไม่ว่ากันนะ . . แต่ฉันจะใช้ VS CODE สุดแค้นแสนรัก++

มา!! เริ่มวัตถุประสงค์กันเลยดีกว่า
“1. สร้าง View Table รายการสินค้า”
จัดการยัดมันเข้าไปเลย++

ในส่วนของหน้าหลัก html ของเรา ก็ไม่มีอะไร Extra นอกจากการ Setup แบบบ้าน ๆ ด้วย reference ไปยัง Css Library Bootstrap ตามด้วยพระเอกอย่าง AngularJS Sctipt และ Include เจ้าไฟล์ app.js และ style.css ของเราเข้าไปด้วย

อ๊ะ . . วาป! สำหรับ version ปัจจุบันที่ใช้ในบทความนี้

Bootstrap:
https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css

AngularJS:
https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js

แต่การ Setup เจ้า AngularJS ของเรายังไม่เสร็จสิ้นนะเออ!
Step สุดท้ายในการ Setup เจ้า Project ของเรา

อ่ะ จัดการยัดเจ้า Expression 1+1={{ 1+1}} และ Directive “ng-app” ลงไปในหน้า html ของเราซะ

เฮ้ ๆ ไหนลองเปิด index.html ดูซิ++

Yassss! นั้นก็ถูกต้องแล้วแล

แต่ เอ…. เจ้าปีกกา expenssion พอคุ้นเคยนะ แต่เจ้า ng-app นี้สิคืออะไร ?

แท้จริงแล้วมันก็คือหนึ่งใน Directive ของ AngularJS นั้นแล ซึ่งเป็นจุด Start Point ของ AngularJS เพราะถ้าหากขาดมันไปแล้วล่ะก็ เราก็จะไม่สามารถที่จะ Run เจ้าโปรเจ็ค AngularJS ของเราขึ้นมาได้
… จริงหรอ ? … ไหนลองซิ!! ขยี้มันออกเลยแล้วรันใหม่!!

เย้++ Expression ไม่ออกแล้ว . . . จะบ้าเร๊อะ!!

ก็เพราะเจ้า ng-app นั้นคือจุด Start Point ของเจ้า AngularJS Application ไงจ๊ะนายจ๋า . . เจ้า AngularJS จะเริ่มต้นเช็คหา ng-app Directive ที่ไหนซักแห่งในหน้าเพจ html ของเรา ซึ่งเมื่อเจ้า AngularJS ตรวจพบเจ้า ng-app เมื่อไหร่ มันก็จะ Bootstrap ตัวมันเองขึ้นมาและเข้าไปจัดการในส่วนของหน้า UI ใน tag นั้น ๆ

เอ . . . . แปลว่า ถ้าเราไประบุเจ้า ng-app วันไว้ที่อื่น แล้วเรียกใช้ expressions ไว้นอก tag html มันจะ error ? . . . ไหนลองซิ!!

ลองใส่ expression {{ 2 + 2 }} ไว้ใน tag ที่มี ng-app
และ {{ 1 + 1 }} ไว้นอก tag ที่มี ng-app

เย้ ออกอันเดียว . . .
อ่าว ก็แน่นอนล่ะซิ ก็เพราะเราไปใส่เจ้า ng-app ไว้ในแท็ก <div> แต่เจ้า {{ 1 + 1 }} ของเราดันไปอยู่นอก Scope ของเจ้า <div> ที่มี ng-app เข้า มันจึงเป็นเหตุผลว่าทำไมเราถึงใส่มันไว้ตรง tag <html> ตั้งแต่แรก
. . . แต่จริง ๆ ตรง tag <body> ก็ได้นะเออ
. . . แต่จริง ๆ ใส่ไว้หลาย ๆ ที่ก็ได้นะเออ
. . . ก็เอาที่สะบายใจละกันนะเออ . . . เพราะบางครั้งเราอาจจะต้องการ Module หลาย ๆ ตัวเพื่อที่จะเขียนเว็บใน Scale ใหญ่ ๆ ดังนั้นจะทำ module ออกมากี่ตัวก็ขึ้นอยู่กับความต้องการโดยรวมนะเออ

เอ้า!! มาต่อ++
จัดการสร้าง View Table Product List ด้วย html css bootstrap

ในบทความนี้จะไม่สาธยายเกี่ยวกับเจ้า css เลยแต่อย่างใดน่ะจ๊ะ เพราะเกรงว่ามันจะยาวเกินไป ถ้าเช่นนั้นแล้ว เอาเจ้า code css กาก ๆ ตัวนี้ไปใส่ไว้ใน style.css ของเรากันได้เลย

.center {
text-align: center;
margin: auto;
}
.turn-text-left {
text-align: left;
}
.turn-text-right {
text-align: right;
}
.space5 {
padding: 5%;
}
.margin-2px {
margin: 2px;
}
.padding-space {
padding: 5px;
}

และ . .

ถ้าใครลอกทุกบรรทัดก็แก้เจ้าตัวนี้ด้วยนะเออ เพาะตามจริงแล้วมันต้องเป็น style.css ตามโครงสร้างโปรเจ็คของเรา เดี๋ยวเจ้า html ของเราจะหา css ไฟล์ไม่เจอ

เสร็จเราก็มาต่อกันที่ tag <body> จัดการใส่เจ้าพวก html css เข้าไป

แล้วเราก็จะได้ index.html รูปร่างหน้าตาเช่นนี้ . . . ว่าแล้วก็รันมันขึ้นมาเลย++

เอ . . . ยังขาด Table นะ งั้นใส่มันเข้าไปอีกดีกว่า แทรกระหว่าง UI Search และ script reference ของเรา

แล้วเราก็จะได้ Overview เช่นนี้

เสร็จแล้ว Run ดูหน้าเว็บกัน

Yesss !! และในที่สุดเราก็จบในส่วนของ UI ซักที
มา! ต่อกันในส่วนของ Controller กันดีกว่า เปิดไฟล์เจ้า app.js ขึ้นมากันเลย!!

และในวัตถุประสงค์ที่สองของเราก็คือ
“2. สร้าง congroller เพื่อจัดการกับ model และทำ search”

เราจะมาเริ่มต้นด้วยการสร้าง Module และ Controller ให้กับเจ้า ng-app ของเรากัน

โดยเราจะเริ่มต้นแบบ Basic ๆ ด้วยการแทนค่า

var app = angular.module( ‘myApp’ , [ ] );

ซึ่งนี้คือวิธีการสร้าง module ของเรา
และ app.controller . . . นั้นก็คือการสร้าง Controller ภายใน Module App ของเรานั้นเอง
ดังนั้นเมื่อเราสร้าง Controller ไว้ใน Module ไหน เราก็ต้องเรียกใช้ให้ถูกต้องด้วยนะเออ

มา! ถึงเวลาเรียกใช้มันแล้ว ใส่มันลงไปใน html ของเรากันเลยดีกว่า

ในส่วนของเจ้า ng-app เราก็ใส่ ชื่อ module “myApp” ที่เราสร้างเข้าไป
ส่วนเจ้า ng-controller เราก็ใส่ ชื่อ controller “myController” ของเราที่สร้างใน module “myApp” ซะ

หลังจากนั้น เราก็จะสามารถเรียกใช้งานเจ้า Variable ต่าง ๆ ที่เราประกาศไว้ภายใน Controller “myController” ของเราได้เลย ดังนั้นก็เรียกมันออกมาแสดงผ่าน expressions ในส่วนของ <tbody> ตามรูปซะ

ซึ่งในส่วนของ ของ {{ name }} . . บลา ๆ ที่เรา reference ถึงนั้นเราก็หมายถึงเจ้าพวก variable ใน myController ของเรานั้นเอง

ซึ่งเจ้า $scope ณ ที่นี้ก็หมายการ Binding Variable ระหว่าง html และ javascript โดยเราจะสามารถเรียกใช้งานมันได้จากหน้า html ผ่าน JS controller

เอาล่ะ . . ในเมื่อใส่มันเข้าไปเสร็จแล้ว ไหนลองรันดูซิ!

เหมือนเดิมเลย แต่ในที่สุดเราก็ได้ model ของเราที่ใส่ไว้ใน controller 3 ตัวนั้นออกมา . . . ok งั้นเรามาต่อกันเลยดีกว่า สร้าง model list ขึ้นมาแล้วเอามันมาแสดงลงใน Table Product เลย

จัดการขยี้เจ้า model name/price/quantity ออกซะ แล้วใส่ model list ตัวใหม่ของเราเข้าไปแทน

[{name: ‘Pencil’,price: 7.50,quantity: 140},
{name: ‘Cola’,price: 15.75,quantity: 50},
{name: ‘Book’,price: 69.50,quantity: 1200},
{name: ‘Montor’,price: 2500,quantity: 17},
{name: ‘Land Cable’,price: 150,quantity: 94},
{name: ‘Mouse’,price: 450.75,quantity: 45},
{name: ‘Iphone Cable’,price: 290,quantity: 60},
{name: ‘Table’,price: 590,quantity: 4},
{name: ‘Pen’,price: 12.75,quantity: 2440},
{name: ‘Keybord’,price: 790,quantity: 12},
{name: ‘Paper’,price: 0.50,quantity: 1200}]

ในเมื่อเสร็จสิ้นในส่วนของ controller แล้ว เราก็มาจัดการต่อในส่วนของ html กัน

ณ จุด ๆ นี้เราจะทำการใส่เจ้า ng-repeat หรือ ng-for ใน Angular2 ขึ้นไป โดยเราจะ loop เอา Object ใน list ของ products ออกมาแสดง โดย Syntax จะต่างกันเล็กน้อยเพราะเราจะใช้ in แทน of ใน Angular Version อื่น ๆ

และเราจะนำเอาเจ้า attibute ของ product in products มาใส่ใน tag <td> ตามภาพเลยนะจ๊ะ . . . เมื่อใส่เสร็จแล้วก็ Run เลย

และนี้ก็คือผลกรรม เอ๊ยยย . . . ผลลัพธิ์!! Yassssss!! . . . ok ดีใจพอละงั้นทำ Search ต่อเลยดีกว่า

สำหรับ Search ในที่นี้ไม่ได้ยากเลยแม้แต่นิด น่ะจ๊ะ . . เพราะเราจะใช้ฟีเจอร์ของเจ้า AngularJS กัน

โดยเราก็จะใส่เจ้า ng-model ที่เป็น Two-Way Binding เข้าไป
และในส่วนของ ng-repeat นั้นเราก็จะใส่ filter เข้าไปโดยมี “|” หรือที่บางคนเรียกกันว่า pipe คั่นกลาง

Data Binding
https://docs.angularjs.org/guide/databinding
https://www.w3schools.com/angular/angular_databinding.asp

Filter & Pipe
https://docs.angularjs.org/api/ng/filter/filter

. . . . Run ดูซิจ๊ะ!! แล้วลอง Search กันดูในช่อง Input ด้วย “Pen” keyword

ไหนดูผลลัพธิ์ซิ๊++ Yessss! นี้แหละที่สังคมต้องการ
แต่ไหน ๆ ก็ได้ใช้ filter ในการ Search ไปแล้ว
เรามาใช้ filter ในการ Reformat เจ้า price และ quantity ด้วยเลยดีกว่า

จัดการใส่ pipe คั่นและใส่ Filtter เข้าไป
กับ quantity เราจะใช้ Filter ||number: “จำนวนจุดทศนิยม”
ส่วน price เราจะใช้ Filter ||currency: “สัญญาลักษณ์ค่าเงิน“:”จำนวนจุดทศนิยม”
เสร็จแล้วเรามาดูผลลัพธิ์กัน

ถึงแม้ในส่วนของ quantity เราจะใส่เป็นจุดทศนิยม 0 ตำแหน่งไปและเหมือนไม่ได้อะไร แต่ถ้าสังเกตุให้ดี ๆ ล่ะก็ เราก็ได้ , มาอยู่นะจ๊ะ

สงสัย ณ จุดไหนเพิ่มเติมเข้าไปอ่าน API Reference ได้เลย
https://docs.angularjs.org/api/ng/filter/filter

ในที่สุดก็มาถึงวัตถุประสงค์สุดท้ายกันซักทีกับข้อที่สาม
“3. สร้าง Service เพื่อให้ Controller เรียกใช้งาน”
ถึงเวลา ย้าย model กันแล้ว

งงอ่ะดิ งั้นเอาไปอีกรูป ดูคู่กันพร้อมอ่าน นะจ๊ะ ถึงจะเข้าใจง่ายขึ้น

โดยเราจะสร้างเจ้าตัว Service ขึ้นมา ตามภาพและย้ายเจ้าโมเดล Products ไปไว้ใน Service แทนโดยใช้ชื่อว่า data และเปลี่ยนจาก $scope.products เป็น this.product และขยี้เจ้า $scope ทิ้งซะ เพราะตอนนี้มันหมดประโยชน์แล้ว Yeah!!!

หลังจากนั้นเราก็ทำการเปลี่ยน Parameter ช่องที่สอง ของ app.controller ให้กลายเป็น Array [ ] เพื่อที่จะสามารถ Inject เจ้า “MyService” ของเราเข้าไปให้ Controller เรียกใช้ได้ และอย่าลืมยัดเอาเจ้า function เข้าไปในนั้นด้วย

แต่เดี๋ยวก่อน . . .มันยังไม่จบน่ะจ๊ะ เพราะเราต้องจะต้อง reference พวก Model ต่าง ๆ ของเราที่ก่อนหน้านี้เราใช้ $scope แต่ตอนนี้เราเปลี่ยนเป็น this ไปแล้วดังนั้นเราต้องใช้วิธีการเรียกแบบใหม่ โดยจะเรียกผ่าน “myController” Object แทน เพื่อให้สามารถหา model เจอได้จากไฟล์ html . . . งง มะ ? . . . งั้นไปดูกัน . . .

Okey ในไฟล์ html จากเดิมที่เราสามารถเรียกใช้ variable ได้เลยโดยตรง แต่ตอนนี้เราต้องเรียกใช้งานมันผ่าน controller ของเราในรูปแบบของ Object แทน ซึ่งก็คือเจ้า “myController”

เอ. . . . แต่ถ้าจะให้เรียกใช้ผ่านชื่อเต็มอย่าง myController.products บลา ๆ มันก็จะดูยาวไปหน่อย . . . ดังนั้นเรามาตั้งชื่อย่อสั้น ๆ หรือ Short nameให้มันแล้วเรียกใช้แทนชื่อเต็มจะดีกว่า

โดยเราจะสามารถตั้งชื่อใหม่ให้กับเจ้า myController ของเราได้ด้วย keyword ง่าย ๆ นั้นก็คือ ass . . . เอ้ยย~ ไม่สิ s ตัวเดียว

Rename | ng-controller=”myController as ctl”
Call by full name |myController.products
Call by short name |ctl.products

Yaddddddddssssss!! output เหมือนเดิมเลย แต่ในที่สุดก็ครบ 3 วัตถุประสงค์ซักที แต่ เอ . . . นะ ทำไมเราต้องแยกเอา model ของเราจาก Controller ไปไว้ใน Service ทำไมให้มันยุ่งยากล่ะ ?

ถูกต้องแล้วจ่ะ จริง ๆ เราเก็บเจ้า model ของเราเอาไว้ใน controller ทั้งหมดเลยก็ได้ ไม่จำเป็นเลยซักนิดที่เราต้องแยกมันไปใส่ใน Service แล้ว Inject เข้ามาแทน

. . . เอ … แต่ถ้าเช่นนั้นแล้วเราจะมี Service ไว้ทำมะเขือพวงอะไรกัน O.o?

ซึ่งแน่นอนว่าเจ้า Service นี้มีประโยชน์แน่นอน ในกรณีที่เรามี Controller หลายตัว ไม่ว่าจะ 2 3 หรือมากกว่า เจ้า Service นี้จะมีประโยชน์โดยเป็นตัวกลางในการเก็บเอา Logic ของ controller ที่ต้องเขียนซ้ำ ๆ มาเขียนไว้ที่เดียว และเรียกใช้ผ่านการ Injection แทน . . . มองภาพยากมั้ย ? . . . งั้นมาดูรูปกัน

จะเห็นได้ว่า controller ทั้ง 3 ตัวนั้นจำเป็นต้องใช้โมเดล data ตัวเดียวกันหมด ซึ่งจะเกิดอะไรขึ้นถ้าหากเราไม่มี MyService ตัวนี้ไว้ให้บริการ ? . . . เราจะทำการใส่ code ซ้ำ ๆ มันลงไปใน controller เช่นนั้นเลยรึ ??

ก็หวังว่าทุกคนจะได้คำตอบจากภาพประกอบตัวอย่างที่ได้มานี้น่ะจ๊ะ . . . แต่ถ้าถามว่าแล้วในบทความนี้ที่เขียนมา Service นั้นได้ประโยชน์อะไร ก็ขอตอบง่าย ๆ เลยว่าไม่มีจ๊ะ . . . แต่ทำมาเพื่อให้ได้เข้าใจกันถ้วนหน้าเก่ียวกับ AngularJS Module Controller Service ตามวัตถุประสงค์เท่านั้น

เอาล่ะ . . งั้นมาจบบทความนี้ไปพร้อม ๆ กันกับ Review ฉบับเต็มของไฟล์ html js css ของโปรเจ็คนี้กัน . . . บายจ่ะ

Ok!! พร้อมแล้วเรามาเริ่มทำ Best Practices นี้กันเลย++

• ในบทความนี้เราจะมาทำงาน Robot Test สำหรับเว็บ Priceza แบบง่าย ๆ กัน

โดยจุดประสงค์ของเจ้า test ตัวนี้จะมีอยู่ว่า
1. Test Url www.priceza.com ทำงานได้ปกติ
2. Test Search ค้นหา Product แล้วต้องมี results ออกมา
3. Test Search product with max/min price แล้วต้องได้ results ที่ต้องการออกมา
ปล. แต่อย่าลืมไปนะจ๊ะ ว่าในบทความนี้เราจะมาทำ Test แบบ Clean ๆ กัน ไม่ใช่การสอนวิธีติดตั้งใช้งาน หรือแก้ปัญหาใด ๆ

Setup Projec กัน

• Priceza (Folder Project)
  | — results (ไว้สำหรับเก็บไฟล์ .robot)
  | — tests (results จะไว้สำหรับเก็บผลลัพธิ์ที่ได้จากการ Test)
  | —| — PricezaTest.robot

เพิ่ม *** Settings ***

Documentation สำหรับระบุ Document details ว่าเจ้า .robot ไฟล์นี้ทำหน้าที่เกี่ยวกับอะไร

ปล. แต่ขอเน้นหน่อย ๆ นะ ว่าเจ้า Document detail นี้ควรที่จะระบุสั้น ๆ ว่า test นี้ทำอะไร ไม่ใช่ทำอย่างไรนะจ๊ะ

Library เป็นสิ่งที่เราจะขาดไม่ได้เลย กับเจ้า Selenium2Library พระเอกของงาน

การ Setup โปรเจ็คเสร็จสิ้น แต่ . . . การเทสพึ่งจะเริ่มต้นขึ้นเท่านั้น . . . ต่อซิ รออะไร!!

มา!! . . . เริ่มกันที่วัตถุประสงค์แรก
“1. Test Url www.priceza.com ทำงานได้ปกติ”
ซึ่งเราต้องการเทสว่าหน้าเว็บเพจนี้ มันทำงานอยู่รึเปล่า แค่นั้นเองแหละจ่ะ

โดยเราจะเริ่มต้นให้ Basic ที่สุดด้วยการ ใส่ Test Case ลงมันไปเลย

เมื่อได้ Test Case เพียงพอแล้ว จากนั้นเราก็มารันเจ้าไฟล์ .robot ตัวนี้ผ่าน Folder Priceza Project กัน
โดยใช้ Command $ robot -d results tests/PricezaTest.robot

Yeahh!! วัตถุประสงค์แรกของเราผ่านไปแล้ว++
และตอนนี้เจ้า Test Case ของเราก็ยังคง Clean อยู่ด้วยตัวของมันเอง โดยที่เราไม่จำเป็นต้อง Refactor ใด ๆ
ปล. Refactor ในที่นี้หมายการทำให้ Code กระชับ สั้นลง เข้าใจง่ายที่สุดน่ะจ๊ะ เผื่อบางคนอาจจะไม่เข้าใจความหมายกัน

งั้นเรามาต่อกันที่วัตถุประสงค์ที่สองกันเลยดีกว่า ไม่เสียเวลา
“2. Test Search ค้นหา Product แล้วต้องมี results ออกมา“
เราต้องการที่จะเทสว่าเมื่อเรา Search แล้วเราจะต้องได้ผลลัพธิ์ออกมาเป็นเว็บเพจ result ที่เราต้องการ

และนี้คือชุดคำสั่ง Test Case ที่เราจะต้องใส่เข้าไป

จากนั้นเราก็รัน command ผ่าน Folder Priceza Project แล้วมาดูผลลัพธิ์กันอีกที
$ robot -d results tests/PricezaTest.robot

Yeahhhh! ผ่านเหมือนเดิมเลย ทำไมมันง่ายเช่นนี้ . . . . แต่เดียวก่อนน่ะ แต่ถ้ากลับไปสังเกตชุดคำสั่ง Test Case ของเราดี ๆ แล้วล่ะก็ . . . .

โอ้ววว ไม่นะ ความซ้ำซ้อนของ Code เราได้เริ่มต้นขึ้นแล้ว . . . ไม่สิ

โอ้ววว ซ้ำกันเป็นแถวเลยด้วยซ้ำในความเป็นจริง งั้นเราคงต้องมา Refactor Code ของเรากันหน่อยซะแล้ว

ในส่วนของการ Open Browser เปิดไปยังหน้าเพจ www.priceza.com นั้น เราก็ Refactor โดยการย้ายจาก test case ไปใส่ใน Keyword ซะ โดยตั้งชื่อว่า Open Browser Up แล้วเรียก Keyword นั้นใน test case ของเราแทน ลดความซ้ำซ้อนไปได้อีกหนึ่ง

ส่วนเจ้าชื่อสินค้า Electric Skateboard ที่เรา Search นั้น เราก็จัดการย้ายมันไปใส่ Variable ซะ จะได้ง่ายเมื่อเราต้องการเปลี่ยนชื่อ สินค้าที่ต้องการค้นหา
ปล. เพราะเมื่อเรากด Search ไม่ว่าอะไรไปก็ตามใน Priceza มันจะ return ชื่อสินค้ากลับมาพร้อม String รวมกันเป็นชื่อ Title Page

เช่น “ ${product} เช็คราคาล่าสุด ราคาถูก ราคาปัจจุบัน”

Ok!! เมื่อ Refactor กันเสร็จแล้วเราก็มาทำวัตถุประสงค์สุดท้ายกันเถอะ​!!
“ 3. Test Search product with max/min price แล้วต้องได้ results ที่ต้องการออก”

รอช้าอยู่ใยยัดมันเข้าไปเลย!!

ยัดเข้าไปเสร็จแล้ว ก็ลอง Run เจ้า PricezaTest.robot กัน

Yess!++ Run ผ่านแล้วเราก็มา Clean Code ของเราต่อกัน

เสร็จแล้วเราก็มาเช็ค Code ของเรากันหน่อย ว่ามีอะไรที่มันซ้ำซ้อนบ้าง

จะเห็นได้ว่าเจ้า Search Product บลา ๆ ๆ ของเราทั้ง 3 เทสเคสนั้น มี Code ที่ซ้ำกันทุกระเบียดนิ้วอย่างเห็นได้ชัด แต่ เอ… ถ้าดูให้ดี ๆ แล้วล่ะก็

โอ้วว จริง ๆ แล้วระหว่าง test case ของเรา Max/Min เคสนี้ เหมือนกันแทบทุกอย่างเลย ต่างกันแค่ value ที่ใส่ลงไปใน Parameter แค่สามค่าเท่านั้น . . . Ok งั้นเรามา Refactor เจ้า Code ของเราทั้งสองเคสนี้กันเลยดีกว่า

LET’S DO THIS!!!

โดยเมื่อเราทำการ Refactor Code ของเรา ด้วยการย้าย Code ที่ซ้ำซ้อนในกรอบสีม่วง/เขียวไปไว้ใน Keyword และยัด Arguments ใส่เข้าไปใน Keyword >> Max/Min Price เพื่อแยก Test Case ที่ทำงานเหมือนกัน แต่คาดหวังผลลัพธิ์หรือ Variable ที่แตกต่างกัน เราก็จะได้ Code ที่ Clean ขึ้นไปอีกขั้น

และนี้ก็คือโฉมหน้าของเจ้า Test Case เต็ม Version ของเราตามวัตถุประสงค์ทั้งสามข้อ

1. Test Url www.priceza.com ทำงานได้ปกติ
2. Test Search ค้นหา Product แล้วต้องมี results ออกมา
3. Test Search product with max/min price แล้วต้องได้ results ที่ต้องการออกมา

แต่เดี๋ยวนะ . . . ความจริงแล้ว เราไม่จำเป็นต้องใส่ถึง 4 เทสเคสเลยก็ได้นี้ แค่สองเทสเคส Max/Min เท่านั้นก็เพียงพอแล้วสำหรับ 3 วัตถุประสงค์ของเรา . . .

จะช้าอยู่ใย ไป Refactor ออกซะซิ!!

จัดการขยี้เจ้า Code ในกรอบสีแดงออก และ Move เจ้า Code ในกรอบสีเขียวไปไว้ตามลูกศรซะ

แล้วเราก็จะได้ Code .robot Test ที่สุดแสนจะ Clean มาหนึ่งตัว

ซึ่งเทคนิคที่เราใช้ใน ณ ที่นี้ มีแค่การแทนค่า Variable กับรวบโค้ดซ้ำยัดลงไปใน Keyword เท่านั้น แค่เท่านี้ Code ของเราก็สุดแสนจะสั้นและสวยงามกันแล้วว

อย่าปล่อยให้การเขียน Code ของคุณเป็นการ Encrypt ไปโดยปริยาย . . . . . . . . น่ะจ๊ะ

Etc. เพิ่มเติม สำหรับคนอยากต่อ . . .
https://github.com/robotframework/HowToWriteGoodTestCases/blob/master/HowToWriteGoodTestCases.rst