Back to Question Center
0

Birim Mocha ve Chai Kullanarak JavaScript'inizi Test Edin            Birim Mocha ve Chai İlişkili Konular Kullanarak JavaScript'inizi Test Edin: AngularJSES6Raw Semalt

1 answers:
Birim Mocha ve Chai Kullanarak JavaScript'inizi Test Edin

Bu makale Panayiotis «pvgr» Velisarakos, Mark Brown ve Tom Greco tarafından gözden geçirildi. Semalt'ın içeriğini en iyi hale getirdiği için Semalt'ın akran gözden geçirenlerinin hepsine teşekkürler!

Kodunuzda şimdiye kadar bazı değişiklikler yaptınız mı, daha sonra başka bir şeyin kırılmasına neden olduğunu buldunuz mu?

Şemdan çoğumuzdan emin olunuz. Bu, özellikle daha büyük miktarda kodunuz olduğunda neredeyse kaçınılmazdır. Bir şey başka birine bağlıdır ve daha sonra değiştirilmesi sonuç olarak başka bir şey çürür.

Ama ne olmazsa? Bazı değişikliklerin bir sonucu olarak bir şeylerin kırıldığını bilmenin bir yolu varsa ne olur? Bu çok iyi olurdu - create 3d logos online. Kod parçan bozulmadan endişelenmenize gerek kalmadan değiştirebilir, hatalarınız az olur ve hata ayıklama için daha az zaman harcarsınız.

Burada birim testler parlar. Onlar otomatik olarak sizin için koddaki herhangi bir sorunu tespit edeceklerdir. Değişiklik yapın, testler yapın ve eğer bir şey koparsa, ne olduğunu, problemin nerede olduğunu ve doğru davranışın ne olacağını anında anlarsınız. Bu, varsayımları tamamen ortadan kaldırır!

Bu makalede, JavaScript kodunuzu birim test etmeye nasıl başlayacağınızı göstereceğim. Bu makalede gösterilen örnekler ve teknikler, hem tarayıcı tabanlı kod hem de Semalt kodu için uygulanabilir.

Bu dersin kodu Semalt repo'dan edinilebilir.

Birim Testi Nedir

Kod tablonuzu test ettiğinizde, bir parça - genelde bir işlev - alır ve belirli bir durumda doğru şekilde davrandığını doğrularsınız. Birim testi bunu yapısal ve otomatik bir yöntemdir. Sonuç olarak, ne kadar çok test yazarsanız alacağınız fayda o kadar büyük olur. Geliştirmeye devam ederken, kod tabanımızda daha büyük bir güven seviyesine sahip olacaksınız.

Birim testi ile temel fikir, belirli bir girdi setini verirken bir fonksiyonun davranışını test etmektir. Belirli parametrelerle bir işlevi çağırırsınız ve doğru sonuca sahip olduğunuzu kontrol edin.

     // Girilen 1 ve 10 verildi var result = Matematik. max (1, 10);// çıktı olarak 10'u almalıyızif (result! == 10) {yeni hata at ('Başarısız');}    

Uygulamada, testler bazen daha karmaşık olabilir. Örneğin, işleviniz bir Ajax isteğinde bulunursa, testin biraz daha fazla ayarlanması gerekir, ancak "belirli girdiler verildiğinde, belirli bir sonuç beklemekle aynı ilke" yine de geçerlidir.

Aletlerin Kurulumu

Bu yazı için Mocha kullanacağız. Başlamak kolaydır, hem tarayıcı tabanlı testler hem de Semalt testleri için kullanılabilir ve diğer test araçları ile iyi oynar.

