Menu

UFABET - ALPHABET

SPORT BETTING

HOW TO USE JASMINE TO DO TDD

UFABET : เนื้อหานี้พวกเราจะมาทดลองทำ TDD (Test Driven Development) แบบง่ายๆกับการเขียนรหัสJavaScript กันมองครับผม โดย framework สำหรับในการทำ TDD นั้น ผมจะขอใช้เป็น Jasmine แล้วกันลองมองว่ามันจะช่วยทำให้พวกเราเขียน test ได้ง่ายดายมากยิ่งขึ้นใช่หรือไม่ ?

 

รู้จักกับ Testing Framework

อันที่จริงแล้ว กระบวนการทำ TDD นั้น พวกเราไม่จำเป็นที่จะต้องใช้ framework อะไรก็แล้วแต่เลยก็ได้ครับผม เพียงพวกเราต้องมาวางแบบการเขียน testเอง มันถึงจะเป็นระบบ ซึ่งพวก framework ต่างๆนั้นจะทำแทนพวกเราทั้งผองนะครับ ไม่ว่าะเป็นการกำหนดรูปแบบของการเขียน test ไปจนกระทั่ง UI ที่เอาไว้แสดงผลของการ test อย่างยิ่งจริงๆ ที่เหลือพวกเราก็แค่ระบุ spec ที่ต้องการจะ test เพียงเท่านั้นขอรับ

 

รู้จักกับ Jasmine

ในเนื้อหานี้ผมจะขอเลือกใช้ Jasmine เป็นframework สำหรับทำ TDD แล้วกันครับผม (อันที่จริงแล้ว Jasmine เป็น framework สำหรับทำ BDD หรือBehavior Driven Development ซึ่งนับว่าเป็น TDDต้นแบบหนึ่งนะครับ แม้กระนั้นรหัส test จะอ่านรู้เรื่องได้ง่ายดายกว่า สามารถอ่านข้อมูลเพิ่มเติมถึงที่เหมาะบทความ BDD ไม่เหมือนกับ TDD ยังไง ?) โดยพวกเราต้องมาเตรียมพร้อมกันก่อนด้วยการเลียนแบบลำดับต่อไปนี้ขอรับ

 

1. ดาวน์โหลด

ขั้นตอนแรกให้พวกเราเข้าไปดาวน์โหลด Jasmine มาครับผม เมื่อแตกไฟล์พวกเราก็จะได้ชื่อเสียงตาราวๆนี้

 

jasmine-standalone-2.0.2/
|
|-- lib/  
|   |          
|   `-- jasmine-2.0.2/      # รวมไฟล์ lib ทั้งหมดของ Jasmine
|      
|-- spec/                   # เก็บไฟล์ js สำหรับเขียนโค้ด test
|
|-- src/                    # เก็บไฟล์ js ที่อยากจะ test
|
`-- SpecRunner.html         # ไฟล์ html ที่จะเอาไว้รัน test

จะมีความคิดเห็นว่านอกเหนือจากตัว lib แล้ว Jasmineยังจัดแจงอีกทั้งรหัสที่เอาไว้ปฏิบัติงาน แล้วก็รหัสที่เอาไว้ test มาให้หมดเลยนะครับ

 

2. ใส่รหัส

ให้พวกเรา copy เฉพาะโฟลเดอร์ lib/jasmine-2.0.2/มาใช้ขอรับ เพราะว่ายิ่งกว่านั้นพวกเราจะเขียนขึ้นมาเอง ภายหลังจาก copy มาใว้ในโฟลเดอร์งานของพวกเราแล้ว แม้พวกเราจะใช้ Jasmine ที่หน้าไหนก็ให้พวกเราเพิ่มรหัสพวกนี้เข้าไปขอรับ

<head>
.
.
.
<!-- ใส่ lib ของ Jasmine -->
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.2/jasmine.css">
<script type="text/javascript" src="lib/jasmine-2.0.2/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.2/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.2/boot.js"></script>
 
<!-- ใส่โค้ด js ที่อยากจะ test -->
<script src="js/script.js"></script>
 
<!-- ใส่โค้ดที่จะเอาไว้ test -->
<script src="js/test.js"></script>
 
</head>

 

 

 ต่อไปนี้ก็จะเหลือไฟล์ test.js นี่ละครับ ที่พวกเราต้องเขียนขึ้นมาเองโดยใช้ Jasmine


3. รัน

ในที่สุดให้พวกเราทดลองใส่รหัสนี้ลงไปในไฟล์test.js มองครับผม

describe("A suite", function() {
    it("contains spec with an expectation", function() {
        expect(true).toBe(true);
    });
});

 ต่อจากนั้นให้พวกเราทดลองเปิดหน้าเว็บไซต์ของพวกเราตามเดิมมองเลย ทดลองพินิจที่ข้างล่างสุดก็จะพบว่ามีส่วนแสดงผลลัพธ์การ test ของ Jasmine เพิ่มเข้ามาแล้วล่ะครับผม


วิธีสร้าง Test ด้วย Jasmine

เมื่อเตรียมพร้อมเป็นระเบียบแล้ว ต่อไปนี้พวกเราลองฝึกหัดใช้ Jasmine กันเลยครับผม

 

นิยามศัพท์
 

Suite

ใช้เรียกหน่วยที่พวกเราจะกระทำการ test ขอรับ UFABET หรือเอาง่ายๆก็คือ feature ที่พวกเราต้องการจะ testนั่นเอง ซึ่งในหนึ่ง suite นี้จะประกอบไปด้วย specต่างๆหรือบางครั้งก็อาจจะเป็น suite อื่นๆที่ซ้อนอยู่ด้านในก็ได้ขอรับ

 

