1 00:00:00,868 --> 00:00:01,701 Stephen: In the last section, 2 00:00:01,701 --> 00:00:04,440 we threw down the three very core constructs 3 00:00:04,440 --> 00:00:06,000 for our testing set up here: 4 00:00:06,000 --> 00:00:08,643 describe, it, and expect. 5 00:00:09,600 --> 00:00:13,290 Remember, describe is used to group together similar tests, 6 00:00:13,290 --> 00:00:16,920 so since we have one test per file or per component, 7 00:00:16,920 --> 00:00:18,840 one test file per component, 8 00:00:18,840 --> 00:00:20,760 we use our top-level describe here, 9 00:00:20,760 --> 00:00:23,010 and I'll explain what I mean by top-level describe 10 00:00:23,010 --> 00:00:26,160 in a second, to say, "Hey, everything in this file, 11 00:00:26,160 --> 00:00:28,020 all the tests we're about to to write 12 00:00:28,020 --> 00:00:30,570 are about the component app." 13 00:00:30,570 --> 00:00:34,620 Next we use it to test a single attribute of the target. 14 00:00:34,620 --> 00:00:36,600 So we said our App component, 15 00:00:36,600 --> 00:00:38,700 there's one thing that we care about this component 16 00:00:38,700 --> 00:00:41,400 and we just care that it shows the correct text, 17 00:00:41,400 --> 00:00:44,857 so inside of it we will make an assertion that says, 18 00:00:44,857 --> 00:00:47,790 "I expect my component to have the correct text." 19 00:00:47,790 --> 00:00:50,100 Again, the string here is just used as guidance 20 00:00:50,100 --> 00:00:52,890 to someone who's reading our testing output. 21 00:00:52,890 --> 00:00:55,620 Finally, we brought on the keyword expect. 22 00:00:55,620 --> 00:00:59,520 Expect is used to test a very particular attribute 23 00:00:59,520 --> 00:01:01,200 about our target, and again, 24 00:01:01,200 --> 00:01:02,973 our target is the App component. 25 00:01:04,140 --> 00:01:07,320 Okay, so let's go ahead and turn these keywords 26 00:01:07,320 --> 00:01:08,400 into something actually usable, 27 00:01:08,400 --> 00:01:10,530 something we can actually run here. 28 00:01:10,530 --> 00:01:11,970 So the first thing I'm gonna do 29 00:01:11,970 --> 00:01:14,130 is I'm gonna throw a little bit of code in here, 30 00:01:14,130 --> 00:01:16,410 I'm gonna throw a second argument to describe. 31 00:01:16,410 --> 00:01:18,360 Let's go ahead and add the code first 32 00:01:18,360 --> 00:01:20,610 and then we'll talk about what's going on. 33 00:01:20,610 --> 00:01:22,830 So I'm gonna add in a second argument 34 00:01:22,830 --> 00:01:25,860 and it's gonna be a fat arrow function, like so, 35 00:01:25,860 --> 00:01:30,090 so open parens, fat arrow, curly braces, 36 00:01:30,090 --> 00:01:32,640 and then we'll put in our function body right here. 37 00:01:33,750 --> 00:01:37,920 Now, I'm gonna take everything from the it block on down, 38 00:01:37,920 --> 00:01:40,080 I'm gonna cut it, and I'm gonna put it 39 00:01:40,080 --> 00:01:43,860 inside of that function body, so now I've got describe, 40 00:01:43,860 --> 00:01:45,900 I'm describing the App component, 41 00:01:45,900 --> 00:01:47,670 and then as a second argument 42 00:01:47,670 --> 00:01:49,953 I'm passing a function in, okay? 43 00:01:51,150 --> 00:01:54,390 Let's go ahead and repeat this process one more time, 44 00:01:54,390 --> 00:01:56,670 but this time with the it block, 45 00:01:56,670 --> 00:01:59,790 so its first argument is gonna be a string 46 00:01:59,790 --> 00:02:02,490 and then the second argument, so comma, 47 00:02:02,490 --> 00:02:05,550 is gonna be another fat arrow function. 48 00:02:05,550 --> 00:02:08,070 I'm gonna open up the function body like so, 49 00:02:08,070 --> 00:02:10,710 and I'm gonna copy-paste, or cut and paste, 50 00:02:10,710 --> 00:02:13,923 the expect statement down here into the it block. 51 00:02:15,360 --> 00:02:17,250 And then I'm gonna do just a little bit of code cleanup 52 00:02:17,250 --> 00:02:19,380 but I'm gonna leave a lot of new lines in here 53 00:02:19,380 --> 00:02:21,840 just to show kinda grouping 54 00:02:21,840 --> 00:02:23,460 of all the different stuff that's going on. 55 00:02:23,460 --> 00:02:24,780 We'll come back through later on 56 00:02:24,780 --> 00:02:26,523 and remove these extra new lines. 57 00:02:28,140 --> 00:02:30,690 Okay, so what we did here is we just refactored 58 00:02:30,690 --> 00:02:32,700 our describe, it, and expect, 59 00:02:32,700 --> 00:02:36,150 to how we normally will write our specs, all the time. 60 00:02:36,150 --> 00:02:40,080 All of our specs are always gonna follow a syntax like this, 61 00:02:40,080 --> 00:02:43,050 describe takes the first argument of a string 62 00:02:43,050 --> 00:02:45,510 and the second argument of a function, 63 00:02:45,510 --> 00:02:48,480 and inside that function are all of the specs 64 00:02:48,480 --> 00:02:52,740 that are grouped with this described block of App. 65 00:02:52,740 --> 00:02:54,090 So inside of this function we're gonna have 66 00:02:54,090 --> 00:02:56,130 a bunch of it statements, 67 00:02:56,130 --> 00:02:57,570 all of them are gonna describe 68 00:02:57,570 --> 00:03:01,230 some specific behavior of App. 69 00:03:01,230 --> 00:03:04,200 So in this case we've got one it statement that says just, 70 00:03:04,200 --> 00:03:05,850 you know, we've said this several times now, 71 00:03:05,850 --> 00:03:07,770 it shows the correct text. 72 00:03:07,770 --> 00:03:10,110 Then we repeated the same process 73 00:03:10,110 --> 00:03:13,260 by passing in another function to it, 74 00:03:13,260 --> 00:03:17,340 and inside of this one we put our expect statement in here. 75 00:03:17,340 --> 00:03:19,170 So you might be asking, "Okay," like, "Sure, 76 00:03:19,170 --> 00:03:22,380 functions, we're putting some it calls 77 00:03:22,380 --> 00:03:24,870 inside of a describe block function," blah, blah, blah, 78 00:03:24,870 --> 00:03:25,703 you know, all this stuff. 79 00:03:25,703 --> 00:03:26,536 What's the purpose of this? 80 00:03:26,536 --> 00:03:28,050 Why are we doing this? 81 00:03:28,050 --> 00:03:30,630 And the answer to that is that this is a core part 82 00:03:30,630 --> 00:03:32,610 of how Mocha runs tests. 83 00:03:32,610 --> 00:03:34,800 So when Mocha first executes 84 00:03:34,800 --> 00:03:37,620 and runs this App test file right here, 85 00:03:37,620 --> 00:03:39,870 the tests are not immediately ran, 86 00:03:39,870 --> 00:03:42,720 so when this file gets parsed, it goes into Mocha, 87 00:03:42,720 --> 00:03:45,060 Mocha reads all the code in here, 88 00:03:45,060 --> 00:03:47,580 the code is not immediately executed, 89 00:03:47,580 --> 00:03:51,600 instead, Mocha takes record of all of the functions 90 00:03:51,600 --> 00:03:52,530 that we declared 91 00:03:52,530 --> 00:03:55,830 and passed into these describe and it blocks, 92 00:03:55,830 --> 00:03:57,480 and the purpose of that is that so Mocha 93 00:03:57,480 --> 00:04:01,320 can kind of cue these tests up to run in the future, 94 00:04:01,320 --> 00:04:03,660 and it's by doing this kind of queuing up 95 00:04:03,660 --> 00:04:05,580 that it can safely execute our code, 96 00:04:05,580 --> 00:04:07,170 which might be throwing, like, 97 00:04:07,170 --> 00:04:09,120 tremendous errors all the time, right? 98 00:04:09,120 --> 00:04:13,933 Let's say that in one of our it blocks we throw a new error. 99 00:04:15,330 --> 00:04:16,589 Now, in normal JavaScript, 100 00:04:16,589 --> 00:04:18,839 if we just kind of executed this new error, 101 00:04:18,839 --> 00:04:22,770 our entire testing suite would just crash from the get go, 102 00:04:22,770 --> 00:04:24,960 but because we wrapped it inside of a function, 103 00:04:24,960 --> 00:04:27,450 Mocha can safely execute this function right here 104 00:04:27,450 --> 00:04:28,980 and say, "Hey, if this function right here, 105 00:04:28,980 --> 00:04:30,930 if it throws an error, don't worry about it, 106 00:04:30,930 --> 00:04:33,900 I'm a testing suite, I expect it to maybe throw an error, 107 00:04:33,900 --> 00:04:35,760 and if it does, I can handle that, 108 00:04:35,760 --> 00:04:37,710 it just means the test failed." 109 00:04:37,710 --> 00:04:40,140 So again, the purpose of wrapping all of our specs 110 00:04:40,140 --> 00:04:42,570 with these functions right here are so that Mocha 111 00:04:42,570 --> 00:04:45,270 can safely execute all of our tests 112 00:04:45,270 --> 00:04:47,310 without worrying about some error being thrown 113 00:04:47,310 --> 00:04:48,720 by some, you know, junk code 114 00:04:48,720 --> 00:04:50,570 that we might have happened to write. 115 00:04:51,420 --> 00:04:54,600 Okay, so let's go back to our expect keyword here. 116 00:04:54,600 --> 00:04:56,940 So we've kind of fleshed out our describe statement, 117 00:04:56,940 --> 00:04:59,040 we've fleshed out our it statement, 118 00:04:59,040 --> 00:05:02,040 now we need to flesh out our expect statement. 119 00:05:02,040 --> 00:05:04,080 I'm gonna pull up a quick diagram 120 00:05:04,080 --> 00:05:06,270 just to kind of explain what we're about to do 121 00:05:06,270 --> 00:05:07,653 with the expect statement. 122 00:05:14,910 --> 00:05:16,470 Bear with me for one second. 123 00:05:16,470 --> 00:05:17,303 Here we go. 124 00:05:18,570 --> 00:05:20,070 Okay. 125 00:05:20,070 --> 00:05:23,220 So this is what I call the anatomy of an assertion 126 00:05:23,220 --> 00:05:26,100 or the anatomy of an expect statement. 127 00:05:26,100 --> 00:05:28,230 So again, the purpose of an expect statement 128 00:05:28,230 --> 00:05:31,980 is to make one very single declarative test 129 00:05:31,980 --> 00:05:35,403 about some target, in our case, the component. 130 00:05:36,720 --> 00:05:39,300 So the syntax of all these assertions 131 00:05:39,300 --> 00:05:41,610 that we're gonna write are gonna look very similar 132 00:05:41,610 --> 00:05:42,450 to this right here, 133 00:05:42,450 --> 00:05:45,090 there's just gonna be some very slight changes over time 134 00:05:45,090 --> 00:05:46,560 for different specs that we want to write, 135 00:05:46,560 --> 00:05:49,530 but in general, we're always gonna have very similar syntax 136 00:05:49,530 --> 00:05:51,510 to what we have right here. 137 00:05:51,510 --> 00:05:52,800 The purpose of this assertion 138 00:05:52,800 --> 00:05:54,120 or the syntax that we see here 139 00:05:54,120 --> 00:05:56,670 is to make something that can almost be read 140 00:05:56,670 --> 00:05:58,470 like plain English. 141 00:05:58,470 --> 00:06:00,000 So if we read this line of code, 142 00:06:00,000 --> 00:06:02,580 ignore the arrows and black text all over here, 143 00:06:02,580 --> 00:06:04,410 let's just read the red line of code, 144 00:06:04,410 --> 00:06:08,100 like, it's just a very simple sentence, 145 00:06:08,100 --> 00:06:13,100 we expect component to have class comment-box. 146 00:06:13,590 --> 00:06:15,150 So if we kinda interpret that 147 00:06:15,150 --> 00:06:16,710 as this very plain English, you know, 148 00:06:16,710 --> 00:06:17,940 let's forget that this is code, 149 00:06:17,940 --> 00:06:20,010 let's just kinda read this as English right now. 150 00:06:20,010 --> 00:06:22,560 I expect my component to have 151 00:06:22,560 --> 00:06:26,700 the CSS class comment-box, and that's it, 152 00:06:26,700 --> 00:06:28,410 that's all an assertion is doing. 153 00:06:28,410 --> 00:06:29,820 We use assertions like this 154 00:06:29,820 --> 00:06:34,440 to test very particular attributes of our target 155 00:06:34,440 --> 00:06:36,363 which, in this case, is component. 156 00:06:37,710 --> 00:06:38,970 So now that we have a better idea 157 00:06:38,970 --> 00:06:40,380 of what the expect statement is for, 158 00:06:40,380 --> 00:06:43,500 let's talk about all the individual parts of it. 159 00:06:43,500 --> 00:06:48,180 Expect is a function that returns an object, 160 00:06:48,180 --> 00:06:49,530 and you can see that it is an object 161 00:06:49,530 --> 00:06:50,760 because we're kinda chaining on 162 00:06:50,760 --> 00:06:52,410 these additional properties here. 163 00:06:52,410 --> 00:06:54,540 So again, expect is a function. 164 00:06:54,540 --> 00:06:58,200 We pass into expect the thing that we want to test, 165 00:06:58,200 --> 00:07:00,570 the thing that we want to make an assertion about, 166 00:07:00,570 --> 00:07:02,070 probably 90% of the time 167 00:07:02,070 --> 00:07:03,690 when we're testing React components, 168 00:07:03,690 --> 00:07:06,630 we're going to be testing the component itself. 169 00:07:06,630 --> 00:07:09,900 So vast majority of the time, the first argument here 170 00:07:09,900 --> 00:07:11,520 and the only argument that we'll see 171 00:07:11,520 --> 00:07:14,553 in our expect statements is going to be component. 172 00:07:16,110 --> 00:07:19,650 The second part of of an assertion is the matcher. 173 00:07:19,650 --> 00:07:21,780 This to.have.class right here, 174 00:07:21,780 --> 00:07:24,300 and this is what tells Mocha, like, 175 00:07:24,300 --> 00:07:27,030 essentially how we want this test to behave, 176 00:07:27,030 --> 00:07:28,410 what we want to test exactly. 177 00:07:28,410 --> 00:07:32,460 In this case we said, "I want this to have class," 178 00:07:32,460 --> 00:07:34,560 and then the thing, the value that we expect 179 00:07:34,560 --> 00:07:36,330 over here on the end. 180 00:07:36,330 --> 00:07:38,970 This matcher right here, this to.have.class 181 00:07:38,970 --> 00:07:42,120 is probably the most challenging part of testing 182 00:07:42,120 --> 00:07:43,980 'cause there are a tremendous number 183 00:07:43,980 --> 00:07:46,080 of different matchers out there in the world 184 00:07:46,080 --> 00:07:47,130 that we can make use of, 185 00:07:47,130 --> 00:07:49,020 and I've wired up several additional ones 186 00:07:49,020 --> 00:07:51,660 inside of our testing boilerplate here. 187 00:07:51,660 --> 00:07:54,300 As we start working on our first project, 188 00:07:54,300 --> 00:07:57,960 our first test, standalone feature, excuse me, 189 00:07:57,960 --> 00:08:00,480 we're going to look at some documentation and make sure 190 00:08:00,480 --> 00:08:01,680 that it's very clear to you 191 00:08:01,680 --> 00:08:03,450 where these matchers are coming from 192 00:08:03,450 --> 00:08:05,910 and what all the matchers that are available are, 193 00:08:05,910 --> 00:08:07,500 and how to get access to them. 194 00:08:07,500 --> 00:08:10,380 So if this part right here looks weird or confusing, 195 00:08:10,380 --> 00:08:11,850 don't worry, we're gonna delve into that 196 00:08:11,850 --> 00:08:13,323 in great, great detail. 197 00:08:14,250 --> 00:08:16,140 Finally at the end, this one is perhaps 198 00:08:16,140 --> 00:08:19,440 a little bit more expectable, the value that we expect. 199 00:08:19,440 --> 00:08:22,620 So in this kind of made-up example right here 200 00:08:22,620 --> 00:08:25,350 we're expecting our component to add the class, 201 00:08:25,350 --> 00:08:28,650 specifically the string comment-box. 202 00:08:28,650 --> 00:08:30,600 So behind the scenes 203 00:08:30,600 --> 00:08:33,690 expect is going to take this matcher right here, 204 00:08:33,690 --> 00:08:35,797 take this string and see, 205 00:08:35,797 --> 00:08:37,320 "Hey, does this component right here, 206 00:08:37,320 --> 00:08:39,240 does it have the class comment-box?" 207 00:08:39,240 --> 00:08:42,960 If it does, great, expect passed, everything's green, 208 00:08:42,960 --> 00:08:44,910 that means our code is good to go. 209 00:08:44,910 --> 00:08:48,360 If component does not have class comment-box, 210 00:08:48,360 --> 00:08:49,710 that means our test failed 211 00:08:49,710 --> 00:08:53,220 or we refer to it as being red, red means failed, 212 00:08:53,220 --> 00:08:56,433 and it means that our code is not working as intended, 213 00:08:57,648 --> 00:08:59,793 that would show up as a spec failure. 214 00:09:00,930 --> 00:09:04,800 Okay, so with this kind of idea of a matcher, 215 00:09:04,800 --> 00:09:08,103 let's go ahead and add our first matcher to our code, 216 00:09:09,330 --> 00:09:11,100 so we've got expect right here, 217 00:09:11,100 --> 00:09:12,630 we need to pass something into it, 218 00:09:12,630 --> 00:09:14,460 the thing that we want to test, 219 00:09:14,460 --> 00:09:18,360 so the thing that we wanna test is going to be component. 220 00:09:18,360 --> 00:09:20,820 Now, we haven't defined component yet, 221 00:09:20,820 --> 00:09:23,010 you'll see that we haven't used component anywhere else 222 00:09:23,010 --> 00:09:26,310 inside this file, so we are gonna have to define component, 223 00:09:26,310 --> 00:09:27,860 we'll do that in just a second. 224 00:09:28,890 --> 00:09:31,830 So remember, the thing that I cared about inside of my app, 225 00:09:31,830 --> 00:09:32,880 which is what we're testing, 226 00:09:32,880 --> 00:09:34,560 we're testing the App component, 227 00:09:34,560 --> 00:09:36,180 the only thing that I really cared about 228 00:09:36,180 --> 00:09:39,210 was that it had the appropriate text. 229 00:09:39,210 --> 00:09:41,100 Remember we said, "I want to make sure this thing 230 00:09:41,100 --> 00:09:43,050 is showing the correct text." 231 00:09:43,050 --> 00:09:45,090 So I'm gonna use a matcher here, and again, 232 00:09:45,090 --> 00:09:47,430 we're going to walk through a ton of different matchers, 233 00:09:47,430 --> 00:09:49,110 so this is just one that I'm pulling off 234 00:09:49,110 --> 00:09:51,060 at the top of my head here, so to speak, 235 00:09:51,060 --> 00:09:53,580 we'll talk about where these are all coming from later. 236 00:09:53,580 --> 00:09:58,053 I'm gonna say to.contain, 237 00:09:59,130 --> 00:10:01,950 and then the text that I expect it to contain, 238 00:10:01,950 --> 00:10:06,950 which in this case is, "React simple starter," like so. 239 00:10:08,640 --> 00:10:10,140 So again, this is something that we could read 240 00:10:10,140 --> 00:10:12,480 like plain English, from left to right. 241 00:10:12,480 --> 00:10:14,940 I expect my component 242 00:10:14,940 --> 00:10:19,647 to contain the text, "React simple starter." 243 00:10:20,520 --> 00:10:21,960 One thing I wanna point out here, 244 00:10:21,960 --> 00:10:25,590 make sure after the expect call right here, 245 00:10:25,590 --> 00:10:28,050 make sure you've got a dot between the two, 246 00:10:28,050 --> 00:10:32,740 so we should see expect component.two.contain, 247 00:10:33,750 --> 00:10:35,400 and then another function call, 248 00:10:35,400 --> 00:10:39,180 no dot between contain and the set of parens right here. 249 00:10:39,180 --> 00:10:42,060 This is a really common area to make small typos 250 00:10:42,060 --> 00:10:43,680 when you're getting started with writing tests 251 00:10:43,680 --> 00:10:45,270 so do make sure that you've got 252 00:10:45,270 --> 00:10:47,280 the correct number of dots in here. 253 00:10:47,280 --> 00:10:49,590 In general, the testing or the errors that you'll see 254 00:10:49,590 --> 00:10:51,030 if you make a mistake like this 255 00:10:51,030 --> 00:10:52,200 tend to be pretty straightforward. 256 00:10:52,200 --> 00:10:53,940 You'll see a error on the terminal 257 00:10:53,940 --> 00:10:54,877 and it'll say something like, 258 00:10:54,877 --> 00:10:57,717 "Unexpected token somewhere in here." 259 00:10:59,280 --> 00:11:02,010 Okay, so again, the last thing we need to do here 260 00:11:02,010 --> 00:11:06,480 is create our component, an instance of our App component. 261 00:11:06,480 --> 00:11:07,590 Now, as you might guess, 262 00:11:07,590 --> 00:11:10,530 at the very top here with this renderComponent helper, 263 00:11:10,530 --> 00:11:13,020 we're gonna use this to make our component. 264 00:11:13,020 --> 00:11:14,887 So I'm gonna put inside of the it block, 265 00:11:14,887 --> 00:11:19,887 I'm gonna say, "Create an instance of App," 266 00:11:21,957 --> 00:11:26,957 and so we'll say const component = renderComponent App. 267 00:11:28,530 --> 00:11:30,630 Now, what's going on here really comes down 268 00:11:30,630 --> 00:11:32,280 to how renderComponent works, 269 00:11:32,280 --> 00:11:34,530 and again, this is one of the helpers I set up for us, 270 00:11:34,530 --> 00:11:36,510 it's something that we're gonna come back to in the future 271 00:11:36,510 --> 00:11:39,210 and talk about exactly how it's working, but for right now, 272 00:11:39,210 --> 00:11:42,390 let's just kinda run with this renderComponent thing. 273 00:11:42,390 --> 00:11:45,060 All right, so I'm gonna save this file, 274 00:11:45,060 --> 00:11:47,010 I'm gonna flip back over to my terminal 275 00:11:48,270 --> 00:11:50,010 and I'm gonna run my testing command. 276 00:11:50,010 --> 00:11:52,380 So this is a command that's already been set up, 277 00:11:52,380 --> 00:11:53,490 you know, again, this is a part 278 00:11:53,490 --> 00:11:56,940 of the boilerplate package, and we're gonna talk exactly 279 00:11:56,940 --> 00:11:58,710 about how the command works again in the future. 280 00:11:58,710 --> 00:12:02,430 So let's go ahead and just run it, see our test run, 281 00:12:02,430 --> 00:12:04,470 and we're gonna expect it to pass. 282 00:12:04,470 --> 00:12:09,233 So I'm gonna run npm run test;watch. 283 00:12:14,580 --> 00:12:17,430 There's gonna be some output here as everything warms up. 284 00:12:20,430 --> 00:12:23,730 And then we see App shows the correct test, 285 00:12:23,730 --> 00:12:27,420 text, excuse me, and we have one test that is passing. 286 00:12:27,420 --> 00:12:28,260 Terrific. 287 00:12:28,260 --> 00:12:32,130 So that means that the spec that we just wrote is passing. 288 00:12:32,130 --> 00:12:35,100 Let's go ahead and continue the next section 289 00:12:35,100 --> 00:12:36,000 where we're going to walk 290 00:12:36,000 --> 00:12:37,860 through this kinda testing output right here, 291 00:12:37,860 --> 00:12:40,230 and we're also gonna see how we can make a spec fail. 292 00:12:40,230 --> 00:12:42,030 So I'll see you in the next section.