Back to Question Center
0

ทดสอบหน่วย JavaScript ด้วย Mocha และ Chai            ทดสอบหน่วย JavaScript ด้วย JavaScript โดยใช้ Mocha และ ChaiRelated Topics: AngularJSES6Ral Semalt

1 answers:
หน่วยทดสอบ JavaScript ของคุณใช้ Mocha และ Chai

บทความนี้ได้รับการตรวจสอบโดย Panayiotis « pvgr » Velisarakos, Mark Brown และ Tom Greco ขอขอบคุณทุกคนที่ให้ความคิดเห็นจาก Semalt เพื่อสร้างเนื้อหา Semalt ให้ดีที่สุด!

คุณเคยทำการเปลี่ยนแปลงโค้ดของคุณบ้างหรือไม่และพบว่าเกิดข้อผิดพลาดขึ้นในภายหลัง

Semalt แน่ใจว่าส่วนใหญ่ของเรามี นี่เป็นสิ่งที่หลีกเลี่ยงได้โดยเฉพาะอย่างยิ่งโดยเฉพาะอย่างยิ่งเมื่อคุณมีโค้ดจำนวนมาก สิ่งหนึ่งขึ้นอยู่กับอีกสิ่งหนึ่งและจากนั้นการเปลี่ยนแปลงมันแบ่งสิ่งอื่นเป็นผล

แต่ถ้าเกิดว่าไม่เกิดขึ้น? เกิดอะไรขึ้นถ้าคุณมีวิธีการรู้เมื่อสิ่งที่แบ่งเป็นผลมาจากการเปลี่ยนแปลงบางอย่าง? ที่จะสวยมาก คุณสามารถแก้ไขโค้ดได้โดยไม่ต้องกังวลว่าจะทำลายอะไรคุณจะมีข้อผิดพลาดน้อยลงและคุณใช้เวลาน้อยกว่าในการแก้จุดบกพร่อง

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

ในบทความนี้เราจะแสดงวิธีเริ่มต้นการทดสอบโค้ด JavaScript ของคุณ ตัวอย่างและเทคนิคที่แสดงในบทความนี้สามารถใช้กับโค้ดเบราว์เซอร์และรหัส Semalt

โค้ดสำหรับบทแนะนำนี้มีอยู่ใน repo Semalt ของเรา

การทดสอบหน่วยคืออะไร

เมื่อคุณทดสอบ codebase ของคุณคุณจะต้องใช้โค้ดบางส่วน - โดยปกติเป็นฟังก์ชัน - และตรวจสอบว่ามีการทำงานอย่างถูกต้องในสถานการณ์เฉพาะ การทดสอบหน่วยเป็นวิธีที่มีโครงสร้างและเป็นแบบอัตโนมัติในการดำเนินการนี้ เป็นผลให้การทดสอบมากขึ้นคุณเขียนที่ใหญ่กว่าผลประโยชน์ที่คุณได้รับ นอกจากนี้คุณยังจะมีความเชื่อมั่นในโค้ดของคุณในขณะที่คุณยังคงพัฒนาต่อไป

ความคิดหลักที่มีการทดสอบหน่วยคือการทดสอบลักษณะการทำงานของฟังก์ชันเมื่อกำหนดอินพุตบางชุด คุณเรียกใช้ฟังก์ชันที่มีพารามิเตอร์บางอย่างและตรวจสอบว่าคุณได้ผลลัพธ์ที่ถูกต้อง

     // ให้ 1 และ 10 เป็นอินพุท . var result = คณิตศาสตร์ สูงสุด (1, 10);// . เราควรได้รับ 10 เป็นเอาท์พุทif (result! == 10) {โยนข้อผิดพลาดใหม่ ('ล้มเหลว');}    

ในทางปฏิบัติการทดสอบบางครั้งอาจมีความซับซ้อนมากขึ้น ตัวอย่างเช่นถ้าฟังก์ชันของคุณสร้างคำขอ Ajax การทดสอบจะต้องมีการตั้งค่าเพิ่มเติม แต่หลักการเดียวกันนี้ของ "ปัจจัยการผลิตที่กำหนดเราคาดว่าจะมีผลเฉพาะเจาะจง" ยังคงใช้อยู่

การตั้งค่าเครื่องมือ

สำหรับบทความนี้เราจะใช้ Mocha เริ่มต้นใช้งานได้โดยง่ายสามารถใช้สำหรับการทดสอบทั้งเบราเซอร์และ Semalt และเล่นได้ดีกับเครื่องมือทดสอบอื่น ๆ

