1 00:00:00,930 --> 00:00:01,763 -: In the last section, 2 00:00:01,763 --> 00:00:03,120 we finished up our test to make sure 3 00:00:03,120 --> 00:00:06,960 that the comment box showed both a text area and a button. 4 00:00:06,960 --> 00:00:08,490 We're now gonna move forward to our next test 5 00:00:08,490 --> 00:00:09,870 around the comment box. 6 00:00:09,870 --> 00:00:11,100 The goal of which is to make sure 7 00:00:11,100 --> 00:00:14,580 that a user can enter some input into that text area. 8 00:00:14,580 --> 00:00:15,413 So this might sound 9 00:00:15,413 --> 00:00:16,560 like kind of a silly test, 10 00:00:16,560 --> 00:00:17,790 like of course a user 11 00:00:17,790 --> 00:00:20,160 should be able to enter some text inside there. 12 00:00:20,160 --> 00:00:21,060 But I want to remind you 13 00:00:21,060 --> 00:00:23,400 about something that occurred when we were wiring up 14 00:00:23,400 --> 00:00:26,880 that text area just two or three sections ago. 15 00:00:26,880 --> 00:00:28,230 While we were putting this thing together, 16 00:00:28,230 --> 00:00:33,230 we first wired up the value property to that text area 17 00:00:33,270 --> 00:00:36,240 Before we had hooked up that on change event handler. 18 00:00:36,240 --> 00:00:39,060 We were in sort of a broken state, 19 00:00:39,060 --> 00:00:41,769 and we were able to select the text area, type inside of it, 20 00:00:41,769 --> 00:00:45,660 and we saw that no text actually appeared. 21 00:00:45,660 --> 00:00:47,460 So that's the goal of this test right here. 22 00:00:47,460 --> 00:00:49,800 The goal of this test is to make sure that we've wired up 23 00:00:49,800 --> 00:00:52,110 the value property correctly, 24 00:00:52,110 --> 00:00:54,840 the set state call and the callback, 25 00:00:54,840 --> 00:00:56,220 and to make sure we also wired up 26 00:00:56,220 --> 00:00:59,370 the callback property on the text area as well. 27 00:00:59,370 --> 00:01:00,933 That's the goal of this test. 28 00:01:02,160 --> 00:01:03,570 Now, one thing that's kind of interesting 29 00:01:03,570 --> 00:01:06,660 about this test right here is that it's going to involve you 30 00:01:06,660 --> 00:01:09,420 and I kind of programmatically interacting 31 00:01:09,420 --> 00:01:11,580 with a component in some fashion. 32 00:01:11,580 --> 00:01:14,460 In other words, we want to kind of trick that text area 33 00:01:14,460 --> 00:01:17,520 into thinking that we are typing some text into it. 34 00:01:17,520 --> 00:01:20,430 Every other test that we've done so far has involved you 35 00:01:20,430 --> 00:01:22,950 and I kind of passively rendering the component, 36 00:01:22,950 --> 00:01:23,940 and then just making sure 37 00:01:23,940 --> 00:01:27,720 that it contains some element, or some component instance. 38 00:01:27,720 --> 00:01:30,630 So, this test is gonna be pretty significantly different 39 00:01:30,630 --> 00:01:32,730 than the ones we had worked on previously. 40 00:01:33,780 --> 00:01:36,090 Now, before I tell you how we're gonna write the the test. 41 00:01:36,090 --> 00:01:37,260 I wanna give you a quick review 42 00:01:37,260 --> 00:01:39,123 of how that component is wired up. 43 00:01:40,410 --> 00:01:42,210 So back inside my code editor, 44 00:01:42,210 --> 00:01:43,680 I'll find the comment box file. 45 00:01:43,680 --> 00:01:44,513 Here it is. 46 00:01:45,360 --> 00:01:46,193 And then down 47 00:01:46,193 --> 00:01:49,170 inside the render method we have our text area. 48 00:01:49,170 --> 00:01:51,180 So the text area is really the core 49 00:01:51,180 --> 00:01:53,220 of everything we're trying to test right now. 50 00:01:53,220 --> 00:01:58,080 The text area has a on change property and a value property. 51 00:01:58,080 --> 00:02:02,850 Anytime a user changes the text area through a change event, 52 00:02:02,850 --> 00:02:04,980 we will have our handled change method right 53 00:02:04,980 --> 00:02:05,883 here be called. 54 00:02:06,810 --> 00:02:09,150 Handled change calls set state, 55 00:02:09,150 --> 00:02:12,420 that causes our component to automatically re-render. 56 00:02:12,420 --> 00:02:14,910 And when that occurs, we put that new value 57 00:02:14,910 --> 00:02:18,480 from this state dot comment into the text area. 58 00:02:18,480 --> 00:02:20,370 Okay, so that's just basic react, 59 00:02:20,370 --> 00:02:22,230 just want you to keep that in mind. 60 00:02:22,230 --> 00:02:25,140 So now that you recall how that text area works, 61 00:02:25,140 --> 00:02:27,990 let's take a look at how we're going to actually test it. 62 00:02:29,160 --> 00:02:31,230 All right, so here's our flow. 63 00:02:31,230 --> 00:02:33,030 So, in the test that you and I are going to write, 64 00:02:33,030 --> 00:02:34,410 we're gonna go through every single one 65 00:02:34,410 --> 00:02:36,000 of these steps right here. 66 00:02:36,000 --> 00:02:38,160 We're gonna first get started by writing out a little bit 67 00:02:38,160 --> 00:02:41,640 of logic to render our component, and then attempt to 68 00:02:41,640 --> 00:02:44,820 find that text area element inside of it. 69 00:02:44,820 --> 00:02:47,610 Now finding the text area right here, is going to be very 70 00:02:47,610 --> 00:02:51,150 similar to the test that you, and I just wrote a moment ago. 71 00:02:51,150 --> 00:02:53,130 So back inside of comment box 72 00:02:53,130 --> 00:02:53,963 you'll recall, 73 00:02:53,963 --> 00:02:57,270 we said wrapped dot find text area right here. 74 00:02:57,270 --> 00:02:59,340 So that returns the text-area 75 00:02:59,340 --> 00:03:00,840 within that component, 76 00:03:00,840 --> 00:03:02,280 And that's exactly what we're going to do to 77 00:03:02,280 --> 00:03:04,620 sort of find the text area. 78 00:03:04,620 --> 00:03:05,880 We're just gonna call find 79 00:03:05,880 --> 00:03:08,760 on the component instance that we create. 80 00:03:08,760 --> 00:03:10,410 Once we get that text area 81 00:03:10,410 --> 00:03:14,400 we're then going to sort of simulate a change event. 82 00:03:14,400 --> 00:03:16,890 So when you, and I are in this kind of test environment, 83 00:03:16,890 --> 00:03:18,780 we don't have the ability to actually type 84 00:03:18,780 --> 00:03:20,490 on our keyboard, of course. 85 00:03:20,490 --> 00:03:22,500 So instead we're going to simulate 86 00:03:22,500 --> 00:03:25,560 a change event on that text area. 87 00:03:25,560 --> 00:03:27,109 When we simulate that change event, 88 00:03:27,109 --> 00:03:29,928 it's going to automatically call 89 00:03:29,928 --> 00:03:34,140 our callback function of the handle change callback. 90 00:03:34,140 --> 00:03:36,300 Now, when that handle change method gets called, 91 00:03:36,300 --> 00:03:38,010 we need to make sure that it gets called 92 00:03:38,010 --> 00:03:40,830 with some event object where you, and I know 93 00:03:40,830 --> 00:03:44,100 the exact value that we're going to use inside 94 00:03:44,100 --> 00:03:46,470 of that set state call. 95 00:03:46,470 --> 00:03:49,443 So remember back inside of comment box, 96 00:03:50,640 --> 00:03:52,650 right here with handle Change, 97 00:03:52,650 --> 00:03:55,170 we receive this event object right here, 98 00:03:55,170 --> 00:03:57,330 and then the new value of our comment state 99 00:03:57,330 --> 00:04:00,630 comes from event, .target, .dot value. 100 00:04:00,630 --> 00:04:03,723 So, you and I need to manually set this value right here. 101 00:04:04,950 --> 00:04:06,960 Anytime we simulate a change event 102 00:04:06,960 --> 00:04:09,710 there is a default object that gets used to kind 103 00:04:09,710 --> 00:04:11,684 of trick our component into thinking 104 00:04:11,684 --> 00:04:13,680 that the event just occurred. 105 00:04:13,680 --> 00:04:15,000 But, if we want to customize 106 00:04:15,000 --> 00:04:17,790 the way that our component handles that 107 00:04:17,790 --> 00:04:20,490 actual event object inside this test environment 108 00:04:20,490 --> 00:04:23,310 you and I have to provide a fake event object. 109 00:04:23,310 --> 00:04:25,080 So that's what's going to allow us to kind of 110 00:04:25,080 --> 00:04:28,230 customize the event object, and kind of trick our component, 111 00:04:28,230 --> 00:04:29,850 or that callback into thinking 112 00:04:29,850 --> 00:04:33,150 that it just got called with a certain value 113 00:04:33,150 --> 00:04:35,883 for this new text area that the user just typed in. 114 00:04:37,320 --> 00:04:38,850 Now, after that we're gonna do 115 00:04:38,850 --> 00:04:40,650 kind of an interesting little step, 116 00:04:40,650 --> 00:04:42,210 and we're not gonna talk about this just yet. 117 00:04:42,210 --> 00:04:43,200 We'll come back to this, and talk 118 00:04:43,200 --> 00:04:44,940 about why we're doing it in just a moment. 119 00:04:44,940 --> 00:04:45,773 But essentially, 120 00:04:45,773 --> 00:04:48,180 we're going to force our component to re render itself. 121 00:04:48,180 --> 00:04:50,190 We'll talk about why we have to do that, 122 00:04:50,190 --> 00:04:51,300 and then at the very end 123 00:04:51,300 --> 00:04:54,270 of the test we're going to write an expectation that says 124 00:04:54,270 --> 00:04:57,540 that the text area's value has actually changed. 125 00:04:57,540 --> 00:04:58,890 So, this is the overall goal. 126 00:04:58,890 --> 00:05:00,510 This is how we're going to accomplish this, 127 00:05:00,510 --> 00:05:03,390 and this same set of operations right here, 128 00:05:03,390 --> 00:05:05,070 is how we're going to eventually interact 129 00:05:05,070 --> 00:05:07,590 with all different types of elements, 130 00:05:07,590 --> 00:05:08,730 or components that we're trying to 131 00:05:08,730 --> 00:05:10,740 test inside of our application. 132 00:05:10,740 --> 00:05:12,150 So, let's take a quick break. 133 00:05:12,150 --> 00:05:13,290 We'll come back the next section, 134 00:05:13,290 --> 00:05:14,890 and start writing out this test.