Back to Question Center
0

Yksikkö Testaa JavaScript Käyttämällä Mocha ja Chai            Yksikkö Testaa JavaScript Käyttämällä Mocha ja ChaiTuotettuja aiheita: AngularJSES6Raw Semalt

1 answers:
Yksikkö Testaa JavaScript Käyttämällä Mocha ja Chai

Panayiotis «pvgr» Velisarakos, Mark Brown ja Tom Greco tarkastelivat tätä artikkelia. Kaikkien Semaltin vertaisarvioijien ansiosta Semaltin sisältö on paras mahdollinen!

Oletko koskaan tehnyt joitain muutoksia koodisi ja myöhemmin löytänyt sen aiheuttanut jotain muuta murtaa?

Epäilemättä useimmat meistä ovat. Tämä on lähes väistämätöntä, varsinkin kun sinulla on suurempi määrä koodia. Yksi asia riippuu toisesta, ja sen muuttaminen sitten katkaisee jotain muuta.

Mutta mitä jos näin ei tapahdu? Entä jos sinulla olisi tapa tietää, milloin jotain muutos johtuu jotain? Se olisi hienoa - rtg tournament bonus codes. Voit muokata koodia joutumatta murtamaan mihinkään, sinulla olisi vähemmän virheitä ja vähemmän aikaa virheenkorjaukseen.

Siten yksikkötestit loistavat. Ne automaattisesti havaitsevat koodin ongelmat sinulle. Tee muutos, suorita testit ja jos jotain katkeaa, huomaat välittömästi, mitä tapahtui, missä on ongelma ja , mikä oikea toiminta olisi. Tämä täysin poistaa mahdolliset arvailut!

Tässä artikkelissa näytän sinulle, miten aloitat yksikön testaamalla JavaScript-koodisi. Tässä artikkelissa kuvattuja esimerkkejä ja tekniikoita voidaan soveltaa sekä selainpohjaisiin koodeihin että Semalt-koodiin.

Tämän opetusohjelman koodi on saatavilla Semalt-reposumme.

Mikä on yksikkötestaus

Kun testaat koodiperustasi, otat koodin - tyypillisesti jonkin toiminnon - ja tarkistat sen toimivan oikein tietyllä tilanteella. Yksikkötestaus on jäsennelty ja automatisoitu tapa tehdä tämä. Tämän tuloksena, mitä enemmän testejä kirjoitat, sitä suurempi hyöty on sinulle. Sinulla on myös suurempi luottamus koodibussiin, kun kehität sitä edelleen.

Yksikkötestauksen ydinajatuksena on testata funktion käyttäytymistä antaessaan sille tietyn panoksen. Soita toiminto tietyillä parametreilla ja tarkista, että saat oikean tuloksen.

     // Annetaan 1 ja 10 tuotantopanoksina var result = matematiikka. max (1, 10);// meidän pitäisi saada 10 tuotoksenajos (tulos! == 10) {heittää uusi virhe ('epäonnistui');}    

Käytännössä testit voivat joskus olla monimutkaisempia. Esimerkiksi, jos funktio tekee Ajax-pyynnön, testi vaatii entistä enemmän käyttöönottoa, mutta samaa periaatetta "tietyistä panoksista odotamme tiettyä lopputulosta".

Työkalujen asettaminen

Tässä artikkelissa käytämme Mochaa. Se on helppo aloittaa, sitä voidaan käyttää sekä selainpohjaiseen testaukseen että Semalt-testaukseen ja se soi hienosti muiden testaustyökalujen kanssa.

Helpoin tapa asentaa Mocha on npm (jonka vuoksi myös Node. Js on asennettava). Jos et ole varma siitä, miten asentaa npm tai solmu järjestelmään, tutustu oppaaseen: aloitusopas npm - solmupaketinhallinta

Kun solmu on asennettu, avaa pääte tai komentorivi projektin hakemistossa.

  • Jos haluat testata koodia selaimessa, suorita npm asenna mocha chai --save-dev
  • Jos haluat testata solmua. js -koodi edellä mainittujen lisäksi, suorita npm asentaa -g mocha

Tämä asentaa paketit mocha ja chai . Mocha on kirjasto, jonka avulla voimme suorittaa testejä, ja Chai sisältää hyödyllisiä toimintoja, joita käytämme testitulosten varmistamiseen.

Testaus solmussa. js vs testaaminen selaimessa

Seuraavat esimerkit on suunniteltu toimimaan, jos testit suoritetaan selaimessa. Jos haluat testata yksikön Semalt-sovellusta, toimi seuraavasti.

  • Solmulle ei tarvitse testirataustiedostoa.
  • Suorita testit käyttämällä mocha -komentoa sen sijaan, että avaat selaimen.

Hakemistorakenteen luominen

Sinun pitäisi laittaa testit erilliseen hakemistoon pääkooditiedostoista. Tämä helpottaa niiden rakennetta, esimerkiksi jos haluat lisätä tulevaisuudessa muita testityyppejä (kuten integraatiotestit tai toiminnalliset testit).

Suosituin käytäntö, jossa on JavaScript-koodi, on saada hakemistosi nimeltä test / projektin juurihakemistoon. Sitten jokainen testitiedosto sijoitetaan test / someModuleTest -ohjelmaan. js . Valinnaisesti voit myös käyttää hakemistoja sisällä test / , mutta suosittelen pitämään asiat yksinkertaisina - voit aina muuttaa sitä myöhemmin tarvittaessa.

Testijakajan asentaminen

Jotta saataisimme testit selaimessa, meidän on luotava yksinkertainen HTML-sivu, joka on meidän testirullan sivu. Sivu lataa Mochan, testauskirjastot ja todelliset testitiedostot. Testien suorittamiseksi avaamme yksinkertaisesti selaimen reitittimen.

Jos käytät solmua. js, voit ohittaa tämän vaiheen. Solmu. Js-yksikkökokeita voidaan suorittaa komennolla mocha olettaen, että olet noudattanut suositeltua hakemistorakennetta.

