wallaby j/s which is a test runner that
runs your tests immediately continuously
inside your editor as you type
I am mpj and you are washing Fonfon
all right so if you are a regular viewer
of this show you know that I am NOT a
big fan of too much tooling I’m a bit of
a tooling minimalist I even made a video
on that you don’t have to watch that
video but basically the gist is that I
tend to get distracted by tools and I
feel like the more tools I use the more
meta work I tend to do managing all my
tools so therefore I use very few
plugins I try to use as few libraries as
possible when I create a project not
against tools I just think that every
tool has a bit of our maintenance cost
that comes with it so you need to be
skeptical and really ask yourself is
this tool providing me with a lot of
value before introducing it into your
process oh my god sorry about the mess
of building a studio painted this square
here it’s this is a color that it’s
supposed to be eventually like the green
is going away not this green like this
screen is going rate eventually as well
this is gonna be some cool lighting
thing here we’ll see like it maybe after
this weekend we’ll see so I don’t use a
lot of editor plugins but one that I do
use is quokka kwaka is pretty cool
whenever people see it they tend to ask
me what it is
and it looks like this I type something
and it’s in line evaluates it so if I
change this number it revaluate sauce-i
time that’s pretty much it it’s very
very useful when trying things out or
when you’re making videos about
programming for YouTube so quokka has
been with fun fun function for quite a
while and the people that make quokka
also makes a more advanced thing called
wallaby which is a test runner so
reached out to wallaby and asked them if
they were willing to sponsor an episode
of the show where I show off wallaby
JSON fun fun function and they were
hence here we are I’m going to show you
how it works I’m gonna build a simple
calculator or something create react app
super calc I loved watching progress bar
it’s ready okay seedy supercar kalloch
you know what let’s first make sure that
it works hang on NPM start all right
cool react it’s working we haven’t let’s
get rid of that for a bit though and go
back into code
alright let’s see here we have okay we
have some tests here or well one test
let’s try to get that running well
wallaby um see here install extensions
and then we use check wallaby yes what
we just integrated continuous integrate
need install click OK then I reload the
editor ok updating wallaby Jaya score
blah blah blah blah in successfully
installed I really like how easy it is
to install visual studio code plugins it
really shows that people that use them
or masochists and I absolutely mean no
offense to masochists by saying that
anyway so it’s not quite running yet so
let’s go wallaby start what happens ok
please select the wallaby j/s
configuration file so voila B needs to
have a a configuration file in the
project because wallaby does can run
like an insane amount of different
testing setups it’s very flexible what
it needs to know how how to run your
project need to tell that you do that
what will be jazz convicts file so let’s
find out how that works browser wallaby
configure gig duration file and I guess
that this should be 1 for create react
app I can’t imagine not boo boo boo boo
I’ll take this one configuration file
support the technologies what about this
reacts if you’re using the create
reactive tool bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
Oh excellent copy paste let’s create a
wall we’ll paste this in create a wall
[Music]
bj s config file not in the source I
want it in the root there we go and now
I can select the Wallaby j s config file
cannot find any file containing wallaby
in its name lies perhaps it needs to be
lowercase let’s try that again well we
start select yes boom okay closing that
does it work mm not quite yet SRC tester
J s what we start yeah okay hang up
let’s debug this I’m gonna pull this up
no oh it works we didn’t catch what I
did there I hit enter really really hard
the second time and it worked alright so
we’re going to do some TDD here we’re
going to stay in the editor we’re not
gonna be jumping to the browser until
later we’re just gonna use the test to
drive our development let’s start
writing our first first test or second
test because there’s already one not
crashing test but um okay let’s do
I really like enzyme which is a testing
tool for react applications from Airbnb
I think you pull it in like this
nowadays in Port and dime and then we
want the shallow function for shallow
rendering let’s talk a little bit about
what that is in second exam and we also
need to install enzyme create integrated
terminal MPM install enzyme oh yes this
is such a good progress bar done right
closing the terminal and we do this
wrapper and then we do shallow and we do
app like that okay error enzyme internal
error and sent a sec expects an adapter
to be configured but found on took
figuring out up there ID cuts of their
hello
down here is this is where wallaby does
its output so you can always click here
and see blah blah blah blah blah blah
but phonetic a failure and up you should
call enzyme configure adapting you
adapter okay cool so copy pasting this
hang on delete this delete that go on
let me delete it there and we also need
to import this adapter and some adapter
we need that and p.m. PI install enzyme
went up to reactive steel so enzyme is
basically kind of testing tool for doing
react rendering it allows you to shallow
render things and they refi them very
easily I really like it and you are
going to like it to once you see it so
we get this after shallow rendering our
app which is this one we get this
wrapper and the wrapper is basically our
kindest order fake browser it allows us
to
do things like this rapper dot fine and
finds an input input field this is a
like a dumb selector here it’s not like
and I’m selecting it it is a dumb
selector and if we simulate same
simulate a change event on that input
element and that input we have to create
a fake change event here and that has a
targets property and that thing has a
value of of some kind of this is the
calculator like say five plus five then
once that change event has happened on
the input field of the app we want some
rendered results and the result and that
is where is that let’s say that there is
a result div or something and that has
some text and that should be like the
render result and we do expect that
rendered result to be and that’s gonna
be a string we expect that to be ten
that’s that’s what we’re going for these
white things here or in these boxes
these are wallabies box boxes and when
they are white they are indicating that
not a thing is happening here it’s not
running this is not covered so let’s
click here on the Wallaby output and see
what the hell is happening cannot find
module react test renders shallow do we
need to install this as well
perhaps I suppose this is not an enzyme
let’s just install it ah progressbar
this might be wrong hang on might be
that my react is actually 16 yes my
reactant 16 so this was done I should
have installed that not this you know
let me NPM what is it remove remove this
thing and some adapter tests focus bars
and then NPM install 16 progress bar I
was saying this closing this and closing
that let’s see here what error do we
have here and methods simulator is only
meant to be run on a single node 0 found
instead yes that makes sense because
there exists no input elements here
let’s that makes that success or well
not success but its progress because
when you do TDD you go red green
refactor you write a failing test and
then you unbreak it by writing code so
let’s actually read some code I’m gonna
write create an input element that’s it
ok cool and then we progress a little
bit here like now you see here that oh
this screen here and this test is kind
of salt agree I don’t understand with
this screen but the all eight lead
screen because it starts running the
test but these here they are red they’re
kind of sort of right they are pink ish
which means that this test is failing
these lines are being executed but this
one is red
which means that this is failing and
it’s giving us an inline error message
can’t see much of it here because well
my screen is really small just
I want to show you a lot of their
characters for you on mobile but either
way let’s let me scroll here for you
method text is only meant to be run on a
single node 0 found instead it’s kind of
like the same error we don’t have a
result element yet so I’m gonna create
that div ID or result no I don’t need
that and there we go
no no there no ok I’m not gonna win any
Nobel Prize for typing ok expect the
value to be using triple equals 10
received empty string all right now we
have our parts in place we have this
input field that we have this dam here
you know what I’m gonna delete this crap
here and what we know we actually have
to write some code in order to write
make this work so let me write on change
here if a little don’t change then we
are going to call this on input change
suppose perhaps something like that on
input change and we’re gonna get an
event from that and the event is as we
know here how this is like my mock fake
dominant it has a target and that target
has a value and what is that I am I can
just type this oh nice then I see here
that voila be in line evaluates for us
this is really really handy when you’re
doing TDD to just figure out what values
are what at what point without resorting
to a lot of console logs and stuff
actually don’t didn’t have to do that I
could just do this I think and I would
get it and get it here like this is a
like a special magic comment that you
can use in wallaby and it works
kwaka – um but either way let’s see
let’s see we want to break so you see
here that this is just a string we want
to break this into parts somehow so
perhaps I can do like hmm let’s do a red
X and let’s look for digits
let’s reevaluate what that looks like
okay
all right cool we extracted a digit here
then okay we want to match that digit
and then we want to match the operand is
that it
I don’t know math like plus I suppose
and for now I’m gonna keep that there
we’re gonna add multiplication and stuff
later and then thirdly we want to match
another digit I suppose all right so now
you see that here we have like the
string we’re matching and then we have
the first part the second part and the
third part like five plus five as we
evaluate here I see a little bit of a
flaw in our our test like five plus five
it’s a bit of a silly number because you
know see here AK this is only looking
for for a single digit so I’m going to
actually expand our test here to be 25
and then H is to be 30 come on
reevaluate
why aren’t you real bad your eight-day
expected value be 30 received perhaps
this is cash somehow oh but that’s
correct actually it’s because yeah quota
is it’s correct I am dumb I’m like my
reg ex is actually as matching the first
digit so that it’s it’s doing exactly
the right thing my code is doing exactly
the right thing and showing here so if I
had a plus here and now matches the 25
to 5 let’s also expand the second one to
be a 10
and change this to be 35 and that way I
also expand this all right so now our
parts are correct here like expected
let’s actually do Const parts this live
comment here is a little bit off so I’m
going to actually inline evaluate here
alike there that’s a bit more handy I’m
gonna remove that so now I see what I am
doing here
so it’s Const so on the left side we
have parts dot one because it is this
one not the first one here let’s verify
that yes it’s 25 and then on the its
operate or operate or operator that is
parts – lets make see what that is is
that plus okay didn’t catch that
actually let’s do that on a separate
line Const operator yeah plus and then
we have on the right side we have of
course parts dot index three see that as
well yes ten alright let’s create a
result here going to do if no I don’t
need a left here
so if the left
if operator equals plus then we’re going
then we’re going to return the result Oh
the result is 2510 I am not good at math
but I know that that’s wrong so we we
need to do some integer parsing here so
what I’m gonna do is parse parse int
Parsi parts and then we’re gonna do
parse int here as well there we go and
now the result is 35 correct
notice how nice it is to have this
inline evaluation going on
I even even though I am in the middle of
a test that is just red red red red red
I still get this very nice gradual
feedback as I’m writing the code
immediate feedback is a very nice part
about unit testing and TDD in general if
you have a good test run and setup but
this is just taking it to the next level
with this in-line evaluation going on
it’s so nice alright so let’s get this
result into into the results Dave
somehow so we do this dot set state
result from what what the hell cannot
read properly set state of undefined Oh
God
classes in JavaScript bind this there we
go if that confused you you can check
out my episode series on this and bind
and my long rants about that but that’s
not what we’re talking about no we are
talking about how to get the result in
here so it’s this dot state dot result
to cannot read property result of null
nope that makes sense because before we
set this state here the state is going
to be nothing so we need to give it some
initial states construct construct or
this state equals empty thingamabob
reference error must call super yes
super super sperm super super and the
test is green mmm that feels good this
is why this is the big thing with TDD I
think it just feels good it feels like
you’re getting this constant feel kind
of sense of progress I think wallabies
contributes a little bit with this with
all that got the green goodness
getting that in the editor it feels a
little bit like the way that a game
would reward you for progress okay next up we’re going to add a little bit or