1 00:00:00,990 --> 00:00:02,070 -: In this section we're going to 2 00:00:02,070 --> 00:00:04,560 continue working on our integration test. 3 00:00:04,560 --> 00:00:06,660 So the next thing we're gonna do is attempt to find 4 00:00:06,660 --> 00:00:10,470 that fetch comments button and simulate a click event on it. 5 00:00:10,470 --> 00:00:13,590 Let's very quickly open up our comment box component file 6 00:00:13,590 --> 00:00:16,043 and just take a look at that button that we had added. 7 00:00:17,160 --> 00:00:19,380 Okay, so here's my comment box component. 8 00:00:19,380 --> 00:00:21,120 I'll go down to the render method, 9 00:00:21,120 --> 00:00:24,780 and here's that button for fetching the list of comments. 10 00:00:24,780 --> 00:00:27,630 So we want to select or find this button 11 00:00:27,630 --> 00:00:28,830 inside of our component 12 00:00:28,830 --> 00:00:31,053 and then simulate a click event on it. 13 00:00:32,009 --> 00:00:33,720 In order to make finding this button 14 00:00:33,720 --> 00:00:36,600 inside of our component hierarchy a little bit more easy, 15 00:00:36,600 --> 00:00:38,410 I'm going to add a class name 16 00:00:39,450 --> 00:00:43,530 of fetch dash comments, like so. 17 00:00:43,530 --> 00:00:45,420 The reason I'm adding this class name right here 18 00:00:45,420 --> 00:00:47,610 is that we have one button tag right here, 19 00:00:47,610 --> 00:00:49,650 and another one right here. 20 00:00:49,650 --> 00:00:51,630 And so just to make our lives easier 21 00:00:51,630 --> 00:00:54,360 for selecting specifically this button, 22 00:00:54,360 --> 00:00:56,283 that's why I added on the class name. 23 00:00:57,270 --> 00:00:59,760 So now back over inside of our test file 24 00:00:59,760 --> 00:01:04,760 we can add on wrapped dot find, and then the selector 25 00:01:04,920 --> 00:01:07,170 for that class name that we just added. 26 00:01:07,170 --> 00:01:10,801 Which would be dot, which indicates a class, 27 00:01:10,801 --> 00:01:13,473 fetch dash comments. 28 00:01:14,430 --> 00:01:16,440 So this will find that button component, 29 00:01:16,440 --> 00:01:17,940 or find that button element, 30 00:01:17,940 --> 00:01:22,563 and then we want to simulate a click event on it. 31 00:01:24,870 --> 00:01:26,820 So this line of code right here is what's gonna kick 32 00:01:26,820 --> 00:01:29,640 off the entire data fetching process. 33 00:01:29,640 --> 00:01:32,640 Get that request, or that action, over to our reducer. 34 00:01:32,640 --> 00:01:34,770 The reducer is going to pick up the list of comments, 35 00:01:34,770 --> 00:01:36,540 and then eventually the comment list component 36 00:01:36,540 --> 00:01:38,610 will rerender itself. 37 00:01:38,610 --> 00:01:40,410 So down here we should now be able to write out 38 00:01:40,410 --> 00:01:42,810 an expectation and say that we expect to see 39 00:01:42,810 --> 00:01:46,260 some number of LIs displayed on the screen. 40 00:01:46,260 --> 00:01:47,820 So for that, let's try something simple. 41 00:01:47,820 --> 00:01:49,050 Let's try something like, 42 00:01:49,050 --> 00:01:53,660 expect wrapped dot find, LI dot length. 43 00:01:55,230 --> 00:01:57,120 And you know, you know what, that thing said that was 44 00:01:57,120 --> 00:01:58,950 gonna return us 500 comments, 45 00:01:58,950 --> 00:02:01,890 so let's say to equal 500. 46 00:02:01,890 --> 00:02:05,070 Let's get it, just give it a shot and see how we do. 47 00:02:05,070 --> 00:02:06,180 So I'm gonna save this file, 48 00:02:06,180 --> 00:02:08,970 and then we'll see how our test suite is doing. 49 00:02:08,970 --> 00:02:11,100 Now just to very quickly walk through this file 50 00:02:11,100 --> 00:02:13,800 in it's current state, up here at the top, 51 00:02:13,800 --> 00:02:16,050 we are rendering out our entire application. 52 00:02:16,050 --> 00:02:17,910 We click on that fetch comments button. 53 00:02:17,910 --> 00:02:20,370 That should kick off the entire data fetching process, 54 00:02:20,370 --> 00:02:21,960 update our application, 55 00:02:21,960 --> 00:02:24,960 and then we should be able to see those 500 LIs. 56 00:02:24,960 --> 00:02:27,060 All right, so that's what we want to have happen. 57 00:02:27,060 --> 00:02:28,410 Let's flip back over to the terminal, 58 00:02:28,410 --> 00:02:29,710 and just see what happens. 59 00:02:30,630 --> 00:02:34,260 So when I flip back over, you might notice on your computer 60 00:02:34,260 --> 00:02:37,530 that the entire test suite has completely failed. 61 00:02:37,530 --> 00:02:39,840 If you see that, that's totally fine. 62 00:02:39,840 --> 00:02:42,570 If you don't see that, you might see something like this. 63 00:02:42,570 --> 00:02:43,650 You might see something that says, 64 00:02:43,650 --> 00:02:48,150 we expected to see 500 LIs but there were actually zero. 65 00:02:48,150 --> 00:02:50,910 So no, given either case that you fall in, 66 00:02:50,910 --> 00:02:52,590 either your entire test suite failed 67 00:02:52,590 --> 00:02:54,840 or you found zero LIs. 68 00:02:54,840 --> 00:02:57,180 Clearly something is going wrong here. 69 00:02:57,180 --> 00:02:58,320 So let's take a quick pause. 70 00:02:58,320 --> 00:02:59,610 We'll come back in the next section, 71 00:02:59,610 --> 00:03:01,920 and we'll try to figure out exactly why these tests 72 00:03:01,920 --> 00:03:03,663 are not working the way we expect.