JasmineJS - การเขียนข้อความและการดำเนินการ

ในบทนี้เราจะสร้างไฟล์ hello world app ซึ่งจะทดสอบไฟล์ “helloworld.js”ไฟล์. ก่อนที่จะพัฒนาแอพ hello world ให้กลับไปที่บทก่อนหน้าและตรวจสอบให้แน่ใจว่าสภาพแวดล้อมของคุณพร้อมสำหรับการทดสอบโดยใช้ Jasmine

Step 1 − Create a Web application in your IDE

ที่นี่เรากำลังใช้ NetBeans 8.1 เพื่อพัฒนาแอพ hello world ใน Jasmine ใน NetBeans ไปที่ไฟล์→โครงการใหม่→แอปพลิเคชัน Html5 / JS และสร้างโครงการ หลังจากสร้างโครงการไดเร็กทอรีโปรเจ็กต์ควรมีลักษณะเหมือนภาพหน้าจอต่อไปนี้ เราตั้งชื่อโครงการของเราว่าJasmine_Demo.

Step 2 − Include the Jasmine lib file into the application

หลังจากสร้างโปรเจ็กต์สาธิตสิ่งที่คุณต้องทำคือรวมโฟลเดอร์คลายซิปของห้องสมุดจัสมินไว้ในโฟลเดอร์ Unit Tests ของแอปพลิเคชันที่สร้างขึ้น หลังจากเพิ่มไฟล์ไลบรารีทั้งหมดลงในโฟลเดอร์แอปพลิเคชันแล้วโครงสร้างของโครงการของเราจะมีลักษณะดังที่แสดงในภาพหน้าจอต่อไปนี้

ไฟล์ที่กำหนดภายใต้ spec และ srcโฟลเดอร์เป็นไฟล์เดโมที่จัดเตรียมโดยทีมจัสมิน ลบไฟล์เหล่านี้ในขณะที่เรากำลังจะสร้างไฟล์ทดสอบและกรณีทดสอบของเราเอง ในขณะที่ลบไฟล์ JavaScript เหล่านั้นเราจำเป็นต้องลบการอ้างอิงของไฟล์เหล่านั้นภายในไฟล์ html ที่เป็นเอาต์พุตของเราSpecRunner.html.

ต่อไปนี้เป็นภาพหน้าจอของไฟล์ SpecRunner.html ที่มีการอ้างอิงของไฟล์ JavaScript ต่างๆภายใน spec และ src จะถูกลบ

Step 3 − Create a JavaScript file

ในขั้นตอนนี้เราจะสร้างไฟล์ JavaScript ชื่อ helloworld.js ภายใต้ srcโฟลเดอร์ นี่คือไฟล์ที่เราจะทดสอบผ่าน Jasmine หลังจากสร้างไฟล์ JavaScript แล้วให้ต่อท้ายชุดโค้ดต่อไปนี้ภายในไฟล์

/*         
* This is the JavaScript file that need to be tested through jasmine   
* Below is the helloworld function that will return 'Hello World' 
*            
*/    

var helloworld = function() {   
   return 'Hello World'; 
};

Step 4 − Create a test case

ในขั้นตอนนี้เราจะสร้างไฟล์ JavaScript อื่นซึ่งจะมีกรณีทดสอบสำหรับไฟล์ JavaScript ที่กล่าวถึงข้างต้น ไปข้างหน้าและสร้างไฟล์ JavaScript ภายใต้โฟลเดอร์“ Spec” และตั้งชื่อเป็น“HelloWorldsSpec.js”. เพิ่มบรรทัดของรหัสต่อไปนี้ลงในสิ่งนี้js ไฟล์.

/*            
* This is the file which will call our java script file that need to be tested. 
* Each describe block is equivalent to one test case    
*     
*/    

describe("Hello World", function() { 
   
   it("should Return Hello world",function() { 
      expect(helloworld()).toEqual('Hello World'); 
   }); 

});

Step 5 − Add reference to the output file

เราสร้างไฟล์ของเราเองเพื่อทดสอบและกรณีทดสอบที่เกี่ยวข้องสำเร็จแล้ว เราเก็บไว้ในสองโฟลเดอร์ที่แตกต่างกัน ในขั้นตอนนี้เราจะแก้ไข“SpecRunner.html” เพื่อรวมการอ้างอิงของไฟล์ที่สร้างขึ้นใหม่ทั้งสองนี้

<!DOCTYPE html> 
    
<html>    
   <head>    
      <meta charset = "utf-8"> 
    
      <title>Jasmine Spec Runner v2.4.1</title>  
		
      <link rel = "shortcut icon" type = "image/png" href = 
      "lib/jasmine2.4.1/jasmine_favicon.png">  
      <link rel = "stylesheet" href = "lib/jasmine-2.4.1/jasmine.css"> 
		
      <script src = "lib/jasmine-2.4.1/jasmine.js"></script>
      <script src = "lib/jasmine-2.4.1/jasmine-html.js"></script>
      <script src = "lib/jasmine-2.4.1/boot.js"></script> 

      <!--Lines to be deleted  
      <script src = "src/Player.js"></script> 
      <script src = "src/Song.js"></script> 
      <script src = "spec/SpecHelper.js"></script>    
      <script src = "spec/PlayerSpec.js"></script> --> 

      <!--adding the reference of our newly created file ---> 

      <script src = "src/helloworld.js"></script> 
      <script src = "spec/HelloWorldsSpec.js"></script> 
   </head>   

   <body>   
   </body>   

</html>

Step 6 − Execute by running SpecRunner.html

นี่เป็นขั้นตอนสุดท้ายของการพัฒนาแอปพลิเคชันของเรา เรียกใช้ SpecRunner.html ในเบราว์เซอร์ที่คุณชื่นชอบ ภาพหน้าจอต่อไปนี้จะปรากฏขึ้น หน้าจอสีเขียวแสดงถึงความสำเร็จในขณะที่สีแดงแสดงถึงความล้มเหลวในกรณีทดสอบ

Step 7 − Understand the failure case

จนถึงตอนนี้เราได้เห็นไฟล์ successกรณีทดสอบของแอปพลิเคชัน hello world ตอนนี้ให้เราดูว่ามีอะไรผิดพลาดและการทดสอบล้มเหลว ในการใช้กรณีความล้มเหลวเราจำเป็นต้องเขียนกรณีทดสอบความล้มเหลว ในการทำเช่นเดียวกันเราจะแก้ไขไฟล์helloworld.js ไฟล์โดยใช้รหัสต่อไปนี้

var helloworld = function () { 
   return ''; 
};  

// we are not returning any string whereas in the spec file 
//we are expecting a // string as “Hello World”

รหัสด้านบนจะล้มเหลวอย่างแน่นอนเนื่องจากไฟล์ข้อมูลจำเพาะของเราไม่ได้รับสตริงที่คาดหวังเป็นเอาต์พุตของไฟล์ helloworld(). ภาพหน้าจอต่อไปนี้ของไฟล์specRunner.html ไฟล์แสดงให้เห็นว่ามีข้อผิดพลาดพร้อมไฟแสดงสถานะสีแดง