1 00:00:00,990 --> 00:00:01,823 -: In the last section 2 00:00:01,823 --> 00:00:04,410 we created our comment list.test.js file. 3 00:00:04,410 --> 00:00:06,030 And we spoke about how we're kind of 4 00:00:06,030 --> 00:00:07,590 in a rough spot right now. 5 00:00:07,590 --> 00:00:10,350 We need to somehow get some data into our Redux store 6 00:00:10,350 --> 00:00:12,840 so that it can be shared with our comment list component. 7 00:00:12,840 --> 00:00:14,160 And we really want to do this 8 00:00:14,160 --> 00:00:18,480 without having to try to invoke or render the CommentBox 9 00:00:18,480 --> 00:00:20,670 inside this test and then like add a comment 10 00:00:20,670 --> 00:00:23,610 and click on the button or something crazy like that. 11 00:00:23,610 --> 00:00:27,120 So in this section I'm gonna suggest one possible fix, okay? 12 00:00:27,120 --> 00:00:28,500 One possible fix. 13 00:00:28,500 --> 00:00:30,990 And it's all gonna revolve around that route.js file 14 00:00:30,990 --> 00:00:34,350 that we had created inside of our src directory. 15 00:00:34,350 --> 00:00:36,330 So inside of this component right here 16 00:00:36,330 --> 00:00:38,340 we had created a Redux store 17 00:00:38,340 --> 00:00:40,623 and passed it directly to that provider tag. 18 00:00:41,460 --> 00:00:43,320 Now, when we called createStore right here 19 00:00:43,320 --> 00:00:46,740 we kind of brush over its actual implementation. 20 00:00:46,740 --> 00:00:50,400 To be clear, createStore is a function provided by Redux 21 00:00:50,400 --> 00:00:53,610 and it is the way in which we create an instance 22 00:00:53,610 --> 00:00:57,330 of the Redux store to use inside of our application. 23 00:00:57,330 --> 00:00:59,370 When we made use of createStore 24 00:00:59,370 --> 00:01:02,370 we had passed in a first argument of our reducers 25 00:01:02,370 --> 00:01:06,390 and then a second argument of an empty object. 26 00:01:06,390 --> 00:01:08,490 And it's this empty object right here 27 00:01:08,490 --> 00:01:10,470 that's going to be our savior. 28 00:01:10,470 --> 00:01:11,820 It's gonna be the way that we're going to 29 00:01:11,820 --> 00:01:14,433 get this comment list test to actually work. 30 00:01:15,390 --> 00:01:18,870 So remember, we use this store provided by Redux 31 00:01:18,870 --> 00:01:21,960 to store all this state of our application. 32 00:01:21,960 --> 00:01:24,000 So when our application first boots up 33 00:01:24,000 --> 00:01:26,763 we have a completely empty state. 34 00:01:27,960 --> 00:01:31,110 Every reducer inside of our application runs one time 35 00:01:31,110 --> 00:01:32,340 during that boot up. 36 00:01:32,340 --> 00:01:35,310 We get some initial state assembled by the reducer, 37 00:01:35,310 --> 00:01:38,100 which in our case is just an empty array 38 00:01:38,100 --> 00:01:39,780 for that comments key. 39 00:01:39,780 --> 00:01:42,000 And then Redux uses that to say like, okay 40 00:01:42,000 --> 00:01:44,610 like here's my initial state, I'm good to go. 41 00:01:44,610 --> 00:01:48,840 Now if we want to, we can actually pass some initial state 42 00:01:48,840 --> 00:01:52,920 for our application into this object right here. 43 00:01:52,920 --> 00:01:54,600 So what you and I are going to do 44 00:01:54,600 --> 00:01:56,340 is we're going to slightly customize 45 00:01:56,340 --> 00:01:58,890 the way this root component works 46 00:01:58,890 --> 00:02:02,190 and we're gonna say that any of our test files 47 00:02:02,190 --> 00:02:03,870 that want to make use of root 48 00:02:03,870 --> 00:02:07,020 can optionally pass in an additional argument 49 00:02:07,020 --> 00:02:08,610 to the root component right here or 50 00:02:08,610 --> 00:02:10,590 an additional prop to it. 51 00:02:10,590 --> 00:02:13,350 And that prop will be used to initialize the state 52 00:02:13,350 --> 00:02:14,583 within our Redux store. 53 00:02:15,450 --> 00:02:18,120 And maybe the best way to go about this is to give you 54 00:02:18,120 --> 00:02:19,830 some of the code that we're gonna actually write here. 55 00:02:19,830 --> 00:02:21,480 And then once we have the code on the screen 56 00:02:21,480 --> 00:02:23,370 it might make a little bit more sense. 57 00:02:23,370 --> 00:02:24,840 So here's what we're gonna do. 58 00:02:24,840 --> 00:02:26,640 Inside of our beforeEach, 59 00:02:26,640 --> 00:02:28,790 I'm gonna define a new variable right here, 60 00:02:29,820 --> 00:02:32,343 called initialState. 61 00:02:33,210 --> 00:02:35,640 InitialState is going to be an object 62 00:02:35,640 --> 00:02:37,920 with a property of comments 63 00:02:37,920 --> 00:02:40,200 and it's gonna have an array that has 64 00:02:40,200 --> 00:02:44,793 about comment one and comment two, like so. 65 00:02:46,050 --> 00:02:48,720 I'm gonna take this initial state object right here 66 00:02:48,720 --> 00:02:50,520 and pass it as a prop 67 00:02:50,520 --> 00:02:53,490 into the root component we just created. 68 00:02:53,490 --> 00:02:58,490 So I'll say initialState is initialState. 69 00:03:02,760 --> 00:03:05,253 So I'll now flip over to the route.js file. 70 00:03:07,170 --> 00:03:11,040 And now rather than passing in an empty object right here 71 00:03:11,040 --> 00:03:14,190 we're going to try to take that props initial state. 72 00:03:14,190 --> 00:03:15,990 So that initial state prop that we just passed in 73 00:03:15,990 --> 00:03:18,240 it's gonna show up inside this props object 74 00:03:18,240 --> 00:03:19,200 and we're gonna take it 75 00:03:19,200 --> 00:03:21,840 and pass it in as this second argument. 76 00:03:21,840 --> 00:03:23,280 So right here, I'm gonna first give myself 77 00:03:23,280 --> 00:03:25,710 a little bit of space to work with just so you can see 78 00:03:25,710 --> 00:03:27,960 this entire line of code more clearly. 79 00:03:27,960 --> 00:03:29,820 And then as a second argument to create store 80 00:03:29,820 --> 00:03:31,833 I'll pass in props.initialState. 81 00:03:34,590 --> 00:03:36,780 So now when our redux store boots up 82 00:03:36,780 --> 00:03:38,280 or when we create the store 83 00:03:38,280 --> 00:03:41,790 we can optionally provide some initial starting state 84 00:03:41,790 --> 00:03:43,950 for our application and for us 85 00:03:43,950 --> 00:03:45,570 for our comment list that is, 86 00:03:45,570 --> 00:03:48,720 the initial starting state will be a list of comments 87 00:03:48,720 --> 00:03:51,450 that has two comments inside of it. 88 00:03:51,450 --> 00:03:53,820 So now when we call mount on root 89 00:03:53,820 --> 00:03:55,710 with comment list right here, 90 00:03:55,710 --> 00:03:56,973 root is gonna boot up. 91 00:03:58,260 --> 00:04:01,260 It's going to render itself and create the Redux store. 92 00:04:01,260 --> 00:04:03,150 And it's gonna have an initial state 93 00:04:03,150 --> 00:04:07,230 with comments equal to these two comments right here. 94 00:04:07,230 --> 00:04:09,660 Comment list will then attempt to render itself. 95 00:04:09,660 --> 00:04:11,880 It'll run its map state to props function 96 00:04:11,880 --> 00:04:14,580 and it's gonna pull those two initial comments 97 00:04:14,580 --> 00:04:16,410 that we initialized our store with 98 00:04:16,410 --> 00:04:18,720 through that mapStateToProps function. 99 00:04:18,720 --> 00:04:20,820 And then comment list is going to render 100 00:04:20,820 --> 00:04:23,190 those two comments on the screen. 101 00:04:23,190 --> 00:04:24,960 So that's how we're gonna solve this whole issue 102 00:04:24,960 --> 00:04:27,480 of getting some data into our comment list 103 00:04:27,480 --> 00:04:29,010 so it can actually render out 104 00:04:29,010 --> 00:04:31,230 some meaningful information on the screen. 105 00:04:31,230 --> 00:04:34,263 We're going to make use of this idea of initial state. 106 00:04:36,180 --> 00:04:38,250 Now, before we actually try to test this all the way through 107 00:04:38,250 --> 00:04:40,470 we're gonna do one quick little fix here. 108 00:04:40,470 --> 00:04:42,720 None of the other tests we've written so far 109 00:04:42,720 --> 00:04:45,420 or even our index.js file 110 00:04:45,420 --> 00:04:47,010 inside of our root project directory, 111 00:04:47,010 --> 00:04:51,120 have any idea about that initial props, prop that we can, 112 00:04:51,120 --> 00:04:52,260 or initial state prop, 113 00:04:52,260 --> 00:04:55,500 so prop that we can pass to the root component right here. 114 00:04:55,500 --> 00:04:57,150 So if we try to run this code as is 115 00:04:57,150 --> 00:04:59,100 Redux is probably gonna complain and say, 116 00:04:59,100 --> 00:05:02,280 hey, you're trying to pass in an initial state of undefined 117 00:05:02,280 --> 00:05:03,720 and you can't do that. 118 00:05:03,720 --> 00:05:06,570 So to just solve the fact or fix the fact that 119 00:05:06,570 --> 00:05:09,060 none of our other uses of the root component 120 00:05:09,060 --> 00:05:11,250 are trying to pass in an initial state, 121 00:05:11,250 --> 00:05:14,280 we're gonna just modify his function a little bit. 122 00:05:14,280 --> 00:05:15,300 So rather than receiving 123 00:05:15,300 --> 00:05:17,280 the entire props argument right here 124 00:05:17,280 --> 00:05:21,120 I'm gonna do a little bit of ES6 destructuring. 125 00:05:21,120 --> 00:05:23,190 So I'm gonna try to pull off the children property 126 00:05:23,190 --> 00:05:25,230 which is used inside the component. 127 00:05:25,230 --> 00:05:28,083 So now I can do just children by itself. 128 00:05:28,920 --> 00:05:31,627 And then I'll also try to pull off initialState. 129 00:05:32,527 --> 00:05:34,800 And now I don't have to refer to props.initialState. 130 00:05:34,800 --> 00:05:37,379 I can say just initialState. 131 00:05:37,379 --> 00:05:39,420 And now the benefit of doing this destructuring 132 00:05:39,420 --> 00:05:43,290 is that I can set a default argument or a default value 133 00:05:43,290 --> 00:05:45,690 on the initialState property. 134 00:05:45,690 --> 00:05:48,210 So if someone calls our root component right here 135 00:05:48,210 --> 00:05:50,430 and they don't pass in an initial state, 136 00:05:50,430 --> 00:05:54,780 we can default that value to be an empty object. 137 00:05:54,780 --> 00:05:57,330 And now a root component is backwards compatible 138 00:05:57,330 --> 00:05:59,400 with all of the previous uses. 139 00:05:59,400 --> 00:06:01,713 So you can render the root component now, 140 00:06:02,580 --> 00:06:04,890 and you don't have to pass in any initial state. 141 00:06:04,890 --> 00:06:07,650 If you don't, we're just gonna sign it an empty object. 142 00:06:07,650 --> 00:06:09,060 But if you do, fantastic. 143 00:06:09,060 --> 00:06:12,153 We'll use that initial state when we make our Redux store. 144 00:06:13,350 --> 00:06:14,610 Okay, so that's pretty much it. 145 00:06:14,610 --> 00:06:16,560 Now I'm gonna save this file 146 00:06:16,560 --> 00:06:18,060 and I'll change back over to my 147 00:06:18,060 --> 00:06:21,120 comment list.test.js file over here. 148 00:06:21,120 --> 00:06:22,770 So over here we're creating the initial state. 149 00:06:22,770 --> 00:06:24,630 We pass it into the root component 150 00:06:24,630 --> 00:06:26,100 and then the comment list is going to try to 151 00:06:26,100 --> 00:06:29,100 pull that initial state through mapStateToProps. 152 00:06:29,100 --> 00:06:31,980 So now down inside of our actual test, for right now, 153 00:06:31,980 --> 00:06:34,080 let's just try to render this thing out 154 00:06:34,080 --> 00:06:35,850 and get a better sense of what's going on 155 00:06:35,850 --> 00:06:37,620 with our comment list. 156 00:06:37,620 --> 00:06:40,450 So I'm gonna do, how about a console.log 157 00:06:41,430 --> 00:06:45,660 of wrap.find li, and we'll get the length. 158 00:06:45,660 --> 00:06:47,910 So we'll try to find the number of li elements 159 00:06:47,910 --> 00:06:48,930 that have been created 160 00:06:48,930 --> 00:06:51,843 inside of our entire wrapped component. 161 00:06:53,850 --> 00:06:54,840 So I'm gonna save this 162 00:06:54,840 --> 00:06:56,250 and then we should be able to flip back over 163 00:06:56,250 --> 00:06:57,300 to our terminal. 164 00:06:57,300 --> 00:07:00,630 And I have created two comments right here inside the array. 165 00:07:00,630 --> 00:07:03,810 So I will expect to find two li's 166 00:07:03,810 --> 00:07:06,870 with this console log once this test actually runs. 167 00:07:06,870 --> 00:07:08,223 So let's flip back over. 168 00:07:09,390 --> 00:07:12,090 Looks like I've got a couple tests still running here. 169 00:07:14,580 --> 00:07:15,780 So I've got a couple passes 170 00:07:15,780 --> 00:07:18,300 which means that I have not broken any existing tests. 171 00:07:18,300 --> 00:07:20,640 And then right here you'll see a console log 172 00:07:20,640 --> 00:07:24,330 from our comment list.test.js file of two, 173 00:07:24,330 --> 00:07:26,430 which means our component has successfully 174 00:07:26,430 --> 00:07:28,830 found two li's inside there. 175 00:07:28,830 --> 00:07:29,663 So what that means is 176 00:07:29,663 --> 00:07:31,980 we are successfully initializing our redux store 177 00:07:31,980 --> 00:07:33,210 with some initial state 178 00:07:33,210 --> 00:07:34,920 which the comment list can then make use of 179 00:07:34,920 --> 00:07:37,710 when it's initially rendering itself. 180 00:07:37,710 --> 00:07:40,210 So that's pretty much it. That's the entire story. 181 00:07:41,130 --> 00:07:43,950 So our component test is looking pretty good now. 182 00:07:43,950 --> 00:07:45,240 Let's take a quick pause right here. 183 00:07:45,240 --> 00:07:46,530 When we come back the next section 184 00:07:46,530 --> 00:07:48,990 we'll finish the rest of this test off. 185 00:07:48,990 --> 00:07:51,440 So quick break and I'll see you in just a minute.