1 00:00:00,161 --> 00:00:01,470 Narrator: In the last section, 2 00:00:01,470 --> 00:00:03,268 we finished writing our first test 3 00:00:03,268 --> 00:00:08,268 by putting it in a describe, an it, and an expect statement. 4 00:00:09,300 --> 00:00:10,950 We then ran it at the terminal 5 00:00:10,950 --> 00:00:15,150 with the command NPM run test: watch 6 00:00:15,150 --> 00:00:17,880 and we saw some output automatically pop up here. 7 00:00:17,880 --> 00:00:19,994 It said app and it showed a checkbox 8 00:00:19,994 --> 00:00:24,510 and we saw a text that said shows the correct text. 9 00:00:24,510 --> 00:00:26,460 So the output that we have right here 10 00:00:26,460 --> 00:00:28,470 is the report that I was mentioning earlier. 11 00:00:28,470 --> 00:00:30,900 It's the report of all the specs that ran. 12 00:00:30,900 --> 00:00:33,000 And it also shows which tests ran. 13 00:00:33,000 --> 00:00:35,610 And if anywhere failing it would show which ones failed. 14 00:00:35,610 --> 00:00:37,050 And so now you can see the purpose 15 00:00:37,050 --> 00:00:39,810 of the text that we put on the describe 16 00:00:39,810 --> 00:00:41,850 and the it blocks. 17 00:00:41,850 --> 00:00:43,872 With the describe we had app 18 00:00:43,872 --> 00:00:47,850 and with it we had shows the correct text. 19 00:00:47,850 --> 00:00:50,550 And so you can very plainly see what the source 20 00:00:50,550 --> 00:00:52,320 of that text is from now. 21 00:00:52,320 --> 00:00:53,250 So if we wanted to, 22 00:00:53,250 --> 00:00:55,530 again, we can make this text anything we want 23 00:00:55,530 --> 00:00:58,113 it just needs to be something kind of reasonably clear 24 00:00:58,113 --> 00:01:01,380 so that if a spec fails and it said, 25 00:01:01,380 --> 00:01:04,458 you know say, "App shows the correct text was failing", 26 00:01:04,458 --> 00:01:06,960 we would wanna have a reasonable idea 27 00:01:06,960 --> 00:01:09,120 of where in our spec file that was occurring 28 00:01:09,120 --> 00:01:10,740 and we would wanna have a reasonable idea 29 00:01:10,740 --> 00:01:12,900 of exactly what logic was failing as well. 30 00:01:12,900 --> 00:01:15,180 So again, that string is just to help us 31 00:01:15,180 --> 00:01:16,013 with the reporting side. 32 00:01:16,013 --> 00:01:19,170 Let's see what happens when we make our spec fail. 33 00:01:19,170 --> 00:01:21,120 So there's two ways that we can make a spec fail. 34 00:01:21,120 --> 00:01:22,980 We can either change the assertion 35 00:01:22,980 --> 00:01:25,905 so we can expect some different text 36 00:01:25,905 --> 00:01:28,470 to be contained by our component, 37 00:01:28,470 --> 00:01:30,956 or we can flip over to the component itself 38 00:01:30,956 --> 00:01:32,719 and change the text here. 39 00:01:32,719 --> 00:01:37,200 Let's try each way really quickly just to see what happens. 40 00:01:37,200 --> 00:01:39,120 So in the first case, 41 00:01:39,120 --> 00:01:42,420 let's change simple to, how about complex. 42 00:01:42,420 --> 00:01:44,283 React, complex starter instead. 43 00:01:44,283 --> 00:01:46,293 So I'm gonna save this, 44 00:01:47,130 --> 00:01:48,900 and then over my terminal you'll see that 45 00:01:48,900 --> 00:01:50,770 my tests automatically rerun 46 00:01:52,830 --> 00:01:54,037 and they say very clearly, 47 00:01:54,037 --> 00:01:57,353 "Well, app is has red text, the spec was failing. 48 00:01:57,353 --> 00:02:01,322 One of our specs failed out of only one spec that we had." 49 00:02:01,322 --> 00:02:04,920 And then most helpfully we also got an assertion error 50 00:02:04,920 --> 00:02:07,020 about exactly what the failure was about. 51 00:02:07,020 --> 00:02:11,070 So, the assertion error expected some object right here. 52 00:02:11,070 --> 00:02:12,523 Who knows what it is really going on? 53 00:02:12,523 --> 00:02:14,936 To contain react simple starter. 54 00:02:14,936 --> 00:02:18,030 So the text that we see here helps us 55 00:02:18,030 --> 00:02:20,253 narrow down what the failure was caused by. 56 00:02:21,930 --> 00:02:26,610 Let's change this back to react simple starter and save it. 57 00:02:26,610 --> 00:02:30,210 Our specs automatically rerun and they're now green. 58 00:02:30,210 --> 00:02:32,760 Let's try going over to app test. 59 00:02:32,760 --> 00:02:35,430 And then on this side, I'm just gonna delete simple. 60 00:02:35,430 --> 00:02:38,460 So let's expect our component to contain the exact 61 00:02:38,460 --> 00:02:40,950 string react starter. 62 00:02:40,950 --> 00:02:44,880 I'm gonna save and we're back into a failing state again. 63 00:02:44,880 --> 00:02:49,233 We expected our component to contain react starter. 64 00:02:51,840 --> 00:02:54,718 Let's go back to simple and we're green again. 65 00:02:54,718 --> 00:02:58,260 So what's really fantastic about this kind of live reloading 66 00:02:58,260 --> 00:03:00,392 or live running of our specs is we can just 67 00:03:00,392 --> 00:03:03,330 be over in our code editor, writing our code, 68 00:03:03,330 --> 00:03:04,688 not really sweating what's going on, 69 00:03:04,688 --> 00:03:07,260 and just save our document from time to time 70 00:03:07,260 --> 00:03:08,610 as we're writing code. 71 00:03:08,610 --> 00:03:10,982 And then our specs are going to automatically rerun. 72 00:03:10,982 --> 00:03:12,780 They run very quickly. 73 00:03:12,780 --> 00:03:15,163 As you can see, in this case it was just six milliseconds. 74 00:03:15,163 --> 00:03:18,127 And so our specs rerun and we'll know, 75 00:03:18,127 --> 00:03:19,590 "Hey, did we just break something 76 00:03:19,590 --> 00:03:20,940 or is everything still working? 77 00:03:20,940 --> 00:03:23,910 Are we fixing specs or are we breaking specs?" 78 00:03:23,910 --> 00:03:26,190 So getting this instant feedback is very helpful 79 00:03:26,190 --> 00:03:27,879 as we go through development. 80 00:03:27,879 --> 00:03:32,151 Okay, so we've written out one very simple spec here. 81 00:03:32,151 --> 00:03:35,340 We have at least a reasonable idea of what's going 82 00:03:35,340 --> 00:03:38,269 on with describe, it, and expect. 83 00:03:38,269 --> 00:03:41,250 We haven't really spoken about the import statements 84 00:03:41,250 --> 00:03:42,540 at the top too much, but again, 85 00:03:42,540 --> 00:03:44,100 we'll come back to those later on. 86 00:03:44,100 --> 00:03:45,562 I think the best thing that we can do now 87 00:03:45,562 --> 00:03:49,455 is figure out a feature that we can build 88 00:03:49,455 --> 00:03:52,560 where we'll practice test driven development. 89 00:03:52,560 --> 00:03:55,560 So we will plan out a feature, we'll write specs for it, 90 00:03:55,560 --> 00:03:57,848 and then we'll go build the actual feature 91 00:03:57,848 --> 00:04:01,086 and let the specs kind of guide the work that we're doing. 92 00:04:01,086 --> 00:04:03,540 So let's go ahead and get started on that 93 00:04:03,540 --> 00:04:04,623 in the next section.