Back to Question Center
0

Unit Test JavaScript ຂອງທ່ານໃຊ້ Mocha ແລະ Chai            Unit Test JavaScript ຂອງທ່ານໃຊ້ Mocha ແລະ ChaiRelated ຫົວຂໍ້: AngularJSES6Raw Semalt

1 answers:
ຫນ່ວຍທົດສອບການໃຊ້ JavaScript ຂອງທ່ານການນໍາໃຊ້ Mocha ແລະ Chai

ບົດຄວາມນີ້ແມ່ນການທົບທວນຄືນໂດຍ peer Panayiotis « pvgr » Velisarakos, Mark Brown ແລະ Tom Greco. ຂໍຂອບໃຈກັບການທົບທວນຄືນທັງຫມົດຂອງ Semalt ເພື່ອເຮັດໃຫ້ເນື້ອຫາຂອງ Semalt ດີທີ່ສຸດເທົ່າທີ່ຈະເປັນໄດ້!

ທ່ານເຄີຍປ່ຽນແປງລະຫັດຂອງທ່ານ, ແລະຕໍ່ມາພົບວ່າມັນກໍ່ເຮັດໃຫ້ສິ່ງອື່ນແຕກແຍກບໍ?

ສົມມຸດແນ່ໃຈວ່າສ່ວນໃຫຍ່ຂອງພວກເຮົາມີ. ນີ້ແມ່ນເກືອບບໍ່ສາມາດຫຼີກເວັ້ນໄດ້, ໂດຍສະເພາະແມ່ນໃນເວລາທີ່ທ່ານມີຈໍານວນຫຼາຍຂອງລະຫັດ - cypoint hosting gratis. ສິ່ງຫນຶ່ງແມ່ນຂຶ້ນກັບຄົນອື່ນ, ແລະຫຼັງຈາກນັ້ນການປ່ຽນແປງມັນເຮັດໃຫ້ບາງສິ່ງບາງຢ່າງແຕກຕ່າງກັນ.

ແຕ່ຖ້າວ່າບໍ່ມີຫຍັງເກີດຂຶ້ນ? ຈະເປັນແນວໃດຖ້າທ່ານມີວິທີທີ່ຈະຮູ້ວ່າບາງສິ່ງບາງຢ່າງທີ່ແຕກແຍກເປັນຜົນມາຈາກການປ່ຽນແປງບາງຢ່າງ? ວ່າຈະເປັນສິ່ງທີ່ດີເລີດ. ທ່ານສາມາດປັບປ່ຽນລະຫັດຂອງທ່ານໂດຍບໍ່ຕ້ອງກັງວົນກ່ຽວກັບການທໍາລາຍຫຍັງ, ທ່ານຕ້ອງມີຂໍ້ບົກພ່ອງຫນ້ອຍແລະທ່ານຈະຕ້ອງໃຊ້ເວລາແກ້ໄຂຫນ້ອຍກວ່າ.

ນັ້ນແມ່ນບ່ອນທີ່ການກວດສອບຫນ່ວຍງານສ່ອງແສງ. ພວກເຂົາຈະ ອັດຕະໂນມັດ ກວດພົບບັນຫາຕ່າງໆໃນລະຫັດສໍາລັບທ່ານ. ເຮັດໃຫ້ມີການປ່ຽນແປງ, ດໍາເນີນການທົດສອບຂອງທ່ານແລະຖ້າວ່າມີຫຍັງເກີດຂື້ນ, ທ່ານກໍ່ຈະຮູ້ວ່າສິ່ງທີ່ເກີດຂຶ້ນ, ບ່ອນທີ່ບັນຫາແມ່ນ ແລະ ສິ່ງທີ່ມີພຶດຕິກໍາທີ່ຖືກຕ້ອງ. ນີ້ສົມບູນ eliminates guesswork ໃດ!

ໃນບົດຄວາມນີ້, ຂ້ອຍຈະສະແດງວິທີການເລີ່ມຕົ້ນຫນ່ວຍງານທົດສອບລະຫັດ JavaScript ຂອງທ່ານ. ຕົວຢ່າງແລະເຕັກນິກທີ່ສະແດງໃນບົດຄວາມນີ້ສາມາດນໍາໃຊ້ກັບລະຫັດເບົາເຊີແລະລະຫັດ Semalt.

ລະຫັດສໍາລັບການສອນນີ້ແມ່ນມາຈາກ Semalt repo ຂອງພວກເຮົາ.

ທົດສອບຫນ່ວຍງານ

ເມື່ອທ່ານທົດສອບຖານຂໍ້ມູນຂອງທ່ານ, ທ່ານໃຊ້ເວລາສ່ວນຫນຶ່ງຂອງລະຫັດ - ມັກຈະເປັນຫນ້າທີ່ - ແລະກວດສອບວ່າມັນປະຕິບັດຢ່າງຖືກຕ້ອງໃນສະຖານະການສະເພາະ. ການທົດສອບຫນ່ວຍງານແມ່ນວິທີການທີ່ມີໂຄງສ້າງແລະອັດຕະໂນມັດໃນການເຮັດນີ້. ດັ່ງນັ້ນ, ການທົດສອບຫຼາຍທ່ານຂຽນ, ຜົນປະໂຫຍດທີ່ໃຫຍ່ກວ່າທີ່ທ່ານໄດ້ຮັບ. ທ່ານຍັງຈະມີລະດັບຄວາມເຊື່ອຫມັ້ນໃນຖານຂໍ້ມູນຂອງທ່ານຫລາຍຂຶ້ນຍ້ອນວ່າທ່ານສືບຕໍ່ພັດທະນາມັນ.

ຄວາມຄິດທີ່ສໍາຄັນກັບການທົດສອບຫນ່ວຍງານແມ່ນເພື່ອທົດສອບພຶດຕິກໍາຂອງການເຮັດວຽກໃນເວລາທີ່ໃຫ້ມັນເປັນຊຸດປະຈຸບັນແນ່ນອນ. ທ່ານໂທຫາຫນ້າທີ່ທີ່ມີພາລາມິເຕີທີ່ແນ່ນອນແລະກວດເບິ່ງວ່າທ່ານໄດ້ຮັບຜົນທີ່ຖືກຕ້ອງ.

     // ໃຫ້ 1 ແລະ 10 ເປັນ inputs. ທີ່ຢູ່ ທີ່ຢູ່ var result = Math max (1,10)// ທີ່ຢູ່ ທີ່ຢູ່ ພວກເຮົາຄວນໄດ້ຮັບ 10 ເປັນຜົນຜະລິດຖ້າ (ຜົນ! == 10) {ປ່ອຍຂໍ້ຜິດພະລາດໃຫມ່ ('ລົ້ມເຫລວ');}    

ໃນການທົດລອງ, ການທົດສອບບາງຄັ້ງສາມາດສະລັບສັບຊ້ອນຫຼາຍ. ຕົວຢ່າງເຊັ່ນຖ້າຟັງຊັນຂອງທ່ານເຮັດໃຫ້ຄໍາຮ້ອງຂໍ Ajax, ການທົດສອບຕ້ອງການສ້າງຕັ້ງຂຶ້ນຫຼາຍ, ແຕ່ຫຼັກການດຽວກັນຂອງ "ຂໍ້ມູນປະກອບສ່ວນບາງຢ່າງ, ພວກເຮົາຄາດວ່າຜົນໄດ້ຮັບສະເພາະ" ຍັງຄົງໃຊ້ໄດ້.

ການຕັ້ງຄ່າເຄື່ອງມື

ສໍາລັບບົດຄວາມນີ້, ພວກເຮົາຈະໃຊ້ Mocha. ມັນງ່າຍທີ່ຈະເລີ່ມຕົ້ນດ້ວຍ, ສາມາດນໍາໃຊ້ສໍາລັບການທົດສອບທັງສອງເບື້ອງແລະທົດສອບ Semalt, ແລະມັນມີບົດບາດທີ່ເຫມາະສົມກັບເຄື່ອງມືທົດສອບອື່ນໆ.

ວິທີທີ່ງ່າຍທີ່ສຸດໃນການຕິດຕັ້ງ Mocha ແມ່ນຜ່ານ npm (ເຊິ່ງພວກເຮົາກໍ່ຈໍາເປັນຕ້ອງຕິດຕັ້ງ Node js). ຖ້າທ່ານບໍ່ແນ່ໃຈກ່ຽວກັບວິທີການຕິດຕັ້ງ npm ຫຼື Node ໃນລະບົບຂອງທ່ານ, ເບິ່ງຄໍາແນະນໍາຂອງພວກເຮົາ: ຄູ່ມືເລີ່ມຕົ້ນຂອງ npm - Node Package Manager

ມີ Node ທີ່ຕິດຕັ້ງ, ເປີດບັນຊີ terminal ຫຼື command line ໃນໄດເລກະທໍລີຂອງໂຄງການຂອງທ່ານ.

  • ຖ້າທ່ານຕ້ອງການທົດສອບລະຫັດໃນເບົາເຊີ, ດໍາເນີນການ npm install mocha chai --save-dev
  • ຖ້າທ່ານຕ້ອງການທົດສອບ Node. js code, ນອກເຫນືອໄປຈາກຂ້າງເທິງ, ດໍາເນີນການ npm install -g mocha

ນີ້ຕິດຕັ້ງແພໍກເກດ mocha ແລະ ຈືນ . Mocha ແມ່ນຫ້ອງສະຫມຸດທີ່ອະນຸຍາດໃຫ້ພວກເຮົາດໍາເນີນການທົດສອບ, ແລະ Chai ປະກອບມີບາງຫນ້າທີ່ເປັນປະໂຫຍດທີ່ພວກເຮົາຈະໃຊ້ເພື່ອກວດສອບຜົນໄດ້ຮັບຂອງພວກເຮົາ.

ທົດສອບເທິງ Node. js vs ການທົດສອບໃນເບົາເຊີ

ຕົວຢ່າງທີ່ປະຕິບັດຕາມໄດ້ຖືກອອກແບບມາເພື່ອເຮັດວຽກຖ້າການທົດສອບໃນເບົາເຊີ. ຖ້າທ່ານຕ້ອງການຫນ່ວຍງານທົດສອບຄໍາຮ້ອງສະຫມັກ Semalt ຂອງທ່ານ, ໃຫ້ປະຕິບັດຕາມຂັ້ນຕອນເຫຼົ່ານີ້.

  • ສໍາລັບ Node, ທ່ານບໍ່ຕ້ອງການໄຟລ໌ runner ການທົດສອບ.
  • ດໍາເນີນການທົດສອບໂດຍໃຊ້ຄໍາສັ່ງ mocha , ແທນທີ່ຈະເປີດຕົວ browser.

ການສ້າງຕັ້ງໂຄງສ້າງລະບົບ