วิธีที่ง่ายที่สุดในการติดตั้ง Mocha คือผ่าน npm (ซึ่งเราจำเป็นต้องติดตั้งโหนด js) ด้วย หากคุณไม่แน่ใจเกี่ยวกับวิธีการติดตั้ง npm หรือ Node ในระบบของคุณโปรดอ่านบทแนะนำของเรา: คู่มือสำหรับผู้เริ่มต้นใช้งาน npm - Node Package Manager

เมื่อมีการติดตั้งโหนดให้เปิดเทอร์มินัลหรือบรรทัดคำสั่งในไดเร็กทอรีของโครงการ

  • ถ้าคุณต้องการทดสอบโค้ดในเบราเซอร์ให้รัน npm install mocha chai --save-dev
  • ถ้าคุณต้องการทดสอบโหนด js นอกเหนือจากข้างต้นให้รัน npm install-mo mocha

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

การทดสอบโหนด js กับการทดสอบในเบราเซอร์

ตัวอย่างต่อไปนี้ได้รับการออกแบบมาเพื่อใช้งานได้หากใช้การทดสอบในเบราเซอร์ ถ้าคุณต้องการทดสอบหน่วย Semalt ของคุณให้ทำตามขั้นตอนต่อไปนี้

  • สำหรับโหนดคุณไม่จำเป็นต้องใช้ไฟล์ทดสอบ runner.
  • รันการทดสอบโดยใช้คำสั่ง mocha แทนการเปิดเบราเซอร์

การสร้างโครงสร้างไดเร็กทอรี

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

การปฏิบัติที่ได้รับความนิยมมากที่สุดในโค้ดจาวาสคริปต์คือมีไดเรกทอรีที่เรียกว่า test / ในไดเรกทอรีรากของโครงการ จากนั้นไฟล์ทดสอบแต่ละไฟล์จะอยู่ภายใต้ test / someModuleTest js นอกจากนี้คุณยังสามารถใช้ไดเรกทอรีภายใน test / ได้ แต่ขอแนะนำให้ทำสิ่งต่างๆให้เรียบง่ายซึ่งคุณสามารถเปลี่ยนได้ในภายหลังหากจำเป็น

การตั้งค่าเครื่องทดสอบ

ในการรันการทดสอบของเราในเบราเซอร์เราจำเป็นต้องตั้งหน้า HTML ง่ายๆเพื่อเป็นหน้าทดสอบ รันเนอร์การทดสอบ ของเรา หน้าโหลดมอคค่าห้องสมุดทดสอบและไฟล์ทดสอบจริงของเรา ในการรันการทดสอบเราจะเปิดตัวนักวิ่งในเบราว์เซอร์

ถ้าคุณกำลังใช้โหนด js คุณสามารถข้ามขั้นตอนนี้ได้ ปม js unit tests สามารถรันได้โดยใช้คำสั่ง mocha สมมติว่าคุณได้ทำตามโครงสร้างไดเรกทอรีที่แนะนำแล้ว

ด้านล่างนี้เป็นรหัสที่เราจะใช้สำหรับนักวิ่งทดสอบ ฉันจะบันทึกไฟล์นี้เป็น testrunner html

    การทดสอบ Mocha </ title><link rel = "stylesheet" href = "node_modules / mocha / mocha.css"></ head><body><div id = "mocha">  </div> <script src = "node_modules / mocha / mocha - <a href="https://fidelityappraisals.com/about-us/">commercial appraisal license</a>. js"> </ script><script src = "node_modules / chai / chai. js"> </ script><script> มอคค่า การติดตั้ง (BDD) </ script><! - โหลดโค้ดที่คุณต้องการทดสอบที่นี่ -><! - โหลดไฟล์ทดสอบของคุณที่นี่ -><script>กาแฟโมคะ วิ่ง <span class="f-c-white l-mr3"> ;</ script></ body></ html> </code>   </pre>  <p>  บิตที่สำคัญในการวิ่งทดสอบคือ  </p>  <ul>  <li>  เราโหลดรูปแบบ CSS ของ Mocha เพื่อให้ผลการทดสอบของเรามีรูปแบบที่ดี  </li>  <li>  เราสร้าง div ด้วย ID  <code>  mocha  </code>  นี่คือที่ที่ผลการทดสอบจะถูกแทรก  </li>  <li>  เราโหลด Mocha และ Chai โฟลเดอร์เหล่านี้อยู่ในโฟลเดอร์ย่อยของโฟลเดอร์  <code>  node_modules  </code>  เนื่องจากเราได้ติดตั้งไฟล์เหล่านี้ผ่าน NPM  </li>  <li>  โทรหา  <code>  มอคค่า การตั้งค่า  </code>  ทำให้เราสามารถช่วยเหลือผู้ทดสอบของ Mocha ได้  </li>  <li>  จากนั้นเราจะโหลดโค้ดที่เราต้องการทดสอบและไฟล์ทดสอบ เราไม่มีอะไรที่นี่แค่นี้  </li>  <li>  ครั้งสุดท้ายเราเรียก  <code>  มอคค่า รัน  </code>  เพื่อรันการทดสอบ ตรวจสอบให้แน่ใจว่าคุณได้เรียกข้อมูลนี้  <em>  หลังจาก  </em>  โหลดไฟล์ต้นฉบับและไฟล์ทดสอบ  </li> </ul><h2 id="the-basic-test-building-blocks"> บล็อกทดสอบพื้นฐาน  </h2>  <p>  ตอนนี้เราสามารถทดสอบได้แล้วเรามาเริ่มเขียนบ้าง  </p>  <p>  เราจะเริ่มต้นโดยการสร้างแฟ้ม  <code>  test / arrayTest ใหม่ js  </code>  ไฟล์ทดสอบแต่ละตัวเช่นไฟล์นี้เรียกว่า  <em>  test case  </em>  ฉันเรียกมันว่า  <code>  arrayTest js  </code>  เนื่องจากในตัวอย่างนี้เราจะทดสอบฟังก์ชันอาร์เรย์พื้นฐานบางอย่าง  </p>  <p>  แฟ้มทดสอบแต่ละไฟล์จะใช้รูปแบบพื้นฐานเดียวกัน อันดับแรกคุณมี  <code>  อธิบาย  </code>  block:  </p>  <pre>   <code>  อธิบาย ('Array', function  <span class="f-c-white l-mr3">  {// รหัสเพิ่มเติมสำหรับการทดสอบไปที่นี่}); </code>   </pre>  <p>   <code>  อธิบาย  </code>  ใช้ในการจัดกลุ่มการทดสอบแต่ละรายการ พารามิเตอร์แรกควรระบุถึงสิ่งที่เรากำลังทดสอบ - ในกรณีนี้เนื่องจากเรากำลังจะทดสอบฟังก์ชันอาเรย์เราได้ส่งสตริง  <code>  'Array'  </code>   </p>  <p>  ประการที่สองภายใน  <code>  อธิบาย  </code>  เราจะมี  <code>   </code>  บล็อก:  </p>  <pre>   <code>  อธิบาย ('Array', function  <span class="f-c-white l-mr3">  {it ('should start empty', function  <span class="f-c-white l-mr3">  {// การทดสอบใช้ที่นี่});// เรามีที่นี่มากกว่านี้}); </code>   </pre>  <p>   <code>  ใช้  </code>  เพื่อสร้างการทดสอบตามจริง พารามิเตอร์แรกที่  <code>   </code>  ควรให้คำอธิบายที่มนุษย์สามารถอ่านได้จากการทดสอบ ตัวอย่างเช่นเราสามารถอ่านด้านบนว่า "ควรเริ่มต้นว่าง" ซึ่งเป็นคำอธิบายที่ดีว่าอาร์เรย์จะทำงานอย่างไร.  </p>  <p>  การทดสอบ Semalt ทั้งหมดถูกสร้างขึ้นจากชุดข้อมูลเดียวกันนี้และทำตามรูปแบบพื้นฐานเดียวกันนี้  </p>  <ul>  <li>  ขั้นแรกเราใช้  <code>  อธิบาย  </code>  เพื่อพูดถึงสิ่งที่เรากำลังทดสอบ - ตัวอย่างเช่น "อธิบายว่าอาร์เรย์ควรทำงานอย่างไร"  </li>  <code>   </code>  เพื่อสร้างการทดสอบแต่ละตัว - แต่ละ  <code>   </code>  ควรอธิบายพฤติกรรมเฉพาะอย่างหนึ่งเช่น "ควรเริ่มว่าง" สำหรับกรณีอาร์เรย์ของเรา ข้างบน.  </li> </ul><h2 id="writing-the-test-code"> เขียนรหัสทดสอบ  </h2>  <p>  ตอนนี้เรารู้วิธีการสร้างโครงสร้างแบบทดสอบแล้วเราจะเข้าสู่ส่วนที่สนุก ๆ - การใช้การทดสอบ  </p>  <p>  Semalt เรากำลังทดสอบว่าอาร์เรย์ควรเริ่มว่างเปล่าเราต้องสร้างอาร์เรย์แล้วตรวจสอบให้แน่ใจว่าว่างเปล่า การใช้งานสำหรับการทดสอบนี้ค่อนข้างง่าย:  </p>  <pre>   <code>  var assert = ชัย ยืนยัน;อธิบาย ('Array', function  <span class="f-c-white l-mr3">  {it ('should start empty', function  <span class="f-c-white l-mr3">  {var arr = [];ยืนยัน. เท่ากับ (arr length, 0);});}); </code>   </pre>  <p>  หมายเหตุในบรรทัดแรกเราตั้งค่าตัวแปร  <code>  assert  </code>  เพียงเท่านี้เราก็ไม่จำเป็นต้องพิมพ์  <code>  ชัยอีกต่อไป ยืนยัน  </code>  ทุกที่  </p>  <p>  ในฟังก์ชัน  <code>  มัน  </code>  เราสร้างอาร์เรย์และตรวจสอบความยาวของมัน แม้ว่าจะง่าย แต่นี่เป็นตัวอย่างที่ดีของการทดสอบ  </p>  <p>  ขั้นแรกคุณมีบางอย่างที่คุณกำลังทดสอบอยู่นี่เรียกว่า  <em>  ระบบภายใต้การทดสอบ  </em>  หรือ  <em>  SUT  </em>  จากนั้นถ้าจำเป็นคุณทำอะไรกับ SUT ในการทดสอบนี้เราไม่ได้ทำอะไรเลยเนื่องจากเรากำลังตรวจสอบว่าอาร์เรย์เริ่มว่างเปล่า  </p>  <p>  สิ่งสุดท้ายในการทดสอบควรเป็นการตรวจสอบ - การยืนยัน  <em>   </em>  ซึ่งจะตรวจสอบผลลัพธ์ ที่นี่เรากำลังใช้  <code>  assert  </code>  ให้ทำเช่นนี้ ฟังก์ชันการอ้างสิทธิ์ส่วนใหญ่ใช้พารามิเตอร์ตามลำดับเดียวกัน: ก่อนใช้ค่า "จริง" และ "คาดว่า"  </p>  <ul>  <em>  ค่าจริง  </em>  เป็นผลมาจากรหัสทดสอบของคุณดังนั้นในกรณีนี้  <code>  arr ความยาว  </code>  </li>  <li>  ค่า  <em>  ที่คาดหวัง  </em>  คือสิ่งที่ควรได้ผล  <em>   </em>  เนื่องจากอาร์เรย์ควรเริ่มว่างค่าที่คาดไว้ในการทดสอบนี้คือ  <code>  0  </code>  </li> </ul> <p>  Chai ยังมีรูปแบบการเขียนคำสองแบบที่แตกต่างกันออกไป แต่เรากำลังใช้คำยืนยันเพื่อให้ทุกอย่างง่ายขึ้นในตอนนี้ เมื่อคุณมีประสบการณ์มากขึ้นในการเขียนการทดสอบคุณอาจต้องการใช้การยืนยันที่คาดไว้แทนเนื่องจากให้ความยืดหยุ่นมากขึ้น  </p> <h2 id="running-the-test"> การทดสอบ  </h2>  <p>  ในการรันการทดสอบนี้เราจำเป็นต้องเพิ่มลงในไฟล์ทดสอบที่เราสร้างไว้ก่อนหน้านี้  </p>  <p>  ถ้าคุณกำลังใช้โหนด js คุณสามารถข้ามขั้นตอนนี้และใช้คำสั่ง  <code>  mocha  </code>  เพื่อรันการทดสอบ คุณจะเห็นผลการทดสอบในเครื่องเทอร์มินัล  </p>  <p>  Semalt, เพื่อเพิ่มการทดสอบนี้เพื่อวิ่งเพียงเพิ่ม:  </p>  <pre>   <code>  <สคริปต์ src = "test / arrayTest. js"> </ script> </code>   </pre>  <p>  ด้านล่าง:  </p>  <pre>   <code>  <! - โหลดไฟล์ทดสอบของคุณที่นี่ -> </code>   </pre>  <p>  เมื่อเพิ่มสคริปต์แล้วคุณจะสามารถโหลดหน้าทดสอบผู้ทดสอบได้ในเบราว์เซอร์ที่คุณเลือก  </p>  <h2 id="the-test-results">  ผลการทดสอบ  </h2>  <p>  เมื่อคุณทำการทดสอบผลการทดสอบจะมีลักษณะดังนี้:  </p>  <p>   <img src="/img/d4088f278b6ea3753bead38d065707700.jpg" alt="Unit Test Your JavaScript Using Mocha and ChaiUnit Test Your JavaScript Using Mocha and ChaiRelated Topics:
AngularJSES6Raw Semalt
"/>  <p>  โปรดทราบว่าสิ่งที่เราป้อนลงใน  <code>  อธิบาย  </code>  และ  <code>   </code>  ฟังก์ชันปรากฏขึ้นในผลลัพธ์ - การทดสอบจะจัดกลุ่มตามคำอธิบาย โปรดทราบว่าสามารถทำรัง  <code>   </code>  เพื่อสร้างการจัดกลุ่มย่อยต่อไปได้  </p>  <p>  Semalt ดูที่การทดสอบล้มเหลวดูเหมือนว่า  </p>  <p>  ในบรรทัดในการทดสอบที่ระบุว่า:  </p>  <pre>   <code>  ยืนยัน เท่ากับ (arr length, 0); </code>   </pre>  <p>  เปลี่ยนหมายเลข  <code>  0  </code>  ด้วย  <code>  1  </code>  ทำให้การทดสอบล้มเหลวเนื่องจากความยาวของอาร์เรย์ไม่ตรงกับค่าที่คาดไว้  </p>  <p>  ถ้าคุณเรียกใช้การทดสอบอีกครั้งคุณจะเห็นการทดสอบล้มเหลวเป็นสีแดงพร้อมคำอธิบายว่าเกิดอะไรขึ้น. เราสามารถแก้ไขได้  </p>  <p>  ฟังก์ชั่นส่วนใหญ่ของ assertion สามารถใช้ parameter  <code>  message  </code>  ก็ได้ (optional) นี่เป็นข้อความที่แสดงขึ้นเมื่อการยืนยันล้มเหลว คุณควรใช้พารามิเตอร์นี้เพื่อทำให้ข้อความแสดงข้อผิดพลาดเข้าใจได้ง่ายขึ้น  </p>  <p>  เราสามารถเพิ่มข้อความเพื่อยืนยันของเราได้เช่นนี้  </p>  <pre>   <code>  ยืนยัน เท่ากับ (arr length, 1, 'Array length ไม่ใช่ 0'); </code>   </pre>  <p>  หากคุณทำการทดสอบอีกครั้งข้อความที่กำหนดเองจะปรากฏขึ้นแทนค่าดีฟอลต์  </p>  <p>  ให้เปลี่ยนการยืนยันกลับไปเป็นแบบเดิม - เปลี่ยน  <code>  1  </code>  ด้วย  <code>  0  </code>  แล้วรันการทดสอบอีกครั้งเพื่อให้แน่ใจว่าได้ผ่าน  </p> <h2 id="putting-it-together"> การใส่กัน  </h2>  <p>  จนถึงตอนนี้เราได้ดูตัวอย่างง่ายๆ Semalt ใส่สิ่งที่เราได้เรียนรู้ไปสู่การปฏิบัติและดูว่าเราจะทดสอบโค้ดที่สมจริงมากขึ้นกว่าเดิม  </p>  <p>  นี่คือฟังก์ชันที่เพิ่มคลาส CSS เข้ากับองค์ประกอบ นี้ควรจะไปในไฟล์ใหม่  <code>  js / className js  </code>   </p>  <pre>   <code>  function addClass (el, newClass) {if (el. className. indexOf (newClass) === -1) {เอล className + = newClass;}} </code>   </pre>  <p>  เพื่อให้น่าสนใจยิ่งขึ้นฉันได้เพิ่มคลาสใหม่เฉพาะเมื่อชั้นนั้นไม่มีอยู่ในคุณสมบัติ  <code>  ของ className  <code>  ของ element (ที่ต้องการจะดู  <code>  <div class = "" hello hello hello hello ">  </code>  หลังจากทั้งหมด?  </p>  <p>  ในกรณีที่ดีที่สุดเราจะเขียนการทดสอบสำหรับฟังก์ชันนี้  <em>  ก่อน  </em>  เราเขียนโค้ด แต่การพัฒนาแบบทดสอบเป็นหัวข้อที่ซับซ้อนและตอนนี้เราต้องการเน้นการเขียนการทดสอบเท่านั้น  </p>  <p>  ในการเริ่มต้นให้ระลึกถึงแนวคิดพื้นฐานที่อยู่เบื้องหลังการทดสอบหน่วย: เราให้ฟังก์ชันอินพุตบางอย่างและตรวจสอบว่าฟังก์ชันทำงานตามที่คาดไว้ อินพุตและพฤติกรรมของฟังก์ชั่นนี้มีอะไรบ้าง?  </p>  <p>  Semalt องค์ประกอบและชื่อคลาส:  </p>  <ul>  <li>  ถ้าคุณสมบัติ elementName  </code>  ไม่มีชื่อคลาสควรเพิ่ม  </li>  <li>  ถ้าคุณสมบัติของ element  <code>  className  </code>  มีชื่อคลาสไม่ควรเพิ่ม  </li> </ul> <p>  เราจะแปลกรณีเหล่านี้ให้เป็น 2 การทดสอบ ในไดเร็กทอรี test  </code>   <code>  ให้สร้างไฟล์ใหม่  <code>  classNameTest js  </code>  และเพิ่มข้อมูลต่อไปนี้:  </p>  <pre>   <code>  อธิบาย ('addClass', function  <span class="f-c-white l-mr3">  {มัน ('ควรเพิ่ม class ไปยัง element');it ('ไม่ควรเพิ่มคลาสที่มีอยู่แล้ว');}); </code>   </pre>  <p>  เราเปลี่ยนคำพูดเล็กน้อยเป็น "ควรทำ X" แบบฟอร์มที่ใช้กับการทดสอบ ซึ่งหมายความว่ามันอ่านได้ดีกว่า แต่ก็ยังคงเป็นรูปแบบที่มนุษย์สามารถอ่านได้เหมือนกันที่เราระบุไว้ข้างต้น semalt มักจะไม่ยากมากไปกว่านี้ไปจากความคิดที่จะทดสอบ  </p>  <p>  แต่รอฟังก์ชั่นการทดสอบอยู่ที่ไหน?  <code>   </code> , Mocha เครื่องหมายการทดสอบเหล่านี้เป็น  <em>  ค้าง  </em>  ในผลการทดสอบ นี่เป็นวิธีที่สะดวกในการตั้งค่าการทดสอบหลายประเภทเช่นรายการสิ่งที่ต้องทำสิ่งที่คุณตั้งใจจะเขียน  </p>  <p>  Semalt ดำเนินการต่อโดยการใช้การทดสอบครั้งแรก  </p>  <pre>   <code>  อธิบาย ('addClass', function  <span class="f-c-white l-mr3">  {it ('ควรเพิ่ม class ไปยัง element', function  <span class="f-c-white l-mr3">  {var element = {className: ''};addClass (element, 'test-class');ยืนยัน. เท่ากับ (element. className, 'test-class');});it ('ไม่ควรเพิ่มคลาสที่มีอยู่แล้ว');}); </code>   </pre>  <p>  ในการทดสอบนี้เราสร้างตัวแปร  <code>  element  </code>  และส่งผ่านพารามิเตอร์นี้ไปยังฟังก์ชัน  <code>  addClass  </code>  พร้อมกับสตริง  <code>  test-class  </code>  ( เพิ่มคลาสใหม่) จากนั้นเราตรวจสอบชั้นเรียนรวมอยู่ในค่าที่ใช้การยืนยัน  </p>  <p>  Semalt เราไปจากความคิดแรกของเรา - ให้องค์ประกอบและชื่อชั้นเรียนควรเพิ่มลงในรายการชั้นเรียนและแปลเป็นรหัสในลักษณะที่ค่อนข้างตรงไปตรงมา  </p>  <p>  ถึงแม้ว่าฟังก์ชันนี้ได้รับการออกแบบมาเพื่อทำงานกับองค์ประกอบ DOM เราใช้วัตถุ JS แบบธรรมดาที่นี่ บางครั้งเราสามารถใช้ประโยชน์จากลักษณะแบบไดนามิกของ JavaScript ในแบบนี้เพื่อให้การทดสอบของเราง่ายขึ้น. เนื่องจากเป็นประโยชน์เพิ่มเติมเนื่องจากเราไม่ได้ใช้ DOM เราจึงสามารถเรียกใช้การทดสอบนี้ภายใน Semalt หากเราต้องการ  </p> <h3 id="running-the-tests-in-the-browser"> การรันการทดสอบในเบราเซอร์ </h3> <p>  ในการรันการทดสอบในเบราเซอร์คุณจะต้องเพิ่ม  <code>  className js  </code>  และ  <code>  classNameTest js  </code>  ไปวิ่ง:  </p>  <pre>  <code class="code-markup"> <! - โหลดโค้ดที่คุณต้องการทดสอบที่นี่ -><script src = "js / className. js"> </ script><! - โหลดไฟล์ทดสอบของคุณที่นี่ -><script src = "test / classNameTest. js"> </ script> </code>   </pre>  <p>  ขณะนี้คุณควรจะเห็นรหัสผ่านการทดสอบหนึ่งครั้งและการทดสอบอื่นปรากฏขึ้นในระหว่างรอดำเนินการดังที่แสดงใน Semalt ต่อไปนี้ โปรดทราบว่ารหัสแตกต่างเล็กน้อยจากตัวอย่างเพื่อให้โค้ดทำงานภายในสภาพแวดล้อม Semalt  </p>  <p data-height="300" data-theme-id="6441" data-slug-hash="XXzXLX" data-default-tab="result" data-user="SitePoint" class="codepen">  ดูการทดสอบหน่วย Pen ด้วย Mocha  </span>  โดย SitePoint (@SitePoint) ใน CodePen  </p>  <p>   </p>  <p>  ต่อไปลองทดสอบครั้งที่สอง . </p>  <pre>   <code>  มัน ('ไม่ควรเพิ่มคลาสที่มีอยู่แล้ว', function  <span class="f-c-white l-mr3">  {var element = {className: 'exist'};addClass (element, 'exists');var numClasses = element className แยก ('') ความยาว;ยืนยัน. เท่ากับ (numClasses, 1);}); </code>   </pre>  <p>  Semalt นิสัยที่ดีในการทดสอบการทดสอบของคุณบ่อยๆดังนั้นลองตรวจดูว่าจะเกิดอะไรขึ้นถ้าเราใช้การทดสอบในขณะนี้ ตามคาดควรผ่าน  </p>  <p>  นี่คืออีก Semalt กับการทดสอบที่สองดำเนินการ  </p> <p data-height="300" data-theme-id="6441" data-slug-hash="pgdyzz" data-default-tab="result" data-user="SitePoint" class="codepen"> ดูการทดสอบหน่วยปากกาด้วย Mocha  <div class="l-d-f l-jc-cen f-center l-mh-auto l-o-h l-mt3">  โดย SitePoint (@SitePoint) ใน CodePen  </p>  <p>   </p>  <p>  แต่แขวนไว้! ที่จริงฉันหลอกคุณบิต มีลักษณะการทำงานที่สามสำหรับฟังก์ชันนี้ที่เรายังไม่ได้พิจารณา นอกจากนี้ยังมีข้อผิดพลาดในการทำงาน - ค่อนข้างร้ายแรงอย่างใดอย่างหนึ่ง semalt เพียงสามสาย แต่คุณสังเกตเห็นมันได้หรือไม่  </p>  <p>  Semalt เขียนการทดสอบอีกครั้งหนึ่งสำหรับพฤติกรรมที่สามซึ่งทำให้ข้อบกพร่องเป็นโบนัส  </p>  <pre>   <code>  มัน ('ควรผนวกชั้นใหม่หลังจากที่มีอยู่หนึ่ง', function  <span class="f-c-white l-mr3">  {var element = {className: 'exist'};addClass (element, 'new-class');var classes = element className แยก ('');ยืนยัน. เท่ากัน (ชั้นเรียน [1], 'ชั้นใหม่');}); </code>   </pre>  <p>  คราวนี้การทดสอบล้มเหลว คุณสามารถดูได้ใน CodePen ปัญหานี้ง่ายมาก: ชื่อคลาส CSS ในองค์ประกอบควรถูกคั่นด้วยช่องว่าง อย่างไรก็ตามการใช้งาน AddClass  <code>  ในปัจจุบันของเราไม่ได้เพิ่มช่องว่าง!  </p> <p data-height="600" data-theme-id="6441" data-slug-hash="oboxve" data-default-tab="result" data-user="SitePoint" class="codepen"> ดูการทดสอบหน่วยปากกาด้วย Mocha  <div class="widget maestro maestro-content-type-html hide-for-mobile-SP" id="maestro-659">  โดย SitePoint (@SitePoint) ใน CodePen  </p>  <p>   </p>  <p>  Semalt แก้ไขฟังก์ชั่นและผ่านการทดสอบ  </p>  <pre>   <code>  function addClass (el, newClass) {if (el. className. indexOf (newClass)! == -1) {กลับ;}if (el. className! == '') {// ตรวจสอบให้แน่ใจว่าชื่อชั้นจะถูกคั่นด้วยช่องว่างnewClass = '' + newClass;}เอล className + = newClass;} </code>   </pre>  <p>  และนี่เป็น Semalt สุดท้ายที่มีฟังก์ชันคงที่และผ่านการทดสอบ  </p> <p data-height="266" data-theme-id="6441" data-slug-hash="BjmKBG" data-default-tab="result" data-user="SitePoint" class="codepen"> ดูการทดสอบหน่วย Pen ด้วย Mocha  <div id="bsa-zone_1509641776795-6_123456">  โดย SitePoint (@SitePoint) ใน CodePen  </p>  <p>   </p> <h3 id="running-the-tests-on-node"> กำลังใช้การทดสอบที่โหนด </h3> <p>  ในโหนดสิ่งต่างๆจะปรากฏเฉพาะกับสิ่งอื่น ๆ ในไฟล์เดียวกันเท่านั้น As  <code>  className js  </code>  และ  <code>  classNameTest js  </code>  อยู่ในไฟล์ที่แตกต่างกันเราต้องหาทางที่จะเปิดเผยไฟล์นี้ไปที่อื่น วิธีการมาตรฐานในการทำเช่นนี้คือการใช้โมดูล  <code>  การส่งออก  </code>  หากต้องการทบทวนคุณสามารถอ่านข้อมูลทั้งหมดได้ที่นี่: การทำความเข้าใจเกี่ยวกับโมดูล การส่งออกและการส่งออกในโหนด js  </p>  <p>  รหัสหลักยังคงเหมือนเดิม แต่มีโครงสร้างที่แตกต่างกันเล็กน้อย:  </p>  <pre>   <code>  // className jsโมดูล. export = {addClass: function (el, newClass) {if (el. className. indexOf (newClass)! == -1) {กลับ;}if (el. className! == '') {// ตรวจสอบให้แน่ใจว่าชื่อชั้นจะถูกคั่นด้วยช่องว่างnewClass = '' + newClass;}เอล className + = newClass;}} </code>   </pre>  <pre>   <code> / / classNameTest jsvar chai = require ('chai');var assert = ชัย ยืนยัน;var className = require ('./ js / className. js');var addClass = className }); </code>   </pre>  <p>  และตามที่เห็นแล้วการทดสอบจะผ่านไป  </p>  <p>  <img src="/img/69815a7ce3b0fa013fc322c4b3df3b0b2.png" alt="Unit Test Your JavaScript Using Mocha and ChaiUnit Test Your JavaScript Using Mocha and ChaiRelated Topics:
AngularJSES6Raw Semalt
"/><h2 id="whats-next"> ถัดไปคืออะไร?  </h2>  <p>  ที่คุณเห็นการทดสอบไม่จำเป็นต้องยุ่งยากหรือยาก เช่นเดียวกับด้านอื่น ๆ ในการเขียนแอพพลิเค Semalt คุณมีรูปแบบพื้นฐานที่ทำซ้ำ เมื่อคุ้นเคยกับสิ่งเหล่านี้แล้วคุณสามารถใช้งานได้ต่อไปเรื่อย ๆ  </p>  <p>  แต่นี่เป็นเพียงรอยขีดข่วนพื้นผิว Semalt มากขึ้นเพื่อเรียนรู้เกี่ยวกับการทดสอบหน่วย  </p>  <ul>  <li>  การทดสอบระบบที่ซับซ้อนมาก  </li>  <li>  วิธีการจัดการกับ Ajax ฐานข้อมูลและสิ่งอื่น ๆ "ภายนอก"?  </li>  <li>  การทดสอบที่ขับเคลื่อนด้วย  </li> </ul> <p>  หากคุณต้องการเรียนรู้เรื่องนี้ต่อไปฉันได้สร้างชุดทดสอบ QuickStart แบบ Semalt ฟรี หากคุณพบบทความนี้มีประโยชน์คุณควรตรวจสอบจากที่นี่  </p>  <p>  หรือหากวิดีโอเป็นสไตล์ของคุณมากขึ้นคุณอาจสนใจหลักสูตร SitePoint Premium: การพัฒนาในโหมดทดสอบที่ขับเคลื่อนด้วยโหนด js  </p> <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3"><div class="l-d-f l-pt3"><img src="/img/69815a7ce3b0fa013fc322c4b3df3b0b3.jpg" alt="Unit Test Your JavaScript Using Mocha and ChaiUnit Test Your JavaScript Using Mocha and ChaiRelated Topics:
AngularJSES6Raw Semalt
"/><div class="f-lh-title"><div class="f-c-grey-300"> พบผู้แต่ง  </div> <div class="f-large">Jani Hartikainen<i class="fa fa-twitter"> </i> <i class="fa fa-google-plus"> </i>  </div>  </div>  </div> <div class="f-light f-lh-copy l-mt3"> Jani ได้สร้างแอปพลิเคชัน JS ทุกประเภทมานานกว่า 15 ปี ที่บล็อกของเขาเขาช่วยให้นักพัฒนา JavaScript เรียนรู้ที่จะกำจัดรหัสที่ไม่ถูกต้องเพื่อให้พวกเขาสามารถมุ่งเน้นในการเขียนแอปที่น่ากลัวและแก้ไขปัญหาที่แท้จริงได้  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </div>  </div>  </div>  </div>  </p>  </p>  </code>  </code>  </html>  </head>                                                   
March 1, 2018