continuing our journey on learning about
unit testing in Johnson’s I am mgj and
you are watching function
in the last episode we wrote our very
first tests and they looked a little bit
like this well they looked exactly like
this
these are the tests we wrote today we’re
going to introduce a test runner to our
unit testing suite a tool that runs the
unit tests for us up until this point we
have just been using straight plain old
JavaScript this is just the function and
then we have use this these if
statements where they a check in them
and if if they fail we have have thrown
errors directly all right
why use a test runner I mean why can’t
you just continue running running tests
directly in JavaScript
I’m not saying against it but I think
it’s important that we we understand why
we’re doing this I am glad you asked
because I have shite loads of benefits
first of all a test runner means that
your your code becomes a bit more dry it
removes a lot of duplication let me
otherwise arise it’s no let me save that
then you’ve got pretty test results the
test the test Runner will just give you
nice or output than the then just
vanilla having having it run in a
vanilla JavaScript you get pretty test
results they are beautiful they are they
display nicely and also they have the
added benefit of running all your tests
which they won’t
if test number one breaks you will still
get all the tests running and not just
it won’t stop for the first one that’s
pretty nice
the having a test runner that with a
syntax that your team is likely to be
familiar with means that it’s more
predictable for the team I mean if you
use the test Runner like mocha or or
just that will look in a certain way and
the your teammates will be able to
quickly discern like okay this feels
like a test that I’m amused
to having a test runner also makes it
easier to do integration with your
continuous integration system if you are
familiar with what continuous
integration is you can check out my
episode series on that here it’s very
cool but most importantly I think that
our test runners give you the benefit of
have an infrastructure to run the tests
and like and the biggest one is they
having your test run automatically on
each change every time you hit save the
test will run immediately checking your
code kind of like a linter but for the
actual logic of your code it’s very very
powerful alright so what we’re gonna do
first is I think that we we’re gonna
install a test runner first and what I
want to do we need a package.json first
let’s create an integrated terminal and
I mean the correct directory let’s do
right package name test runners that’s
fine version fine description I’m gonna
just gonna press ENTER it’s it’s not
we just want their package yes cool so
that we can install mmm
packages and I’m going to do NPM I save
Deb I think that’s it and so that this
gets installed as a development
dependency instead of a and all the
dependencies know that it matters
exactly for this case but sure we’re
gonna install just so why jest of all
test runners why are we using just why
not mocha or jasmine or a balloon test
runners choice is not super important
but uh the reasons why I pick just for
these these these episodes is that first
that just is it’s very established it’s
it’s the framework so it’s a testing
tool that comes bundled where
the Cree I create react up the
boilerplate that Facebook provides for
react which means that it has a it has
quite a bit of weight and a lot of usage
due to that and facebook also dog foods
and bells this internally so they have
people hired working on this thing
it’s it’s been around its battle-tested
and that is a very nice straight for the
for software development to I think but
it’s also nice because it’s ready to use
which makes it a bit more
that makes it truly unique because you
get can get started right out of the box
using just it’s it includes a both an
assertion library and a Ana mocking
library which is which is fantastic so
there’s like you don’t have to start
picking tools together in order to get
going you you can but it it comes to me
batteries included that is nice
alright let’s check out the package
Jason so you see here that now Wow sorry
just it’s now a deaf dependency or so
now we have just installed next up I
would like to break this code and test
file which has our code or function that
we are building and our tests like these
are all bundled in one big file because
in previous episode we were just running
the JavaScript straight up because I
didn’t want to distract you with the
test run I want to show you the
principle of unit testing first what we
gonna do is break this up let’s do that
let’s first create a file called order
total dot yes
and I’m going to go into this file cut
this out and paste that in into order
total and we’re going to export it
module or the exports order total hello
and then we are doing to take all of
this stuff here all the tests I’m going
to cut that out and then I’m going to
create a new file called order total dot
test yes hello I think that’s it and we
need to also we don’t have an order
Const order total require blue order
total total from table to table or a
drop cool
and then I will delete this file hello
bye cool now I’m going to go to package
Jason and we’re going to define our test
script here there’s a script part of the
package or Jason and there is one
predefined test here which just says
echo no tests or no test specified and
this is what happens when we run NPM and
VM tests then we’ll see here that hey
echo no test specified not specified
because that’s what it tries to run so
we’re going to do just right just here I
think that’s gonna be fine let’s do NPM
test does that work that worked
cool cannot find module order total from
order total test of Jas hmm that was oh
that’s expected I suppose I am not
specified specifying the relative path
that’s how you have to do it let’s try
to run that again I’m running NPM test
sure and cool your test suite must
contain at least one test okay cool
that’s progress
this these are the tests that we wrote
in the last
and again these are just playing jobs
but we’re going to use just now and the
way you do that we’re gonna just gonna
write an empty steadily test that does
nothing it works so I just want to do
this because I want to see that our test
chain works fine and Lala let’s open up
the terminal create an integrated
terminal and then run npm tests see what
happens
Beppo okay cool it works and one test
has passed fine so the way a test runner
works an almost old test Runner works
Chester Andaluz works yes that if
nothing explodes in the test that means
it’s rigged so the way a test normally
works is that we have assertions such as
expectations so expect one to be one
running that and it’s the works but if
our changes expect one to be two that’s
a very unreasonable expectation and then
we get something pretty like this which
has an expected value to be using triple
equals to receive one so let’s rewrite
this test here in our new format we’ll
take it and then I go up this string
here copy that in you know what this is
a dumb way of saying we can just call
that quantity actually let’s say that
yeah this is not the best test naming we
might figure something out better out
later but right now we’re not we’re not
overly concerned with test naming we are
concerned with how learning how just
works so let’s see here we’re gonna do
right we’ll grab this here this cool app
s on it and we’re going to say to be
sexy and I think I’m missing a parent
perhaps what I’m gonna be saying what am
I missing
I’m missing a parents there that’s it
let’s run that mm-hmm oh yeah there are
this one as you see now one past which
is this one it was green but are all my
broken tests here was remaining so I’ll
delete that run that again and PM tests
cool all right so I keep typing NPM test
here again again again again again it’s
not too much work but it would be cool
if it was work that we didn’t have to do
and we don’t I will go into package
Jason and I’m going to create a new
script script called watch and that is
going to be just just – – watch and now
oh hang on I think I need to also
specify what what files to watch and I’m
gonna run NPM watch – oh no no no that’s
I can’t just type NPM watch that’s a
special thing for NPM test and so test
the special watch in order to run that I
need to do NPM run watch that should
work yes cool and if I not close this
and I yes I can delete that because we
have already implemented that so every
time I save now the test reruns so let’s
say that I change this to seven and save
BAM
it will fail and if I change it back to
six BAM it will succeed this creates a
really really nice feedback loop of
immediacy like red green red green red
green very nice
oh by the way let me go back I mentioned
before that
a test run helps with keeping the code a
little bit dry now so I’m bringing back
to this old oh sorry sorry
Oh had had food or the total here if I
if I select this and I drag up here a
little bit you’ll see that it’s 141
characters selected but with this thing
here it’s only one 136 characters like
this so it’s it’s a bit more terse we
can actually we actually don’t need
these characters here either
those are unnecessary sis we just have
one assertion and now it’s even smaller
it’s also a bit nicer easier to read
because the assertion is it’s at the
prompt we could probably wiggle this
with the manual I don’t know but I don’t
it’s just short and it’s easy to read
this syntax becomes very nice so let me
delete that and let’s start go through
implementing the the other test as well
so we have checked out no quantity
specified so yeah dude
and oh my god I’m having a hard time
typing it today that’s a lie I always
always have a hard time typing and I’m
pissing this in here oops sorry about
that sir about that oh paste and then I
expect this to be what was it three
kaboom
and now two tests are passing what and
look how nice and pretty this is with
these mmm green checkmarks that feel
really good and I proceed let me
actually go down here and have this a
little bit smaller
I’m going to take this one it says check
fail oh happy part example one it
about example one and we do it exactly
the same thing we grab this here and I’m
going to expect this coal to be now to
be a time right copying this yeah and we
now have three passed expand that up a
bit
see ya pretty and let’s grab the final
test as well grabbing the happy path
example 2 boom and I’m grabbing the or a
total expecting that to be 60 and the
syntax is this is just crap code
deleting it indentation is Lynch arias
angry about it and we now have our test
running in the just test runner on every
save save save save BAM
and that is just you can find the code
in the episode description for the next
episode what would you like to see I
there are many many steps that we can
take from this but I would like this to
be audience driven so if you have any
questions about anything please write
them down below and I will either answer
it or I will use it your question has a
basis for the the next episode you have
just watched an episode of fun fun
function I release these every Monday
morning or 800 GMT if you are watching
from the future you can check out next
week’s episode here otherwise you can
subscribe here so that you don’t miss it
if you are forgetful you can also turn
on notifications in the YouTube app I am
mpj until next Sunday morning stay curious