ທ່ານຄວນເອົາການທົດສອບຂອງທ່ານໃນລະບົບແຍກຈາກໄຟລ໌ລະຫັດຕົ້ນຕໍຂອງທ່ານ. ນີ້ເຮັດໃຫ້ງ່າຍຕໍ່ການສ້າງໂຄງສ້າງໃຫ້ເຂົາເຈົ້າ, ຕົວຢ່າງເຊັ່ນຖ້າທ່ານຕ້ອງການເພີ່ມປະເພດການທົດສອບອື່ນໆໃນອະນາຄົດ (ເຊັ່ນການກວດສອບການປະສົມປະສານຫຼືການທົດສອບທີ່ເປັນປະໂຫຍດ).

ການປະຕິບັດທີ່ມີປະໂຫຍດທີ່ສຸດທີ່ມີລະຫັດ JavaScript ແມ່ນຕ້ອງມີລະບົບທີ່ເອີ້ນວ່າ ການທົດສອບ / ໃນລະບົບຮາກຂອງໂຄງການຂອງທ່ານ. ຫຼັງຈາກນັ້ນ, ໄຟລ໌ການທົດສອບແຕ່ລະຄົນແມ່ນຢູ່ພາຍໃຕ້ test / someModuleTest. js ນອກຈາກນັ້ນ, ທ່ານຍັງສາມາດນໍາໃຊ້ລາຍຊື່ພາຍໃນ test / , ແຕ່ຂ້າພະເຈົ້າແນະນໍາໃຫ້ຮັກສາສິ່ງທີ່ງ່າຍໆ - ທ່ານກໍ່ສາມາດປ່ຽນມັນໄດ້ພາຍຫຼັງຖ້າຈໍາເປັນ.

ການຕັ້ງຄ່າຜູ້ຂັບຂີ່ທົດສອບ

ເພື່ອດໍາເນີນການທົດສອບຂອງພວກເຮົາໃນເບົາເຊີ, ພວກເຮົາຈໍາເປັນຕ້ອງຕັ້ງຫນ້າ HTML ທີ່ງ່າຍໆເປັນຫນ້າເວັບໄຊທ໌ ຂອງພວກເຮົາ. ຫນ້າເວັບໂຫຼດ Mocha, ຫ້ອງທົດລອງການທົດສອບແລະໄຟລ໌ການທົດສອບຕົວຈິງຂອງພວກເຮົາ. ເພື່ອດໍາເນີນການທົດສອບ, ພວກເຮົາຈະເປີດຕົວແລ່ນໃນເບົາເຊີ.

ຖ້າທ່ານກໍາລັງໃຊ້ Node. js, ທ່ານສາມາດຂ້າມຂັ້ນຕອນນີ້. Node js ຫນ່ວຍງານການທົດສອບສາມາດດໍາເນີນການນໍາໃຊ້ຄໍາສັ່ງ mocha , ສົມມຸດວ່າທ່ານໄດ້ປະຕິບັດຕາມໂຄງສ້າງໄດເລກະທໍລີແນະນໍາ.

