Kuidas mõnitada ES6 klassi

Selle postituse eesmärk on näidata, kuidas mõnitada klassi JavaScripti üksuse testimise eesmärgil. Postitus on suunatud arendajatele, kes tulevad ES6-le keskkondadest, millel on sellised funktsioonid nagu sõltuvuse süstimine ja liidesed. Suurem osa postitusest hõlmab seda, mis on ES6 klass ja miks me neid vajame. Kui alusmudel on kaetud, on selle pilkamine ilmne. See postitus viib teid läbi objektide loomise JavaScripti.

Objekti kirjandus

Objekt on JavaScripti maal esimene kodanik. Vapustavalt lihtne viis objekti loomiseks muudab selle keele käivitamise lihtsaks. Siin on näidisobjekt.

var person = {
  nimi: 'Velu'
};

See on nii lihtne. Objekti loomiseks alustage objektiga (ja mitte klassiga). Sellega seoses väidaksin, et JavaScript on tõepoolest objektorienteeritud (ja sellised keeled nagu Java on klassile orienteeritud, kui hakkate objektide loomiseks klassi).

Laiendame ülaltoodud näidet, et lisada käitumine meie näidisobjektile, öeldaNimi.

var person1 = {
  nimi: 'Velu',
  sayName: function () {
    console.log (see.nimi);
  }
}

Kui teil on vaja luua mitu objekti, peate selle objekti abil dubleerima iga objekti funktsiooni sayName. See tähendaks:

var person1 = {
  nimi: 'Velu',
  sayName: function () {
    console.log (see.nimi);
  }
}
var person2 = {
  nimi: 'Raj',
  sayName: function () {
    console.log (see.nimi);
  }
}

Kui loote lõpuks palju inimesi, tähendab see, et koodi dubleerimist on palju. Sellest üle saamiseks on vaja konstruktorifunktsiooni.

Konstruktori funktsioon

Kirjutagem konstruktorifunktsiooni näidis ja räägime sellest:

funktsioon Isik (nimi) {
  see.nimi = nimi;
  this.sayName = funktsioon () {
    console.log (see.nimi);
  }
}

Esmapilgul on see JavaScriptis veel üks funktsioon. Mis teeb konstruktori funktsiooni eriliseks, pole funktsioon ise, vaid see, millal see uue märksõnaga seostatakse. Nii saab konstruktorifunktsiooni kasutada järgmiselt:

var person1 = uus inimene ('Velu');

Ülaltoodud rida loob objekti ja sõna otseses mõttes teisendatakse kood järgmisteks:

var person1 = {
  nimi: 'Velu',
  sayName: function () {
    console.log (see.nimi);
  }
}

Kui soovite luua rohkem inimesi, pole koodi dubleerimist. Projekt on määratletud konstruktorifunktsioonis ja JavaScript teisendab selle võluväel käitusajal objektiks olevaks vormiks.

Sellega ei kaasne koodi dubleerimist, kuid selle aluseks oleval objektil on ikkagi duplikaat. Funktsiooni sayName määratletakse konstruktori funktsioonis ainult üks kord, kuid see kopeeritakse siiski igasse loodavasse objekti. See tähendab rohkem mälu. Näiteks kui loon oma arvutisse Mac Book Pro 1 miljard inimest, jookseb sõlmeprotsess mälust otsa. See tingib vajaduse jagada objekti mudelit mitte ainult koodiajal, vaid ka käitusajal.

Prototüüp

Me vajame mehhanismi funktsioonide jagamiseks objektide vahel. JavaScriptis on koodi jagamise mehhanism taas üks objekt, mida nimetatakse prototüübiks. Igal loodud JavaScripti objektil on sisseehitatud link, mida nimetatakse teise objekti prototüübiks. Seda objekti jagavad kõik objektid, mis on loodud sama funktsiooni Constructor Function abil. Allolev paigutus kujutab järgmist:

Nüüd on ilmne samm funktsiooni sayName teisaldamine objektilt prototüübile. Allpool olev kood teeb järgmist:

funktsioon Isik (nimi) {
  see.nimi = nimi;
}
Person.prototype.sayName = function () {
    console.log (see.nimi);
}

Samuti tagab JavaScript, et see kõik oleks võimalik, järgides kahte asja:

  1. Kui objektil on juurdepääs atribuudile, mida sellel objektil pole, otsitakse seda ja sellele pääseb juurde oma prototüübis
  2. „See” viide prototüübiga seotud funktsioonides, mis on võluväel seotud objektiga, millele see kutsutakse

Nii on tagatud allpool toodud nameName kutsumine, et see osutab käitusaja ajal objektile1.

var person1 = uus inimene ('Velu');
isik1.sayName ();

ES6 klass

Nüüd ES6 klassi tulles on lõpuks lihtsalt süntaktiline suhkur, mis loob käitusajal konstruktorifunktsiooni. Klassi süntaks toob selle lihtsalt kokku:

klassi inimene {
  ehitaja (nimi) {
    see.nimi = nimi;
  }
  sayName () {
    console.log (see.nimi);
  }
}

Olles aru saanud, milline on ES6 klass kapoti all, on mõistmiseks veel üks JavaScripti kontseptsioon. Vaatleme järgmisi JavaScripti mooduleid ja nende sõltuvusi:

Selles struktuuris impordib moodul A nii B kui ka C. Kui moodul B impordib ka C, siis kasutatakse A laaditud moodulit uuesti ja mitte uut. See tähendab, et kui ES6 klass eksporditakse moodulist C, saab selle määratlust A-s muuta ja muudetud määratlust kajastada C-s. Arvestades seda arusaama ES6 klassides ja moodulisüsteemis, vaatame lõpuks, kuidas pilkata.

ES6 klassi pilkamine

Mõelgem järgmisele stsenaariumile. Töötaja juhusliku arvu saamiseks sõltub utiliidiklassi abistajast. Töötaja moodul näeks välja selline:

const Helper = vaja ('./ helper');

klassi töötaja {
  ehitaja (nimi) {
    see.nimi = nimi;
  }

  getId () {
    const helper = uus abistaja ();
    const id = helper.getRandom ();

    tagasta `$ {see.nimi} - $ {id}`;
  }
}

moodul.exports = töötaja;

Töötaja ühiskatse peab testi töötajad.getId kaudu juhtima getRandomi meetodil. Voog näeb välja selline:

Kõigi seni kogutud üksikasjade juures on pilkav kood ilmne ja see sarnaneb järgmiselt:

const oota = nõua ('chai'). oota;
const sinon = nõuda ('sinon');

const Töötaja = nõuda ('../ src / töötaja');
const Helper = vaja ('../ src / helper');

kirjelda ('töötaja test', () => {
  it ('peaks tagastama õige ID', () => {
    // Korraldama
    sinon.stub (Helper.prototüüp, 'getRandom'). kutsubFake (() => 1);

    // Tegutse
    const töötaja = uus töötaja ('Velu');
    const id = töötaja.getId ();

    // Assert
    oodata (id) .to.equals ('Velu-1');
  });
});

Põhimõtteliselt Helperi klassis meetodi pilkamiseks lihtsalt saate funktsiooni viite klassi prototüübi kaudu ja sama tüki. See rida takistab funktsiooni getRandom, et alati naasta 1, nii et töötaja Employee.getId toimingut saab kontrollida.

sinon.stub (Helper.prototüüp, 'getRandom'). kutsubFake (() => 1);

Selle koodialuse leiate https://github.com/madhanganesh/es6-class-mocking-sample