1 00:00:00,930 --> 00:00:01,763 Instructor: In the last section, 2 00:00:01,763 --> 00:00:03,750 we fixed a couple of our specs 3 00:00:03,750 --> 00:00:06,300 or at least we got some better failures I should say. 4 00:00:06,300 --> 00:00:08,430 But we've still got kind of a weird error here 5 00:00:08,430 --> 00:00:11,910 where we are expecting to have two allies 6 00:00:11,910 --> 00:00:13,320 but we have actually zero. 7 00:00:13,320 --> 00:00:16,140 So that means that our spec is correctly running, 8 00:00:16,140 --> 00:00:19,770 but it looks like our testing set up didn't quite work. 9 00:00:19,770 --> 00:00:22,890 Let's go look at the test file for our comment list. 10 00:00:22,890 --> 00:00:26,373 So I'm gonna open up comment list test. 11 00:00:28,050 --> 00:00:30,870 If you recall when we worked on comment list, 12 00:00:30,870 --> 00:00:32,640 we used render component. 13 00:00:32,640 --> 00:00:34,200 And we had made this assumption 14 00:00:34,200 --> 00:00:36,990 that if we passed in some props 15 00:00:36,990 --> 00:00:38,640 to our render component helper, 16 00:00:38,640 --> 00:00:39,930 these props right here, 17 00:00:39,930 --> 00:00:43,110 they would somehow arrive on our component. 18 00:00:43,110 --> 00:00:44,880 And so we haven't done any setup yet 19 00:00:44,880 --> 00:00:46,410 in our version of render component 20 00:00:46,410 --> 00:00:47,760 to ensure that these arguments 21 00:00:47,760 --> 00:00:51,930 are actually being passed through as props to comment list. 22 00:00:51,930 --> 00:00:53,730 So to fix that spec failure, 23 00:00:53,730 --> 00:00:57,600 we need to implement the ability to pass these initial props 24 00:00:57,600 --> 00:01:01,500 on to our component comment list. 25 00:01:01,500 --> 00:01:03,483 Let's go back over to our test helper. 26 00:01:05,310 --> 00:01:08,760 So by default, the original component that we, 27 00:01:08,760 --> 00:01:10,650 or the original render component here 28 00:01:10,650 --> 00:01:12,690 had the ability to pass in 29 00:01:12,690 --> 00:01:15,630 either props to the component directly 30 00:01:15,630 --> 00:01:19,830 or some initial state to our Redux store. 31 00:01:19,830 --> 00:01:21,990 Again, we'll talk about what the provider is 32 00:01:21,990 --> 00:01:24,780 and what the create store is in the next section. 33 00:01:24,780 --> 00:01:25,613 For right now, 34 00:01:25,613 --> 00:01:28,740 again let's just focus on getting these tests working. 35 00:01:28,740 --> 00:01:30,000 So I'm gonna add on 36 00:01:30,000 --> 00:01:32,820 two additional arguments to render component. 37 00:01:32,820 --> 00:01:34,320 The first one's gonna be props. 38 00:01:34,320 --> 00:01:36,780 And I know I'm kind of going a little bit out of order here 39 00:01:36,780 --> 00:01:38,280 but just bear with me 40 00:01:38,280 --> 00:01:40,683 and we're gonna call the next one state. 41 00:01:42,270 --> 00:01:44,460 So this is where things got a little bit misleading 42 00:01:44,460 --> 00:01:47,460 between the comment list test that we wrote 43 00:01:47,460 --> 00:01:50,640 and the name of the arguments that we had on there. 44 00:01:50,640 --> 00:01:53,130 The argument signature is intended to be 45 00:01:53,130 --> 00:01:55,710 first, the component class. 46 00:01:55,710 --> 00:01:59,460 Second, any props that should be placed directly 47 00:01:59,460 --> 00:02:01,590 onto the component class. 48 00:02:01,590 --> 00:02:05,190 And third, any application level state 49 00:02:05,190 --> 00:02:08,400 that we want to inject into our Redux store. 50 00:02:08,400 --> 00:02:11,430 That's what allows our component class to get access 51 00:02:11,430 --> 00:02:14,280 to the data that we're expecting to get out 52 00:02:14,280 --> 00:02:16,710 of the Redux store. 53 00:02:16,710 --> 00:02:19,140 Now this is all, I know this is kind of confusing language, 54 00:02:19,140 --> 00:02:20,040 a little bit weird stuff. 55 00:02:20,040 --> 00:02:21,990 So let's do a little bit of a review 56 00:02:21,990 --> 00:02:23,793 and open comment list back up. 57 00:02:26,730 --> 00:02:28,350 So this is comment list. 58 00:02:28,350 --> 00:02:30,990 Remember, we got access to the comments 59 00:02:30,990 --> 00:02:33,900 because they were on application state. 60 00:02:33,900 --> 00:02:37,650 So when we render our comment list and the test file 61 00:02:37,650 --> 00:02:40,170 we're not just rendering comment list by itself. 62 00:02:40,170 --> 00:02:42,600 We're not just rendering this functional component. 63 00:02:42,600 --> 00:02:47,190 We're rendering the connected version of comment list. 64 00:02:47,190 --> 00:02:49,380 So that means that when comment list, 65 00:02:49,380 --> 00:02:52,350 our connected version of it tries to render itself, 66 00:02:52,350 --> 00:02:55,200 it's going to try to reach into Redux State 67 00:02:55,200 --> 00:02:57,780 and get access to the list of comments. 68 00:02:57,780 --> 00:03:01,230 And so that's what's going on with this third argument here. 69 00:03:01,230 --> 00:03:03,720 We called it props over in the test file over here 70 00:03:03,720 --> 00:03:05,850 which was a little bit misleading, I agree. 71 00:03:05,850 --> 00:03:07,800 But the intent of this third argument 72 00:03:07,800 --> 00:03:09,810 is to serve as some initial data 73 00:03:09,810 --> 00:03:12,030 or some data that we're going to push 74 00:03:12,030 --> 00:03:14,013 into our application level state. 75 00:03:14,970 --> 00:03:16,320 So enough of the description, 76 00:03:16,320 --> 00:03:18,210 let's go ahead and do the implementation. 77 00:03:18,210 --> 00:03:21,660 In practice, getting this data that we're passing along 78 00:03:21,660 --> 00:03:24,160 to where it needs to be is really straightforward. 79 00:03:25,410 --> 00:03:27,930 The second argument to this create store method 80 00:03:27,930 --> 00:03:31,740 which is coming from Redux, is some initial state. 81 00:03:31,740 --> 00:03:34,590 So we're just gonna pass state directly in. 82 00:03:34,590 --> 00:03:37,350 So in the case where we were kind of bootstrapping 83 00:03:37,350 --> 00:03:39,460 a list of comments right here 84 00:03:40,890 --> 00:03:43,920 for our comment list test and we passed it into state 85 00:03:43,920 --> 00:03:47,310 that was getting passed directly into create store. 86 00:03:47,310 --> 00:03:49,627 And so when our Redux app booted up, it said, 87 00:03:49,627 --> 00:03:51,900 "Oh okay, I've got some initial state here." 88 00:03:51,900 --> 00:03:54,510 And the initial state is this list of comments. 89 00:03:54,510 --> 00:03:55,860 That's all that's going on. 90 00:03:57,390 --> 00:03:58,500 Next, we need to make sure 91 00:03:58,500 --> 00:04:00,930 that any props from the second argument, 92 00:04:00,930 --> 00:04:03,930 these are intended to be component level props 93 00:04:03,930 --> 00:04:07,080 end up on top of our component class. 94 00:04:07,080 --> 00:04:09,060 So this is an object right here 95 00:04:09,060 --> 00:04:11,100 and we want to make sure that all the props in here 96 00:04:11,100 --> 00:04:14,460 get added to component class, excuse me. 97 00:04:14,460 --> 00:04:15,960 And so to do that, 98 00:04:15,960 --> 00:04:18,990 instead of, we're not gonna do something like props is props 99 00:04:18,990 --> 00:04:22,200 like so because then in component class 100 00:04:22,200 --> 00:04:23,730 all of these properties right here 101 00:04:23,730 --> 00:04:26,460 would show up kind of name spaced, so to speak, 102 00:04:26,460 --> 00:04:30,243 as this dot props dot props not quite what we want. 103 00:04:31,110 --> 00:04:34,440 To get these props to show up as top level properties. 104 00:04:34,440 --> 00:04:38,763 We will instead use the spread operator like so. 105 00:04:40,320 --> 00:04:42,720 All right, let's go ahead and give this a shot. 106 00:04:42,720 --> 00:04:44,070 I'm gonna save the file. 107 00:04:44,070 --> 00:04:47,520 We're gonna see our specs rerun and hot dog! 108 00:04:47,520 --> 00:04:50,160 It looks like we got another spec passing. 109 00:04:50,160 --> 00:04:53,610 So our comment list was failing and now it's good to go. 110 00:04:53,610 --> 00:04:54,443 I like it. 111 00:04:56,280 --> 00:05:00,600 I think that this is, this really puts our render component 112 00:05:00,600 --> 00:05:02,550 in a pretty good place right now. 113 00:05:02,550 --> 00:05:04,770 So unless I'm missing something here, 114 00:05:04,770 --> 00:05:06,030 I think that in the next section 115 00:05:06,030 --> 00:05:08,430 we'll be ready to move on to our helper 116 00:05:08,430 --> 00:05:10,830 to simulate some events. 117 00:05:10,830 --> 00:05:12,580 I'll catch you in the next section.