ຂ້າງລຸ່ມນີ້ແມ່ນລະຫັດທີ່ພວກເຮົາຈະນໍາໃຊ້ສໍາລັບນັກແລ່ນທົດສອບ. ຂ້າພະເຈົ້າຈະບັນທຶກໄຟລ໌ນີ້ເປັນ testrunner. html

    Mocha Tests </ title><link rel = "stylesheet" href = "node_modules / mocha / mocha css"></ head><body><div id = "mocha">  </div> <script src = "node_modules / mocha / mocha js"> </ script><script src = "node_modules / chai / chai js"> </ script><script> mocha setup ('bdd') </ script><! - ລະຫັດທີ່ທ່ານຕ້ອງການທົດສອບຢູ່ນີ້ -><! - ໂຫລດໄຟລ໌ທົດສອບຂອງທ່ານຢູ່ທີ່ນີ້ -><script>mocha run  <span class="f-c-white l-mr3"> </ script></ body></ html> </code>   </pre>  <p>  ບິດທີ່ສໍາຄັນໃນຜູ້ຂັບຂີ່ທົດສອບແມ່ນ:  </p>  <ul>  <li>  ພວກເຮົາໂຫຼດຮູບແບບ CSS ຂອງ Mocha ເພື່ອໃຫ້ຜົນການທົດສອບຂອງພວກເຮົາຜົນການຄັດເລືອກງາມ.  </li>  <li>  ພວກເຮົາສ້າງແຜ່ນທີ່ມີ ID  <code>  mocha  </code> . ນີ້ແມ່ນບ່ອນທີ່ຜົນການທົດສອບຖືກໃສ່ລົງ.  </li>  <li>  ພວກເຮົາກໍາລັງໂຫລດ Mocha ແລະ Chai. ພວກເຂົາຢູ່ໃນໂຟເດີຍ່ອຍຂອງໂຟເດີ  <code>  node_modules  </code>  ນັບຕັ້ງແຕ່ພວກເຮົາຕິດຕັ້ງພວກເຂົາຜ່ານ npm.  </li>  <li>  ໂດຍການໂທ  <code>  mocha. setup  </code> , ພວກເຮົາເຮັດໃຫ້ຜູ້ຊ່ວຍທົດສອບ Mocha ມີ.  </li>  <li>  ຫຼັງຈາກນັ້ນ, ພວກເຮົາຈະໂຫລດລະຫັດທີ່ພວກເຮົາຕ້ອງການທົດສອບແລະໄຟລ໌ທົດສອບ. ພວກເຮົາບໍ່ມີຫຍັງຢູ່ທີ່ນີ້ເທື່ອ.  </li>  <li>  ສຸດທ້າຍ, ພວກເຮົາໂທຫາ  <code>  mocha. ດໍາເນີນການ  </code>  ເພື່ອດໍາເນີນການທົດສອບ. ໃຫ້ແນ່ໃຈວ່າທ່ານໂທຫາ  <em>  ຫຼັງຈາກ  </em>  ການໂຫລດໄຟລ໌ແຫຼ່ງແລະການທົດສອບ.  </li>  </ul> <h2 id="the-basic-test-building-blocks"> ການທົດສອບການທົດສອບຂັ້ນພື້ນຖານ  </h2>  <p>  ຕອນນີ້ພວກເຮົາສາມາດດໍາເນີນການທົດສອບໄດ້, ໃຫ້ເລີ່ມຕົ້ນຂຽນບາງ.  </p>  <p>  ພວກເຮົາຈະເລີ່ມຕົ້ນໂດຍການສ້າງໄຟລ໌ໃຫມ່  <code>  test / arrayTest. js  </code>  ໄຟລ໌ການທົດສອບແຕ່ລະຄົນເຊັ່ນວ່ານີ້ແມ່ນເປັນທີ່ຮູ້ຈັກ  <em>  ກໍລະນີທົດສອບ  </em> . ຂ້າພະເຈົ້າໂທຫາມັນ  <code>  arrayTest. js  </code>  ເນື່ອງຈາກວ່າສໍາລັບຕົວຢ່າງນີ້, ພວກເຮົາຈະໄດ້ຮັບການທົດສອບການທໍາງານຂອງອາເລພື້ນຖານບາງຢ່າງ.  </p>  <p>  ທຸກໆກໍລະນີການທົດສອບຕາມຮູບແບບພື້ນຖານດຽວກັນ. ຫນ້າທໍາອິດ, ທ່ານມີ  <code>  ອະທິບາຍ  </code>  ບລັອກ:  </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">  {ມັນ ('ຄວນເລີ່ມຕົ້ນເປົ່າ', ຟັງຊັນ  <span class="f-c-white l-mr3">  {// ການທົດສອບການທົດສອບໄປທີ່ນີ້})// ພວກເຮົາສາມາດມີຫຼາຍຢູ່ທີ່ນີ້}) </code>   </pre>  <p>   <code>  ມັນ  </code>  ຖືກນໍາໃຊ້ເພື່ອສ້າງການທົດສອບຕົວຈິງ. ພາລາມິເຕີທໍາອິດທີ່ຈະ  <code>  ມັນ  </code>  ຄວນຈະໃຫ້ຄໍາອະທິບາຍທີ່ສາມາດອ່ານໄດ້ຈາກຜູ້ຊາຍຂອງການທົດສອບ. ຕົວຢ່າງ, ພວກເຮົາສາມາດອ່ານຂໍ້ຄວາມຂ້າງເທິງນີ້ວ່າ "ມັນຄວນຈະເລີ່ມຕົ້ນຫວ່າງເປົ່າ", ເຊິ່ງເປັນຄໍາອະທິບາຍທີ່ດີກ່ຽວກັບອາເລທີ່ຄວນປະຕິບັດ.  </p>  <p>  ທັງຫມົດການທົດສອບ Semalt ຖືກສ້າງຂຶ້ນມາຈາກຕຶກອາຄານດຽວກັນເຫຼົ່ານີ້, ແລະພວກເຂົາປະຕິບັດຕາມຮູບແບບພື້ນຖານດຽວກັນນີ້.  </p>  <ul>  <li>  ທໍາອິດ, ພວກເຮົາໃຊ້  <code>  ຄໍາອະທິບາຍ  </code>  ເພື່ອບອກວ່າສິ່ງທີ່ພວກເຮົາກໍາລັງທົດສອບ - ຕົວຢ່າງ, "ອະທິບາຍວ່າອາເລຄວນເຮັດວຽກ".  </li>  <li>  ຫຼັງຈາກນັ້ນ, ພວກເຮົາໃຊ້ຈໍານວນ  <code>  ຫນ້າທີ່  </code>  ເພື່ອສ້າງການທົດສອບແຕ່ລະຄົນ  <code>  ມັນ  </code>  ຄວນອະທິບາຍເຖິງພຶດຕິກໍາສະເພາະໃດຫນຶ່ງເຊັ່ນ "ມັນຄວນຈະເປົ່າຫວ່າງ" ຂ້າງເທິງ.  </li>  </ul> <h2 id="writing-the-test-code"> ຂຽນລະຫັດທົດສອບ  </h2>  <p>  ໃນປັດຈຸບັນທີ່ພວກເຮົາຮູ້ວິທີການສ້າງໂຄງການທົດສອບ, ໃຫ້ເຮົາເຂົ້າໄປໃນສ່ວນທີ່ມ່ວນຊື່ນ - ປະຕິບັດການທົດສອບ.  </p>  <p>  Semalt ພວກເຮົາກໍາລັງທົດສອບວ່າ array ຄວນເລີ່ມ empty, ພວກເຮົາຕ້ອງສ້າງ array ແລະຫຼັງຈາກນັ້ນໃຫ້ແນ່ໃຈວ່າມັນຫວ່າງເປົ່າ. ການທົດສອບສໍາລັບການທົດສອບນີ້ແມ່ນຂ້ອນຂ້າງງ່າຍດາຍ:  </p>  <pre>   <code>  var assert = chai ຍືນຍັນອະທິບາຍ ('Array', function  <span class="f-c-white l-mr3">  {ມັນ ('ຄວນເລີ່ມຕົ້ນເປົ່າ', ຟັງຊັນ  <span class="f-c-white l-mr3">  {var arr = []ຢືນຢັນ. ຄວາມເທົ່າທຽມກັນ (ລໍາດັບຄວາມຍາວ, 0);})}) </code>   </pre>  <p>  ຫມາຍເຫດໃນເສັ້ນທໍາອິດ, ພວກເຮົາໄດ້ສ້າງຕັ້ງຄ່າ  <code>  ການຢືນຢັນ  </code> . ນີ້ແມ່ນພຽງແຕ່ສະນັ້ນພວກເຮົາບໍ່ຈໍາເປັນຕ້ອງສືບຕໍ່ການພິມ  <code>  ຖ້ວຍ. ຢືນຢັນ  </code>  ທຸກບ່ອນ.  </p>  <p>  ໃນ  <code>  ມັນ  </code>  ຟັງຊັນ, ພວກເຮົາສ້າງອາເລແລະກວດເບິ່ງຄວາມຍາວຂອງມັນ. ເຖິງແມ່ນວ່າງ່າຍດາຍ, ນີ້ແມ່ນຕົວຢ່າງທີ່ດີຂອງວິທີການທົດສອບເຮັດວຽກ.  </p>  <p>  ຫນ້າທໍາອິດ, ທ່ານມີສິ່ງທີ່ທ່ານທົດສອບ - ນີ້ເອີ້ນວ່າ System Under Test  </em>  ຫຼື  <em>  SUT  </em> . ຫຼັງຈາກນັ້ນ, ຖ້າເປັນສິ່ງຈໍາເປັນ, ທ່ານຈະເຮັດແນວໃດກັບ SUT. ໃນການທົດສອບນີ້, ພວກເຮົາກໍາລັງບໍ່ເຮັດຫຍັງເລີຍ, ເພາະວ່າພວກເຮົາກໍາລັງກວດເບິ່ງວ່າ array ເລີ່ມເປັນຫວ່າງ.  </p>  <p>  ສິ່ງສຸດທ້າຍໃນການທົດສອບຄວນຈະມີການກວດສອບ - ການຢືນຢັນ  <em>   </em>  ທີ່ກວດສອບຜົນໄດ້ຮັບ. ທີ່ນີ້, ພວກເຮົາກໍາລັງໃຊ້  <code>  ຢືນຢັນ.  </code>  ເພື່ອເຮັດສິ່ງນີ້. ຟັງຊັນການຍືນຍັນຫລາຍທີ່ສຸດໃຊ້ພາລາມິເຕີໃນຄໍາສັ່ງດຽວກັນ: ທໍາອິດຄ່າ "ຈິງ" ແລະຫຼັງຈາກນັ້ນຄ່າ "ຄາດ".  </p>  <ul>  <li>  ຄ່າ  <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>  ເພື່ອຈະດໍາເນີນການທົດສອບນີ້, ພວກເຮົາຈໍາເປັນຕ້ອງເພີ່ມໃສ່ໄຟລ໌ runner ທີ່ພວກເຮົາສ້າງກ່ອນຫນ້າ.  </p>  <p>  ຖ້າທ່ານກໍາລັງໃຊ້ Node. js, ທ່ານສາມາດຂ້າມຂັ້ນຕອນນີ້, ແລະໃຊ້ຄໍາສັ່ງ  <code>  mocha  </code>  ເພື່ອທົດສອບການທົດສອບ. ທ່ານຈະເຫັນຜົນການທົດສອບຢູ່ໃນທ່າທາງ.  </p>  <p>  Semalt, ເພື່ອເພີ່ມການທົດສອບນີ້ກັບຜູ້ແລ່ນ, ພຽງແຕ່ຕື່ມ:  </p>  <pre>   <code>  <script 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>  ອ້າງວ່າ ຄວາມເທົ່າທຽມກັນ (ລໍາດັບຄວາມຍາວ, 0); </code>   </pre>  <p>  ປ່ຽນເລກ  <code>  0  </code>  ກັບ  <code>  1  </code> . ນີ້ເຮັດໃຫ້ການທົດສອບລົ້ມເຫຼວ, ເນື່ອງຈາກວ່າຄວາມຍາວຂອງອາເລບໍ່ກົງກັບຄ່າທີ່ຄາດໄວ້.  </p>  <p>  ຖ້າທ່ານດໍາເນີນການທົດສອບອີກເທື່ອຫນຶ່ງ, ທ່ານຈະເຫັນການທົດສອບທີ່ລົ້ມເຫລວໃນສີແດງດ້ວຍລາຍລະອຽດກ່ຽວກັບສິ່ງທີ່ຜິດພາດ. ພວກເຮົາສາມາດແກ້ໄຂມັນໄດ້.  </p>  <p>  ສ່ວນຫຼາຍຂອງການປະຕິບັດຫນ້າທີ່ສາມາດເອົາຂໍ້ມູນທາງເລືອກ  <code>  ຂໍ້ຄວາມ  </code> . ນີ້ແມ່ນຂໍ້ຄວາມທີ່ສະແດງໃນເວລາທີ່ການອ້າງອິງບໍ່ສາມາດເຮັດໄດ້. ມັນເປັນຄວາມຄິດທີ່ດີທີ່ຈະນໍາໃຊ້ພາລາມິເຕີນີ້ເພື່ອເຮັດໃຫ້ຂໍ້ຄວາມສະແດງຂໍ້ຜິດພາດງ່າຍຕໍ່ການເຂົ້າໃຈ.  </p>  <p>  ພວກເຮົາສາມາດເພີ່ມຂໍ້ຄວາມໃຫ້ການຢືນຢັນຂອງພວກເຮົາດັ່ງນີ້:  </p>  <pre>   <code>  ອ້າງວ່າ ຄວາມເທົ່າທຽມກັນ (ລໍາດັບຄວາມຍາວ, 1, 'ຄວາມຍາວຂານບໍ່ແມ່ນ 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) {ຖ້າ (el className indexOf (newClass) === -1) {el className + = newClass}} </code>   </pre>  <p>  ເພື່ອເຮັດໃຫ້ມັນມີຄວາມຫນ້າສົນໃຈຫຼາຍຂຶ້ນ, ຂ້ອຍຈຶ່ງເພີ່ມລະດັບໃຫມ່ເມື່ອຊັ້ນນັ້ນບໍ່ມີຢູ່ໃນຄຸນສົມບັດ className  </code>  ຂອງອົງປະກອບ  <code>  - ຜູ້ທີ່ຕ້ອງການເບິ່ງ  <code>  <div class = " hello hello hello hello ">  </code>  after all?  </p>  <p>  ໃນກໍລະນີທີ່ດີທີ່ສຸດ, ພວກເຮົາຈະຂຽນການທົດສອບສໍາລັບຫນ້າທີ່ນີ້  <em>  ກ່ອນ  </em> , ພວກເຮົາຂຽນລະຫັດ. ແຕ່ການພັດທະນາໂດຍການທົດສອບແມ່ນຫົວຂໍ້ທີ່ສະລັບສັບຊ້ອນແລະສໍາລັບໃນປັດຈຸບັນພວກເຮົາພຽງແຕ່ຕ້ອງການເນັ້ນຫນັກໃສ່ການຂຽນການຂຽນ.  </p>  <p>  ເພື່ອເລີ່ມຕົ້ນ, ຂໍເຕືອນຄວາມຄິດພື້ນຖານຂອງການທົດສອບຫນ່ວຍງານ: ພວກເຮົາໃຫ້ປະຕິບັດຫນ້າທີ່ປະຕິບັດບາງຢ່າງແລະຫຼັງຈາກນັ້ນກວດເບິ່ງວ່າຫນ້າທີ່ເຮັດວຽກຕາມຄາດ. ດັ່ງນັ້ນສິ່ງທີ່ປະກອບແລະພຶດຕິກໍາສໍາລັບຫນ້າທີ່ນີ້ແມ່ນຫຍັງ?  </p>  <p>  Semalt ອົງປະກອບແລະຊື່ຊັ້ນ:  </p>  <ul>  <li>  ຖ້າຄຸນສົມບັດຂອງ className  </code>  ຂອງອົງປະກອບບໍ່ມີຊື່ຫ້ອງຮຽນ, ມັນຄວນຈະຖືກເພີ່ມ.  </li>  <li>  ຖ້າຄຸນສົມບັດຂອງ className  </code>  ຂອງອົງປະກອບມີລະຫັດຊື່, ມັນບໍ່ຄວນຈະຖືກເພີ່ມ.  </li>  </ul>  <p>  ໃຫ້ແປພາສາເຫຼົ່ານີ້ເປັນສອງທົດສອບ. ໃນໄດ  <code>  ທົດສອບ  </code> , ສ້າງໄຟລ໌ໃຫມ່  <code>  classNameTest. js  </code>  ແລະເພີ່ມດັ່ງຕໍ່ໄປນີ້:  </p>  <pre>   <code>  ອະທິບາຍ ('addClass', function  <span class="f-c-white l-mr3">  {ມັນ ('ຄວນເພີ່ມປະເພດໃຫ້ອົງປະກອບ');ມັນ ('ບໍ່ຄວນເພີ່ມຊັ້ນທີ່ມີຢູ່ແລ້ວ');}) </code>   </pre>  <p>  ພວກເຮົາໄດ້ປ່ຽນຄໍາເວົ້າເລັກນ້ອຍໃຫ້ກັບແບບ "ມັນຄວນເຮັດແບບ X" ທີ່ໃຊ້ກັບການທົດສອບ. ນີ້ຫມາຍຄວາມວ່າມັນອ່ານເລັກນ້ອຍ, ແຕ່ເປັນສິ່ງຈໍາເປັນກໍ່ຄືແບບຟອມທີ່ສາມາດອ່ານໄດ້ຈາກຄົນທີ່ເຮົາໄດ້ລະບຸໄວ້ຂ້າງເທິງ. Semalt ມັກຈະບໍ່ມີຄວາມຫຍຸ້ງຍາກຫຼາຍກ່ວານີ້ໄປຈາກຄວາມຄິດທີ່ຈະທົດສອບ.  </p>  <p>  ແຕ່ລໍຖ້າບ່ອນທີ່ມີການທົດສອບ? ດີ, ເມື່ອພວກເຮົາຍົກເລີກຂໍ້ກໍານົດທີສອງໃຫ້  <code>  ມັນ  </code> , Mocha ສະແດງໃຫ້ເຫັນການທົດສອບເຫຼົ່ານີ້ເປັນ  <em>  ທີ່ຍັງຄ້າງ  </em>  ໃນຜົນການທົດສອບ. ນີ້ແມ່ນວິທີທີ່ສະດວກໃນການສ້າງຕັ້ງການທົດສອບຈໍານວນຫນຶ່ງ - ປະເພດຂອງບັນດາສິ່ງທີ່ທ່ານຕ້ອງການຂຽນ.  </p>  <p>  ການສືບທອດສືບຕໍ່ໂດຍການທົດສອບຄັ້ງທໍາອິດ.  </p>  <pre>   <code>  ອະທິບາຍ ('addClass', function  <span class="f-c-white l-mr3">  {ມັນ ('ຄວນເພີ່ມຊັ້ນໃຫ້ອົງປະກອບ', ຟັງຊັນ  <span class="f-c-white l-mr3">  {var element = {className: ''}addClass (element, 'test-class');ຢືນຢັນ. ເທົ່າກັນ (element element ຊື່, 'test-class');})ມັນ ('ບໍ່ຄວນເພີ່ມຊັ້ນທີ່ມີຢູ່ແລ້ວ');}) </code>   </pre>  <p>  ໃນການທົດສອບນີ້, ພວກເຮົາສ້າງອົງປະກອບ  <code>   </code>  ແລະສົ່ງມັນເປັນພາລາມິເຕີກັບ  <code>  function addClass  </code> , ພ້ອມກັບ string  <code>  test-class  </code>  (the ຮຽນໃຫມ່ເພື່ອເພີ່ມ). ຫຼັງຈາກນັ້ນ, ພວກເຮົາກວດເບິ່ງຫ້ອງຮຽນແມ່ນລວມຢູ່ໃນມູນຄ່າໂດຍນໍາໃຊ້ການຢັ້ງຢືນ.  </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 (@ ສະຖານທີ່) ໃນ CodePen.  </p>  <p>   </p>  <p>  ຕໍ່ໄປ, ໃຫ້ດໍາເນີນການທົດສອບທີສອງ . </p>  <pre>   <code>  ມັນ ('ບໍ່ຄວນເພີ່ມຊັ້ນທີ່ມີຢູ່ແລ້ວ', function  <span class="f-c-white l-mr3">  {var element = {className: 'exists'}addClass (element, 'exists');var numClasses = element className ແບ່ງປັນ (''). ຄວາມຍາວຢືນຢັນ. ເທົ່າກັນ (numClasses, 1);}) </code>   </pre>  <p>  ມີນ້ໍາຫນັກທີ່ດີທີ່ຈະດໍາເນີນການທົດສອບຂອງທ່ານເລື້ອຍໆ, ດັ່ງນັ້ນໃຫ້ກວດເບິ່ງວ່າມີຫຍັງເກີດຂື້ນຖ້າພວກເຮົາດໍາເນີນການທົດສອບນີ້. ຕາມຄາດຫມາຍ, ພວກເຂົາຄວນຈະຜ່ານ.  </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">  ເບິ່ງການທົດສອບຫນ່ວຍ Pen ທີ່ມີ Mocha  <div class="l-d-f l-jc-cen f-center l-mh-auto l-o-h l-mt3">  ໂດຍ SitePoint (@ ສະຖານທີ່) ໃນ CodePen.  </p>  <p>   </p>  <p>  ແຕ່ວາງສາຍ! ຂ້າພະເຈົ້າຈິງໆຫລອກລວງທ່ານ. ມີພຶດຕິກໍາທີສາມສໍາລັບຫນ້າທີ່ນີ້ທີ່ພວກເຮົາບໍ່ໄດ້ພິຈາລະນາ. ນອກນັ້ນຍັງມີຂໍ້ຜິດພາດໃນການເຮັດວຽກ - ເປັນສິ່ງທີ່ຮ້າຍແຮງ. ການປະທ້ວງພຽງແຕ່ສາມເສັ້ນປະຕິບັດແຕ່ທ່ານສັງເກດເຫັນມັນ?  </p>  <p>  Semalt ຂຽນການທົດສອບອີກຄັ້ງຫນຶ່ງສໍາລັບພຶດຕິກໍາທີສາມເຊິ່ງ exposes ບັກເປັນເງິນ.  </p>  <pre>   <code>  ມັນ ('ຄວນຈະເພິ່ມຕື່ມໃຫມ່ຫຼັງຈາກທີ່ມີຢູ່ແລ້ວ', function  <span class="f-c-white l-mr3">  {var element = {className: 'exists'}addClass (element, 'new-class');var classes = element className ແບ່ງປັນ ('')ຢືນຢັນ. ທຽບເທົ່າ (ຊັ້ນຮຽນ [1], 'ໃຫມ່');}) </code>   </pre>  <p>  ເວລານີ້ການທົດສອບລົ້ມເຫລວ. ທ່ານສາມາດເບິ່ງມັນໃນການກະທໍາໃນ CodePen ຕໍ່ໄປນີ້. ບັນຫານີ້ແມ່ນງ່າຍດາຍ: ຊື່ CSS ໃນອົງປະກອບຄວນຖືກແຍກອອກໂດຍພື້ນທີ່. ຢ່າງໃດກໍຕາມ, ການປະຕິບັດໃນປະຈຸບັນຂອງພວກເຮົາ  <code>  addClass  </code>  ບໍ່ໄດ້ເພີ່ມຊ່ອງໃດຫນຶ່ງ!  </p>  <p data-height="600" data-theme-id="6441" data-slug-hash="oboxve" data-default-tab="result" data-user="SitePoint" class="codepen">  ເບິ່ງການທົດສອບຫນ່ວຍ Pen ທີ່ມີ Mocha  <div class="widget maestro maestro-content-type-html hide-for-mobile-SP" id="maestro-659">  ໂດຍ SitePoint (@ ສະຖານທີ່) ໃນ CodePen.  </p>  <p>   </p>  <p>  Semalt ແກ້ໄຂການເຮັດວຽກແລະເຮັດໃຫ້ການທົດສອບຜ່ານ.  </p>  <pre>   <code>  function addClass (el, newClass) {ຖ້າ (el className indexOf (newClass)! == -1) {ກັບຄືນມາ;}ຖ້າ (el className! == '') {// ໃຫ້ແນ່ໃຈວ່າຊື່ຊັ້ນຮຽນຖືກແຍກອອກໂດຍພື້ນທີ່newClass = '' + newClass}el 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 (@ ສະຖານທີ່) ໃນ CodePen.  </p>  <p>   </p>  <h3 id="running-the-tests-on-node">  ແລ່ນທົດສອບເທິງເຈາະ  </h3>  <p>  ໃນໂຫນດ, ສິ່ງທີ່ມີພຽງແຕ່ເບິ່ງສິ່ງອື່ນໃນໄຟດຽວກັນ. ເປັນ  <code>  className js  </code>  ແລະ  <code>  classNameTest js  </code>  ແມ່ນຢູ່ໃນໄຟລ໌ທີ່ແຕກຕ່າງກັນ, ພວກເຮົາຈໍາເປັນຕ້ອງຊອກຫາວິທີທີ່ຈະສະແດງໃຫ້ຄົນອື່ນເຫັນ. ວິທີການມາດຕະຖານເພື່ອເຮັດສິ່ງນີ້ແມ່ນຜ່ານການນໍາໃຊ້  <code>  ໂມດູນ. ການສົ່ງອອກ  </code> . ຖ້າທ່ານຕ້ອງການການຟື້ນຟູ, ທ່ານສາມາດອ່ານທັງຫມົດກ່ຽວກັບສິ່ງທີ່ຢູ່ທີ່ນີ້: ການເຂົ້າໃຈຫຼັກສູດ. ການສົ່ງອອກແລະສົ່ງອອກໃນ Node. js  </p>  <p>  ລະຫັດດັ່ງກ່າວແມ່ນມີຄວາມແຕກຕ່າງກັນແຕ່ມີໂຄງສ້າງເລັກນ້ອຍ:  </p>  <pre>   <code>  // className jsmodule export = {addClass: function (el, newClass) {ຖ້າ (el className indexOf (newClass)! == -1) {ກັບຄືນມາ;}ຖ້າ (el className! == '') {// ໃຫ້ແນ່ໃຈວ່າຊື່ຊັ້ນຮຽນຖືກແຍກອອກໂດຍພື້ນທີ່newClass = '' + newClass}el className + = newClass}} </code>   </pre>  <pre>   <code> // classNameTest jsvar chai = require ('chai')var assert = chai ຍືນຍັນ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>  ແຕ່ນີ້ແມ່ນພຽງແຕ່ scratching ດ້ານ. ການຂຸດເຫຍື່ອຫຼາຍຂຶ້ນເພື່ອຮຽນຮູ້ກ່ຽວກັບການທົດສອບຫນ່ວຍງານ.  </p>  <ul>  <li>  ທົດສອບລະບົບທີ່ຊັບຊ້ອນຫລາຍຂຶ້ນ  </li>  <li>  ວິທີການຈັດການກັບ Ajax, ຖານຂໍ້ມູນແລະສິ່ງອື່ນໆ "ພາຍນອກ"?  </li>  <li>  ການພັດທະນາໂດຍນໍາໃຊ້ການທົດລອງ  </li>  </ul>  <p>  ຖ້າທ່ານຕ້ອງການສືບຕໍ່ຮຽນຮູ້ນີ້ແລະຫຼາຍກວ່ານັ້ນ, ຂ້າພະເຈົ້າໄດ້ສ້າງຊຸດທົດລອງທົດລອງທົດລອງທົດລອງຟຣີໆ. ຖ້າທ່ານພົບບົດຄວາມນີ້ທີ່ເປັນປະໂຫຍດ, ທ່ານຄວນຈະກວດເບິ່ງມັນຢູ່ທີ່ນີ້.  </p>  <p>  ທາງເລືອກອື່ນ, ຖ້າວິດີໂອຫຼາຍແບບຂອງທ່ານ, ທ່ານອາດຈະສົນໃຈຫຼັກສູດ SitePoint Premium: ການພັດທະນາການທົດລອງໃນ Node. 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 ປີ. ຢູ່ blog ລາວ, ລາວໄດ້ຊ່ວຍໃຫ້ນັກພັດທະນາ JavaScript ຮຽນຮູ້ເພື່ອລົບລ້າງລະຫັດບໍ່ດີເພື່ອໃຫ້ພວກເຂົາສາມາດເນັ້ນຫນັກໃສ່ການຂຽນແອັບຯທີ່ຫນ້າຫວາດສຽວແລະແກ້ໄຂບັນຫາທີ່ແທ້ຈິງ.  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </div>  </div>  </div>  </div>  </p>  </p>  </html>  </head>                                                     
March 1, 2018