you are watching fun fun function now
today is going to be a little different
episode it’s going to be a let’s code
episode and it’s called let’s code an
editor and I know what you’re thinking
you’re thinking that hey M PJ you’ve
always said that you are a tooling
alcoholic and that you spend too much
time tinkering with your tools why yes
and you are experiencing this tooling
alcoholism right now firsthand in its
full glory building an editor is
probably the absolute worst kind of
developer procrastination that you can
possibly do building an editor is
something that you do only for the
benefit of the developer there is
absolutely zero chance that the user
will say oh this software is really
great I bet that the developer that used
it had a great editor and that’s why
it’s so great but you know what it might
be fun and also if you’re watching I
figure that it might be entertaining to
you people and you know I’m just excited
about it so yeah you know let’s code an
editor Rob let me show you what I’ve
built so far because I’ve been spending
quite a few hours with this already ah
so let me do NPM start
perhaps I should increase the size of
all the things here so that you see
properly this is okay maybe ah so let me
run NPM start I’m using Visual Studio
code for this project might be
interesting we’ll see oh my god I built
an app that says hello it actually does
a little bit more uh let me go to this
namespaces and come on let’s load and
here’s the default namespace in the
default playbook mmm what’s a playbook
oh okay
so the playbook is where the editor is
so I have not actually built an editor
and editor is not what we’re building we
are building a fiddle you know like this
it’s it’s kind of inspired by things
it’s basically a little space on the web
where you can run JavaScript coding you
can send that link to other people I
often find myself using jsfiddle and and
other fiddles but as you can see like
there’s a lot of you know cruft in this
interface there’s a lot of distractions
and I also don’t really care for the Dom
to be honest I don’t need I don’t need a
Dom I just want JavaScript generally
when I when I do this things like these
four things seem a little superfluous to
me lately I’ve also run across something
called Jupiter it’s like a wordplay on
Jupiter plus Python I think it’s also
referred to as the ipython playbook I
cannot easily show it unfortunately
because they are generally hosted things
and there are no Python play books
available online as quickly but it is
basically this you create segments of
code and you evaluate them in line and
you get under each segment it evaluates
what what the output is and you can
create new segments and sort of create
like this this story of code that
executes and you can also add blocks of
markdown in between a few weeks back I
did an episode on the eve programming
language and it’s that is very much
inspired by the ipython playbook it’s
super nice when you’re mangling data
because you start out with some big blob
of data and then you
I like turn that in different ways and
at the end you render out some nice
diagrams and you can like follow it in a
flow in it it is a very nice way of
programming I think at least in that
specific case so wanted to try to make a
JavaScript playbook
basically and and this is kind of what I
built
so far it is it has these segments these
are 1 2 3 4 5 segments I haven’t added
functionality to delete them just yet
but if I do for instance like 45 + 8 D 9
and I press R command enter and it
evaluates immediately in line you see
here I am way around you can also select
segments and I can bring up this
commander that only has one command as
so far I imagine this to be something
this is sort of like the thing that
appears when you hit command P in Adam
or Visual Studio for that matter no it’s
not come on P its command shift P and
you can type stuff like add line comment
or remove trailing trim trailing
whitespace for instance I really like
that idiom of commanding an editor
because I cannot remember a hotkey for
the life of me so I now I just had have
one command so far in this this editor
but I imagine that there will be many
and you can like autocomplete here or
something but if I pick the add new
segment which I do by hitting Enter a
new segment will be added at the end
here wipe and I can do new things and it
can also do you know it’s a JavaScript
it’s a JavaScript environment so today I
intend to make a little bit of progress
on this project
and and that progress is going to be
deleting segments fleeting segments
that’s our goal for
today and by segments I mean these
things that I’m now selecting I have the
capability to select them but not
actually delete them before we do that
though I just want to get a little
warm-up and fix this fact that there is
no margins here that is annoying the
hell out of me I’m going to close this
to do because there’s just so many
distractions in it and I’m going to
scroll too I wonder where the margins
for that is okay we’re going to go to
play book editor dot J s so as you see I
am using react for this project I’m also
experimenting with a face this face book
type system called flow as you might
know I’m a person that I I’m not a super
big fan of types but I like to give them
a chance now and again especially when a
new type system arrives on the scene to
see how it feels
flow has been kind of cool in this
project but uh in the end I’m currently
in the process of removing it because I
don’t feel that it actually adds more
value to the project than the hassle it
adds it’s close but I just feel like
it’s one more tool in the project and
it’s getting in my way so we are
removing it let me just do that now
actually before we do anything else I’m
going to remove flow I’m going to remove
scrolling down do we have any more flow
type definitions here here is one move
that all right that’s all of them let me
commit that gets that does get add SRC
play label character dot J s and git
commit message
shrim une flow from labor editor to hi
dad come on J one of the few hotkeys
have learned in visual studio except for
the command shift P one okay back to the
task at hand we want to remove this or
add a little bit of margin here to make
it easier to see the segments so this is
the render function in react if you’re
not familiar with react its oh god I’m
not going to explain react you have to
read up on that somewhere else but this
is is how it’s being rendered and render
is being run on as soon as anything
changes and it just renders this
declaratively
so all we have to do is add some styling
here and it will be updated now it looks
like I have encapsulated the d-segment
editor in in a react component here and
so now I’m thinking here dude out of the
way thinking that maybe I should add the
margin inside of the segment editor
alternative because I’m just mapping on
segment IDs here and returning a segment
editor for each each ID so anyway I
could add the margin inside of the
segment editor or I could add it at a
wrapper outside of this and add the
margin you know what we’re going to add
it inside of the segment editor let me
go inside the segment editor and just
hide the site or how do you do that I
want the Alt key for hiding in sidebar
toggle sidebar come on beat oh that’s
nice
come on mean I might remember that
hotkey okay and let’s let’s find this
style of I think it’s here you might
notice that I’m not using a lot of
classes here I’m just using data
container or and data active and data
controls to identify these things in my
unit tests I these are
what I select on we will talk about unit
tests later buddy I’m using these and
not CSS classes because I feel like CSS
classes class clothes classes are for
styling and I might want to change those
in the future but like these references
data container they are meant to be kind
of like a sort of API for the tests to
interact with so I don’t change I’m very
careful around changing these and that
allows me to change classes and stuff or
other things kind of widely as long as
these things still are still there and
refer to what they say they return refer
to it so this this will always refer to
the the container as far as the tests
are concerned I also use a lot of inline
Styles here that’s something that I’m
experimenting with not sure what I feel
how I feel about it
ah it’s certainly a lot nicer to have
just just JavaScript manipulating the
Styles this is very nice that it’s just
JavaScript and I don’t have to context
which in my brain between less or sass
or anything it’s just an object that is
is then rendered to an inline style it’s
it’s it’s very easy to reason about and
it’s very easy to compose compose styles
as well I could just if I wanted to for
instance image all you see here like
this is variable and I’m reusing it
between these styles and here I’m adding
them together it’s just it’s just very
nice but a backside of using inline
Styles is that you if I’m inspecting
this and lalalalala you see here that I
here’s the inline Styles and this is
cool and all but if this element had a
CSS class I would be able to identify it
very quickly I could see it hey this is
the container
so the data container attribute also
serves that purpose to allow me to
quickly see what the hell this element
is without what looking carefully at the
styling and inferring it from that
anyway that’s a sign nope let me close
that and let me add that margin
margin bottom but boom bot bottom my god
I can type kids if you can type don’t
let that stop you from becoming a
programmer I didn’t I can type for
and look where I am making videos on the
Internet let’s still 20 pixels ah yeah
it’s got to be a strain or react will be
angry see it reloads true oh that looks
nice spacious and like all that room I
think that I am I am content with 20
pixels let’s commit that come on Shay to
bring up the hard EDD DVD built-in
terminal and I do get status the segment
editor has been modified and I do get an
SRC
added a little bit wolf marching on
bunk yeah ah got commit no that does not
exist that is true change to git commit
fixing the margin that was a good
warm-up but we’re not here for fixing
modules we’re here to delete this is
actually pretty good for maintaining
focus writing and note down normally I
just do a little bit a little post-it at
work he has to keep myself focused on
the task at hand I should probably do
this at work as well like do a huge-ass
noting yes
so that you don’t get distracted start
refactoring things refactoring is
important but it is also a very good way
of procrastinating so I tend to segment
my work and try to do a little bit of
progress and then reward myself with
refactoring because refactoring is fun
that is why you do it to procrastinate
that and the fact that refactoring is
something that I guess you it’s easy to
control it feels like oh I’m doing this
for only me and I’m controlling the
universe exactly like like I want it
it’s not that when you’re solving a bug
it’s it’s usually the universe just it’s
not working and you are just trying to
struggling to find out what it is that
is going wrong and it’s just in your way
while a refactoring is a lot more
pleasurable because it’s just you doing
what you want basically with the code we
might do that later a bit we’ll see
anyway come on
so let’s first add a command mm-hmm
so an commands are currently added here
I’m going to explain how commands work
in just a little bit but just let’s just
first add one to get going
topic is going to be a string so these
are strings actually it’s just constants
but for now I’m just gonna do something
ah
and then don’t you give it a label
delete selected segment and it’s going
to be a to screw tion deletes the
segment that you okay does that work let
me hit escape and see bring up the the
kilometer and it does now actually have
a segment in the in the commander
there’s a little bit of graphical buggy
here which we have to fix later once we
have it
working it’s always very important to
focus on getting a thing working before
you start tweaking it if you don’t you
might end up wasting a lot of time
tweaking something that might not even
be you might find out that uh it’s it’s
useless to do it in the first place
or you might find out that it’s not
possible to do at all or you might find
out that you’re doing it completely
different and your styling efforts were
you know just in what just in vain so
like defer tweaking until it actually
works the entire chain okay so I press
ENTER here to do the command yeah okay
that doesn’t work which I guess it’s
expected but we’re not quite sure why
doesn’t work let’s look in the console
okay so I have some error messages that
are really ugly at the moment because
they are adapted to the node test
environment where I mostly run these
things at some later point I’m going to
make these prettier for for the for
running in the browser but for now I’m
just gonna let them be you see these
things these are actually CLI coloring
things so when I run these in the in the
node node test environment this will
make these things be colors that is what
you’re seeing anyway so it says that
could not find responder for message
Madinah service a la caja so that’s this
one and you’re just wondering what the
hell does this even mean responder for a
message okay and create effect bus what
is that so the way I’ve set up the
system is that everyone communicates
through an effect bus and effects are
very much like if you’ve used redux it’s
extremely similar to actions and action
creators really you might ask why aren’t
you using redux and I just felt like for
this project I wanted to
like Redux but for this project I wanted
to see if I could improve on the concept
a little and do something a little bit
simpler because Redux while at its core
it’s very simple the whole way you use
Redux the community is very you know
plugins and metaprogramming and and
there are some things with it that I
feel like I could approve this so
awkward my own little dispatcher for
this this project so that is what these
these topics refer to these are effect
effect topics which are your strings I’m
going to add a like create a new command
topic first let’s do that I’m going to
navigate to the file topics
Dodge’s in the command and just looks
like this it’s just a constant so I’m
going to copy that and change add
segment to delete segment and close that
and now I will do this so I do come on
start the delete segments don’t worry if
you’re not completely following along
it’s because I would be impossible
you’re watching somebody else program
just go with the flow I get some react
warning about missing a key prop I don’t
know where that would be let’s ah you
know what I’m gonna disregard that for
now it’s just a warning it’s not gonna
impact us let me close that and I’m
going to bring up the commander and
delete selected segment and I bet oh
sorry I’ve added an S here so delete
segment so let me bring up the commander
here escape and go to delete selected
segment and enter and we’ll see that get
a responder not found error
I could not find responder for message
delete segment yeah we don’t have a
responder for it yet I’m going to add a
responder to this this thing we do that
by going into the commands and then we
have an installer file and here I will
go reply to commands
don’t delete segments and it’s supposed
to be these commands is going to get an
active segment ID that is always going
to be a string so that is what the
message has to match to be sent to this
this this is handler so to speak and it
takes a function as well which will take
a message
and again this message message contains
an active segment ID and loss what do we
don’t want to do with that we want to
delete the segment I’m using firebase
for this and the way we interact with
firebase is by sending another effect to
firebase and then the firebase effect
handlers will well deal with that so I’m
going to do a send and it’s going to be
firebase dot we don’t have a delete
effect in in the fire in firebase we
have not implemented that yet do we need
that or can we just set it to now let me
API reference to b3 firebase setting to
no reverses to the thing is run firebase
okay setting a locations value to now
essentially remove the node from the
structure okay but you know what then
we’ll do that that because that will
hopefully save us from implementing
another thing on our firebase module
which is nice it keeps our API a lot
simpler and our code easier to read
because there’s not so much stuff either
way so firebase set it happens to take a
you know what let us see what that takes
I’m going to go to doctor doctor and
stone that yes because that is how they
are defined and because they are being
installed on the create the effect bus
so to speak these and effect handlers
and I’m going to go to effects dot
firebase and see what they how they look
like and see here hair I’ll reply start
sign out find a sign out we’re not
looking for that okay reply firebase set
it takes a part which is a string and it
also wants a value which can be anything
let’s go back we want to give this a pot
so the way firebase stores things as in
this tree structure so segments or let
me show you how they store actually
firebase so this is the way it looks so
here are the namespaces here are the
play books here at the segments so
segments are basically as this tree of
of stuff that contains a body and it
contains a reference to the playbook
this is just a string to the the play
book ID so it refers to this one here
and it also stores caches the results so
that it doesn’t have to reevaluate it
all the time so this is a tree node that
we
that we want to delete so what we do is
that we our school path segments and the
app passage active segment ID and then
the value should be no let’s see if this
does what we expect it to so I’m in the
playbook and we’re looking at we have
this segment selected I bring up the
commander select the lead segment select
the segment and press enter and it
didn’t work we get some Oh cannot read
property body of null what does this
even mean interesting let’s see I’m
going to check the firebase console
what’s this deleted I think it actually
was deleted right there’s actually two
deletions that we need to make because
the way firebase functions is that
everything is a tree right so when you
access a tree node everything under that
tree node is loaded and that is also the
way the access model works so if you
grant access to a tree node you also
grant access to all the leaf nodes under
that node and because of this you don’t
structure this as a big tree where like
there’s users at the top and then those
users own namespaces and those users own
playbooks and those playbooks own
segments because if we just cause you to
load a lot of things and it would make
it really hard for you to control the
access model so this is the firebase way
of structuring data a cumbersome part of
that is that you have to have these
2-way relationships so if you see here
on play books the play book also has a
segments tree or segments node which
contains these these references so I
believe that this is the one that we
deleted and so it still has a reference
to the and to the tree element and that
is why we’re getting that
body null error because it’s it’s trying
to load it but there’s no body for it to
load so just going to delete this
manually here and see if that resolves
error for us let me refresh see ya now
it’s gone what we need to do is that we
need to set that thing to know as well
and I’m going to send firebase don’t set
one and set the path and we’re going to
do playbook start okay we don’t have
this yet not that we need the PlayBook
ID PlayBook ID or key essay or called in
firebase I think I don’t know if we
should like I call something ski and
some things ID in this thing and it I
should probably be more consistent but
at the moment sometimes I eat sometimes
key and and we want to set that to
segments and we want to set the active
segment ID too and just be value but you
know also I want to this should be one
of those dog strings or whatever it’s
called see here like we don’t have
PlayBook ID yet so how do we get that ye
Hwa we need to actually do a firebase
Center firebase get and and we are going
to the it nice do you have a path and
that is going to be a path playbooks no
sorry segments and dot active segment ID
now we are doing some synchronous stuff
here I’m going to use the fancy
wait that exists in know oh yeah
in the new JavaScript thing then you’re
a sink away and because send this
returns a promise that resolves into the
whatever value is at this spot in
firebase and I do a weight so that it
resolves into a promise then we will
have this segment data
oh there’s errors all over happening
here because we’re right in the middle
of of chaos if we go back to firebase
and we check by the way if you’re
wondering why it’s called Bloomfield
that is just because that’s the way I
pick code names for my projects before I
have a good name for them so like I
don’t get stuck on on naming them so I
just go to the list of all the code
names that Intel has ever used for a
processor and I just pick one at random
from that list and it ended up being
Bloomfield this time that’s why it’s
called Bloomfield and anyway let’s
scroll down to a segment AC here at
segment it refers to playbook by its ID
here so we want to do coms play book ID
that’s going to be segment data dot
label okay that looks good actually I
also want to await this this this to
resolve this delete it to resolve first
before we go and delete the the actual
segment so that we will delete the this
reference to the segment’s before we
delete the actual segment in the these
segments tree all right let’s see how
this looks I am about to get deleted and
I open the command and I select little
segment and press ENTER and it is
deleted now we just need to write some
unit tests for this and we’re done
but before I do that I’m going to
recommend you a board game allow me to
introduce
to you sushi go so it’s not technically
a board game it is a card game with
super adorable sushi it’s extremely fast
to play and learn it it doesn’t have a
ton of depth but it’s one of those games
that everybody can enjoy it doesn’t
require reading much so children can
play it sushi go is a great game that
you can play with a family that isn’t
really all that into board games but
will still enjoy themselves a lot or to
play with experience board game gamers
like as I kind of warm up before you get
into like the main game or perhaps at
the end of game night like like we did
yesterday when everybody was too drunk
and tired to keep playing the other
games like we were playing so sushi go I
recommend it highly sushi go is not a
sponsor of this show or anything I just
like board games and I like sushi go but
if you like board games and you would
like to support fun fun function there
is an Amazon affiliate link in the
episode description that you can use to
buy your very own sushi go board game
shout out complete back to code alright
the first thing that we want to do is
write a test for this thing we do that
in the install dot test file for let’s
see install dot whoops install dot j/s
go to install effects commands this file
voltage as the test by the way are
written in jest because they come with
the create react app that I’m still
using for this project I’m really
forcing myself not to use
eject because I really want to piggyback
on on the the power of using the same
goddamn thing that everybody else uses
so we are going to describe a little bit
about the bird lead segment and at the
tittie get first tee
okay so describe common is it generates
a just described
statement with some setup mainly it
creates a effect bus for us you know the
effect was that dispatches everything
and the main because the main purpose of
having an effect bus in the first place
is to allow ourselves to intercept the
messages back and forth instead of
calling things directly because this
allows us to not have to mock anything
in when testing which is super nice and
I’m going to show you how easy this is
to deal with so first of all we are
going to take our cued and we’re going
to install so install comes from the
install file that we were inside before
where we added this this reply and
firebase set and gets a you can see here
from the Green Line that this is added
but not yet committed in git and and
this is the file we’re testing and we it
takes a bus because it needs to install
itself on on a bus some kind of parsing
area because before each needs to take a
function and we know that this is
correct
so we’re going to this is the end result
that we want we want it to set the this
segment to know at the end and let me
just it did you do to delete the segment
in firebase and this is going to now
we’re going to call a function on get
bus and this is one of the main reasons
I went in one of the main improvements
that I wanted to make on top of the
dispatch in redux because I feel like
for me the most important thing with
everything is making it easy to write
unit tests so I want helpers that
make it a lot easier for me to do that
so this get buzz has an assert message
this will probably be renamed assert
send in the future but for now it’s
called a third message and what it does
is that it takes an object that says
topic and that’s going to be firebase
set I’m going to make a certain message
look a little bit more like send later
and it takes right these objects it’s
going to be path here ddddd so like this
oh yeah and so there is an active
segment I D I’m just gonna create some
kind of sample data here with some
segment ID that we’re going to use for
testing
or fake whoops
some zakat mint ID so we need to fake
some input here right that should lead
to this being set to null
and okay so we want to send this fake
message after the after we’ve installed
so let me I’m just going to copy that
and so after the installation we want to
get the bus and we want to send this
thing right and the active segment ID
should be some segment ID this seems
like a case so let’s create a case
describe a woo I had some kind of
snippet there I think mmm I was Visual
Studio code magic but either way when
delete the lead segment c’mon is sent
and I’m gonna move this to here and I’m
going to move this it statement inside
of the describe case I want to call it
when perhaps given get that so given
that the delete command is sent and we
send the delete comment here with the
where the active segment ID is some
segment ID so this is basically what the
commander will send and we are we’re
recreating that here because this is a
unit test we are interested in in
testing only the remove segment code so
we’re not we’re not testing the entire
thing we’re testing given that the
commander sends the right thing the ad
removes delete segment code should do
the right thing but this code is not
actually testing that the commander does
the right thing we’re going to write a
test for that later but given that it
should delete the segment in the the in
firebase and so we assert that after
that has happened it will delete the
this this segment here the loop
and active segment ID that does not
exist in this context that is that is
this this is some segment ID because
we’re setting it here and given that it
should delete that same thing let’s
raining raining raining raining I mean I
okay it fails mm-hmm expected to see
effect on topic firebase set matching so
this is the error message pass from the
assert message and this is this is what
I want I want these things that tell me
exactly what is wrong and gives me hints
to what might be the error so it says
that okay I wanted to see a firebase set
on this these topics here but I’m not
saying that and here are some ountry
GERD responders that might help you out
and okay so there actually is a
responder to add segment that is not
that makes sense the install function
here is adding a add segment responder
which we’re not using because we are
interested in only in the lead segment
there are tests down here for the add
segment that does that so unfortunately
this doesn’t help us much but we know
that okay firebase it’s not sets let’s
look go into install and and have a look
so the first thing is that we are
waiting for a delete segment to be sent
and we actually know by scrolling down
ah by scrolling here that there is no on
trigger responder for these for you see
so this has probably been triggered what
happens then is that we take the segment
I active segment ID that we get and send
that to firebase get that from the
database so that we can extract the
PlayBook ID later here so we need to
fake this call I’m going to copy paste
that and I’m going to just expand this
firebase dot yet to do and when we get
return a promise that resolves to
something let’s go back to install the J
as what one oh we want something that
resolved through an object with a
playbook property so we have to make
some play but property up comes some
playbook ID and it will resolve to I’m
what’s up in here
oh I’m not closing the reply properly
there okay I really like this by the way
with create react app that it’s
constantly rerunning my test as soon as
my eyes save and it gives me this very
fast immediate feedback loop in it we
really know I have so I’m syntax errors
there we go and our tests are green
which means that we are now actually it
seems like it’s actually verifying that
it deletes the segment in the database a
good way when unit testing like this
because you notice that like I’m not
quite doing tests first I but I’m doing
test-driven development so I do like a
little little bit of progress and then
verify that it works in real life and
then I stop and I write some tests
verify that the code that I wrote
keeps working in the future I think that
this is the nicest way of doing TDD
because it’s it’s a kind of intuitive
way of dealing with them but it has the
disadvantage that you might write the
wrong tests so it’s always good to
intentionally break your tests once they
go try to break your tests once they go
green
let me do that I’m going to go to
install and I gonna do a typo here and I
got signal see this should fail now yes
it does cool ah and I just just go back
to the correct implementation and just
good we have a test that verifies that
this happens this is kind of surprising
to me because I figured that this would
actually not be executed because I don’t
expect this to ever return because we
have nothing waiting for this this fire
this specific firebase set perhaps if I
just do a weights like this it doesn’t
really matter so what perhaps
if I have to assign it to a variable for
it to do anything let’s call it fish for
this time Oh No
very peculiar perhaps I’ve set up a
reply for this and then don’t realize it
oh no I know what what’s wrong
um well I have this feature on the bus
that I’m going to remove for this
specific reason it’s confusing
by default the bus uh whenever something
is called that it doesn’t have a hundred
for when you’re running in a test it
just returns a promise that will never
resolved or resolves into null rather
sorry so I have this feature that
tu-tu-tu-tu-tu-tu to not do that I will
change that default later but it means
going through the app and fixing a lot
of things later
so future refactoring BAM okay now it
fails like I expected it to all right
expected to see an effect on topic
firebase set all right it’s not seeing
the effect that you want
however it’s listing here some effects
that actually happened this is another
reason why I like this I want to have
this guiding error for me so it’s
showing that okay this effect happened
but there is there was no responder for
it so we need to go and grab this as
well and handle that in our test setup
so get buzzed and want to reply to that
and paste that in this is so annoying
nice it’s right Flo tries to be helpful
but it’s really just in the way all
right so this is what we want it’s going
to respond with nothing really it’s just
a or it does respond with some kind of
promised but we don’t really care about
the response the what what that returns
and ah whatever just resolved to no
because you know this thing here we just
want to wait for that to complete and
then proceed and these things don’t
exist in our test but it’s just these
sample values we’re using it’s going to
koplow we get some warning oh yeah we
get a warning because we don’t have a
responder for this this final set here
we are after the fact verifying that it
was cold but when it actually is called
it will deliver an error because it
can’t find a responder so just gonna do
a catch-all responder no that won’t work
because we we don’t want all of them I’m
guessing you know firebase set and we
expect something on this path and okay
probably because yeah this is going to
give me an error because I forgot the
last parameter and to respond must be a
function I’ve renamed this but I forgot
to rename the and I rename this but I’ve
from respond to reply but I’ve forgotten
to rename the error messages so I’m
here you really don’t care what it
returns it’s just going to be an empty
responder function cool it’s passing
cool let’s try to break this a little
bit somewhere let’s try to add a typo
here bumper bomb it breaks good let’s
try to add a typo here see if that
breaks yes it does
try try the type of here see if that
breaks yes it does good this is by the
way a really handy method when you are
reviewing code and you suspect that the
tests that somebody has written or not
probably not testing anything you can
just start adding random typos to the
code and see if the tests break and if
they don’t there two tests need
improvement let’s go up to the playbook
editor we don’t have to add much tests
here because the whole thing of taking
the commander dispatching these commands
and welding on the active segment ID
that is already code that is is under
test by by commands that that is code
written for ad segment so it would just
be superfluous to write that for delete
segment as well we don’t want a bunch of
unnecessary tests in our code that’s
just corrupt to maintain we want tests
that are valuable but what we do want to
make sure is that clay book editor here
has actually passed the delete segment
to to the commander that this is this is
monk opening those tests let’s scroll to
find somewhere to add that okay we have
a KC for showing hiding commander it’s a
bit borderline to add here because this
is actually concerned with the this
blurring thing that is going on here but
we we can we can squeeze it in here like
we don’t have to be the most disciplined
people in the world passes on yeah well
you know what I’m going to make as a new
describe case void because it’s so easy
is copy paste this here and I’m going to
it assigns or passes a Herto to the
I’m using enzyme here and the way enzyme
works is like mmm let me copy paste
another test statement here a bit of the
pepper tippity okay this is long so you
do these the wrapper is the thing that
enzyme has rendered to so I’m gonna just
show you how rendering start works
render and start somewhere here it’s
just a simple helper function so you do
this shallow rendering or react
components you just renders one level
doesn’t render and subcomponents and you
yes
this is basically yes the way you render
a normal react components except that
you get this fake tree that you can do a
ton of operations and
zone it’s really handy so it actually
does the react rendering but you can
inspect it in a lot of ways and you
don’t have to deal with it being a real
browser and stuff it’s just a phantom
j/s that is a pain in the ass this is
really nice to work with either way so
this wrapper object that’s our dome so
to speak let me go back down and so
wrapper find we want to get the
commander get the commander’s props well
there and we don’t care about this style
in this test we want to check that the
commands and the second command this is
probably gonna break later but that’s
okay because it’s tests and when tests
break we can just fix them
that that thing has a topic going on all
right so the topic of the second command
commands dot the lead segment okay I
have not imported commands here yet so I
need to do that that means I haven’t
written tests for passing this little
so let me in oh this is how I do it with
firebase so let me import commands in
effect top oh sorry
come on come on Alice come on stop that
wrong call moms from come on stop eggs
let me go back down cool so now the test
is Patrick we don’t need these curly
okay it’s it’s passing let’s break it to
make sure that means going to pass
another screen here this your num break
yes does good government might as well
add a test for the ad segment while I’m
at it and segment come on – commander
and that second segment oh yeah it’s the
that’s the wrong one it’s the first
segment that should yeah all right then
it’s green we have now written tests for
our entire change and we can commit it
let’s do that get status see what we
have here
whoops lot of changes get and some
unrelated stuff that I don’t want to
commit so get add SRC playbook editor I
do that test yes I could fall awesome so
I add get S or C mumps and stole star
whoops now sorry guitars RC effects come
on sit on star and come on topics and we
also changed fire bases what did we get
death
oh my god what what is all of this it
stutters get how do i do first one can i
installed Oh Jess oh cool
uh alright I just removed some trailing
whitespace we don’t have to connect that
it’s that that’s right
I think that is everything that we
wanted to come we’ve added everything
that we wanted to commit to staging so I
uh still get commit em added support for
removing segments get push done we have
completed and tested and committed our
goal deleting segments boom if you’re
new to this channel you have just
watched an episode of fun fun function
this is a weekly programming show and I
release new episodes every Monday
morning Oh 800 GMT time this was a let’s
code long-form episode but I also do
musings where I talk about architecture
and working in teams and stuff like that
more software things you can find a
playlist of those Hugh
I am mpj until next Monday morning stay curious