Code Coverage

Aug 15, 2023

Code Coverage

In this video, I’ll give a brief overview of code coverage: (1) how to set it up, (2) what it does and (3) doesn’t tell you.

🎁 FREE TESTING SETUP CHECKLIST - https://selfteachme.ck.page/f73b8277c4

+ Part 1: Building the Actual React Tabbed Component -    • How to Create Tabs Using React
+ Part 2: Intro to Testing -    • Introduction to Testing in JavaScript
+ Part 3: Setting up our Testing Environment -    • JavaScript Testing Setup
+ Part 4: Writing Unit Tests -    • Javascript Unit Testing
+ Part 5: Testing our React Component -    • Testing React Components
+ Part 6: Looking at Code Coverage - THIS VIDEO!

🙋🏻‍♀️ INTERESTED in the App from Scratch Course? - https://selfteachme.ck.page/4f22b6ebd5

🔗 LINKS
+ Jest - https://jestjs.io/
+ React Testing Library - https://testing-library.com/docs/reac…

🤖CODE
+ React Tabbed Component, starting point on GitHub - https://github.com/selfteachme/0029-w…
+ React Tabbed Component, ending point on GitHub - https://github.com/ahaywood/0030-code…

👉🏻 Get Updates and Exclusive content at http://selfteach.me
💥 SelfTeach.me is a Zeal show: http://codingzeal.com

Content

0.799 -> in this video we're going to look at

2.56 -> code coverage

3.6 -> this is the last video in a multi-part

6.08 -> video series for building a react tab

8.08 -> component and then writing the test

9.76 -> to support it you can go back to the

11.599 -> very first video

13.04 -> to see how we built the component link

15.2 -> in the card above

16.72 -> and of course all the other videos in

18.4 -> this series will be listed in the

20.24 -> description below

26.88 -> if you're new to the self teach me

28.08 -> channel my name is amy dutton i'm a web

29.92 -> designer and developer

31.039 -> if you're just getting into this space

32.64 -> sometimes it's hard to know where to

34.16 -> start or what resources to trust

36.16 -> i'm going to help you level up and get

37.84 -> to where you want to be if this sounds

39.52 -> interesting to you

40.399 -> hit the subscribe button below alrighty

42.879 -> ready ready ready

44.239 -> ready okay this is pretty cool and will

46.239 -> allow you to enjoy the fact that

48.239 -> we've tested all the code in this little

50.48 -> app if you

51.52 -> jump over to our package.json file

55.36 -> let's add one more script here at the

57.84 -> bottom i'm going to add a comma

59.28 -> and then i'm going to say coverage

62.879 -> just collect coverage

66.159 -> give that a save and now within the

68.159 -> terminal we're going to run our new

69.84 -> script so i'm going to say

70.96 -> yarn run coverage hit enter this will

74.4 -> run all of our tests

75.68 -> and then it will look at our code to see

77.439 -> if everything has been covered and hide

79.28 -> this sidebar

80.08 -> and make this a little bit bigger and

82 -> awesome we have

83.119 -> 100 code coverage then just to make sure

86.159 -> this

86.479 -> wasn't a fluke i'm going to open

89.84 -> our tests within our defaults to the

93.04 -> first

93.6 -> tab content i'm going to change this to

96.72 -> only run that one test and give that a

99.28 -> save and i'm gonna hit the up

100.64 -> arrow within the terminal to run the

102.56 -> last command and hit enter

105.119 -> so now you should see some pink within

107.84 -> our chart

108.56 -> this is pretty cool because it will even

110.24 -> tell you what lines of our component

112.079 -> were not tested so if we open

114.079 -> up our tabs.js file

117.439 -> and go down to line 13 that's our

120.479 -> handleclick method

121.6 -> and yeah our test doesn't take into

123.84 -> account what happens when you click on a

125.92 -> tab if you jump down to

127.6 -> line 19 yeah this test doesn't account

130.239 -> for what happens when we pass in an

132.08 -> initial value

133.2 -> and we try and set an initial tab if we

135.44 -> jump down to line 40

137.04 -> just following this this is the code for

139.92 -> clicking on an

140.64 -> actual tab you have this handle click so

143.28 -> yeah i think this is pretty cool and

144.72 -> insightful i'm going to

145.84 -> remove our only from this test so that

148.48 -> everything is running and our app is

150.239 -> fully covered

151.28 -> i do want to do my due diligence and

153.12 -> explain a few things about code coverage

155.519 -> it is so gratifying to see that green

157.68 -> table especially after we spent so much

159.36 -> time writing all those tests but

161.44 -> the goal shouldn't necessarily be to

163.04 -> have 100 code coverage because there are

165.28 -> a few things

166.08 -> that code coverage doesn't account for

168.4 -> like it won't tell you when your code

170.4 -> works according to the business

172 -> requirements

172.8 -> it doesn't tell you that your code works

175.2 -> with all the other code in the

176.16 -> application

176.959 -> it also won't tell you if your

179.68 -> application can get in a bad state or

181.92 -> not

182.48 -> another problem is that every line of

185.44 -> test code contributes to that percentage

187.519 -> so

188 -> technically you could increase your

189.44 -> coverage just as easily by testing your

191.2 -> about page as you could your checkout

193.04 -> page and obviously

194.4 -> your checkout page test suite is far

196.959 -> more valuable than

198.159 -> the about test suite if that's even

200.64 -> needed

201.599 -> the biggest thing that test coverage

203.28 -> does is to help point out

204.64 -> edge cases that you're not accounting

206.56 -> for remember in our table it shows

209.12 -> line numbers for areas of our code that

211.36 -> we didn't have tests written for

213.28 -> we wrote the bulk of our code in a

214.799 -> previous video but you can find it all

216.56 -> on github

217.44 -> link in the description below feel free

219.12 -> to download it use it modify it whatever

221.519 -> it's yours

222.959 -> the idea behind this whole series came

225.12 -> out of a course that i'm working on that

226.48 -> builds a web application from start to

228.56 -> finish

229.12 -> these youtube videos have been really

230.959 -> fun to make as we build these

232.72 -> small one-off projects but i wanted to

234.879 -> do something that strings everything

236.56 -> together putting them into the context

238.239 -> of a big picture

239.439 -> if this is something that you think

240.799 -> you'd be interested in there's a link in

242.72 -> the description below

243.84 -> to join the waiting list and that will

245.519 -> get you more information

246.959 -> early access and any launch perks if you

250 -> like this video and want to see more

251.519 -> videos on web design and development be

253.36 -> sure to hit

254 -> the subscribe button below hit the bell

256 -> icon to receive notifications when new

257.919 -> videos are posted

259.28 -> until then keep coding

282.639 -> you

Source: https://www.youtube.com/watch?v=3R0UkXyS5us