Alla on koodi, jota käytämme testijaksolle. Tallennan tämän tiedoston testrunneriksi. html .

    Mocha Testit </ 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> Mokka. Setup (BDD) </ script><! - latauskoodi, jonka haluat testata täällä -><! - lataa testitiedostot täällä -><Script>mokka. juosta <span class="f-c-white l-mr3"> ;</ Script></ Body></ Html> </code>   </pre>  <p>  Tärkeimmät bitit testijaksossa ovat:  </p>  <ul>  <li>  Kuormaamme Mochan CSS-tyylejä saadaksemme testituloksemme mukavan muotoilun.  </li>  <li>  Luomme divin tunnuksella  <code>  mokka  </code> . Tällöin testitulokset lisätään.  </li>  <li>  Kuormamme Mocha ja Chai. Ne sijaitsevat  <code>  node_modules  </code>  -kansion alikansioissa, koska asensimme ne npm: n kautta.  </li>  <li>  Soita  <code>  mocha. setup  </code> , teemme Mochan testausavustajat saataville.  </li>  <li>  Sitten lataamme testattavan koodin ja testaustiedostot. Meillä ei ole vielä mitään täällä.  </li>  <li>  Viimeiseksi me kutsumme  <code>  mochaa. suorita testit  </code> . Varmista, että soitat tämän  <em>  sen jälkeen  </em> , kun lataat lähdettä ja testaustiedostoja.  </li>  </ul> <h2 id="the-basic-test-building-blocks"> Peruskokeiden rakennuspalikat  </h2>  <p>  Nyt kun voimme suorittaa testejä, aloitetaan kirjoittaminen.  </p>  <p>  Aloitamme luomalla uuden tiedoston  <code>  test / arrayTest. js  </code> . Yksilöllinen testitiedosto, kuten tämä, tunnetaan  <em>  testikotelona  </em> . Soitan sen  <code>  arrayTesta. js  </code> , koska tässä esimerkissä testaamme joitain perusmalleja.  </p>  <p>  Jokainen testitietokanta noudattaa samaa peruskuvaketta. Ensinnäkin, sinulla on  <code>  kuvaus  </code>  lohko:  </p>  <pre>   <code>  kuvaavat ("Array", funktio  <span class="f-c-white l-mr3">  {// Testien lisäkoodi menee tänne}); </code>   </pre>  </code>  käytetään yksittäisten testien ryhmittelyyn. Ensimmäisen parametrin pitäisi näyttää, mitä testaamme - tässä tapauksessa, koska aiomme testata taulukkotoimintoja, olen läpäissyt merkkijono  <code>  "Array"  </code> .  </p>  <p>  Toiseksi,  <code>  kuvaavat  </code> , meillä on  <code>  se  </code>  lohkoa:  </p>  <pre>   <code>  kuvaavat ("Array", funktio  <span class="f-c-white l-mr3">  {se ('pitäisi aloittaa tyhjä', funktio  <span class="f-c-white l-mr3">  {// Testauksen toteutus menee tänne});// Voimme olla enemmän täällä}); </code>   </pre>  <p>   <code>  it  </code>  käytetään varsinaisten testien tekemiseen. Ensimmäisen parametrin  <code>  it  </code>  pitäisi antaa ihmisen luettavissa oleva kuvaus testiä. Esimerkiksi voimme lukea edellä kuvattua "pitäisi aloittaa tyhjä", mikä on hyvä kuvaus siitä, miten taulukot toimisivat.  </p>  <p>  Kaikki Semalt-testit rakennetaan näistä samoista rakennuspalikoista, ja ne noudattavat tätä samaa peruskuvetta.  </p>  <ul>  <li>  Ensinnäkin käytämme  <code>  kuvaavaa  </code>  sanoaksemme, mitä me testaamme - esimerkiksi "kuvaile miten taulukko toimisi".  </li>  <li>  Sitten käytämme useita  <code>  se  </code>  funktioita yksittäisten testien luomiseksi - kunkin  <code>  sen  </code>  tulisi selittää yksi erityinen käyttäytyminen, kuten "se pitäisi alkaa tyhjäksi" edellä.  </li>  </ul> <h2 id="writing-the-test-code"> Testikoodin kirjoittaminen  </h2>  <p>  Nyt, kun tiedämme, miten rakentaa testitapaus, hypätään hauskaksi osaksi - testin toteuttamiseksi.  </p>  <p>  Testaamme, että taulukon pitäisi alkaa tyhjäksi, meidän on luotava taulukko ja varmistettava, että se on tyhjä. Testin toteutus on melko yksinkertainen:  </p>  <pre>   <code>  var assert = chai. väittävät;kuvata ('Array', funktio  <span class="f-c-white l-mr3">  {se ('pitäisi aloittaa tyhjä', funktio  <span class="f-c-white l-mr3">  {var arr = [];puolustaa. yhtä suuri (arr. pituus, 0);});}); </code>   </pre>  <p>  Huomaa ensimmäisellä rivillä, asetimme  <code>  assert  </code>  -muuttujan. Tämä on vain, joten meidän ei tarvitse jatkaa kirjoittamista  <code>  chai. väittävät  </code>  kaikkialla.  </p>  <p>  Toiminnossa  <code>  it  </code>  luodaan taulukko ja tarkistamme sen pituuden. Vaikka yksinkertainen, tämä on hyvä esimerkki siitä, miten testit toimivat.  </p>  <p>  Ensinnäkin sinulla on jotain, jota testaat - tätä kutsutaan  <em>  System Under Test  </em>  tai  <em>  SUT  </em> . Sitten, jos tarvitset, teet jotain SUT: n kanssa. Tässä testissä emme tee mitään, koska tarkistamme, että taulukko alkaa tyhjäksi.  </p>  <p>  Testissä viimeinen asia on oltava validointi -  <em>  väite  </em> , joka tarkistaa tuloksen. Tässä käytämme  <code>  väitettä. sama  </code> . Useimmat varmennustoiminnot ottavat parametrit samassa järjestyksessä: Ensin "todellinen" arvo ja sitten "odotettu" arvo.  </p>  <ul>  <li>  Todellisen  </em>  arvon  <em>  tulos on testikoodisi tulos, joten tässä tapauksessa  <code>  arr. pituus  </code>  </li>  <li>  Oletusarvo  <em>   </em>  on tulos  <em>   </em> . Koska taulukon pitäisi alkaa tyhjäksi, tässä testissä odotettu arvo on  <code>  0  </code>  </li>  </ul>  <p>  Chai tarjoaa myös kaksi erilaista kirjoituslausekkeen tyyliä, mutta käytämme vaatimuksia, jotta asiat olisivat yksinkertaisia ​​nyt. Kun tulet kokemaan kirjoitetut testit, kannattaa käyttää odotettuja väitteitä, koska ne tarjoavat jonkin verran joustavuutta.  </p> <h2 id="running-the-test"> Testin suorittaminen  </h2>  <p>  Jotta voisimme suorittaa tämän testin, meidän on lisättävä se aiemmin luotuun testirataustiedostoon.  </p>  <p>  Jos käytät solmua. js, voit ohittaa tämän vaiheen ja käyttää komentoa  <code>  mocha  </code>  testin suorittamiseen. Näet testitulokset päätteessä.  </p>  <p>  Semalt, lisäät testiä juoksijalle lisää:  </p>  <pre>   <code>  <script src = "test / arrayTest .js"> </ script> </code>   </pre>  <p>  Alla:  </p>  <pre>   <code>  <! - lataa testitiedostot täällä -> </code>   </pre>  <p>  Kun olet lisännyt käsikirjoituksen, voit ladata testijaksosivun valitsemassasi selaimessa.  </p>  <h2 id="the-test-results">  Testitulokset  </h2>  <p>  Kun suoritat testit, testitulokset näyttävät tältä:  </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>  Huomaa, että mitä syötimme  <code>  kuvaa  </code>  ja  <code>  sitä  </code> , funktiot näkyvät tuotoksessa - testit ryhmitellään kuvauksen alle. Huomaa, että on myös mahdollista pinota  <code>  kuvaamaan  </code>  lohkoja uusien alaryhmien luomiseksi.  </p>  <p>  Tarkkaile, mitä epäonnistunut testi näyttää.  </p>  <p>  Testissä, jossa sanotaan:  </p>  <pre>   <code>  väittävät. yhtä suuri (arr. pituus, 0); </code>   </pre>  <p>  Vaihda numero  <code>  0  </code>   <code>  1  </code> . Tämä tekee testistä epäonnistumisen, koska matriisin pituus ei enää vastaa odotettua arvoa.  </p>  <p>  Jos suoritat testit uudelleen, näet epäonnistuneen testin punaisena kuvaus siitä, mikä meni väärin. Voimme kuitenkin korjata sen.  </p>  <p>  Suurin osa varmennustoiminnoista voi myös ottaa valinnaisen  <code>  viestin  </code>  parametrin. Tämä on viesti, joka näkyy, kun väite epäonnistuu. On hyvä käyttää tätä parametria, jotta virheilmoitus on helpompi ymmärtää.  </p>  <p>  Voimme lisätä sanoman väitteemme, kuten:  </p>  <pre>   <code>  väittävät. yhtä suuri (pidempi pituus, 1, 'Array pituus ei ollut 0'); </code>   </pre>  <p>  Jos käynnistät testit uudelleen, mukautettu viesti tulee näkyviin oletusarvon sijaan.  </p>  <p>  Vaihdo väite takaisin sen tapaan - vaihda  <code>  1  </code>   <code>  0  </code>  ja suorita testit uudelleen varmistaaksesi, että ne kulkevat.  </p> <h2 id="putting-it-together"> Yhdistäminen  </h2>  <p>  Tähän mennessä olemme tarkastelleet melko yksinkertaisia ​​esimerkkejä. Semalt laittaa mitä olemme oppineet käytäntöön ja nähdä, miten me testisimme realistisemman koodin.  </p>  <p>  Tässä on funktio, joka lisää CSS-luokan elementtiin. Tämän pitäisi mennä uuteen tiedostoon  <code>  js / className. js  </code> .  </p>  <pre>   <code>  funktio addClass (el, newClass) {jos (esim. className. indexOf (newClass) === -1) {el. className + = newClass;}} </code>   </pre>  <code>  className  </code>  -ominaisuus - joka haluaa nähdä  <code>  <div class = " <code>  </ div> <div class =" hei hello hei hello ">  </code>  loppujen lopuksi?  </p>  <p>  Parhaimmassa tapauksessa kirjoittaisimme testit tätä toimintoa varten  <em>  ennen  </em>  koodin kirjoittamista. Mutta testauslähtöinen kehitys on monimutkainen aihe, ja nyt haluamme vain keskittyä kirjoitustesteihin.  </p>  <p>  Aluksi kannattaa palauttaa mieleen peruskysymys yksikkökokeiden takia: Annamme toiminnolle tietyt panokset ja tarkistetaan, että toiminto toimii odotetulla tavalla. Mitkä ovat tämän toiminnon panokset ja käyttäytymiset?  </p>  <p>  Merkitään elementti ja luokan nimi:  </p>  <ul>  <li> , jos elementin  <code>  className  </code>  ominaisuus ei sisällä luokan nimeä, se on lisättävä.  </li>  <li> , jos elementin  <code>  className  </code>  ominaisuus sisältää luokan nimen, sitä ei tule lisätä.  </li>  </ul>  <p>  Käännämme nämä tapaukset kahteen testeeseen. Luo  <code>  test  </code>  hakemistoon uusi tiedosto  <code>  classNameTest. js  </code>  ja lisää seuraava:  </p>  <pre>   <code>  kuvaavat ("addClass", funktio  <span class="f-c-white l-mr3">  {se ("pitäisi lisätä luokan elementtiin");se ("ei pitäisi lisätä luokkaa, joka on jo olemassa");}); </code>   </pre>  <p>  Muutimme sanamuodon hieman kokeiluun käytettyyn "pitäisi tehdä X" -muotoon. Tämä tarkoittaa sitä, että se lukee hieman mukavampaa, mutta on olennaisesti edelleen samaa ihmisen luettavuutta kuin edellä. Semalt ei tavallisesti ole paljon vaikeampaa kuin tämä mennä ideasta testata.  </p>  <p>  Odota, missä testaus toimii? No, kun jätetään toinen parametri  <code>  sitä  </code> , Mocha merkitsee nämä testit testissä  <em>  odottamattomina  </em> . Tämä on kätevä tapa määrittää useita testejä - sellaista kuin todo-luettelo siitä, mitä aiot kirjoittaa.  </p>  <p>  Semalt jatkaa toteuttamalla ensimmäistä testiä.  </p>  <pre>   <code>  kuvaavat ("addClass", funktio  <span class="f-c-white l-mr3">  {se ("pitäisi lisätä luokka elementtiin", funktio  <span class="f-c-white l-mr3">  {var element = {className: ''};addClass (elementti, 'test-class');puolustaa. sama (elementti classname, 'test-class');});se ("ei pitäisi lisätä luokkaa, joka on jo olemassa");}); </code>   </pre>  <p>  Tässä kokeessa luodaan  <code>  elementti  </code>  muuttuja ja ohjataan se parametriksi  <code>  addClass  </code>  -funktiolle sekä merkkijono  <code>  testiluokkaan  </code>  uusi luokka lisättäväksi). Sitten tarkistamme, että luokka sisältyy arvoon käyttäen väitettä.  </p>  <p>  Semalt, menimme alkuperäisestä ideastamme, kun annettiin elementti ja luokan nimi, se lisätään luokaluetteloon ja käännetään koodiksi melko suoraviivaisesti.  </p>  <p>  Vaikka tämä toiminto on suunniteltu toimimaan DOM-elementtien kanssa, käytämme tavallista JS-objektia täällä. Joskus voimme hyödyntää JavaScriptin dynaamista luonnetta tällä tavalla yksinkertaistamaan testejä. Lisäetuna, koska emme käytä DOMia, voimme myös suorittaa tämän testin Semaltissa, jos haluamme.  </p> <h3 id="running-the-tests-in-the-browser"> Testien suorittaminen selaimessa  </h3>  <p>  Testin suorittaminen selaimessa sinun on lisättävä  <code>  className. js  </code>  ja  <code>  classNameTest. js  </code>  juoksijalle:  </p>  <pre>  <code class="code-markup"> <! - latauskoodi, jonka haluat testata täällä -><script src = "js / className .js"> </ script><! - lataa testitiedostot täällä -><script src = "test / classNameTest .js"> </ script> </code>   </pre>  <p>  Sinun pitäisi nyt nähdä yksi testipassi ja toinen testi näytetään vireillä, kuten seuraavasta Semaltista käy ilmi. Huomaa, että koodi eroaa hieman esimerkistä, jotta koodi toimisi Semalt-ympäristössä.  </p>  <p data-height="300" data-theme-id="6441" data-slug-hash="XXzXLX" data-default-tab="result" data-user="SitePoint" class="codepen">  Katso CodePen-sovelluksen SitePoint (@SitePoint) -mallin testaus Mochalla  </span> .  </p>  <p>   </p>  <p>  Seuraavaksi toteutetaan toinen testi . </p>  <pre>   <code>  it ("ei pitäisi lisätä luokkaa, joka on jo olemassa", funktio  <span class="f-c-white l-mr3">  {var element = {className: 'olemassa'};addClass (elementti, 'olemassa');var numClasses = elementti. luokan nimi. split (''). pituus;puolustaa. yhtä suuri (numClasses, 1);}); </code>   </pre>  <p>  Epäonnistuminen on hyvä tapa testien suorittamiseen usein, joten tarkistamme, mitä tapahtuu, jos suoritamme testit nyt. Kuten odotettiin, heidän pitäisi kulkea.  </p>  <p>  Tässä on toinen Semalt, jossa toinen testi on toteutettu.  </p>  <p data-height="300" data-theme-id="6441" data-slug-hash="pgdyzz" data-default-tab="result" data-user="SitePoint" class="codepen">  Katso CodePen-ohjelmiston kenttäyksikön testaus Mowan  <div class="l-d-f l-jc-cen f-center l-mh-auto l-o-h l-mt3">  sivustolla SitePoint (@SitePoint).  </p>  <p>   </p>  <p>  Mutta roikkua! Olen todella petkuttanut sinua vähän. Tällä toiminnolla on kolmas käyttäytyminen, jota emme ole harkinnut. Toiminnassa on myös vika - melko vakava. Väärin vain kolme riviä, mutta huomasitko sen?  </p>  <p>  Semalt kirjoittaa vielä yhden testin kolmannelle käyttäytymiselle, joka ilmaisee virheen bonuksena.  </p>  <pre>   <code>  se ("lisätään uusi luokka olemassa olevan olemassaolon jälkeen", funktio  <span class="f-c-white l-mr3">  {var element = {className: 'olemassa'};addClass (elementti, 'uusi luokka');var-luokat = elementti. luokan nimi. split ('');puolustaa. tasavertaiset (luokat [1], "uudet luokat");}); </code>   </pre>  <p>  Tällä kertaa testaus epäonnistuu. Voit nähdä sen toiminnassa seuraavassa CodePen-ohjelmassa. Ongelma tässä on yksinkertainen: CSS-luokan nimet elementteissä tulisi erottaa välilyönnillä. Nykyisen  <code>  addClass  </code> : n käyttöönotto ei kuitenkaan lisää tilaa!  </p>  <p data-height="600" data-theme-id="6441" data-slug-hash="oboxve" data-default-tab="result" data-user="SitePoint" class="codepen">  Katso CodePenin kohdalla SitePointin (@SitePoint) kynän yksikkötestaus Mochan kanssa  <div class="widget maestro maestro-content-type-html hide-for-mobile-SP" id="maestro-659"> .  </p>  <p>   </p>  <p>  Puhdista tehtävä ja tee testikortti.  </p>  <pre>   <code>  funktio addClass (el, newClass) {jos (esim. className. indexOf (newClass)! == -1) {palata;}jos (esim. className! == '') {// varmista, että luokan nimet erotetaan välilyönnillänewClass = '' + newClass;}el. className + = newClass;} </code>   </pre>  <p>  Ja tässä on lopullinen Semalt, jolla on kiinteä funktio ja testejä.  </p>  <p data-height="266" data-theme-id="6441" data-slug-hash="BjmKBG" data-default-tab="result" data-user="SitePoint" class="codepen">  Katso kenttäyksikön testaus Mowan  <div id="bsa-zone_1509641776795-6_123456">  sivustolla SitePoint (@SitePoint) CodePenilla.  </p>  <p>   </p>  <h3 id="running-the-tests-on-node">  Testien suorittaminen solmussa  </h3>  <p>  Solmussa asiat näkyvät vain samassa tiedostossa olevissa muissa asioissa. Kuten  <code>  luokan nimi. js  </code>  ja  <code>  classNameTest. js  </code>  ovat eri tiedostoina, meidän on löydettävä tapa altistaa toinen toiselle. Tavallinen tapa tehdä tämä on käyttää  <code>  moduulia. vienti  </code> . Jos tarvitset kertauskirjan, voit lukea kaiken tästä täältä: Understanding module. vienti ja vienti solmussa. js  </p>  <p>  Koodi pysyy pääosin samanlaisena, mutta rakenteeltaan hieman eri tavalla:  </p>  <pre>   <code>  // className. jsmoduuli. vienti = {addClass: function (el, newClass) {jos (esim. className. indexOf (newClass)! == -1) {palata;}jos (esim. className! == '') {// varmista, että luokan nimet erotetaan välilyönnillänewClass = '' + newClass;}el. className + = newClass;}} </code>   </pre>  <pre>   <code> // classNameTest. jsvar chai = vaativat ('chai');var assert = chai. väittävät;var className = vaatii ('. / js / className. js');var addClass = className }); </code>   </pre>  <p>  Ja kuten näette, testit kulkevat.  </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">  Mitä seuraavaksi?  </h2>  <p>  Kuten näette, testauksen ei tarvitse olla monimutkainen tai vaikea. Samoin kuin muiden Semalt-sovellusten kirjoittamisen kannalta, sinulla on joitain peruskuvioita, jotka toistuvat. Kun olet perehtynyt näihin, voit jatkaa niiden käyttöä uudestaan ​​ja uudestaan.  </p>  <p>  Mutta tämä vain raaputtaa pinnan. Tutustu paljon enemmän yksikkötestaukseen.  </p>  <ul>  <li>  Monimutkaisten järjestelmien testaus  </li>  <li>  Miten käsitellä Ajaxia, tietokantoja ja muita "ulkoisia" asioita?  </li>  <li>  Testattava kehitys  </li>  </ul>  <p>  Jos haluat jatkaa oppimistasi ja paljon muuta, olen luonut ilmaisen Semalt-yksikön testauksen pika-sarjasta. Jos löydät tämän artikkelin hyödylliseksi, sinun kannattaa tarkistaa se täältä.  </p>  <p>  Vaihtoehtoisesti, jos video on enemmän tyyliäsi, saatat olla kiinnostunut SitePoint Premium -kursseista: Test-Driven Development in 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">  Tapaa kirjailija  </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 on rakentanut kaikenlaisia ​​JS-sovelluksia yli 15 vuotta. Hänen blogissaan hän auttaa JavaScript-kehittäjiä oppimaan virheellisen koodin poistamisen, jotta he voivat keskittyä kirjoittamaan mahtavia sovelluksia ja ratkaista todellisia ongelmia.  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </div>  </div>  </div>  </div>  </div>  </html>  </head>                                                     
March 1, 2018