1 00:00:00,690 --> 00:00:01,710 Instructor: We've just about wrapped up 2 00:00:01,710 --> 00:00:03,360 testing of our very simple application, 3 00:00:03,360 --> 00:00:07,110 but we're still missing one extremely critical piece. 4 00:00:07,110 --> 00:00:08,760 So all the code we've tested so far 5 00:00:08,760 --> 00:00:12,390 is not making a single HTTP request. 6 00:00:12,390 --> 00:00:13,350 And I think you'll agree with me 7 00:00:13,350 --> 00:00:15,030 that testing out network requests, 8 00:00:15,030 --> 00:00:17,670 or at least some aspect of them inside of our application, 9 00:00:17,670 --> 00:00:19,170 is absolutely critical. 10 00:00:19,170 --> 00:00:20,610 So in this section, we're gonna get started 11 00:00:20,610 --> 00:00:23,340 by adding in a little bit of network functionality 12 00:00:23,340 --> 00:00:24,450 to our application, 13 00:00:24,450 --> 00:00:26,640 and then we'll figure out how to test it. 14 00:00:26,640 --> 00:00:29,370 So let's talk about what we're gonna add first. 15 00:00:29,370 --> 00:00:30,930 Okay, so here we go. 16 00:00:30,930 --> 00:00:32,640 Here's the same mock up we had before. 17 00:00:32,640 --> 00:00:34,680 There's just one little change. 18 00:00:34,680 --> 00:00:37,830 I've put a button in here called Fetch Comments. 19 00:00:37,830 --> 00:00:39,090 So the idea behind this button 20 00:00:39,090 --> 00:00:40,830 is that if we click this button, 21 00:00:40,830 --> 00:00:45,830 we should make an HTTP request out to some remote API, 22 00:00:45,840 --> 00:00:47,310 fetch a list of comments, 23 00:00:47,310 --> 00:00:49,560 and then render them on the screen. 24 00:00:49,560 --> 00:00:52,492 So a pretty basic application of Ajax request 25 00:00:52,492 --> 00:00:55,260 inside of Redux, but it will teach us a lot 26 00:00:55,260 --> 00:00:57,480 about how to test network requests 27 00:00:57,480 --> 00:01:00,300 inside of a React and Redux application. 28 00:01:00,300 --> 00:01:01,170 Let's first get started 29 00:01:01,170 --> 00:01:02,910 by taking a quick look at the API 30 00:01:02,910 --> 00:01:04,709 that we're going to make use of. 31 00:01:04,709 --> 00:01:06,573 So inside of a new browser tab, 32 00:01:07,530 --> 00:01:12,097 I'm going to do a Google search for JSONPlaceholder API. 33 00:01:16,830 --> 00:01:17,940 And then one of the first results 34 00:01:17,940 --> 00:01:19,680 that you're gonna see on here 35 00:01:19,680 --> 00:01:23,860 is a site called JSONPlaceholder .typeicode.com 36 00:01:25,020 --> 00:01:27,690 So this is a free online API. 37 00:01:27,690 --> 00:01:29,430 It's a fake API 38 00:01:29,430 --> 00:01:31,320 which means all the data that's going to be returned 39 00:01:31,320 --> 00:01:35,760 from us is just randomly generated random garbage. 40 00:01:35,760 --> 00:01:37,290 So we're going to make a request 41 00:01:37,290 --> 00:01:40,050 to this API to get a list of comments. 42 00:01:40,050 --> 00:01:40,883 So if you scroll 43 00:01:40,883 --> 00:01:44,460 down just a little bit to resources right here 44 00:01:44,460 --> 00:01:48,240 you'll see that there's an endpoint called slash comments. 45 00:01:48,240 --> 00:01:49,470 So if we make a request 46 00:01:49,470 --> 00:01:51,570 to this comments endpoint right here 47 00:01:51,570 --> 00:01:54,330 we'll get back a list of 500 comments. 48 00:01:54,330 --> 00:01:57,030 Let's click on it right now and just see what happens. 49 00:01:57,900 --> 00:02:00,240 So when you click on it, it's going to make a request 50 00:02:00,240 --> 00:02:02,970 to that API inside your browser. 51 00:02:02,970 --> 00:02:03,960 And so we can see a list 52 00:02:03,960 --> 00:02:07,380 of all the comments that get fetched appear on the screen. 53 00:02:07,380 --> 00:02:09,930 Now my list of comments might appear a little bit different 54 00:02:09,930 --> 00:02:10,763 than yours. 55 00:02:10,763 --> 00:02:14,310 I'm running a JSON formatter that just takes all the JSON 56 00:02:14,310 --> 00:02:16,620 that gets returned and prints it out very nicely 57 00:02:16,620 --> 00:02:18,180 on the screen. 58 00:02:18,180 --> 00:02:20,400 You'll notice that the list of comments we get back 59 00:02:20,400 --> 00:02:22,920 is actually a array of objects. 60 00:02:22,920 --> 00:02:25,560 So every object represents one comment. 61 00:02:25,560 --> 00:02:28,290 Now, the structure of this thing right here does not quite 62 00:02:28,290 --> 00:02:30,390 match the structure of comments that we're using inside 63 00:02:30,390 --> 00:02:31,440 our application. 64 00:02:31,440 --> 00:02:33,750 So our application says that every comment is just 65 00:02:33,750 --> 00:02:35,490 a plain string. 66 00:02:35,490 --> 00:02:38,790 So inside, just to make this endpoint work more nicely 67 00:02:38,790 --> 00:02:41,250 with our application, as we put it together, 68 00:02:41,250 --> 00:02:43,830 when we get back this response, we're gonna iterate 69 00:02:43,830 --> 00:02:45,900 over this array of objects and we're gonna pull 70 00:02:45,900 --> 00:02:48,660 off the name property from every comment 71 00:02:48,660 --> 00:02:51,690 and we're gonna say the name property alone 72 00:02:51,690 --> 00:02:53,520 constitutes the comment. 73 00:02:53,520 --> 00:02:55,440 So we're just gonna pull off these strings 74 00:02:55,440 --> 00:02:56,880 from every single comment. 75 00:02:56,880 --> 00:02:57,713 And that's it. 76 00:02:57,713 --> 00:02:59,670 We're gonna return that from our Redux store. 77 00:03:00,750 --> 00:03:01,583 Okay! 78 00:03:01,583 --> 00:03:03,000 So that's pretty much the plan here. 79 00:03:03,000 --> 00:03:04,890 Now, before we continue, in the next section 80 00:03:04,890 --> 00:03:07,928 I wanna very quickly install two library modules 81 00:03:07,928 --> 00:03:10,350 that we're going to need to pull this off. 82 00:03:10,350 --> 00:03:12,870 So I'm gonna flip back over to my terminal. 83 00:03:12,870 --> 00:03:14,470 I'm gonna stop my running server 84 00:03:15,870 --> 00:03:18,150 and I'm going to do an NPM install, and we're 85 00:03:18,150 --> 00:03:22,500 going to get Axios to make the actual network request. 86 00:03:22,500 --> 00:03:26,910 We're also going to get Redux Promise 87 00:03:26,910 --> 00:03:29,730 which is a middleware that we're going to use to make sure 88 00:03:29,730 --> 00:03:32,130 that Redux is aware of the asynchronous action 89 00:03:32,130 --> 00:03:34,620 creator that we're gonna write to actually make the request. 90 00:03:34,620 --> 00:03:37,530 And then we're going to grab one last other module 91 00:03:37,530 --> 00:03:38,820 and we'll talk about what the purpose 92 00:03:38,820 --> 00:03:40,260 of this one is in just a second. 93 00:03:40,260 --> 00:03:42,510 So it's called Moxios. 94 00:03:42,510 --> 00:03:43,400 Okay, Moxios. 95 00:03:43,400 --> 00:03:45,720 So make sure you get that one as well. 96 00:03:45,720 --> 00:03:47,130 So we'll grab all three of these 97 00:03:47,130 --> 00:03:48,960 and I'll take a break right here 98 00:03:48,960 --> 00:03:50,910 and I'll catch you in the next section.