1 00:00:00,750 --> 00:00:02,009 Instructor: In the last section we put together 2 00:00:02,009 --> 00:00:04,620 our comment list component, and now it's time to write a 3 00:00:04,620 --> 00:00:06,570 test file around this thing. 4 00:00:06,570 --> 00:00:08,820 So, inside of my component's test directory, 5 00:00:08,820 --> 00:00:13,820 I'll make a new file called CommentList.test.js. 6 00:00:16,740 --> 00:00:18,390 Then, inside this file, we'll go through 7 00:00:18,390 --> 00:00:20,160 some of the usual boiler plate. 8 00:00:20,160 --> 00:00:24,420 So, at the top I will import React from React. 9 00:00:24,420 --> 00:00:29,100 I'm going to again import the mount function from Enzyme. 10 00:00:29,100 --> 00:00:30,360 So we're going to make use of 11 00:00:30,360 --> 00:00:33,063 full DOM rendering again for this application. 12 00:00:33,960 --> 00:00:37,950 And then I will also get my comment list component 13 00:00:37,950 --> 00:00:42,950 from components comment list. 14 00:00:44,580 --> 00:00:48,030 And then because my comment list makes use of Redux, 15 00:00:48,030 --> 00:00:50,460 or more specifically the Connect helper right here, 16 00:00:50,460 --> 00:00:52,650 I know without a doubt that the component is going to 17 00:00:52,650 --> 00:00:55,800 expect to see a parent component that contains 18 00:00:55,800 --> 00:00:59,340 that provider tag, and the Redux store. 19 00:00:59,340 --> 00:01:01,230 So without a doubt, we're going to have to import 20 00:01:01,230 --> 00:01:03,930 that root component that we created right here 21 00:01:03,930 --> 00:01:07,410 to get our test set up working in that comment list file. 22 00:01:07,410 --> 00:01:09,840 So, inside of CommentList.test.js, 23 00:01:09,840 --> 00:01:13,083 I will import root from root. 24 00:01:16,140 --> 00:01:18,540 So, now that we've got some imports inside of here, 25 00:01:18,540 --> 00:01:20,520 let's take a quick review of 26 00:01:20,520 --> 00:01:22,560 some of the tests that we need to write. 27 00:01:22,560 --> 00:01:24,720 So, we need to make sure that for every element, 28 00:01:24,720 --> 00:01:26,340 or excuse me, for every comment we have, 29 00:01:26,340 --> 00:01:28,920 we produce one "li" element. 30 00:01:28,920 --> 00:01:30,930 And then we need to also make sure that for every 31 00:01:30,930 --> 00:01:33,450 comment we have, the actual text of the comment 32 00:01:33,450 --> 00:01:35,670 is visible on the screen. 33 00:01:35,670 --> 00:01:37,500 Let's take care of this first one here. 34 00:01:37,500 --> 00:01:40,290 So we'll take care of the one "li" per comment first, 35 00:01:40,290 --> 00:01:43,050 and then we'll move on to the next one down here. 36 00:01:43,050 --> 00:01:44,460 All right, so I'll first get started 37 00:01:44,460 --> 00:01:45,840 by writing out my it statement. 38 00:01:45,840 --> 00:01:47,253 So I'll say something like, 39 00:01:48,577 --> 00:01:53,577 "Creates one LI per comment," like so. 40 00:01:55,860 --> 00:01:57,600 And then, because I definitely need to do some 41 00:01:57,600 --> 00:02:00,930 initial setup here of the actual component instance, 42 00:02:00,930 --> 00:02:03,603 let's also not forget to do a before each statement. 43 00:02:07,530 --> 00:02:10,500 And right above that we'll define our, kind of, 44 00:02:10,500 --> 00:02:13,830 scoped variable for the entire file of wrapped. 45 00:02:13,830 --> 00:02:17,580 And then we can do right here wrapped equals, and then 46 00:02:17,580 --> 00:02:22,580 we will mount our root component with a comment list inside. 47 00:02:27,450 --> 00:02:28,920 Cool. 48 00:02:28,920 --> 00:02:31,020 All right, so now we've got our comment list right here. 49 00:02:31,020 --> 00:02:32,280 It has- 50 00:02:32,280 --> 00:02:33,930 -: for we've got the before each 51 00:02:33,930 --> 00:02:35,310 to initialize that component. 52 00:02:35,310 --> 00:02:38,670 And so, we're now inside the actual test where we can start 53 00:02:38,670 --> 00:02:40,620 to figure out how we're going to make sure that our 54 00:02:40,620 --> 00:02:44,040 wrapped component right here has one "li" per comment. 55 00:02:44,040 --> 00:02:47,310 There's just one little issue. 56 00:02:47,310 --> 00:02:48,183 One little issue. 57 00:02:49,290 --> 00:02:52,950 So, our comment list component right here is intended to 58 00:02:52,950 --> 00:02:55,980 take some state out of our Redux store. 59 00:02:55,980 --> 00:02:58,440 And then for every single comment 60 00:02:58,440 --> 00:03:02,130 that comes out of that state, we're going to render one li. 61 00:03:02,130 --> 00:03:05,130 So, if we want this test right here to really be faithful, 62 00:03:05,130 --> 00:03:08,160 if we want the test to really make sure that our component 63 00:03:08,160 --> 00:03:10,290 is working the way we expect, we need to sit- 64 00:03:10,290 --> 00:03:13,740 Figure out some way to get our Redux store to say, 65 00:03:13,740 --> 00:03:15,930 'Hey I've got a comment inside of here. 66 00:03:15,930 --> 00:03:19,650 Take the comment from me and render it out onto the screen." 67 00:03:19,650 --> 00:03:22,170 The issue is, that as we've kind of created 68 00:03:22,170 --> 00:03:24,630 our root component and gone through all this, 69 00:03:24,630 --> 00:03:27,240 all these hoop jumping of getting our Redux 70 00:03:27,240 --> 00:03:30,660 store to be accessible through that provider tag, 71 00:03:30,660 --> 00:03:31,980 we don't really have any way 72 00:03:31,980 --> 00:03:35,100 of modifying any of the data inside there. 73 00:03:35,100 --> 00:03:38,370 In fact, the only way for us to, kind of, add any components 74 00:03:38,370 --> 00:03:40,650 to our Redux store right now, or any comments, excuse me, 75 00:03:40,650 --> 00:03:44,790 to that Redux store is to get our comment box component 76 00:03:44,790 --> 00:03:47,670 to dispatch in action by entering some text 77 00:03:47,670 --> 00:03:49,800 into that thing and then clicking the button. 78 00:03:49,800 --> 00:03:52,410 So, it looks like we're kind of at an impasse right now 79 00:03:52,410 --> 00:03:54,600 in terms of somehow getting some data 80 00:03:54,600 --> 00:03:57,900 into that Redux store to flow down into our comment list 81 00:03:57,900 --> 00:04:01,050 so we can actually test this functionality right here. 82 00:04:01,050 --> 00:04:02,280 Now, one thing I want to mention 83 00:04:02,280 --> 00:04:05,010 that we absolutely could do, like this is an option. 84 00:04:05,010 --> 00:04:07,560 we could forcibly pass a prop into the 85 00:04:07,560 --> 00:04:10,740 comment list right here of comments, 86 00:04:10,740 --> 00:04:11,730 and then have that be, like, 87 00:04:11,730 --> 00:04:14,700 our list of comments or whatever. 88 00:04:14,700 --> 00:04:16,680 This prop right here will be passed 89 00:04:16,680 --> 00:04:18,480 down into the comment list. 90 00:04:18,480 --> 00:04:20,640 So, you might think, yeah, that's one way to do it. 91 00:04:20,640 --> 00:04:22,770 However, the problem is that as soon as the 92 00:04:22,770 --> 00:04:25,470 comment list component renders itself 93 00:04:25,470 --> 00:04:28,110 that mapStateToProps function is going to run. 94 00:04:28,110 --> 00:04:30,630 It's gonna get this comments object right here, 95 00:04:30,630 --> 00:04:34,440 which, by default, is gonna have an empty list of comments. 96 00:04:34,440 --> 00:04:37,680 And so that empty list of comments is going to overwrite 97 00:04:37,680 --> 00:04:38,910 this list of comments right here 98 00:04:38,910 --> 00:04:40,800 that we're trying to pass in. 99 00:04:40,800 --> 00:04:42,750 So, I don't know, it kind of seems like it's gonna be 100 00:04:42,750 --> 00:04:45,120 a tough thing to try to get some data into this thing, 101 00:04:45,120 --> 00:04:47,040 into our actual component. 102 00:04:47,040 --> 00:04:49,140 Well, of course there's a way we can work around this. 103 00:04:49,140 --> 00:04:49,973 Don't sweat it. 104 00:04:49,973 --> 00:04:51,390 So, let's take a quick pause right here. 105 00:04:51,390 --> 00:04:52,500 We'll come back to the next section, 106 00:04:52,500 --> 00:04:55,193 and we'll figure out how we're gonna solve this issue.