hello this week I spent a little bit of
time working on a personal project of
mine where I really made an effort to do
at test first
the TDD and I also worked against a
external API the OBS API that I used for
trade screaming so when you have an
external API that gives you gives you a
good opportunity to do some mocking so
that’s what we did and I also showed a
little bit of how dependency injection
works in practice so this video
hopefully gives you a bit of an idea of
how you can work with TDD on an external
API in practice Before we jump to the
video I would like to thank today’s
sponsor brilliant I really like having
brilliant as a sponsor because they are
such a good destination to send people
off to when you want to learn like the
basics of the math that is required for
machine learning and learning about AI
because it’s so annoying you try to get
into machine learning but you get hit
with all this math notation that you
don’t know about or that you have
forgotten about since like school when
you learn it and brilliant operates
these awesome interactive challenges
with like a little bit of gamification
to give you like a sense of progress
it’s really nice it’s just not video
course it’s actually interactive
interactive challenges and I really
really like that if learning machine
learning math sounds appealing to you
you should go to brilliant rhetoric
slash FFF to sign up that really helps
at the channel because it tells them
that you came from here also it gives
you 20% off if you get their annual
subscription thank you brilliant on to
the show what are we gonna do today we
satbeer let me explain this this thing
over there is a streaming computer that
is the one that is pushing out the
stream to to twitch and that’s taking
the feed from the camera it’s taking the
the microphone and it’s feeding that up
to to twitch here is my laptop which is
screen capturing and pushing that to the
to the stream controller my stream
master the problem is that you might see
that I have to walk over here to switch
scenes and that is because OBS open
broadcasting Studios that sits on this
thing yes
yeah it’s resides over there and I have
OBS here as well but it’s another OBS so
obvious have this there’s this NPM
module for OBS because there is an NPM
module for everything so there’s this
OBS web socket j/s and it can expose the
local interface of obvious to us yeah
and what I want to do is that I want to
create a little web app that exposes the
scenes on OBS to run a web app and
allows me to click on this computer and
switch the scenes on that computer which
which is the scenes for you people and
eventually I also want to expose this to
someone on the stream maybe someone
rehire or somebody that is volunteering
at know that can be our production
manager and switch cameras as we
in scenes as we talk which would be
really really cool so if somebody like
the guest is talking like extensively we
can just like switch the camera to show
us that person hypothetically I could be
doing all that myself the problem inside
when you are in like in a talk mode and
you’re focusing on the chat and like
everything it’s not really hard so
therefore it were cool to expose that to
other people I have like played around
with this and wrote a bunch of crap here
really but I kind of want to like just
do this from start and I think I’m going
to delete this here and here like I told
you before that you should not like
having things name manager as a smell
and I just deleted something more
creative like OBS manager so perhaps I
should and do like follow my own what I
preach you know and do something called
OBS obvious thing until I know whether
this and inside will be a thing I’m
going to create a new thing a new file
and I’m gonna call this create not just
yes and the reason why I am gonna call
it Oh
Ronin asked weight thing is better than
manager no they are equally bad but
manager is a bit we sleep because it
seems like it’s better so thing is
better because that allows me to see in
the code that this is a placeholder name
and probably fix it before I commit it
or push it or and well manager is a name
that is really as as garbage as thing
but it might end up in the repo anyway
and because it
sounds good but the reason that I want
to create call this test is because see
how do I like to keep forgetting how to
yeah something like this yes because I
want to create like the the base
function here it’s going to be create
OBS thing and this this is like the unit
that we are going to be testing and
create implies that this is a factory
it’s going to return an interface with
functions like get seen list yeah
something like this and that should
return an array of all of things with
with with names you know name coding
coding coding and were like oh sorry an
array there we go and I’m just giving
you like an example here now my coding
or like get camera only something like
that so let’s see here I’m gonna start
wallaby on this file wallaby is a it’s a
test runner not I’m using it’s really
nice but there’s no test in this file
and do we have is this Ronnie no yes do
this now it’s not running up its do I
no perhaps I’m gonna you know I’m gonna
delete these for now I think they are
messing up my test suite no they’re not
hello hello an artist is so the function
and test is in the same file yeah I
usually like to start out that way
actually oh wait there’s some error here
Trey Toby this isn’t fine but never used
oh so the lint chair perhaps is that’s
weird I just had to save it mmm very
funky all right anyway we are running up
so they were gonna describe create
Tobias thing and we’re gonna test
something like get scenes and great
we have to require the the actual
component which i think is let’s look
inside packaged up Jason we’re gonna
have it yeah mmmm yum yum yum yum
OBS website ajs so I’m gonna call this
oh yes yeah using node requires here
because the last time I tried requires
it didn’t work out too well
and I am the I’m not yes yet happy about
the MDS oh if you export this the linker
oops yeah thanks
constitute dirt thing and all that that
that detected don’t we’re gonna create
an obvious thing and the obvious thing
is going to take like the websocket j/s
thing and let’s have a look at the
so I have this thing and then right we
and we want to okay we’re gonna we’re
gonna call that OBS web so get them and
create OBS thing it’s not the fine
that’s because it’s exported alright so
now we’re here and da da da da da da da
da I’m just gonna right thing here and
see where we’re at
so we have this object called get scene
lists and I’m gonna call that see what
we have
yeah that gives us these well this is
we probably don’t do we want to have the
create obvious thing you do the
connection or do we want it to get the
connected objects I think we actually
wanted to to get connected or we want to
inject that an object that has already
been been connected so we’re gonna call
it connected OBS web site
that’s gonna be like something that you
need to inject in this thing so for now
we’re gonna do the connection outside of
it not make this one’s a little bit
smaller and I happen to know that my
password for my OBS is secret let’s go
back to the docks and see where we’re at
get seamless to this and the connect
will give us a proper premise so what
we’re gonna do is sick when they’re not
go and make this a sing so you notice
here that I’m writing a lot of stuff
just in the test because I like doing
this and then just randomly then I’m
gonna then start folding this out into
into files and functions but I like to
just start playing around just dumping
the stuff into the test first there’s a
lot kind of like a little bit of a
garbage ground and then we’re gonna work
from there and to be honest like I’m not
like it’s so long since I actually have
actually been coding that in a way I’m
developing my testing process right now
as we speak we’re just playing around a
little bit so I’m gonna be I’m gonna my
wait for this connection and then I’m
going to send this kit to get seen list
and yeah what do we have here oops wait
so what did we get here oh cool
these are actually the actual scenes in
my in my local OBS you see here vias
code screens into normal these are the
scenes that we are getting so I’m gonna
copy this and see what we do here I’m
ile koji biggie says like the coca
seemed so useful yeah this is actually
another tool from the same company
called wallaby so it’s a test runner so
you see like these little green dots on
the left that’s showing coverage but
it’s like every time I save it just
keeps me running the test and it also
gives me these little cool things that
allows me to do these live comments and
do things this density also lots of like
a bunch of other things it’s it’s a
really really cool product so what are
we doing here well so what I’m doing
here is I’m doing this this send command
I would like the OBS thing to do that so
instead of having this mock data here I
side of obvious thing so if I pass this
connected OBS socket and too obvious
thing but we’re already doing then this
we’re no longer dinners so what does
this give me this is very good the hell
is happening now I’m terminated calm my
ears length is clearly too angry all
right so if we look here you’ll see that
what is seamless returning it’s not
returning anything now of course it’s
actually cool well we can actually show
promises in line but since this
I’m not having any weight it just
terminates the test before we get
anything so we need in that way it’s
here so now get seen this is actually
doing what it is that we want the
problem is that is it’s using its using
live data which is bad so we want to
mock this and I’m gonna mock this
connected WebSocket thing here and I
need it DT DT so let’s comment out this
this live data that we are doing here
and we want the connected WebSocket to
be like a constant
you’re gonna call this WebSocket what
are your opinions on this this thing
like I tend to call things mock some
people like to work to make start making
the distinction between like mocks and
doubles and fakes but the thing is since
there is no agreed upon definition of
these things I tend to find that it’s
just confusing so I tend to not do that
I tend to just call things more and then
we want to take the send command and
literally I’m not gonna use the MS gonna
make a manual mock function here not
gonna make use of the just mocking
functions because
it’s a little bit confusing
unnecessarily confusing so I’m just
gonna call this name and then I’m gonna
just expect command name to be and to be
we get seen list and then I’m gonna
again again kill me gonna return some
fake data I’m gonna take this real data
that we captured before whoops I’m gonna
paste this in and it’s got a bit of
stuff here that we don’t care about all
right at the moment yes remove that
honestly because it’s not relevant to
the test
we might be creating stuff that is went
later but for now I’m really just
interested in this data here shall we
keep the currency I think we should
actually so we’re gonna call this scene
scene scene a and I call it scene I see
something like that
oops you see like I’m taking the live
data and I’m replacing it with some
names that make sense for our test to
make our test a little bit readable even
though I code perfectly have just used
to we used live data but we test tests
are most like for me they’re mostly
about readability and documentation and
keeping myself focused on what it is
that I’m doing see okay we have
successfully faked our send come on here
it’s not used so I’m gonna paste again
and now we have the same list here look
at this
let’s I’m gonna make this a little bit
smaller so that we can see the entire
thing so if we look here I’m paste I’m
creating this mock OBS WebSocket thing
and then that’s being passed in here up
here and then we’re calling the send get
seen list and then we’re just returning
whatever we get out which is this code
here and that just gives us that that
data are like plainly I’ll put it I’m
just gonna make sure that our tests
always like this little assertion fails
I’m gonna call it gets eNOS to as we see
then the test breaks this is a like a
very good this is very good pacts in
general and like just try to make your
check that your tests actually break
let’s say that we also want to do a
little bit of transformation on this
because there was more garbage on these
actually let’s make let’s let’s add that
back in source I think it was called
sources yeah exactly this and
these things and I want honestly these
to be stripped away because I wouldn’t
like have this to be like a bit of a
simplified interface for the for the
mocked and which is gonna be used by the
the fronton interface and I wanted to
push like I don’t want it to push
everything included in my my setup such
as the names of my cameras and
microphones and stuff like that
because it’s I just don’t want it to be
there so I’m gonna gonna gonna take this
thing here and I’m gonna take away cons
and college data and return the data and
okay we need to make the same function I
is wallaby a lot better than the vs code
just extension says asks a compile a
sorry what
my pronunciation of your name yes it is
definitely it’s like wallaby is
ridiculously powerful but it’s better is
better so hard right because like the
the just code extension is free but I
really like the power that wallaby gives
me for the what is it like a hundred
getting sidetracked here so I’m just
gonna take theta dot seams and then map
that see it really just interested in
the name here by doing what is happening
you know their scenes something like
right I gonna want some assertions here
so we want a to expect scenes dot I
won’t expect it first a second scene
you’ll have a name what that expected
for C name to be us scene be scenes
it’s a little bit wonky naming mr.
okay okay okay let’s see here um we’re
going to call this scene-state or
something because it’s going to include
no let’s actually rename this entire
there we go same state same state
and yeah and I also want to make sure
that this message ID is going I don’t
thought that would be or commit but no
expect to be false it to be known to be
okay so we have this check now I want to
like actually make sure that this this
test works so I’m going to go back to
the code here and I’m gonna just return
the data directly and let me comment
touch oh yeah cool
now we this this fails correctly so I
and our test is no running I also make
want to make sure that current scene is
there but I don’t want this we are
naming I want it to be like JavaScript
cool expect the scene be but it received
undefined so it’s failing if I want it
to and so now we’re doing a little bit
of TDD here instead like okay I tend to
switch a little bit between being test
driven and being test after like and as
long as your tests like when there is an
API I tend to like start with the API
and work myself back there but in this
case sometimes I just like the the sense
of like actually having the test fail
first it depends a little bit on how
much grass I have of the application so
let’s see I’m just gonna call this
current and then I’m gonna grab from
well didn’t we didn’t get as far as I
hope to you because without of time but
at least we got somewhere somewhere we
did get somewhere no not like just take
this and I’m gonna just paste it in a
gist wrote a test for great obvious
thing it tests this function that we
created on the thing called scene State
it works by call scene State on the
thing after you have created thing which
requires and a connected OBS WebSocket
as its as an instance parameter and this
is a real that obvious WebSocket is like
the an NPM module thing but we we have
to create
fake one here because we don’t want our
test to have a lot of side effects
so ours we give it a send method which
accept a common name which we expect to
be yet seen list and we tried that this
fails that we could change it to
something else and then it returns this
this data here that is it’s gonna be
current seen seen be like this is live
data that were captured by first testing
out the the npm module this is where
wallaby or something live evaluate
anything turns out really handy in my
opinion because it allows you to like
easily copy/paste live data and then
module like mold it to your test anyway
the data looks like this it has a it has
a bunch of stuff that we really don’t
want there like we remove this message
ID and we expected this here I added
some sources here but we didn’t get to
the point where we will start removing
that data that would probably be what I
also I see here that send at this point
like the mock is actually giving us
giving us a sync method which is wrong
this is this should be this should be
async this still works because their
weight will not really care but but yeah
it’s this should not be synchronous and
and yeah so so this just this here just
clears this data and it just cleans up
the data a little bit and makes it nice
it doesn’t data manipulation really and
we inspected here and I write it’s like
this yes to be able to inspect it easily
with wallaby and then I do a bunch of
expectations on them and then we ring
that’s that’s as far as we as we got we
did a bunch a little bit of injection
and we did a little bit of did a little
bit of of mocking thank you so much for
watching a little reminder here to check
out our fine sponsor brilliant at
brilliant at Oryx slash FFF to learn so
machine learning math if you like this
dirty live coding format you can check
out this playlist where the similar
videos here you can also subscribe by
clicking here or even catch us when we
record them lime at twitch.tv slash farm
phone function until next week stay curious
Please follow and like us: