Press "Enter" to skip to content

TDD with Wallaby.js Part 1


oggi daremo un’occhiata a
wallaby j / s che è un corridore di prova che
esegue i test immediatamente in modo continuo
all’interno del tuo editor durante la digitazione
Sono mpj e stai lavando Fonfon
funzione
[Musica]
[Musica]
[Musica]
va bene così se sei un normale spettatore
di questo spettacolo sai che NON SONO a
grande fan di troppi strumenti, sono un po ‘
un minimalista di strumenti Ho persino realizzato un video
su questo non devi guardarlo
video ma fondamentalmente il succo è che io
tendono a distrarsi dagli strumenti e da me
sento come più strumenti che uso di più
meta lavoro tendo a gestire tutti i miei
strumenti quindi quindi ne uso pochissimi
plugin cerco di utilizzare il minor numero di librerie come
possibile quando creo un progetto no
contro gli strumenti, penso solo che ogni
lo strumento ha un po ‘ dei nostri costi di manutenzione
che viene fornito così devi essere
scettico e davvero porsi è
questo strumento mi fornisce un sacco di
valore prima di introdurlo nel tuo
processo oh mio dio mi dispiace per il casino
di costruire uno studio dipinto questo quadrato
ecco qui è un colore che è
dovrebbe essere alla fine come il verde
sta andando via non questo verde come questo
lo schermo sta andando anche alla fine
questa sarà una bella illuminazione
cosa qui vedremo come forse dopo
questo fine settimana vedremo quindi non usare a
molti plugin editor ma uno che faccio
l’uso è quokka kwaka è piuttosto bello
ogni volta che le persone lo vedono tendono a chiedere
io quello che è
e sembra che scrivo qualcosa
ed è in linea lo valuta così se io
cambia questo numero rivaluta salsa-i
il tempo è più o meno così tanto
molto utile quando si provano cose o
quando stai facendo video su
programmazione per YouTube, così ha quokka
stato con fun fun fun per abbastanza a
mentre e le persone che fanno quokka
fa anche una cosa più avanzata chiamata
wallaby che è un corridore di prova così
allungò una mano verso wallaby e chiese loro se
erano disposti a sponsorizzare un episodio
dello spettacolo in cui mostro wallaby
JSON fun fun function e lo erano
quindi eccoci qui che vi mostrerò
come funziona costruirò un semplice
calcolatrice o qualcosa crea reagire app
super-calc ho adorato guardare la barra di avanzamento
è pronto okay seedy supercar kalloch
hmm e stiamo aprendo vizioso per essere coud
si sa che cosa si deve prima fare in modo che
funziona bloccarsi all’avvio di NPM, va bene
cool reagire funziona non abbiamo lasciato
liberatene per un po ‘e andate
di nuovo nel codice
Va bene, vediamo qui, abbiamo ok
avere qualche test qui o bene un test
proviamo a farlo funzionare bene
wallaby um vedi qui installare le estensioni
e poi usiamo check wallaby si cosa
abbiamo appena integrato continuo integrare
necessario installare, fare clic su OK, quindi ricarico il
editor ok aggiornamento wallaby punteggio Jaya
bla bla bla bla in con successo
installato mi piace davvero com’è facile
per installare il codice dello studio visivo lo si innesta
mostra davvero che le persone che li usano
o masochisti e intendo assolutamente no
offesa ai masochisti dicendo questo
comunque non è ancora abbastanza funzionante
andiamo wallaby inizia cosa succede ok
Si prega di selezionare il wallaby j / s
file di configurazione in modo che voilà B abbia bisogno di
avere un file di configurazione nel file
progetto perché wallaby può funzionare
come una quantità folle di diversi
testare le impostazioni è molto flessibile cosa
ha bisogno di sapere come eseguire il tuo
il progetto deve dirti che lo fai
quale sarà il file dei condannati jazz , quindi facciamolo
scopri come funziona il browser wallaby
configurare il file di durata del concerto e credo
che questo dovrebbe essere 1 per creare reagire
app non riesco a immaginare di non boo boo boo boo
che cosa è questo è questa cosa non no
Prenderò questo un file di configurazione
supporta le tecnologie e di questo
reagisce se stai usando il create
strumento reattivo bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
Oh copia di copia eccellente creiamo un
muro lo incolleremo per creare un muro
[Musica]
bj s config file non nella sorgente I
voglio che nella radice ci andiamo e ora
Posso selezionare il file di configurazione js di Wallaby
non riesco a trovare alcun file contenente wallaby
nel suo nome sta forse deve essere
minuscolo proviamo ancora questo bene noi
inizia seleziona sì boom ok chiudendo quello
funziona mm non ancora ancora tester SRC
J è ciò che iniziamo sì va bene riagganciare
facciamo il debug di questo, tirerò su questo
no oh funziona , non abbiamo capito cosa
fatto lì ho colpito entra davvero molto difficile
la seconda volta e ha funzionato bene così
stiamo andando a fare un po ‘di TDD eccoci qui
restando nell’editor non lo siamo
salterà fino al browser
in seguito useremo il test per
guidare il nostro sviluppo cominciamo
scrivendo il nostro primo primo test o secondo
prova perché ce n’è già uno no
crash test ma um okay facciamolo
aggiunta e
Mi piace molto l’enzima, che è un test
strumento per reagire alle domande di Airbnb
Penso che tu lo tiri in questo modo
oggi a Port e dime e poi a noi
voglio la funzione superficiale per superficiale
rendering parliamo un po ‘di
quello che è al secondo esame e anche noi
bisogno di installare enzima creare integrato
MPM terminale installa l’ enzima oh si questo
è una buona barra di progresso fatta bene
chiudendo il terminale e lo facciamo
involucro e poi facciamo poco profondo e lo facciamo
app come quella giusta errore enzima interno
errore e inviato un secondo si aspetta un adattatore
da configurare ma trovato in tempo reale
capire lassù tagli ID del proprio
Ciao
qui è qui che fa wallaby
il suo output in modo da poter sempre fare clic qui
e vedi bla bla bla bla bla bla
ma fonetico un fallimento e su di te dovresti
chiama l’enzima configurarti adattandoti
l’adattatore va bene, quindi copia questo incollando
aspetta e cancella questa cancellazione che va avanti
lascia che lo elimini lì e abbiamo anche bisogno
per importare questo adattatore e qualche adattatore
abbiamo bisogno di questo e pm enzima di installazione PI
è salito all’acciaio reattivo così è l’enzima
praticamente un tipo di strumento di test per fare
reagire renderlo ti permette di superficiale
rendono le cose e le rifanno molto
facilmente mi piace davvero e tu sei
piacerà a quando lo vedrai così
otteniamo questo dopo il rendering superficiale del nostro
app che è questa la otteniamo
l’involucro e l’involucro sono fondamentalmente nostri
browser finto di ordine gentile che ci consente
a
fare cose come questo rapper benissimo e
trova un campo di input input questo è a
come un muto selettore qui non è come
e lo sto selezionando è stupido
selettore e se simuliamo lo stesso
simulare un evento di cambiamento su quell’input
elemento e quell’input che dobbiamo creare
un evento di cambiamento falso qui e che ha un
prende di mira la proprietà e quella cosa ha un
il valore di un qualche tipo di questo è il
calcolatrice come dire cinque più cinque allora
una volta che l’ evento di cambiamento è accaduto
il campo di input dell’app ne vogliamo alcuni
risultati resi e il risultato e quello
è dove è che diciamo che c’è
un risultato div o qualcosa e che ha
un testo e dovrebbe essere come il
rendere il risultato e ci si aspetta che
risultato reso per essere e quello sta andando
essere una stringa, ci aspettiamo che siano dieci
questo è quello che stiamo andando per questi
cose bianche qui o in queste scatole
questi sono i box a forma di wallabies e quando
sono bianchi stanno indicando quello
non sta succedendo nulla qui non lo è
l’esecuzione di questo non è coperto, quindi facciamolo
clicca qui sull’uscita Wallaby e guarda
cosa diavolo sta succedendo non riesce a trovare
Modulo reagiscono rendering di prova superficiale dobbiamo
necessario installare anche questo
forse Suppongo che questo non è un enzima
cosa è che è una cosa che reagisce chi lo sa
proviamo a installarlo ah progressbar
questo potrebbe essere sbagliato potrebbe essere
che la mia reazione è in realtà 16 si mia
reagente 16 così è stato fatto che dovrei
ho installato che non questo lo sai
mi permetta di NPM che cosa sta rimuovi questo
cosa e alcuni adattatori testano le barre di messa a fuoco
e quindi NPM installa 16 barra di avanzamento I
Stavo dicendo questo chiudendo questo e chiudendo
che vediamo qui quale errore proviamo
avere qui e solo il simulatore di metodi
pensato per essere eseguito su un singolo nodo 0 trovato
invece sì, ha senso perché
non ci sono elementi di input qui
Facciamo questo o quello successo
non successo ma il suo progresso perché
quando fai TDD vai in rosso verde
refactoring si scrive un test in errore e
poi lo infastidisci scrivendo il codice così
leggiamo effettivamente un codice che sto per fare
scrivi crea un elemento di input che è tutto
ok raffreddare e poi abbiamo corso un po ‘
un po ‘qui come ora vedi qui che oh
questa schermata qui e questo test è gentile
di sale d’accordo che non capisco con
questo schermo ma gli otto conducono
schermo perché inizia a eseguire il
prova ma questi qui sono rossi loro sono
tipo di sorta di destra sono ish rosa
il che significa che questo test sta fallendo
queste linee vengono eseguite ma questo
uno è rosso
il che significa che questo sta fallendo e
ci sta dando un messaggio di errore in linea
non posso vederne molto qui perché bene
il mio schermo è veramente piccolo
Voglio mostrarti molte delle loro
caratteri per te sul cellulare ma entrambi
lascia che ti scorra qui per te
il testo del metodo è pensato solo per essere eseguito su a
il singolo nodo 0 trovato invece è una specie di
come lo stesso errore non abbiamo un
elemento di risultato ancora così creerò
che div ID o risultato no non ho bisogno
quello e là noi andiamo
no no, no ok, non vincerò nessuno
Il premio Nobel per la digitazione ok si aspetta il
valore da utilizzare triple equals 10
ricevuto la stringa vuota tutto bene ora noi
abbiamo le nostre parti sul posto che abbiamo questo
campo di input che abbiamo questa diga qui
sai cosa cancellerò questa merda
qui e ciò che sappiamo che effettivamente abbiamo
scrivere del codice per scrivere
fai questo lavoro , lascia che scriva sul cambiamento
qui se un po ‘non cambia allora noi
chiameremo questo sul cambio di input
supponiamo forse qualcosa del genere su
cambio di input e otterremo un
evento da quello e l’evento è come noi
sappi qui come questo è come il mio finto falso
dominante ha un bersaglio e quell’obiettivo
ha un valore e che cosa è che io sono io posso
basta digitare questo oh bello allora vedo qui
che voilà sia in linea valuta per noi
questo è davvero molto utile quando sei
facendo TDD per capire solo quali valori
sono ciò che a che punto senza ricorrere
a un sacco di registri della console e cose del genere
in realtà non dovevo farlo io
potrei fare questo penso e lo farei
prendilo e prendilo qui come questo è un
come un commento magico speciale che tu
può usare nel wallaby e funziona
kwaka – um ma in ogni caso vediamo
vediamo che vogliamo rompere così vedi
qui che questa è solo una stringa che vogliamo
per rompere questo in parti in qualche modo così
forse posso fare come hmm facciamo un rosso
X e cerchiamo cifre
rivalutiamo ciò che sembra
va bene
va bene, abbiamo estratto una cifra qui
allora okay vogliamo abbinare quella cifra
e poi vogliamo abbinare l’operando è
questo
Non conosco la matematica come più, suppongo
e per ora lo terrò lì
aggiungeremo moltiplicazione e cose
più tardi e poi in terzo luogo vogliamo abbinare
un’altra cifra suppongo che vada bene così ora
vedi che qui abbiamo come il
stringa siamo corrispondenti e quindi abbiamo
la prima parte la seconda parte e la
terza parte come cinque più cinque come noi
valutare qui vedo un po ‘di a
difetto nei nostri test come cinque più cinque
è un numero un po ‘stupido perché tu
sapere vedere qui AK questo è solo guardando
per una cifra sola, quindi vado a
in realtà espandere il nostro test qui per essere 25
e poi H deve essere 30
rivalutare
perché non sei proprio cattivo per i tuoi otto giorni
il valore atteso sarà di 30 forse ricevuto
questo è in qualche modo in contanti oh ma è così
corretto in realtà è perché sì quota
è corretto sono stupido, sono come il mio
reg ex è in realtà corrispondente al primo
cifra in modo che stia facendo esattamente
la cosa giusta il mio codice sta facendo esattamente
la cosa giusta e mostrare qui così se io
ha avuto un vantaggio qui e ora corrisponde al 25
a 5 espandiamo anche il secondo a
essere un 10
e cambia questo per essere 35 e in quel modo io
inoltre espandi tutto bene così ora il nostro
le parti sono corrette qui come previsto
facciamo veramente fare a Const parti dal vivo
il commento qui è un po ‘fuori così io sono
andando a valutare effettivamente inline qui
allo stesso modo c’è che è un po ‘più a portata di mano sono
rimuoverlo così ora vedo quello che sono
facendo qui
quindi è Const così sul lato sinistro abbiamo
avere parti punto uno perché è questo
uno non è il primo qui verifichiamo
che sì è 25 e poi al suo
operare o operare o l’operatore che è
parti – lascia vedere cosa è
che oltre a quello non l’ho capito
in realtà facciamolo su un foglio separato
linea Const operator sì più e poi
abbiamo dalla parte destra che abbiamo di
corso parti punto indice tre vedi che come
beh sì, va bene, creiamo a
risultato qui andando a fare se no non lo faccio
bisogno di un sinistro qui
quindi se la sinistra
se l’operatore è uguale a più allora stiamo andando
per fare risultato è uguale a sinistra + destra
allora stiamo andando a restituire il risultato Oh
il risultato è 2510 Non sono bravo in matematica
ma so che è sbagliato, quindi noi
ho bisogno di fare qualche parsing di interi qui così
quello che farò è parse parse int
Parti di Parsi e poi faremo
parse int qui pure noi andiamo e
ora il risultato è 35 corretto
notare quanto è bello avere questo
la valutazione in linea in corso
Anche se sono nel mezzo
un test che è solo rosso rosso rosso rosso rosso
Ho ancora questo graduale molto bello
feedback mentre sto scrivendo il codice
il feedback immediato è una parte molto bella
riguardo a unit test e TDD in generale se
hai una buona prova di prova e configurazione ma
questo è solo portarlo al livello successivo
con questa valutazione in linea in corso
è così bello, quindi prendiamo questo
risultato nei risultati Dave
in qualche modo così facciamo questo stato di dot set
risultato da ciò che cosa diavolo non può
leggere correttamente impostato lo stato di indefinito Oh
Dio
le classi in JavaScript ci legano qui
vai se ti ha confuso puoi controllare
la mia serie di episodi su questo e bind
e le mie lunghe battute su questo, ma quello è
non è quello di cui stiamo parlando, no, lo siamo
parlando di come ottenere il risultato
ecco quindi questo risultato punto dot dot
non poter leggere il risultato della proprietà di null
no, ha senso perché prima di noi
imposta questo stato qui sta andando lo stato
per essere nulla, quindi dobbiamo dargliene un po ‘
stati iniziali costruiscono costrutto o
questo stato equivale a thingamabob vuoto
l’errore di riferimento deve chiamare super sì
super super sperm super super e il
il test è verde mmm che si sente bene
è il motivo per cui questa è la grande cosa con TDD I
penso che sia bello come si sente
stai ricevendo questo tipo di sensazione costante
di senso del progresso penso che i wallabies
contribuisce un po ‘con questo con
tutto ciò ha ottenuto la bontà verde
trovandolo nell’editor ci si sente a
un po ‘come il modo in cui un gioco
avrebbe ricompenserà per il progresso va bene prossima
up stiamo andando ad aggiungere un po ‘o
Please follow and like us: