1 00:00:00,780 --> 00:00:01,613 Narrator: In the last section, 2 00:00:01,613 --> 00:00:03,240 we installed our boilerplate package 3 00:00:03,240 --> 00:00:05,700 and installed our dependencies for it as well. 4 00:00:05,700 --> 00:00:07,530 Now this boilerplate package already has 5 00:00:07,530 --> 00:00:10,050 an entire development server and tooling set up 6 00:00:10,050 --> 00:00:12,840 with Webpack already set up for us. 7 00:00:12,840 --> 00:00:13,673 Let's go ahead 8 00:00:13,673 --> 00:00:15,450 and get that development server running 9 00:00:15,450 --> 00:00:17,130 by just entering at the terminal 10 00:00:17,130 --> 00:00:21,540 inside of our project directory, "npm run start." 11 00:00:21,540 --> 00:00:23,580 So this is going to start up the dev server 12 00:00:23,580 --> 00:00:26,790 on "localhost:8080." 13 00:00:26,790 --> 00:00:28,380 In just a second, here we go. 14 00:00:28,380 --> 00:00:30,210 Let's see, so "bundle is now VALID" 15 00:00:30,210 --> 00:00:31,530 that means we're all good to go. 16 00:00:31,530 --> 00:00:34,230 We can go check out the development server. 17 00:00:34,230 --> 00:00:37,023 And so in my URL right here, I'm at "localhost:8080" 18 00:00:38,310 --> 00:00:42,600 and I see the text very plainly, "React simple starter." 19 00:00:42,600 --> 00:00:44,280 Let's go through the boilerplate package 20 00:00:44,280 --> 00:00:47,070 and find out where that is defined. 21 00:00:47,070 --> 00:00:49,140 So in my source directory, I'm going to go 22 00:00:49,140 --> 00:00:53,250 into my components folder and then open up "app.js" 23 00:00:53,250 --> 00:00:55,260 and you'll see I've got a div that I'm rendering 24 00:00:55,260 --> 00:00:56,820 with "React simple starter." 25 00:00:56,820 --> 00:00:58,140 So, nothing too crazy here, 26 00:00:58,140 --> 00:01:00,060 just a simple "App" component 27 00:01:00,060 --> 00:01:01,983 that returns a div with some text. 28 00:01:02,940 --> 00:01:05,280 So again, I'm going to make the assertion here 29 00:01:05,280 --> 00:01:07,110 that learning testing is a lot easier 30 00:01:07,110 --> 00:01:09,270 when we just kind of dive into it first 31 00:01:09,270 --> 00:01:11,880 and then kind of figure out all the rules 32 00:01:11,880 --> 00:01:14,130 and all the kind of whatnot, all the different concepts 33 00:01:14,130 --> 00:01:16,470 about testing over time. 34 00:01:16,470 --> 00:01:17,940 So with that in mind, we're going to go ahead 35 00:01:17,940 --> 00:01:21,570 and write our first test right now inside of this section. 36 00:01:21,570 --> 00:01:23,940 Let's open up inside of our test directory, 37 00:01:23,940 --> 00:01:28,200 components folder, "app_test." 38 00:01:28,200 --> 00:01:30,930 Now you'll see that there's already a bunch of code in here. 39 00:01:30,930 --> 00:01:32,640 I'm a big fan of never writing code 40 00:01:32,640 --> 00:01:34,710 that you don't already understand what's going on. 41 00:01:34,710 --> 00:01:37,140 So I'm going to highlight everything that's in here 42 00:01:37,140 --> 00:01:38,370 and I'm just going to delete it. 43 00:01:38,370 --> 00:01:40,050 Let's write all this stuff from scratch, 44 00:01:40,050 --> 00:01:42,660 make sure we've got a good idea of what's going on first, 45 00:01:42,660 --> 00:01:43,845 and then we'll go ahead 46 00:01:43,845 --> 00:01:46,773 and worry about copy pasting code in the future. 47 00:01:48,090 --> 00:01:50,460 Okay, so inside of this file right here, 48 00:01:50,460 --> 00:01:52,050 you might be able to divine 49 00:01:52,050 --> 00:01:54,330 from the name of the file, "app_test," 50 00:01:54,330 --> 00:01:55,920 that the purpose of this file 51 00:01:55,920 --> 00:01:59,640 is to test solely the component app. 52 00:01:59,640 --> 00:02:03,660 So right now we are creating a react component called "App" 53 00:02:03,660 --> 00:02:06,067 and it has a div inside of it with the text, 54 00:02:06,067 --> 00:02:08,039 "React simple starter." 55 00:02:08,039 --> 00:02:09,449 So whenever we go to write some tests 56 00:02:09,449 --> 00:02:11,910 we always ask ourselves, what is the behavior 57 00:02:11,910 --> 00:02:13,860 in this component that I want to test? 58 00:02:13,860 --> 00:02:15,180 What do I really care about this thing? 59 00:02:15,180 --> 00:02:16,050 What do I want to make sure that 60 00:02:16,050 --> 00:02:18,600 when another engineer comes into my component 61 00:02:18,600 --> 00:02:19,560 or my application 62 00:02:19,560 --> 00:02:21,960 and starts, you know, fiddling around with some stuff, 63 00:02:21,960 --> 00:02:25,350 maybe they change the div to a "span" 64 00:02:25,350 --> 00:02:26,640 or something like that. 65 00:02:26,640 --> 00:02:30,930 What I really care about knowing that they're not breaking. 66 00:02:30,930 --> 00:02:32,790 So for this very simple example right here, 67 00:02:32,790 --> 00:02:34,020 for this very simple div, 68 00:02:34,020 --> 00:02:35,993 I'm going to say the only thing that I really care about 69 00:02:35,993 --> 00:02:39,667 is making sure that my component shows the text 70 00:02:39,667 --> 00:02:41,820 "React simple starter." 71 00:02:41,820 --> 00:02:43,110 That's all I really care about. 72 00:02:43,110 --> 00:02:45,461 So we're going to write one test exactly one, 73 00:02:45,461 --> 00:02:46,995 and it's just going to assert 74 00:02:46,995 --> 00:02:49,417 that our component has the text 75 00:02:49,417 --> 00:02:51,747 "React simple starter." 76 00:02:53,100 --> 00:02:54,360 And we're going to write that test 77 00:02:54,360 --> 00:02:55,710 inside of the test file 78 00:02:55,710 --> 00:02:57,600 that corresponds to our app component, 79 00:02:57,600 --> 00:02:59,360 which is "app_test." 80 00:03:01,560 --> 00:03:03,870 Okay, so let's give this a go. 81 00:03:03,870 --> 00:03:06,390 Now, as you might imagine, I've already done a lot of setup 82 00:03:06,390 --> 00:03:09,180 inside of this testing repo, inside of specifically 83 00:03:09,180 --> 00:03:10,860 this test helper file right here. 84 00:03:10,860 --> 00:03:12,750 So we're going to import a couple of helpers 85 00:03:12,750 --> 00:03:15,870 out of that that are going to make our life a lot easier. 86 00:03:15,870 --> 00:03:18,480 But again, I want to stress here that we're going to go back 87 00:03:18,480 --> 00:03:21,270 and rebuild that test helper file later on 88 00:03:21,270 --> 00:03:24,660 so you know exactly what's going on inside of there as well. 89 00:03:24,660 --> 00:03:26,400 So with that in mind, let's make use of that 90 00:03:26,400 --> 00:03:27,810 test helper file. 91 00:03:27,810 --> 00:03:29,580 We're going to import two helpers 92 00:03:29,580 --> 00:03:31,230 off of that test helper file. 93 00:03:31,230 --> 00:03:35,940 So at the very top, we'll import "renderComponent" 94 00:03:35,940 --> 00:03:38,070 and "expect" 95 00:03:38,070 --> 00:03:42,060 from up one directory, test helper. 96 00:03:42,060 --> 00:03:44,777 Up one directory, "test_helper." 97 00:03:44,777 --> 00:03:46,290 (keys clicking) 98 00:03:46,290 --> 00:03:48,660 We're also going to import the component 99 00:03:48,660 --> 00:03:51,690 that we want to test, which is app in this case. 100 00:03:51,690 --> 00:03:55,260 So we're going to go up two directories into source, 101 00:03:55,260 --> 00:03:57,840 into components, and then get app. 102 00:03:57,840 --> 00:04:00,450 So we'll "import App from" 103 00:04:00,450 --> 00:04:04,607 up two directories, into source, into "components," 104 00:04:04,607 --> 00:04:05,707 (keys clicking) 105 00:04:05,707 --> 00:04:07,590 "app." Very good. 106 00:04:07,590 --> 00:04:09,990 So now this is our "App" class right here, 107 00:04:09,990 --> 00:04:12,180 our very simple react component, 108 00:04:12,180 --> 00:04:14,010 and it's the thing that we actually want to test here. 109 00:04:14,010 --> 00:04:15,390 That's what we want to make an assertion about. 110 00:04:15,390 --> 00:04:18,243 We want to say this is behaving the way that I expect. 111 00:04:19,861 --> 00:04:24,090 Let's go ahead and put down three simple keywords 112 00:04:24,090 --> 00:04:26,940 in this file that are going to form the absolute backbone 113 00:04:26,940 --> 00:04:29,130 or root of every test that we write in the future. 114 00:04:29,130 --> 00:04:31,080 So these are the really important keywords 115 00:04:31,080 --> 00:04:32,880 that we want to focus on right now. 116 00:04:32,880 --> 00:04:33,997 I'm going to write out 117 00:04:33,997 --> 00:04:37,710 "describe," "it," and "expect." 118 00:04:37,710 --> 00:04:39,060 I'm just going to write them out, 119 00:04:39,060 --> 00:04:40,510 nothing too crazy right here. 120 00:04:41,640 --> 00:04:42,510 Let's go ahead and put 121 00:04:42,510 --> 00:04:43,830 a little bit of comments in here 122 00:04:43,830 --> 00:04:46,050 to describe kind of what we want to do 123 00:04:46,050 --> 00:04:46,950 with each of these keywords 124 00:04:46,950 --> 00:04:49,020 or what the purpose of each of them is. 125 00:04:49,020 --> 00:04:50,130 So I'm going to put a comment down, 126 00:04:50,130 --> 00:04:52,327 right above "describe," and I'm going to say 127 00:04:52,327 --> 00:04:57,300 "Use describe to group together similar tests." 128 00:04:57,300 --> 00:04:58,380 That's what "describe" does, 129 00:04:58,380 --> 00:05:01,620 we "use describe to group together similar tests." 130 00:05:01,620 --> 00:05:05,550 So in this case, since we're testing the "App" component, 131 00:05:05,550 --> 00:05:07,530 I'm going to say that we are describing 132 00:05:07,530 --> 00:05:09,567 something about "App." 133 00:05:10,560 --> 00:05:12,900 And I'm just going to pass in "App" as a string here, 134 00:05:12,900 --> 00:05:13,980 not the whole component, 135 00:05:13,980 --> 00:05:15,570 just a string. 136 00:05:15,570 --> 00:05:17,730 The string that we pass to "describe" right here, 137 00:05:17,730 --> 00:05:20,100 the only purpose of it is for our report 138 00:05:20,100 --> 00:05:20,970 when we run our tests. 139 00:05:20,970 --> 00:05:23,010 So when the tests run and they execute, 140 00:05:23,010 --> 00:05:25,290 and let's say they all pass or they all fail, 141 00:05:25,290 --> 00:05:28,080 we're going to get a report back from our testing setup 142 00:05:28,080 --> 00:05:29,160 and it's going to say 143 00:05:29,160 --> 00:05:32,370 okay, all the tests inside of this "App" section passed 144 00:05:32,370 --> 00:05:33,810 or maybe some failed. 145 00:05:33,810 --> 00:05:36,030 And it's really just a tool to help you narrow down 146 00:05:36,030 --> 00:05:38,340 what tests are doing what. 147 00:05:38,340 --> 00:05:40,620 The string that we use here is nothing special. 148 00:05:40,620 --> 00:05:41,580 We can put "App," 149 00:05:41,580 --> 00:05:43,440 we can put "App Component," 150 00:05:43,440 --> 00:05:44,617 we can put 151 00:05:44,617 --> 00:05:48,450 "Test the App Component." 152 00:05:48,450 --> 00:05:49,283 It doesn't matter. 153 00:05:49,283 --> 00:05:51,060 It's just a string that we're going to use 154 00:05:51,060 --> 00:05:52,680 to interpret the input 155 00:05:52,680 --> 00:05:55,560 or the output that's coming from our report. 156 00:05:55,560 --> 00:05:59,190 In practice, I love keeping our top level "describe" here, 157 00:05:59,190 --> 00:06:01,410 just giving it the name of the component that we're testing. 158 00:06:01,410 --> 00:06:04,413 So in this case, just very simply, "App." That's it. 159 00:06:06,120 --> 00:06:09,300 Okay, so we've got a comment on "describe", 160 00:06:09,300 --> 00:06:11,130 you know, we've kind of got a reasonable idea. 161 00:06:11,130 --> 00:06:13,380 We use it "to group similar tests together." 162 00:06:13,380 --> 00:06:14,730 Who knows how we use it 163 00:06:14,730 --> 00:06:16,200 and we'll figure that out in a second. 164 00:06:16,200 --> 00:06:19,560 But let's move on to the second structure here, "it." 165 00:06:19,560 --> 00:06:21,210 I'm going to put another comment here 166 00:06:21,210 --> 00:06:24,450 and we're going to say, "Use it," 167 00:06:24,450 --> 00:06:26,520 let's put these in quotes by the way, 168 00:06:26,520 --> 00:06:27,353 there we go, 169 00:06:28,777 --> 00:06:33,570 "to test a single attribute of a target." 170 00:06:36,000 --> 00:06:40,200 So we use "it" to group one single test. 171 00:06:40,200 --> 00:06:42,780 It says, I'm testing blah, blah, blah. 172 00:06:42,780 --> 00:06:44,280 I'm testing something very specific. 173 00:06:44,280 --> 00:06:48,450 We say, here is exactly what I'm testing about "App." 174 00:06:48,450 --> 00:06:50,220 So in our case, we said for "App," 175 00:06:50,220 --> 00:06:51,720 all we really want to do is make sure 176 00:06:51,720 --> 00:06:54,330 that it has the text "React simple starter" 177 00:06:54,330 --> 00:06:55,620 inside of it, right? 178 00:06:55,620 --> 00:06:57,450 All we really care about 179 00:06:57,450 --> 00:07:00,480 is that it shows the text "React simple starter." 180 00:07:00,480 --> 00:07:02,820 So inside of my "it," I'm going to add a string 181 00:07:02,820 --> 00:07:05,220 that simply says "it('shows the correct text')." 182 00:07:07,680 --> 00:07:08,910 Again, this string right here 183 00:07:08,910 --> 00:07:11,190 is only used for the report 184 00:07:11,190 --> 00:07:12,930 that gets generated when we run our tests. 185 00:07:12,930 --> 00:07:15,600 It's not used to figure out what to run 186 00:07:15,600 --> 00:07:17,370 or how to run it or anything like that. 187 00:07:17,370 --> 00:07:20,430 It's solely direction to us, the developers, 188 00:07:20,430 --> 00:07:23,313 on what this little block is going to test right here. 189 00:07:25,470 --> 00:07:28,380 Okay, so still, you know we kind of have a reasonable idea 190 00:07:28,380 --> 00:07:29,640 of what "it" might do, 191 00:07:29,640 --> 00:07:32,010 still no idea how to actually use it in practice, 192 00:07:32,010 --> 00:07:33,727 no problem. Let's go onto the last one, 193 00:07:33,727 --> 00:07:34,770 "expect." 194 00:07:34,770 --> 00:07:35,670 We'll figure out what's going on 195 00:07:35,670 --> 00:07:38,280 with this "expect," we'll take a quick short break, 196 00:07:38,280 --> 00:07:39,660 and then we'll come back and finish up 197 00:07:39,660 --> 00:07:41,960 all of our specs here for our first component. 198 00:07:43,440 --> 00:07:44,827 So "expect" is used. 199 00:07:44,827 --> 00:07:49,827 "Use 'expect' to make an 'assertion' about a target." 200 00:07:51,540 --> 00:07:52,470 And when I say "target" here, 201 00:07:52,470 --> 00:07:54,930 I'm talking about a thing that we're testing, 202 00:07:54,930 --> 00:07:57,150 we are inspecting this "App" component 203 00:07:57,150 --> 00:07:57,983 when we render. 204 00:07:57,983 --> 00:07:59,490 So the "App" component is kind of, 205 00:07:59,490 --> 00:08:02,043 we kind of consider it to be our target of sorts. 206 00:08:03,360 --> 00:08:05,700 The other kind of crazy word in here is "assertion." 207 00:08:05,700 --> 00:08:07,410 And so when we use the word "assertion," 208 00:08:07,410 --> 00:08:11,813 we're saying I want to have a reasonable belief 209 00:08:12,780 --> 00:08:15,900 that some very specific fact about my target is true. 210 00:08:15,900 --> 00:08:18,630 So in this case, I might "expect" 211 00:08:18,630 --> 00:08:22,590 that my component has the text "React simple starter" 212 00:08:22,590 --> 00:08:25,410 or was it, yes, "React simple starter". 213 00:08:25,410 --> 00:08:28,410 So we use "expect" to write that very fine-grained, 214 00:08:28,410 --> 00:08:32,253 very simple, very direct assertion about our target. 215 00:08:33,900 --> 00:08:37,267 Okay so again, these are the three very core units, 216 00:08:37,267 --> 00:08:39,900 "describe," "it," and "expect" that we're going to use 217 00:08:39,900 --> 00:08:41,730 throughout all of our tests. 218 00:08:41,730 --> 00:08:43,260 Now, if you're already familiar with testing, 219 00:08:43,260 --> 00:08:47,280 with say, Mocha or Jasmine or Jest, 220 00:08:47,280 --> 00:08:48,990 anything like that out there, 221 00:08:48,990 --> 00:08:51,900 you'll find that from testing framework to testing framework 222 00:08:51,900 --> 00:08:53,977 they all carry these similar terms, 223 00:08:53,977 --> 00:08:56,460 "describe," "it," and "expect", 224 00:08:56,460 --> 00:08:58,020 sometimes "expect" might be should 225 00:08:58,020 --> 00:09:00,930 or you know, slightly different syntax, not a big deal. 226 00:09:00,930 --> 00:09:03,720 But the point is that we're making use of Mocha here. 227 00:09:03,720 --> 00:09:04,920 But if you decide later on 228 00:09:04,920 --> 00:09:06,990 that you want to use a different testing framework 229 00:09:06,990 --> 00:09:10,170 like let's say Jasmine or Jest, 230 00:09:10,170 --> 00:09:12,540 all of the topics that we're going to talk about here, 231 00:09:12,540 --> 00:09:14,850 every last concept is going to carry over 232 00:09:14,850 --> 00:09:17,250 to these other testing frameworks one for one. 233 00:09:17,250 --> 00:09:19,500 Every single testing framework is set up in 234 00:09:19,500 --> 00:09:23,490 roughly the same fashion and there's only a very small, 235 00:09:23,490 --> 00:09:25,410 very slight differences between each of them. 236 00:09:25,410 --> 00:09:27,870 So it's kind of a situation where you just learn one 237 00:09:27,870 --> 00:09:29,730 and that knowledge tends to carry over 238 00:09:29,730 --> 00:09:32,130 to other testing frameworks as well. 239 00:09:32,130 --> 00:09:34,350 I just want to throw that in as a quick aside. 240 00:09:34,350 --> 00:09:36,630 Okay, so let's go ahead and take a short break, 241 00:09:36,630 --> 00:09:39,003 come back and we'll wrap our tests up here.