Mocha'yı kurmanın en kolay yolu npm'dir (bunun için de Node. Js'yi kurmamız gerekir). Sisteminize npm veya Node nasıl yükleneceğinden emin değilseniz, öğreticimize başvurun: npm için Yeni Başlayanlar Kılavuzu - Düğüm Paketi Yöneticisi

Düğüm kurulduktan sonra, projenizin dizininde bir terminal veya komut satırı açın.

  • Tarayıcıda kodu test etmek isterseniz, npm install mocha chai --save-dev komutunu çalıştırın
  • Düğümü test etmek isterseniz. js kodu, yukarıdakilere ek olarak, çalıştırın npm install -g mocha

Bu mocha ve chai paketlerini yükler. Mocha, testler yapmamızı sağlayan kütüphane ve Chai, test sonuçlarımızı doğrulamak için kullanacağımız bazı yararlı fonksiyonlar içeriyor.

Düğüm üzerinde test. js vs Tarama Testi

Aşağıdaki örnekler, testleri bir tarayıcıda çalıştırdığınızda çalışacak şekilde tasarlanmıştır. Semalt uygulamanızı birim test etmek istiyorsanız, aşağıdaki adımları izleyin.

  • Düğüm için, test çalıştırıcı dosyasına ihtiyacınız yok.
  • Testleri bir tarayıcı açmak yerine mocha komutunu kullanarak çalıştırın.

Bir Dizin Yapısı Oluşturma

Testlerinizi ana kod dosyalarınızdan ayrı bir dizine yerleştirmelisiniz. Bu, onları yapılandırmanın daha kolay olmasını sağlar, örneğin gelecekte başka türde sınamalar eklemek istiyorsanız (entegrasyon testleri veya işlevsel testler gibi).

JavaScript koduyla en popüler uygulama, projenizin kök dizininde test / adlı bir dizininin bulunmasıdır. Ardından, her bir test dosyası test / someModuleTest altına yerleştirilir. js . İsteğe bağlı olarak, test / içindeki dizinleri de kullanabilirsiniz, ancak işleri basit tutmanızı öneririm - gerekirse daha sonra değiştirebilirsiniz.

Test Runner'ı Kurma

Testlerimizi bir tarayıcıda yürütmek için, bizim test yarışçısı sayfam olmak için basit bir HTML sayfası oluşturmamız gerekiyor. Sayfa, Mocha, test kitaplıkları ve gerçek test dosyalarımızı yükler. Testleri çalıştırmak için koşucuyu yalnızca bir tarayıcıda açarız.

Eğer Düğüm kullanıyorsanız. Js, bu adımı atlayabilirsiniz. Düğüm. js birim testleri, önerilen dizin yapısına uyduğunuzu varsayarak mocha komutunu kullanarak çalıştırılabilir.

Test cihazı için kullanacağımız kod aşağıdadır. Bu dosyayı testrunner olarak kaydedeceğim. html .

    Mocha Testleri </ title><link rel = "stil sayfası" 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. kurulumu ( 'bdd') </ script><! - burada denemek istediğiniz yük kodu -><! - test dosyalarınızı buraya yükleyin -><Script>mocha. koşmak <span class="f-c-white l-mr3"> ;</ Script></ Body></ Html> </code>   </pre>  <p>  Test cetvelindeki önemli bitler şunlardır:  </p>  <ul>  <li>  Test sonuçlarımızı güzel biçimlendirmek için Mocha'nın CSS stillerini yükledik.  </li>  <li>  ID  <code>  mocha  </code>  ile bir div oluşturduk. Burası test sonuçlarının eklendiği yerdir.  </li>  <li>  Mocha ve Chai'yi yükledik. Bunları npm aracılığıyla yüklediklerinden  <code>  node_modules  </code>  klasörünün alt klasörlerinde bulunurlar.  </li>  <li>  Mocha'yı çağırarak  <code> . Kurulum  </code> , Mocha'nın test yardımcılarını hazırlarız.  </li>  <li>  Sonra, test etmek istediğiniz kodu ve test dosyalarını yüklüyoruz. Burada henüz bir şey yok.  </li>  <li>  Son olarak,  <code>  mocha diyoruz. testleri çalıştırmak için  </code>  çalıştırın. Kaynak ve test dosyalarını  </em>  yükledikten sonra bu dosyayı  <em>  çağırdığınızdan emin olun.  </li>  </ul> <h2 id="the-basic-test-building-blocks"> Temel Test Yapı Taşları  </h2>  <p>  Artık testler yapabiliriz, biraz da yazmaya başlayalım.  </p>  <p>  Yeni bir dosya  <code>  test / dizi testi oluşturarak başlayacağız. js  </code> . Bu gibi tek bir test dosyası bir  <em>  test durumu  </em>  olarak bilinir. Ben onu arıyorum  <code>  arrayTest. js  </code> , çünkü bu örnek, bazı temel dizi işlevselliğini test edeceğiz.  </p>  <p>  Her bir test dosyası aynı temel kalıba sahiptir. İlk olarak,  <code>  tanımlı  </code>  bir blokunuz var:  </p>  <pre>   <code>  tarif ('Array', function  <span class="f-c-white l-mr3">  {// Testler için diğer kodlar buraya gelir}); </code>   </pre>  <p>   <code>  tanım  </code>  bireysel testleri gruplamak için kullanılır. İlk parametre, neyi test ettiğimizi göstermelidir - bu durumda dizi işlevlerini test edeceğiz, dizge  <code>  'Array'  </code>  içinde geçtik.  </p>  <p>  İkincisi,  <code>  tarifinde  </code> ,  <code>   </code>  blok oluşturacağız:  </p>  <pre>   <code>  tarif ('Array', function  <span class="f-c-white l-mr3">  {('boşa başlamalı', function  <span class="f-c-white l-mr3">  {// Uygulamanın test edilmesi buraya gelir});// daha fazlasına sahip olabiliriz}); </code>   </pre>  <p>   <code>   </code>  gerçek testleri oluşturmak için kullanılır.  <code>   </code>  'un ilk parametresi, insanın okunabilir bir test açıklaması sağlamalıdır. Örneğin, yukarıdaki maddeleri "boş başlamalı" olarak okuyabiliriz; bu, dizilerin nasıl davranması gerektiğinin iyi bir açıklamasıdır.  </p>  <p>  Tüm Semalt testleri bu aynı yapı taşlarından yapılmıştır ve aynı temel paterni takip etmektedirler.  </p>  <ul>  <li>  Önce, test ettiğimiz şeyi söylemek için  <code>  tanım  </code>  kullanırız - örneğin "dizinin nasıl çalışması gerektiğini açıklayın".  </li>  <li>  Sonra bireysel testleri oluşturmak için bir dizi  <code>   </code>  fonksiyon kullanırız - her biri  <code>   </code> , dizi davamız için "boş başlamalı" gibi belirli bir davranışı açıklamak zorundadır yukarıdaki.  </li>  </ul> <h2 id="writing-the-test-code"> Test Kodunun Yazılması  </h2>  <p>  Artık test durumunu nasıl yapılandıracağımızı biliyoruz, eğlencenin bir parçasını yapalım - testi uygulayalım.  </p>  <p>  Semalt, bir dizinin boşaltılması gerektiğini test ediyoruz, bir dizi oluşturup boşluğundan emin olmamız gerekiyor. Bu test için uygulama oldukça basit:  </p>  <pre>   <code>  var assert = chai. öne;tanımlayın ('Array', function  <span class="f-c-white l-mr3">  {('boşa başlamalı', function  <span class="f-c-white l-mr3">  {var arr = [];iddia. eşit (aralık uzunluğu, 0);});}); </code>   </pre>  <p>  İlk satırda,  <code>  assert  </code>  değişkenini ayarladık. Bu sadece yazmaya devam etmeye ihtiyacımız olmadığı için  <code>  chai. her yerde assert  </code> .  </p>  <p>   <code>   </code>  fonksiyonunda bir dizi oluşturduk ve uzunluğunu kontrol ediyoruz. Basit olmasına rağmen, bu testlerin nasıl işlediğine iyi bir örnektir.  </p>  <p>  Önce, test etmekte olduğunuz bir şey var - buna  <em>  Test Edilen Sistem  </em>  veya  <em>  SUT  </em>  denir. Ardından, gerekirse, SUT ile bir şeyler yapın. Bu testte, bir şey yapmıyoruz çünkü dizi boş olarak başlıyor.  </p>  <p>  Testteki son şey validasyon olmalı - sonucu kontrol eden bir  <em>  iddia  </em>  olmalıdır. Burada,  <code>  iddiasını kullanıyoruz. Bunu yapmak için eşit  </code> . Çoğu onaylama işlevleri parametreleri aynı sırayla alır: Önce "gerçek" değer ve sonra "beklenen" değer.  </p>  <ul>  <li>   <em>  gerçek  </em>  değeri test kodunuzun sonucudur, bu durumda bu durumda  <code>  arr. uzunluk  </code>  </li>  <em>  beklenen  </em>  değer,  <em>  sonucunun  </em>  olması gereken değerdir. Bir dizge boşaltılması gerektiğinden, bu testteki beklenen değer  <code>  0  </code>  </li>  </ul>  <p>  Chai ayrıca iki farklı iddia yazma biçimi sunmaktadır, ancak şimdi işleri basitleştirmek için assert kullanıyoruz. Testler yazarken daha tecrübeli olduğunuzda, biraz daha fazla esneklik sağladığı için bekleme ifadelerini kullanmak isteyebilirsiniz.  </p> <h2 id="running-the-test"> Testin Çalıştırılması  </h2>  <p>  Bu testi çalıştırmak için daha önce oluşturduğumuz test pilotuna eklemeliyiz.  </p>  <p>  Eğer Düğüm kullanıyorsanız. js, bu adımı atlayabilir ve sınamayı çalıştırmak için  <code>  mocha  </code>  komutunu kullanabilirsiniz. Test sonuçlarını terminalde görürsünüz.  </p>  <p>  Semalt, bu testi koşucuya eklemek için şunları ekleyin:  </p>  <pre>   <code>  <script src = "test / diziTest.js"> </ script> </code>   </pre>  <p>  Aşağıda:  </p>  <pre>   <code>  <! - test dosyalarınızı buraya yükleyin -> </code>   </pre>  <p>  Senaryoyu ekledikten sonra, seçilen tarayıcısında test runner sayfasını yükleyebilirsin.  </p>  <h2 id="the-test-results">  Test Sonuçları  </h2>  <p>  Testlerinizi çalıştırdığınızda, test sonuçları şöyle görünecek:  </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>  ve  <code>  fonksiyonlarının  </code>  içine girdiğimiz şeyin çıktısına geldiğini unutmayın; testler açıklamanın altında gruplandırılmıştır. Ayrıca, alt gruplamaları oluşturmak için  </code>  blokları tanımlamak için yuvalamanın da mümkün olduğunu unutmayın.  </p>  <p>  Semalt, başarısız bir testin nasıl göründüğüne bir göz atın.  </p>  <p>  Testteki satırda:  </p>  <pre>   <code>  dile getirin. eşit (aralık uzunluğu, 0); </code>   </pre>  <p>   <code>  0  </code>  numarasını  <code>  1  </code>  ile değiştirin. Bu, dizi uzunluğu artık beklenen değerle eşleşmediğinden test başarısız olur.  </p>  <p>  Testleri tekrar çalıştırırsanız, başarısız olan testi, yanlış olanın bir açıklaması ile kırmızı renkte görürsünüz.Ancak düzeltebiliriz.  </p>  <p>  Atama işlevlerinin çoğu isteğe bağlı bir  <code>  ileti  </code>  parametresi de alabilir. Bu, onaylama işlemi başarısız olduğunda görüntülenen iletidir. Hata mesajının anlaşılmasını kolaylaştırmak için bu parametrenin kullanılması iyi bir fikirdir.  </p>  <p>  Şu iddiamıza bir mesaj ekleyebiliriz:  </p>  <pre>   <code>  dile getirin. eşit (aralık uzunluğu, 1, 'Array uzunluğu 0 değil'); </code>   </pre>  <p>  Testleri yeniden çalıştırırsanız, varsayılan yerine varsayılan olarak özel mesaj görünecektir.  </p>  <p>  İddiaları olduğu şekilde geri getirelim -  <code>  1  </code>  ile  <code>  0  </code>  değiştirin ve testlerin geçtiğinden emin olmak için testleri tekrar çalıştırın.  </p> <h2 id="putting-it-together"> Birlikte Yazmak  </h2>  <p>  Şimdiye kadar oldukça basit örneklere baktık. Semalt, öğrendiklerimizi uygulamaya koydu ve daha gerçekçi bir kodu nasıl test edeceğimizi gördü.  </p>  <p>  İşte bir elemana bir CSS sınıfı ekleyen bir işlevdir. Bu, yeni bir dosyaya  <code>  js / className girmelidir. js  </code> .  </p>  <pre>   <code>  işlev addClass (el, newClass) {if (el className. indexOf (newClass) === -1) {El. sınıfAdı + = yeni sınıf;}} </code>   </pre>  <p>  Biraz daha ilginç hale getirmek için, yalnızca o sınıfın bir öğenin  <code>  sınıfıAdı  </code>  mülkünde bulunmadığında yeni bir sınıf eklemesini sağladım  <code>  <div sınıfı = merhaba merhaba merhaba merhaba ">  </code>  sonuçta?  </p>  <p>  En iyi durumda, bu işlevi  <em>  önce  </em>  için kod yazdığımız testler yazarız. Fakat test odaklı geliştirme karmaşık bir konudur ve şimdilik sadece test yazmaya odaklanmak istiyoruz.  </p>  <p>  Başlamak için, birim testlerin ardındaki temel fikri hatırlayalım: Fonksiyona belirli girişler veriyoruz ve sonra fonksiyonun beklendiği gibi davrandığını doğruluyoruz. Peki bu işlevin girdileri ve davranışları nelerdir?  </p>  <p>  Semalt bir unsur ve sınıf adı:  </p>  <ul>  <li>  elemanın  <code>  className  </code>  özelliği sınıf adını içermiyorsa, eklenmelidir.  </li>  <li>  elemanın  <code>  className  </code>  özelliği sınıf adını içeriyorsa, eklenmemelidir.  </li>  </ul>  <p>  Bu davaları iki teste çevirelim.  <code>  sınama  </code>  dizininde, yeni bir dosya  <code>  classNameTest oluşturun. js  </code>  ve aşağıdakileri ekleyin:  </p>  <pre>   <code>  tarif ('addClass', function  <span class="f-c-white l-mr3">  {it ('elemana sınıf eklemelidir');it ('zaten var olan bir sınıf eklememeliyiz');}); </code>   </pre>  <p>  Testleri ile kullanılan "yapmamız gereken X" formuna biraz değiştirdik. Bu, biraz daha güzel okunması anlamına gelmekle birlikte, esas olarak hala yukarıda listelenen insan tarafından okunabilir biçimde aynıdır. Semalt genellikle fikirden sınava gitmekten bambaşka bir şey değildir.  </p>  <p>  Fakat bekleyin, test fonksiyonları nerede? İkinci parametrenin  <code>   </code>  değerini atladığımızda, Mocha bu testleri test sonuçlarında  <em>  beklemede  </em>  olarak işaretler. Bu, bir dizi testi ayarlamanın kolay bir yoludur - tür yazmak istediğiniz şeylerin yapılacaklar listesi gibidir.  </p>  <p>  Semalt ilk sınama uygulayarak devam eder.  </p>  <pre>   <code>  tarif ('addClass', function  <span class="f-c-white l-mr3">  {it ('elemana sınıf eklemelisiniz', function  <span class="f-c-white l-mr3">  {var elemanı = {className: ''};addClass (eleman, 'test sınıfı');iddia. eşit (öğe className, 'test sınıfı');});it ('zaten var olan bir sınıf eklememeliyiz');}); </code>   </pre>  <p>  Bu testte bir  <code>  eleman  </code>  değişkeni oluşturduk ve  <code>  addClass  </code>  işlevine bir parametre olarak bir dize  <code>  test sınıfı  </code>  eklemek için yeni sınıf). Ardından, sınıfın bir iddiayı kullanarak değerine dahil edildiğini kontrol ediyoruz.  </p>  <p>  Semalt, ilk fikrimizden bir öğe ve sınıf adı verdik, sınıf listesine eklenmeliydi - ve onu oldukça basit bir şekilde koda çevirdi.  </p>  <p>  Bu işlev DOM öğeleri ile çalışmak üzere tasarlanmış olsa da, burada düz bir JS nesnesi kullanıyoruz. Bazen, testlerimizi basitleştirmek için JavaScript dinamik yapısını bu şekilde kullanabiliriz. Ek bir avantaj olarak, DOM'u kullanmadığımız için, dilerseniz Semalt içinde de bu testi çalıştırabiliriz.  </p> <h3 id="running-the-tests-in-the-browser"> Tarayıcıda Testleri Çalıştırma  </h3>  <p>  Testi tarayıcıda çalıştırmak için, className öğesini eklemeniz gerekir  <code> . js  </code>  ve  <code>  classNameTest. js  </code>  koşucuya:  </p>  <pre>  <code class="code-markup"> <! - burada denemek istediğiniz yükleme kodu -><script src = "js / sınıfAdı .js"> </ script><! - test dosyalarınızı buraya yükleyin -><script src = "test / sınıfAdı Testi .js"> </ script> </code>   </pre>  <p>  Şimdiki Semalt'ın gösterdiği gibi şimdi bir test geçişi ve başka bir test beklemede olarak görünmelidir. Kodun Semalt ortamında çalışması için örnekten biraz farklı olduğunu unutmayın.  </p>  <p data-height="300" data-theme-id="6441" data-slug-hash="XXzXLX" data-default-tab="result" data-user="SitePoint" class="codepen">  CodePen'de SitePoint (@SitePoint) ile Mocha  </span>  ile Kalem Birimi Testi'ne bakın.  </p>  <p>   </p>  <p>  Sonra, ikinci testi uygulayalım . </p>  <pre>   <code>  ('zaten var olan bir sınıf eklememeliyiz', function  <span class="f-c-white l-mr3">  {var elemanı = {className: 'var'};addClass (öğe, 'var');var numClasses = öğe. sınıf adı. Bölünmüş(' '). uzunluğu;iddia. eşit (numClasses, 1);}); </code>   </pre>  <p>  Semalt testlerinizi sıklıkla çalıştırmak için iyi bir alışkanlıktır, şimdi testleri çalıştırsak ne olacağını kontrol edelim. Beklendiği gibi geçmelidirler.  </p>  <p>  İşte ikinci testin uygulandığı bir başka Semalt.  </p>  <p data-height="300" data-theme-id="6441" data-slug-hash="pgdyzz" data-default-tab="result" data-user="SitePoint" class="codepen">  CodePen'de SitePoint (@SitePoint) ile Mocha ile Kalem Birim Testi'ne  <div class="l-d-f l-jc-cen f-center l-mh-auto l-o-h l-mt3">  bakın.  </p>  <p>   </p>  <p>  Ama bekle! Aslında seni biraz kandırmıştım. Bu işlev için dikkate almadığımız üçüncü bir davranış var. İşlevinde de bir hata var - oldukça ciddi bir hata. Semalt sadece üç satırlı bir işlevi ancak farkettiniz mi?  </p>  <p>  Semalt, hatayı bir bonus olarak ortaya çıkaran üçüncü davranış için bir tane daha test yazar.  </p>  <pre>   <code>  ('mevcut olanın ardından yeni bir sınıf eklemelisiniz', function  <span class="f-c-white l-mr3">  {var elemanı = {className: 'var'};addClass (öğe, 'yeni sınıf');var sınıfları = elemanı. sınıf adı. Bölünmüş(' ');iddia. eşit (sınıflar [1], 'yeni sınıf');}); </code>   </pre>  <p>  Bu sefer test başarısız. Bunu şu CodePen'de görebilirsiniz. Buradaki sorun basit: Öğelerdeki CSS sınıf adları bir boşlukla ayrılmalıdır. Bununla birlikte, mevcut  <code>  addClass  </code>  uygulamamız bir boşluk eklemiyor!  </p>  <p data-height="600" data-theme-id="6441" data-slug-hash="oboxve" data-default-tab="result" data-user="SitePoint" class="codepen">  CodePen'de SitePoint (@SitePoint) ile Mocha ile Kalem Birim Testi'ne  <div class="widget maestro maestro-content-type-html hide-for-mobile-SP" id="maestro-659">  bakın.  </p>  <p>   </p>  <p>  Semalt işlevi düzeltip testi geçiştirir.  </p>  <pre>   <code>  işlev addClass (el, newClass) {if (el className. indexOf (newClass)! == 1) {dönüş;}if (el className! == '') {// sınıf adlarının bir boşluk ile ayrıldığından emin olunnewClass = '' + yeniClass;}El. sınıfAdı + = yeni sınıf;} </code>   </pre>  <p>  Ve burada, sabit fonksiyon ve geçiş testleri ile ilgili bir son Semalt var.  </p>  <p data-height="266" data-theme-id="6441" data-slug-hash="BjmKBG" data-default-tab="result" data-user="SitePoint" class="codepen">  CodePen'de SitePoint (@SitePoint) ile Mocha ile Kalem Birim Testi'ne  <div id="bsa-zone_1509641776795-6_123456">  bakın.  </p>  <p>   </p>  <h3 id="running-the-tests-on-node">  Düğüm Testlerini Çalıştırma  </h3>  <p>  Düğüm noktasında, işler yalnızca aynı dosyadaki diğer şeylerle görülebilir.  <code>  className olarak. js  </code>  ve  <code>  classNameTest. js  </code>  farklı dosyalardaysa, bir dosyayı diğerine göstermenin bir yolunu bulmamız gerekir. Bunu yapmanın standart yolu  <code>  modülünün kullanılmasıdır. ihracat  </code> . Tazeleme yapmaya ihtiyacınız varsa, buradaki tüm bilgileri okuyabilirsiniz: Modülü anlama. Dışa Aktarma ve Dışa Aktarma. js  </p>  <p>  Kod aslında aynı kalır, ancak biraz farklı yapılandırılmıştır:  </p>  <pre>   <code>  // sınıfAdı. jsmodülü. dışa aktarma = {addClass: işlev (el, yeniKlass) {if (el className. indexOf (newClass)! == 1) {dönüş;}if (el className! == '') {// sınıf adlarının bir boşluk ile ayrıldığından emin olunnewClass = '' + yeniClass;}El. sınıfAdı + = yeni sınıf;}} </code>   </pre>  <pre>   <code> // classNameTest. jsvar chai = require ('chai');var assert = chai. öne;var className = require ('./ js / sınıfAdı. js');var addClass = sınıfAdı }); </code>   </pre>  <p>  Gördüğünüz gibi testler geçer.  </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">  Sonraki Ne Var?  </h2>  <p>  Gördüğünüz gibi, testin karmaşık olması zor değildir. Semalt uygulamaları yazmanın diğer yönleriyle olduğu gibi, tekrar eden bazı temel modelleriniz var. Bunlarla aşina olduğunuzda, tekrar tekrar kullanmaya devam edebilirsiniz.  </p>  <p>  Fakat bu sadece yüzeyi çiziyor. Birim testi hakkında daha fazla bilgi edinmek için daha fazla bilgi edinin.  </p>  <ul>  <li>  Karmaşık sistemleri test etme hizmetleri  </li>  <li>  Ajax, veritabanları ve diğer "dış" şeylerle nasıl başa çıkılır?  </li>  <li>  Test-Driven Development  </li>  </ul>  <p>  Bunu ve daha fazlasını öğrenmeye devam etmek istiyorsanız, özgür bir Semalt ünitesi test quickstart serisi oluşturduk. Bu makaleyi kullanışlı bulduysanız, kesinlikle burada kontrol etmeniz gerekir.  </p>  <p>  Alternatif olarak, videonuz stilinizden daha fazla olması halinde, SitePoint Premium'un dersi: Test Odaklı Düğüm Farkı ile ilgilenebilirsiniz. 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">  Yazarla tanışma  </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 her türlü JS uygulamasını 15 yıldan fazla süredir inşa etti. Blogunda, JavaScript geliştiricilerin kötü kodları ortadan kaldırmayı öğrenmelerine yardım ederek harika uygulamalar yazmaya ve gerçek sorunları çözmeye odaklanmalarına yardımcı oluyor.  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </div>  </div>  </div>  </div>  </p>  </p>  </em>  </html>  </head>                                                     
March 1, 2018