1 00:00:00,900 --> 00:00:01,733 Instructor: In the last section 2 00:00:01,733 --> 00:00:03,990 we added another spec to app, 3 00:00:03,990 --> 00:00:08,550 where we just expected app to be showing a correct child. 4 00:00:08,550 --> 00:00:11,850 We made that assertion by finding an HTML element 5 00:00:11,850 --> 00:00:15,663 that specifically had the class comment dash box, 6 00:00:16,800 --> 00:00:19,350 again, this was a point where we were really testing 7 00:00:19,350 --> 00:00:22,530 to make sure that the HTML that was generated was correct, 8 00:00:22,530 --> 00:00:25,500 and not necessarily testing that the render method 9 00:00:25,500 --> 00:00:29,670 returns an instance of a comment box component. 10 00:00:29,670 --> 00:00:32,130 So, this is a pretty flexible spec, 11 00:00:32,130 --> 00:00:33,960 and if people wanna change it out in the future, 12 00:00:33,960 --> 00:00:35,850 or change out the implementation, 13 00:00:35,850 --> 00:00:37,353 it's pretty darn easy to do. 14 00:00:38,520 --> 00:00:42,540 Let's continue by working on our text area right here. 15 00:00:42,540 --> 00:00:44,460 So, I'm gonna say that we're gonna add 16 00:00:44,460 --> 00:00:48,450 in an additional requirement for our comment box here, 17 00:00:48,450 --> 00:00:51,330 we're gonna say that when a user enters a comment 18 00:00:51,330 --> 00:00:53,970 and then submits it, we should clear out 19 00:00:53,970 --> 00:00:57,480 all the existing text inside of the text area as well. 20 00:00:57,480 --> 00:01:01,110 Okay so, two steps here, user enters some text, 21 00:01:01,110 --> 00:01:03,630 we need to handle that, and then when they submit it 22 00:01:03,630 --> 00:01:06,420 we need to clear the text area out. 23 00:01:06,420 --> 00:01:07,950 So let's go ahead and, first, 24 00:01:07,950 --> 00:01:09,510 write some specs around this, 25 00:01:09,510 --> 00:01:11,493 and then we'll do the implementation. 26 00:01:14,160 --> 00:01:18,030 We'll do our two it blocks, so we'll say it, 27 00:01:18,030 --> 00:01:21,003 shows text that is entered. 28 00:01:23,580 --> 00:01:25,860 And again, you might be asking yourself, 29 00:01:25,860 --> 00:01:27,720 well, why are we testing like, 30 00:01:27,720 --> 00:01:30,270 just that a text area works the way that it should work? 31 00:01:30,270 --> 00:01:31,980 And I'll show you exactly why we're gonna do that 32 00:01:31,980 --> 00:01:33,480 in a minute. 33 00:01:33,480 --> 00:01:35,930 The next test that we're gonna write is gonna be, 34 00:01:36,810 --> 00:01:40,803 when submitted, clears the input. 35 00:01:42,630 --> 00:01:43,710 And so, there's something I wanna kind of, 36 00:01:43,710 --> 00:01:45,750 point your attention to here. 37 00:01:45,750 --> 00:01:50,190 We have three specs up here, three existing ones, 38 00:01:50,190 --> 00:01:52,710 that are kind of assertions about the general behavior, 39 00:01:52,710 --> 00:01:54,840 or just, you know, very low level characteristics 40 00:01:54,840 --> 00:01:57,150 of the component, and now we just wrote 41 00:01:57,150 --> 00:02:00,690 an additional two specs that are very closely related, 42 00:02:00,690 --> 00:02:03,690 and might even share some of the same setup. 43 00:02:03,690 --> 00:02:05,310 So, whenever we have it statements 44 00:02:05,310 --> 00:02:07,470 that are very closely related, and we wanna show 45 00:02:07,470 --> 00:02:09,300 to someone who's reading this in the future, 46 00:02:09,300 --> 00:02:12,030 or even ourselves, that, hey, these two specs 47 00:02:12,030 --> 00:02:14,550 are very closely related, we have the ability 48 00:02:14,550 --> 00:02:18,000 to nest another describe block in here, 49 00:02:18,000 --> 00:02:19,950 so let's see what that might look like. 50 00:02:19,950 --> 00:02:24,950 We're gonna say, describe, entering some text, 51 00:02:26,130 --> 00:02:28,130 and then we'll put in our function call, 52 00:02:29,490 --> 00:02:32,070 or our fat arrow function, excuse me, 53 00:02:32,070 --> 00:02:35,070 and then we're going to cut and paste 54 00:02:35,070 --> 00:02:37,293 the two it blocks inside of that. 55 00:02:39,690 --> 00:02:43,410 So, functionally, there's no difference here whatsoever yet. 56 00:02:43,410 --> 00:02:46,950 We have not changed how the tests are ran at all. 57 00:02:46,950 --> 00:02:48,390 All we've done is we've said, 58 00:02:48,390 --> 00:02:50,910 hey, the two specs that are about to follow here, 59 00:02:50,910 --> 00:02:52,410 that are inside this describe, 60 00:02:52,410 --> 00:02:55,650 are concerned with entering some text. 61 00:02:55,650 --> 00:02:58,410 So now that we're saying specifically entering some text, 62 00:02:58,410 --> 00:03:01,230 we can update the two its here. 63 00:03:01,230 --> 00:03:04,170 So, instead of showing entering some text, 64 00:03:04,170 --> 00:03:05,970 it shows text that is entered, 65 00:03:05,970 --> 00:03:08,400 which is kind of a tongue twister of sorts. 66 00:03:08,400 --> 00:03:13,110 We might just say, shows that text in the text area. 67 00:03:15,540 --> 00:03:17,220 Again, the only reason that we're adding this 68 00:03:17,220 --> 00:03:20,280 describe here, is just to indicate to other engineers 69 00:03:20,280 --> 00:03:23,973 that these two specs are very closely related. 70 00:03:26,430 --> 00:03:29,340 Okay, so let's think about the two expectations 71 00:03:29,340 --> 00:03:31,260 we're gonna write for each of these. 72 00:03:31,260 --> 00:03:33,150 In the first case, we want to say, 73 00:03:33,150 --> 00:03:34,980 hey, when something gets entered here, 74 00:03:34,980 --> 00:03:37,320 we wanna make sure that that text area 75 00:03:37,320 --> 00:03:40,260 has the input that we care about, 76 00:03:40,260 --> 00:03:41,520 and then, on the second case, 77 00:03:41,520 --> 00:03:45,243 when a user submits this thing, the text gets cleared out. 78 00:03:46,200 --> 00:03:48,750 So, we're definitely going to have to do some setup 79 00:03:48,750 --> 00:03:51,480 that is common to both of these tests right here. 80 00:03:51,480 --> 00:03:54,780 In both cases, we want to, somehow, render the component 81 00:03:54,780 --> 00:03:56,700 and make sure that there's some default, 82 00:03:56,700 --> 00:03:58,533 or dummy, text inside of there. 83 00:03:59,400 --> 00:04:02,310 So, luckily, we've already set up a before each 84 00:04:02,310 --> 00:04:05,730 at the top that's rendered the component for us. 85 00:04:05,730 --> 00:04:09,630 So, even though the before each up here is outside 86 00:04:09,630 --> 00:04:14,160 of this describe, before each is our additive in nature. 87 00:04:14,160 --> 00:04:18,630 So, if we have a describe here and a before each up top, 88 00:04:18,630 --> 00:04:21,089 this before each is still gonna run 89 00:04:21,089 --> 00:04:23,673 before our it statement down here. 90 00:04:24,840 --> 00:04:28,290 We can also add as many before each's as we want, 91 00:04:28,290 --> 00:04:32,913 so we can add another before each inside of this describe, 92 00:04:35,760 --> 00:04:39,240 like so, that will do some additional setup 93 00:04:39,240 --> 00:04:41,310 for our component that is only gonna 94 00:04:41,310 --> 00:04:44,340 be executed inside of this describe. 95 00:04:44,340 --> 00:04:46,320 So let's, kinda, break this down a little bit, 96 00:04:46,320 --> 00:04:47,880 'cause I know there's a lot of code on the screen, 97 00:04:47,880 --> 00:04:50,040 and it's probably getting a little bit confusing. 98 00:04:50,040 --> 00:04:52,890 Let's, kinda, think through the order of operations here. 99 00:04:53,760 --> 00:04:55,680 When Mocha first loads this file, 100 00:04:55,680 --> 00:04:57,930 it's gonna run everything inside of here, 101 00:04:57,930 --> 00:04:59,070 it's gonna load up these specs, 102 00:04:59,070 --> 00:05:00,603 kinda cue them up to be ran, 103 00:05:01,950 --> 00:05:06,513 then, it's gonna say, okay, time to run the first it. 104 00:05:07,350 --> 00:05:11,550 We'll run this before each, and then we'll run the it. 105 00:05:11,550 --> 00:05:15,930 We'll run this before each, and we run the next it. 106 00:05:15,930 --> 00:05:19,380 We run before each, and then the third one. 107 00:05:19,380 --> 00:05:21,060 Now, here's where it gets a little interesting, 108 00:05:21,060 --> 00:05:23,010 and I'm just gonna clap some code here. 109 00:05:25,020 --> 00:05:26,820 Mocha then says, okay, it's time to run 110 00:05:26,820 --> 00:05:29,373 the next nested block of its. 111 00:05:30,630 --> 00:05:34,680 Mocha's gonna run the top before each, 112 00:05:34,680 --> 00:05:38,280 the child before each, and then the it. 113 00:05:38,280 --> 00:05:41,580 It'll then run the top before each, 114 00:05:41,580 --> 00:05:45,240 the nested before each, and then the second it. 115 00:05:45,240 --> 00:05:46,570 So, all of these before each's, 116 00:05:46,570 --> 00:05:48,930 they, kind of, stack up, so to speak, 117 00:05:48,930 --> 00:05:50,910 they, kind of, stack up over time, 118 00:05:50,910 --> 00:05:53,640 and you can use successive before each's 119 00:05:53,640 --> 00:05:57,780 to customize your component, or your testing setup 120 00:05:57,780 --> 00:06:00,210 for each of your child specs here. 121 00:06:00,210 --> 00:06:02,760 So, what we might do inside of this before each, 122 00:06:02,760 --> 00:06:06,120 is add in some code to pre populate that text area, 123 00:06:06,120 --> 00:06:08,940 or to just, kinda, stick some dummy text in there 124 00:06:08,940 --> 00:06:11,283 where we know exactly what that text is. 125 00:06:12,270 --> 00:06:14,160 So, I've already set up a helper 126 00:06:14,160 --> 00:06:17,700 for doing this kind of initial setup for us, 127 00:06:17,700 --> 00:06:20,310 and again, this is a place where, 128 00:06:20,310 --> 00:06:22,470 we're gonna use this code for right now, 129 00:06:22,470 --> 00:06:25,740 and later on, when we go over our test helper file, 130 00:06:25,740 --> 00:06:27,780 we're gonna look at exactly how this works 131 00:06:27,780 --> 00:06:28,890 behind the scenes, okay, 132 00:06:28,890 --> 00:06:31,680 so this is a little bit of a leap of faith here, 133 00:06:31,680 --> 00:06:33,630 but just bear with me for a little bit. 134 00:06:34,710 --> 00:06:36,090 To do our initial setup, 135 00:06:36,090 --> 00:06:38,430 We've already got an instance of component 136 00:06:38,430 --> 00:06:40,170 because it was already initialized 137 00:06:40,170 --> 00:06:42,870 in our existing before each. 138 00:06:42,870 --> 00:06:45,420 So, in here, all we need to do 139 00:06:45,420 --> 00:06:48,120 is inject some text into that text area, 140 00:06:48,120 --> 00:06:50,130 so to make that happen, 141 00:06:50,130 --> 00:06:54,780 we're gonna say component find the text area 142 00:06:54,780 --> 00:06:57,420 that's being rendered by the component, 143 00:06:57,420 --> 00:07:00,270 and simulate, and this is the part where 144 00:07:00,270 --> 00:07:05,190 it starts getting really interesting, a change event, 145 00:07:05,190 --> 00:07:10,190 and I want the event to carry the text, new comment. 146 00:07:12,420 --> 00:07:15,393 Okay so, a little bit weird, but just bear with me. 147 00:07:16,350 --> 00:07:18,090 This is actually probably a really good spot 148 00:07:18,090 --> 00:07:19,770 to take a quick break. 149 00:07:19,770 --> 00:07:21,150 Let's continue in the next section 150 00:07:21,150 --> 00:07:23,850 where we'll walk through this line of code right here.