1 00:00:00,750 --> 00:00:01,583 Instructor: In the last section, 2 00:00:01,583 --> 00:00:04,350 we put together our new fetch comments action creator, 3 00:00:04,350 --> 00:00:06,750 and wired it up to our comment box. 4 00:00:06,750 --> 00:00:07,950 So now inside of our browser, 5 00:00:07,950 --> 00:00:11,310 we're able to fetch a list of comments from that remote API. 6 00:00:11,310 --> 00:00:12,143 So, now we need to think 7 00:00:12,143 --> 00:00:15,090 about how we're going to test this new functionality. 8 00:00:15,090 --> 00:00:16,800 Well, if we follow the same pattern that we have 9 00:00:16,800 --> 00:00:18,900 throughout the course, we might have to open up 10 00:00:18,900 --> 00:00:20,700 our action creator's test file, 11 00:00:20,700 --> 00:00:23,160 because we created a new action creator. 12 00:00:23,160 --> 00:00:25,590 We might have to go into our comment box test file 13 00:00:25,590 --> 00:00:27,570 because we modify that component, 14 00:00:27,570 --> 00:00:30,180 and we might have to write an additional test around 15 00:00:30,180 --> 00:00:32,310 our comments reducer as well. 16 00:00:32,310 --> 00:00:33,960 So, that's definitely one approach we could take. 17 00:00:33,960 --> 00:00:36,930 We can go into each of those test files, find every 18 00:00:36,930 --> 00:00:38,790 piece of code that we've modified, and write 19 00:00:38,790 --> 00:00:40,353 a new test around it. 20 00:00:41,190 --> 00:00:42,240 Throughout this entire course, 21 00:00:42,240 --> 00:00:45,180 we've been writing tests known as unit tests, 22 00:00:45,180 --> 00:00:46,800 where we try to isolate some very 23 00:00:46,800 --> 00:00:48,990 small piece of functionality within our code base, 24 00:00:48,990 --> 00:00:50,883 and test it in isolation. 25 00:00:51,750 --> 00:00:52,590 So this time around, 26 00:00:52,590 --> 00:00:54,840 as we start thinking about writing these tests, 27 00:00:54,840 --> 00:00:56,880 we're gonna take a slightly different approach than that. 28 00:00:56,880 --> 00:00:58,890 Let's take a look at the diagram, that's gonna help give you 29 00:00:58,890 --> 00:01:00,790 a better sense of what we're gonna do. 30 00:01:02,310 --> 00:01:03,270 Okay. 31 00:01:03,270 --> 00:01:05,940 So, this is a kind of a complicated diagram. 32 00:01:05,940 --> 00:01:07,953 On the very bottom axis down here, 33 00:01:09,097 --> 00:01:10,500 I'm trying to indicate the number of pieces 34 00:01:10,500 --> 00:01:13,980 that any single test inside of our application is touching. 35 00:01:13,980 --> 00:01:16,500 So essentially, the amount of code being tested 36 00:01:16,500 --> 00:01:18,363 by a single test. 37 00:01:19,200 --> 00:01:21,720 Up to this point, we've been writing unit tests, 38 00:01:21,720 --> 00:01:24,300 and these unit tests have been trying to isolate 39 00:01:24,300 --> 00:01:26,670 one part of our application, and make sure that 40 00:01:26,670 --> 00:01:30,210 exactly one part is working the way we expect. 41 00:01:30,210 --> 00:01:32,160 So, for example, we've been trying to make sure 42 00:01:32,160 --> 00:01:34,170 that the comment box shows a button. 43 00:01:34,170 --> 00:01:35,250 Or that the comment list 44 00:01:35,250 --> 00:01:36,630 shows a list of Li elements, 45 00:01:36,630 --> 00:01:38,340 or the action creators that we put together 46 00:01:38,340 --> 00:01:40,863 returns an object with some given type. 47 00:01:41,850 --> 00:01:43,680 For each of these tests, we've been essentially 48 00:01:43,680 --> 00:01:46,890 answering one question, does exactly this 49 00:01:46,890 --> 00:01:49,623 part of our code base work the way we expect? 50 00:01:51,000 --> 00:01:53,130 Now that we have to add in some additional tests here, 51 00:01:53,130 --> 00:01:55,050 we're gonna take a slightly different approach 52 00:01:55,050 --> 00:01:58,290 for testing out this fetch comments functionality. 53 00:01:58,290 --> 00:02:00,060 So, we're gonna try to write what's called 54 00:02:00,060 --> 00:02:02,760 an integration test instead. 55 00:02:02,760 --> 00:02:04,500 With an integration test, we're going to try 56 00:02:04,500 --> 00:02:06,330 to simultaneously test many 57 00:02:06,330 --> 00:02:08,550 different parts of our application. 58 00:02:08,550 --> 00:02:11,130 So in this case, we're gonna try to answer the question, 59 00:02:11,130 --> 00:02:14,100 does clicking on that fetch comments button eventually 60 00:02:14,100 --> 00:02:16,743 show a list of allies on the screen? 61 00:02:18,420 --> 00:02:19,768 When we start 62 00:02:19,768 --> 00:02:21,210 thinking about what is covered by that test, 63 00:02:21,210 --> 00:02:24,030 well over here, back with our unit test, we were all 64 00:02:24,030 --> 00:02:25,710 testing one thing at a time. 65 00:02:25,710 --> 00:02:28,860 But with this integration test, we're actually testing many, 66 00:02:28,860 --> 00:02:30,990 many, many different parts of our application 67 00:02:30,990 --> 00:02:32,490 in one go. 68 00:02:32,490 --> 00:02:34,410 Worth one single test. 69 00:02:34,410 --> 00:02:37,080 So by testing to make sure that clicking on that button 70 00:02:37,080 --> 00:02:40,020 shows a list of Li's, we are asserting to make sure 71 00:02:40,020 --> 00:02:43,530 that the comment box has a button, we're making sure 72 00:02:43,530 --> 00:02:45,570 it's wired up to an action creator. 73 00:02:45,570 --> 00:02:46,770 We're making sure the action creator 74 00:02:46,770 --> 00:02:48,630 can make an AJAX request. 75 00:02:48,630 --> 00:02:52,260 We're making sure Redux can parse the response that is 76 00:02:52,260 --> 00:02:55,380 tied to that action through that Redux promise middleware. 77 00:02:55,380 --> 00:02:56,880 We're making sure the reducer catches 78 00:02:56,880 --> 00:02:59,100 the list of comments correctly, and then we're making sure 79 00:02:59,100 --> 00:03:00,690 that the list of comments shows up 80 00:03:00,690 --> 00:03:02,880 in the comment list component. 81 00:03:02,880 --> 00:03:04,380 So, over here with our unit test, 82 00:03:04,380 --> 00:03:06,780 we were just isolating one thing at a time, 83 00:03:06,780 --> 00:03:08,790 but with a single integration test, 84 00:03:08,790 --> 00:03:11,940 we can touch the entire scope of our application 85 00:03:11,940 --> 00:03:15,210 with one chunk of code or one test. 86 00:03:15,210 --> 00:03:17,100 So, that's what we're gonna try to do this time around. 87 00:03:17,100 --> 00:03:19,140 We're gonna try to write an integration test 88 00:03:19,140 --> 00:03:21,810 that tests out the entire flow, or a big chunk 89 00:03:21,810 --> 00:03:24,840 or big segment of our entire application. 90 00:03:24,840 --> 00:03:26,160 So, let's take a quick break right here. 91 00:03:26,160 --> 00:03:27,270 We'll come back to the next section, 92 00:03:27,270 --> 00:03:28,770 and we're gonna get started working on 93 00:03:28,770 --> 00:03:30,213 this integration test.