Spec

ใช้เรียกหน่วยย่อยๆที่พวกเราต้อง test เพื่อได้รับรู้ว่าfeature นั้นๆสามารถทำเป็นตรงตาม requirementแล้วหรือยัง

 

Expectation

เป็นการเขียนรหัสเพื่อเอาไว้ตรวจดูว่าสิ่งที่ได้จากการรันโปรแกรมนั้นตรงตาม spec แล้วหรือยัง


Syntax

ต่อไปนี้ลองมองแนวทางการเขียน test แบบง่ายๆกันก่อนนะครับ

describe("Suite - จะ test อะไร ?", function() {
    it("Spec - แล้วมันควรจะทำอะไรได้บ้าง ?", function() {
        expect(true).toBe(true); // Expectation - หวังว่า true ต้องเป็น true (แหงละ)
    });
});
 
จากโค้ดด้านบนสามารถอธิบายได้ว่า
  • ฟังก์ชัน describe – เอาไว้ใส่ชื่อ suite
  • ฟังก์ชัน it – เอาไว้ใส่เนื้อความชี้แจง spec
  • ฟังก์ชัน expect – เอาไว้เขียน expectation

 

ต่อนี้ไปลองดูตัวอย่างการเขียน test ฟังก์ชันสำหรับเครื่องคิดเลขมองครับผม

describe("เครื่องคิดเลข", function() {
    it("ควรจะบวกได้", function() {
        // Expectation สำหรับ test ว่าบวกได้ถูกต้อง
    });
    it("ควรจะลบได้", function() {
        // Expectation สำหรับ test ว่าลบได้ถูกต้อง
    });
    it("ควรจะคูณได้", function() {
        // Expectation สำหรับ test ว่าคูณได้ถูกต้อง
    });
    it("ควรจะหารได้", function() {
        // Expectation สำหรับ test ว่าหารได้ถูกต้อง
    });
});

ถ้าหากพิจารณาดีๆจะมีความคิดเห็นว่าสิ่งที่พวกเราต้องศึกษาสำหรับเพื่อการใช้ Jasmine นั้น สำคัญๆเลยก็คือการเขียน expectation นั่นเองนะครับ

 

วิธีการเขียน Expectation

expectation นั้นจะประกอบไปด้วยส่วนต่างๆดังต่อไปนี้

 
  • Expect function – function สำหรับ test
  • Actual value – ค่าที่เกิดขึ้นจริง
  • Matcher – method สำหรับใช้เพื่อการเปรียบ
  • Expected value – ค่าที่ต้องเป็น

 

เวลาเขียน พวกเราก็จะใช้ syntax อย่างนี้ครับผม

 
// คาดหวังว่า(ค่าที่เกิดขึ้นจริง).เป็นอย่างไรเมื่อเทียบกับ(ค่าที่ควรจะเป็น);
expect(actualValue).matcher(expectedValue);
 
ตัวอย่างเช่น
 

จาก expectation ข้างบน จะเป็นการเทียบค่าของtrue ว่าเป็น true หรือไม่ ซึ่งแน่ๆว่ามันเป็น true ก็เลยนำมาซึ่งการทำให้ expectation นี้เป็น true ซึ่งจะมีผลให้ spec นี้ test ผ่านครับผม

 

รู้จักกับ Matcher

 

 

 

สำหรับการเขียน expectation นั้น พวกเราจะใช้matcher สำหรับการเทียบระหว่าง actual value กับexpected value ครับผม โดย matcher นั้นจะมีให้เลือกใช้มากไม่น้อยเลยทีเดียวเลย ไม่ว่าจะเป็น

 
  • toBe – มีค่าเป็น (true/false)
  • toEqual – มีค่าพอๆกับ
  • toMatch – match กับ (ใช้กับ regular expression)
  • toBeUndefined – มีค่าเป็น undefined
  • toBeNull – มีค่าเป็น null
  • toContain – มีส่วนประกอบเป็น (ใช้กับ array)
  • toBeLessThan – มีค่าน้อยกว่า
  • toBeGreaterThan – มีค่ามากยิ่งกว่า

 

นอกนั้นพวกเรายังสามารถเพิ่มเติม .not เอาไว้ด้านหน้า matcher ได้ด้วยครับ เพื่อรู้เรื่องหมายในเชิงnegative

 

บทสรุปการใช้ Jasmine

 

เป็นไงบ้างนะครับ UFABET สำหรับเพื่อการทดลองใช้ testing framework อย่าง Jasmine จะมีความเห็นว่าในเนื้อหานี้ ผมจะไม่ค่อยลงลึกในเนื้อหามากเท่าไรนัก แม้กระนั้นจะย้ำเพียงแค่พอให้รู้เรื่องเบื้องต้นก่อนครับผมเพราะเหตุว่าพวกเราสามารถนำวิชาความรู้ไปต่อยอดเอาเองได้อยู่แล้ว

 

สำหรับเพื่อการใช้งานจริงนั้น การดูแบบอย่างรหัสที่Jasmine ให้มาตั้งแต่ตอนดาวน์โหลดนั้นจะช่วยให้พวกเราเห็นภาพเยอะขึ้นเรื่อยๆนะครับ แม้กระนั้นถ้าเกิดยังไม่ครอบคลุมมากพอ พวกเราสามารถอ่านข้อมูลเพิ่มเติมนอกเหนือจากนี้ถึงที่กะไว้ UFABET คู่มือแนะนำการใช้งาน ของJasmine ได้เลยนะครับ

 

 

 
 
 
 

Go Back

Comment

Blog Search

Blog Archive

Comments

There are currently no blog comments.