馃攳
Code Coverage - YouTube
Channel: Self Teach Me
[0]
in this video we're going to look at
[2]
code coverage
[3]
this is the last video in a multi-part
[6]
video series for building a react tab
[8]
component and then writing the test
[9]
to support it you can go back to the
[11]
very first video
[13]
to see how we built the component link
[15]
in the card above
[16]
and of course all the other videos in
[18]
this series will be listed in the
[20]
description below
[26]
if you're new to the self teach me
[28]
channel my name is amy dutton i'm a web
[29]
designer and developer
[31]
if you're just getting into this space
[32]
sometimes it's hard to know where to
[34]
start or what resources to trust
[36]
i'm going to help you level up and get
[37]
to where you want to be if this sounds
[39]
interesting to you
[40]
hit the subscribe button below alrighty
[42]
ready ready ready
[44]
ready okay this is pretty cool and will
[46]
allow you to enjoy the fact that
[48]
we've tested all the code in this little
[50]
app if you
[51]
jump over to our package.json file
[55]
let's add one more script here at the
[57]
bottom i'm going to add a comma
[59]
and then i'm going to say coverage
[62]
just collect coverage
[66]
give that a save and now within the
[68]
terminal we're going to run our new
[69]
script so i'm going to say
[70]
yarn run coverage hit enter this will
[74]
run all of our tests
[75]
and then it will look at our code to see
[77]
if everything has been covered and hide
[79]
this sidebar
[80]
and make this a little bit bigger and
[82]
awesome we have
[83]
100 code coverage then just to make sure
[86]
this
[86]
wasn't a fluke i'm going to open
[89]
our tests within our defaults to the
[93]
first
[93]
tab content i'm going to change this to
[96]
only run that one test and give that a
[99]
save and i'm gonna hit the up
[100]
arrow within the terminal to run the
[102]
last command and hit enter
[105]
so now you should see some pink within
[107]
our chart
[108]
this is pretty cool because it will even
[110]
tell you what lines of our component
[112]
were not tested so if we open
[114]
up our tabs.js file
[117]
and go down to line 13 that's our
[120]
handleclick method
[121]
and yeah our test doesn't take into
[123]
account what happens when you click on a
[125]
tab if you jump down to
[127]
line 19 yeah this test doesn't account
[130]
for what happens when we pass in an
[132]
initial value
[133]
and we try and set an initial tab if we
[135]
jump down to line 40
[137]
just following this this is the code for
[139]
clicking on an
[140]
actual tab you have this handle click so
[143]
yeah i think this is pretty cool and
[144]
insightful i'm going to
[145]
remove our only from this test so that
[148]
everything is running and our app is
[150]
fully covered
[151]
i do want to do my due diligence and
[153]
explain a few things about code coverage
[155]
it is so gratifying to see that green
[157]
table especially after we spent so much
[159]
time writing all those tests but
[161]
the goal shouldn't necessarily be to
[163]
have 100 code coverage because there are
[165]
a few things
[166]
that code coverage doesn't account for
[168]
like it won't tell you when your code
[170]
works according to the business
[172]
requirements
[172]
it doesn't tell you that your code works
[175]
with all the other code in the
[176]
application
[176]
it also won't tell you if your
[179]
application can get in a bad state or
[181]
not
[182]
another problem is that every line of
[185]
test code contributes to that percentage
[187]
so
[188]
technically you could increase your
[189]
coverage just as easily by testing your
[191]
about page as you could your checkout
[193]
page and obviously
[194]
your checkout page test suite is far
[196]
more valuable than
[198]
the about test suite if that's even
[200]
needed
[201]
the biggest thing that test coverage
[203]
does is to help point out
[204]
edge cases that you're not accounting
[206]
for remember in our table it shows
[209]
line numbers for areas of our code that
[211]
we didn't have tests written for
[213]
we wrote the bulk of our code in a
[214]
previous video but you can find it all
[216]
on github
[217]
link in the description below feel free
[219]
to download it use it modify it whatever
[221]
it's yours
[222]
the idea behind this whole series came
[225]
out of a course that i'm working on that
[226]
builds a web application from start to
[228]
finish
[229]
these youtube videos have been really
[230]
fun to make as we build these
[232]
small one-off projects but i wanted to
[234]
do something that strings everything
[236]
together putting them into the context
[238]
of a big picture
[239]
if this is something that you think
[240]
you'd be interested in there's a link in
[242]
the description below
[243]
to join the waiting list and that will
[245]
get you more information
[246]
early access and any launch perks if you
[250]
like this video and want to see more
[251]
videos on web design and development be
[253]
sure to hit
[254]
the subscribe button below hit the bell
[256]
icon to receive notifications when new
[257]
videos are posted
[259]
until then keep coding
[282]
you
Most Recent Videos:
You can go back to the homepage right here: Homepage