1 00:00:06,540 --> 00:00:08,520 - In this section, we're going to investigate 2 00:00:08,520 --> 00:00:11,250 shallow rendering via the shallow function. 3 00:00:11,250 --> 00:00:13,080 So if you remember how it works, 4 00:00:13,080 --> 00:00:15,980 you call the shallow function and you give it a component. 5 00:00:17,010 --> 00:00:20,010 The shallow function just renders that component, 6 00:00:20,010 --> 00:00:23,040 but not its children, so if your component 7 00:00:23,040 --> 00:00:27,240 had subcomponents, those subcomponents will not be expanded. 8 00:00:27,240 --> 00:00:29,727 Just the top-level component gets rendered. 9 00:00:29,727 --> 00:00:31,950 And that's very useful for unit testing. 10 00:00:31,950 --> 00:00:34,800 You can test this component without worrying 11 00:00:34,800 --> 00:00:37,260 what its subcomponents might render. 12 00:00:37,260 --> 00:00:39,420 So we're gonna have a look at the example. 13 00:00:39,420 --> 00:00:41,880 The actual example itself is the same as before. 14 00:00:41,880 --> 00:00:43,830 We're just going to look at some additional tests 15 00:00:43,830 --> 00:00:45,360 that we haven't yet seen. 16 00:00:45,360 --> 00:00:48,690 So in the demo folder, if you go through Lesson 10, 17 00:00:48,690 --> 00:00:51,584 Enzyme_Shallow, in that folder, 18 00:00:51,584 --> 00:00:53,730 using the Create React App tool, 19 00:00:53,730 --> 00:00:56,310 I created a demo application, demo-app. 20 00:00:56,310 --> 00:00:57,690 Okay, so here it is. 21 00:00:57,690 --> 00:01:01,650 Just a very quick reminder of what this application contains 22 00:01:01,650 --> 00:01:03,780 before we dive into the tests. 23 00:01:03,780 --> 00:01:08,780 So there's a Product class, there's a Product class there 24 00:01:09,120 --> 00:01:12,360 that basically describes the details for one product. 25 00:01:12,360 --> 00:01:14,550 I have a top-level App component 26 00:01:14,550 --> 00:01:17,250 which basically renders a product list. 27 00:01:17,250 --> 00:01:20,550 So I've created a sample array of products. 28 00:01:20,550 --> 00:01:23,430 I've passed that array into my ProductList component. 29 00:01:23,430 --> 00:01:25,500 Display those products, please. 30 00:01:25,500 --> 00:01:27,510 And here's my ProductList component. 31 00:01:27,510 --> 00:01:32,130 It receives an array of product items. 32 00:01:32,130 --> 00:01:34,020 There were three of them. 33 00:01:34,020 --> 00:01:35,730 If the array was empty, 34 00:01:35,730 --> 00:01:39,810 then it would return this content, "No products in stock." 35 00:01:39,810 --> 00:01:43,290 Otherwise, it would say, "There are 3 items in stock," 36 00:01:43,290 --> 00:01:45,630 and for each product, it would render it 37 00:01:45,630 --> 00:01:48,060 using the Product component. 38 00:01:48,060 --> 00:01:51,570 The Product component decides how to render one product, 39 00:01:51,570 --> 00:01:54,690 and it renders it with a certain style, 40 00:01:54,690 --> 00:01:57,303 the description, the price, and the units in stock. 41 00:01:58,410 --> 00:02:01,349 Okay, and then if I go back up to my ProductList, 42 00:02:01,349 --> 00:02:03,030 at the end, it displays the total value. 43 00:02:03,030 --> 00:02:05,193 It adds the values together and it displays that 44 00:02:05,193 --> 00:02:07,410 that using the TotalValue component, 45 00:02:07,410 --> 00:02:10,320 get the total cost, and display it 46 00:02:10,320 --> 00:02:12,120 in a stylized div, like that. 47 00:02:12,120 --> 00:02:14,430 Okay, so we've seen that code before, 48 00:02:14,430 --> 00:02:17,190 and this is what it looks like, 49 00:02:17,190 --> 00:02:19,470 each product with a heading, 50 00:02:19,470 --> 00:02:21,720 and a suitable total value, like so. 51 00:02:21,720 --> 00:02:25,590 So the code isn't new. The tests are going to be new. 52 00:02:25,590 --> 00:02:27,180 Right, so, let's take a closer look. 53 00:02:27,180 --> 00:02:29,130 When you call the shallow function, 54 00:02:29,130 --> 00:02:31,680 it returns something called a ShallowWrapper, 55 00:02:31,680 --> 00:02:34,230 an object that encapsulates the HTML, 56 00:02:34,230 --> 00:02:36,750 the content, that has just been rendered. 57 00:02:36,750 --> 00:02:41,280 And this ShallowWrapper object provides an API. 58 00:02:41,280 --> 00:02:44,550 It has functions which allow you to drill into that content 59 00:02:44,550 --> 00:02:46,470 to see what's just been rendered. 60 00:02:46,470 --> 00:02:49,320 So, using this, when you call that function 61 00:02:49,320 --> 00:02:50,760 and it returns one of these, 62 00:02:50,760 --> 00:02:54,420 you can call functions on this then, such as find. 63 00:02:54,420 --> 00:02:59,070 In the rendered content, you can find content. 64 00:02:59,070 --> 00:03:01,440 You can use a selector here as CSS. 65 00:03:01,440 --> 00:03:04,470 So it could be the name of an element, like div, 66 00:03:04,470 --> 00:03:08,730 or it could be a CSS class, like important, 67 00:03:08,730 --> 00:03:09,933 or it could be an ID. 68 00:03:10,890 --> 00:03:14,160 Right, okay. You can get back a list of all your children. 69 00:03:14,160 --> 00:03:17,220 You can get back the first child, or the last child, 70 00:03:17,220 --> 00:03:18,870 or the child at a particular index, like, 71 00:03:18,870 --> 00:03:21,570 give me back my child at index 3. 72 00:03:21,570 --> 00:03:23,460 You can also get properties. 73 00:03:23,460 --> 00:03:24,570 This is important. 74 00:03:24,570 --> 00:03:27,060 Your component will be attempting 75 00:03:27,060 --> 00:03:28,950 to render other components. 76 00:03:28,950 --> 00:03:32,310 What properties are being passed in to those components? 77 00:03:32,310 --> 00:03:33,780 What property was passed in? 78 00:03:33,780 --> 00:03:36,960 What was the value of the x property, okay? 79 00:03:36,960 --> 00:03:40,800 Am I invoking my child content, my child components, 80 00:03:40,800 --> 00:03:42,450 with the right properties? 81 00:03:42,450 --> 00:03:44,670 They won't be rendered, but I can verify 82 00:03:44,670 --> 00:03:46,650 what properties I'm passing into them 83 00:03:46,650 --> 00:03:48,870 to make sure that I'm calling them correctly. 84 00:03:48,870 --> 00:03:51,690 As I said, if one function calls another function, 85 00:03:51,690 --> 00:03:54,630 am I passing the right parameters into that function? 86 00:03:54,630 --> 00:03:56,370 It's not going to invoke the function, 87 00:03:56,370 --> 00:03:59,610 but am I passing the right properties in, just in case? 88 00:03:59,610 --> 00:04:03,060 So there's quite a wide API, and it's quite handy. 89 00:04:03,060 --> 00:04:04,470 It's quite simple, actually. 90 00:04:04,470 --> 00:04:06,270 The documentation is pretty good. 91 00:04:06,270 --> 00:04:08,700 Let's take a quick look at the link there. 92 00:04:08,700 --> 00:04:09,630 So here it is. 93 00:04:09,630 --> 00:04:11,880 If you go to that link, it gives you a little bit 94 00:04:11,880 --> 00:04:14,645 of an overall description of shallow rendering. 95 00:04:14,645 --> 00:04:16,350 We kind of discuss the high-level principles, 96 00:04:16,350 --> 00:04:18,150 a few examples as well, 97 00:04:18,150 --> 00:04:22,590 and then, if you drill down, the ShallowWrapper object. 98 00:04:22,590 --> 00:04:25,650 Remember, when you call the shallow function, 99 00:04:25,650 --> 00:04:27,450 it gives you back one of these objects, 100 00:04:27,450 --> 00:04:29,670 and this object has various different functions 101 00:04:29,670 --> 00:04:32,070 which allow you to locate content 102 00:04:32,070 --> 00:04:35,550 in your rendered component, okay? 103 00:04:35,550 --> 00:04:38,340 So it's quite a rich API. 104 00:04:38,340 --> 00:04:40,470 It's quite sophisticated. 105 00:04:40,470 --> 00:04:44,160 Not massively complicated, but good enough 106 00:04:44,160 --> 00:04:46,590 for you to locate any kind of content 107 00:04:46,590 --> 00:04:49,083 in your rendered web page. 108 00:04:50,280 --> 00:04:53,880 All right, so let's take a look at the test. 109 00:04:53,880 --> 00:04:57,720 We're gonna put all our tests into ProductList.test.tsx 110 00:04:57,720 --> 00:05:00,150 So I've written three different tests in there. 111 00:05:00,150 --> 00:05:03,330 Let me give you a quick look before we dive in. 112 00:05:03,330 --> 00:05:05,010 So here's my code. 113 00:05:05,010 --> 00:05:07,010 We're gonna look at ProductList.test.tsx 114 00:05:08,550 --> 00:05:10,890 And I'll just collapse it down. 115 00:05:10,890 --> 00:05:11,723 There we go. 116 00:05:11,723 --> 00:05:14,100 So you can see, first of all, I've imported 117 00:05:14,100 --> 00:05:16,740 the shallow function from Enzyme, 118 00:05:16,740 --> 00:05:19,740 plus all of my classes and components. 119 00:05:19,740 --> 00:05:22,590 And then, oh, I've set up some sample data 120 00:05:22,590 --> 00:05:24,930 that I'm gonna use in some of my tests. 121 00:05:24,930 --> 00:05:26,880 The first test just checks, you know, 122 00:05:26,880 --> 00:05:28,110 when you're doing unit testing, 123 00:05:28,110 --> 00:05:30,390 you should check the simplest scenario first. 124 00:05:30,390 --> 00:05:33,480 The simplest scenario, what does my component render 125 00:05:33,480 --> 00:05:35,100 if the ProductList is empty? 126 00:05:35,100 --> 00:05:37,080 We'll have a look at that test first. 127 00:05:37,080 --> 00:05:40,890 Then we'll have a look at, if the ProductList is not empty, 128 00:05:40,890 --> 00:05:44,070 if it contains actual populated content, 129 00:05:44,070 --> 00:05:46,440 what does it render in that case? 130 00:05:46,440 --> 00:05:51,090 And what properties am I passing into my child components? 131 00:05:51,090 --> 00:05:52,380 We'll have a look at that in the third test. 132 00:05:52,380 --> 00:05:54,780 Okay, so let's have a look at the first test first. 133 00:05:54,780 --> 00:05:56,610 I'll just expand it here. 134 00:05:56,610 --> 00:05:57,660 And then we'll spend a few minutes 135 00:05:57,660 --> 00:05:59,670 just dissecting the code in here 136 00:05:59,670 --> 00:06:01,623 and describing what's going on. 137 00:06:02,730 --> 00:06:04,500 Right, so here it is. 138 00:06:04,500 --> 00:06:07,740 So first of all, I call the shallow function. 139 00:06:07,740 --> 00:06:09,930 I'm gonna render the ProductList component, 140 00:06:09,930 --> 00:06:12,090 because that's what I'm trying to test. 141 00:06:12,090 --> 00:06:14,340 So render the ProductList component, oh, 142 00:06:14,340 --> 00:06:16,683 and pass in an empty product array. 143 00:06:17,640 --> 00:06:19,230 Don't forget the curly brackets. 144 00:06:19,230 --> 00:06:22,110 You know, when you're using JSX, or TSX, 145 00:06:22,110 --> 00:06:24,450 when you're in the middle of an XML block, 146 00:06:24,450 --> 00:06:26,580 you've gotta use curly brackets to slip 147 00:06:26,580 --> 00:06:27,960 back into JavaScript mode, 148 00:06:27,960 --> 00:06:30,720 because the square brackets here is JavaScript. 149 00:06:30,720 --> 00:06:31,620 Empty array. 150 00:06:31,620 --> 00:06:34,920 It passes an empty array into ProductList. 151 00:06:34,920 --> 00:06:37,290 Before we look at the test, let's remind ourselves 152 00:06:37,290 --> 00:06:39,600 what we expect to get back in that situation, 153 00:06:39,600 --> 00:06:41,910 because I've already actually written the code. 154 00:06:41,910 --> 00:06:44,310 So in my ProductList component, 155 00:06:44,310 --> 00:06:47,760 if the products that get passed in is an empty array, 156 00:06:47,760 --> 00:06:49,590 then it should come in here, shouldn't it? 157 00:06:49,590 --> 00:06:51,210 The length is 0. 158 00:06:51,210 --> 00:06:53,190 This is what should be rendered, 159 00:06:53,190 --> 00:06:56,970 a div with an h1, "No products in stock." 160 00:06:56,970 --> 00:06:59,250 That's what we would expect to get back. 161 00:06:59,250 --> 00:07:03,033 When we render ProductList with an empty array, 162 00:07:03,870 --> 00:07:05,763 this is what we should get back. 163 00:07:07,140 --> 00:07:08,973 Let's test that we do get that back. 164 00:07:09,990 --> 00:07:12,720 Right, so having called the shallow function, 165 00:07:12,720 --> 00:07:16,080 it'll give me back a wrapper to that rendered content. 166 00:07:16,080 --> 00:07:18,510 I'm expecting that there should be, 167 00:07:18,510 --> 00:07:22,740 in that rendered content, there should be one h1 element. 168 00:07:22,740 --> 00:07:25,770 The find function finds all matches, 169 00:07:25,770 --> 00:07:28,020 but there should just be one h1, 170 00:07:28,020 --> 00:07:32,280 so the length of this collection of h1s should be 1. 171 00:07:32,280 --> 00:07:35,310 I should have got back one h1. 172 00:07:35,310 --> 00:07:38,673 In other words, I should have got back this h1 here. 173 00:07:39,810 --> 00:07:43,170 Okay, let's check the text in there. 174 00:07:43,170 --> 00:07:45,450 Let's find that first h1. 175 00:07:45,450 --> 00:07:47,610 Let's get the first h1. 176 00:07:47,610 --> 00:07:49,620 Okay, there is only one. 177 00:07:49,620 --> 00:07:52,170 Let's get the text out of it. 178 00:07:52,170 --> 00:07:57,170 The text should be "No products in stock," okay? 179 00:07:57,750 --> 00:07:59,100 That's what it should be. 180 00:07:59,100 --> 00:08:00,720 Well, obviously you can see it is. 181 00:08:00,720 --> 00:08:02,560 To check that that's what we got back. 182 00:08:02,560 --> 00:08:06,900 There we go. Get back all h1s, just the first one. 183 00:08:06,900 --> 00:08:08,670 Give me the text content. 184 00:08:08,670 --> 00:08:11,847 That text content should be "No products in stock." 185 00:08:12,750 --> 00:08:15,930 Also, because there were no products in stock, 186 00:08:15,930 --> 00:08:19,200 it shouldn't render any Product elements, 187 00:08:19,200 --> 00:08:21,470 and it shouldn't render a TotalValue. 188 00:08:22,890 --> 00:08:25,920 In other words, we didn't come into this part 189 00:08:25,920 --> 00:08:28,830 where it rendered Products and where 190 00:08:28,830 --> 00:08:30,192 it rendered a TotalValue. 191 00:08:30,192 --> 00:08:32,160 We shouldn't see that in this case. 192 00:08:32,160 --> 00:08:34,560 We should just see that there should not be 193 00:08:34,560 --> 00:08:36,300 any Product elements rendered, 194 00:08:36,300 --> 00:08:39,150 and there should not be a TotalValue rendered, either. 195 00:08:39,150 --> 00:08:42,630 That shouldn't happen when you don't have any Products. 196 00:08:42,630 --> 00:08:44,220 We should just get back that. 197 00:08:44,220 --> 00:08:45,900 So let's verify that. 198 00:08:45,900 --> 00:08:49,890 Let's verify, if I tried to find a Product component. 199 00:08:49,890 --> 00:08:53,520 Notice that you can search for components as well. 200 00:08:53,520 --> 00:08:54,870 They wouldn't be rendered, 201 00:08:54,870 --> 00:08:59,220 but they would be present in your document structure. 202 00:08:59,220 --> 00:09:02,280 You'll either use quotes, if it's a regular element, 203 00:09:02,280 --> 00:09:06,120 like h1, or you use the component name, 204 00:09:06,120 --> 00:09:07,920 if it's an actual component. 205 00:09:07,920 --> 00:09:09,630 Check to see that there are no 206 00:09:09,630 --> 00:09:11,550 Product components rendered. 207 00:09:11,550 --> 00:09:14,940 Check to see that there's no TotalValue rendered, okay? 208 00:09:14,940 --> 00:09:16,800 It doesn't make sense to have these 209 00:09:16,800 --> 00:09:18,550 if the product collection is empty. 210 00:09:19,650 --> 00:09:20,850 Okay. So that's good. 211 00:09:20,850 --> 00:09:22,140 Let's have look at another one. 212 00:09:22,140 --> 00:09:23,760 In this one, now, I'm actually gonna pass in 213 00:09:23,760 --> 00:09:25,290 some actual products. 214 00:09:25,290 --> 00:09:27,150 So, a quick reminder. 215 00:09:27,150 --> 00:09:30,480 In my product test, I set up an array 216 00:09:30,480 --> 00:09:32,820 of three products here, and what I'm gonna do now 217 00:09:32,820 --> 00:09:34,560 is to see what gets rendered 218 00:09:34,560 --> 00:09:37,350 if I pass those into my ProductList. 219 00:09:37,350 --> 00:09:39,450 So that's gonna be the second test. 220 00:09:39,450 --> 00:09:42,600 The second test is when I actually pass products 221 00:09:42,600 --> 00:09:44,760 into my ProductList. 222 00:09:44,760 --> 00:09:47,460 The products we pass in are the products up here. 223 00:09:47,460 --> 00:09:48,630 There were three of them. 224 00:09:48,630 --> 00:09:52,530 Let's see what gets rendered in that case, okay? 225 00:09:52,530 --> 00:09:55,170 So first of all, render ProductList 226 00:09:55,170 --> 00:09:57,750 with an array of products, three of them, 227 00:09:57,750 --> 00:10:00,000 and let's see what we get back. 228 00:10:00,000 --> 00:10:01,890 So let's just, again, remind ourselves 229 00:10:01,890 --> 00:10:05,323 what we expect to get back in my ProductList. 230 00:10:06,840 --> 00:10:08,883 If you pass in an actual array, 231 00:10:09,810 --> 00:10:13,050 then it should come down into the else part, shouldn't it? 232 00:10:13,050 --> 00:10:15,510 And what we should see being rendered 233 00:10:15,510 --> 00:10:18,960 is an h1, "3 product(s) in stock." 234 00:10:18,960 --> 00:10:21,030 Let's check that happened. 235 00:10:21,030 --> 00:10:24,390 There should also be three Product elements rendered. 236 00:10:24,390 --> 00:10:26,820 Well, three Product elements created. 237 00:10:26,820 --> 00:10:28,980 Remember, when you're doing shallow rendering 238 00:10:28,980 --> 00:10:32,490 there will be a Product element in the content, 239 00:10:32,490 --> 00:10:34,980 but it doesn't actually expand it, okay? 240 00:10:34,980 --> 00:10:37,500 So we will get back an h1. 241 00:10:37,500 --> 00:10:39,630 We will get back three products. 242 00:10:39,630 --> 00:10:41,640 They won't contain any content, 243 00:10:41,640 --> 00:10:44,400 but they'll still be there in the structure. 244 00:10:44,400 --> 00:10:46,410 And we'll also get back a TotalValue element. 245 00:10:46,410 --> 00:10:48,480 And again, it won't actually expand it. 246 00:10:48,480 --> 00:10:50,240 Shallow rendering doesn't render it, 247 00:10:50,240 --> 00:10:53,070 it doesn't render child elements, okay? 248 00:10:53,070 --> 00:10:55,830 They are there, but they're not expanded. 249 00:10:55,830 --> 00:10:58,380 So we should get back an h1, 250 00:10:58,380 --> 00:11:02,430 three products, and one TotalValue. 251 00:11:02,430 --> 00:11:04,470 That's what we should expect to get back 252 00:11:04,470 --> 00:11:06,120 when we pass in an array of products. 253 00:11:06,120 --> 00:11:07,890 They should come into there and do that, 254 00:11:07,890 --> 00:11:09,723 and that's what my tests establish. 255 00:11:11,130 --> 00:11:13,953 Was there an h1 element? 256 00:11:13,953 --> 00:11:16,590 There should have been one h1 element. 257 00:11:16,590 --> 00:11:18,450 The text inside that element 258 00:11:18,450 --> 00:11:21,210 should be "3 product(s) in stock." 259 00:11:21,210 --> 00:11:25,140 What I've just verified there is this. 260 00:11:25,140 --> 00:11:27,993 Did my rendered content do that bit correctly? 261 00:11:29,070 --> 00:11:30,960 So that's what my test is establishing. 262 00:11:30,960 --> 00:11:34,020 Did my component render this correctly? 263 00:11:34,020 --> 00:11:35,880 That's what I expect. 264 00:11:35,880 --> 00:11:38,130 Let's verify that's what we got back. 265 00:11:38,130 --> 00:11:40,170 Right, what about the next part? 266 00:11:40,170 --> 00:11:42,660 In my wrapper, the rendered content, 267 00:11:42,660 --> 00:11:44,894 or the content that was created, 268 00:11:44,894 --> 00:11:47,430 there should be a Product component, 269 00:11:47,430 --> 00:11:48,960 there should be three of them, 270 00:11:48,960 --> 00:11:51,450 because I passed in an array of three Products. 271 00:11:51,450 --> 00:11:52,590 Then it should have basically looped 272 00:11:52,590 --> 00:11:54,270 through this three times, 273 00:11:54,270 --> 00:11:56,520 and it should have created three Products. 274 00:11:56,520 --> 00:11:57,870 Again, it doesn't expand them, 275 00:11:57,870 --> 00:12:00,240 but they are there in the structure. 276 00:12:00,240 --> 00:12:03,540 Just the component itself, but not its content. 277 00:12:03,540 --> 00:12:05,823 There should be three Product components. 278 00:12:06,900 --> 00:12:08,640 Okay, right. 279 00:12:08,640 --> 00:12:11,670 Those Product components are not rendered, okay, 280 00:12:11,670 --> 00:12:14,610 so it doesn't actually go into the Product component. 281 00:12:14,610 --> 00:12:17,190 So I'm having a look at this and verifying, 282 00:12:17,190 --> 00:12:21,153 I'm just proving, if the Product was rendered, 283 00:12:22,103 --> 00:12:24,150 if the Product was rendered, 284 00:12:24,150 --> 00:12:28,277 the Product would have rendered itself like this, okay? 285 00:12:28,277 --> 00:12:29,760 If the Product was rendered, 286 00:12:29,760 --> 00:12:33,360 it would render a div with a CSS class of productItem. 287 00:12:33,360 --> 00:12:36,020 It doesn't do that rendering 288 00:12:36,020 --> 00:12:38,340 when you call the shallow function. 289 00:12:38,340 --> 00:12:40,530 Even though it knows there are three Products, 290 00:12:40,530 --> 00:12:43,650 it doesn't actually call the Product component. 291 00:12:43,650 --> 00:12:46,350 It just exists, but it doesn't go into it. 292 00:12:46,350 --> 00:12:49,320 So in other words, we should not find 293 00:12:49,320 --> 00:12:52,620 any of this expansion in our output. 294 00:12:52,620 --> 00:12:56,490 So let's verify that we don't have any productItem divs. 295 00:12:56,490 --> 00:13:01,410 Let's verify that there are no divs with productItem, okay? 296 00:13:01,410 --> 00:13:04,560 This proves that although the Product component existed, 297 00:13:04,560 --> 00:13:07,350 it didn't get expanded, it didn't get rendered, 298 00:13:07,350 --> 00:13:10,590 so there was no div with a CSS class of productItem. 299 00:13:10,590 --> 00:13:12,210 That length is 0. 300 00:13:12,210 --> 00:13:13,830 In other words, the Product component 301 00:13:13,830 --> 00:13:15,723 was not actually rendered. 302 00:13:16,560 --> 00:13:18,450 A similar thing for TotalValue. 303 00:13:18,450 --> 00:13:22,413 The TotalValue component exists, but it wasn't rendered. 304 00:13:24,030 --> 00:13:26,193 So a reminder here, in my ProductList, 305 00:13:27,120 --> 00:13:29,100 a shallow rendering, it'll realize 306 00:13:29,100 --> 00:13:31,140 there's going to be a TotalValue component. 307 00:13:31,140 --> 00:13:34,470 That TotalValue component exists, 308 00:13:34,470 --> 00:13:39,060 the TotalValue component does exist, but it's not expanded. 309 00:13:39,060 --> 00:13:44,060 So the content of my TotalValue component is not expanded. 310 00:13:44,790 --> 00:13:48,510 It does not generate a div with a totalValue class. 311 00:13:48,510 --> 00:13:51,480 There is no div with a totalValue class. 312 00:13:51,480 --> 00:13:53,430 So the components exist, but their 313 00:13:53,430 --> 00:13:55,350 child content is not rendered. 314 00:13:55,350 --> 00:13:57,450 That's what shallow rendering means. 315 00:13:57,450 --> 00:14:00,570 Don't expand the child components. 316 00:14:00,570 --> 00:14:02,493 Okay, so hopefully, that makes sense. 317 00:14:03,840 --> 00:14:07,170 Right, the third test is kinda similar. 318 00:14:07,170 --> 00:14:10,530 I do a shallow rendering of ProductList. 319 00:14:10,530 --> 00:14:13,703 So we're passing in some products, okay. 320 00:14:14,730 --> 00:14:18,480 So here's my ProductList that's going to be invoked. 321 00:14:18,480 --> 00:14:20,730 I'm invoking my ProductList component, 322 00:14:20,730 --> 00:14:22,470 passing in three Products. 323 00:14:22,470 --> 00:14:24,150 It should come down here. 324 00:14:24,150 --> 00:14:26,970 What I'm testing now is, what properties 325 00:14:26,970 --> 00:14:29,880 did it pass in to the TotalValue component? 326 00:14:29,880 --> 00:14:32,310 I'm not going to expand this component, 327 00:14:32,310 --> 00:14:37,310 but I can verify, did my code pass in the right parameters? 328 00:14:37,590 --> 00:14:40,350 Did it pass in the correct parameters into the component? 329 00:14:40,350 --> 00:14:43,380 Just like saying, I'm testing this function. 330 00:14:43,380 --> 00:14:45,830 I know this function is gonna call that function. 331 00:14:47,340 --> 00:14:49,680 That function isn't actually going to be invoked 332 00:14:49,680 --> 00:14:52,200 with shallow rendering, but can I verify 333 00:14:52,200 --> 00:14:54,750 that I've passed in the correct parameters? 334 00:14:54,750 --> 00:14:56,130 So that, obviously, if it was invoked, 335 00:14:56,130 --> 00:14:57,750 it would render the right stuff. 336 00:14:57,750 --> 00:14:58,920 So that's what I'm doing here. 337 00:14:58,920 --> 00:15:03,360 Shallow rendering, get the return content via the wrapper, 338 00:15:03,360 --> 00:15:05,463 find the TotalValue component. 339 00:15:07,020 --> 00:15:09,630 So there's the TotalValue component. 340 00:15:09,630 --> 00:15:11,790 In fact, remember, when you call the find function, 341 00:15:11,790 --> 00:15:13,140 it gives you back a collection 342 00:15:13,140 --> 00:15:16,830 of all TotalValue components, if there were many. 343 00:15:16,830 --> 00:15:17,940 Well, there's only one. 344 00:15:17,940 --> 00:15:19,650 Give me back the first TotalValue, 345 00:15:19,650 --> 00:15:22,383 find the property called products. 346 00:15:23,460 --> 00:15:26,850 So it'll basically find the products property, 347 00:15:26,850 --> 00:15:30,363 and it'll say, what have you passed in to that property? 348 00:15:31,380 --> 00:15:35,970 You should have passed in an array whose length is 3. 349 00:15:35,970 --> 00:15:37,320 Get the products property. 350 00:15:37,320 --> 00:15:39,090 What value did I pass in? 351 00:15:39,090 --> 00:15:41,400 I passed in an array, actually. 352 00:15:41,400 --> 00:15:44,520 Check that the length of that array is 3. 353 00:15:44,520 --> 00:15:47,430 In other words, when we render this component, 354 00:15:47,430 --> 00:15:49,890 does it attempt to render that component? 355 00:15:49,890 --> 00:15:53,520 Does it pass in a products property, 356 00:15:53,520 --> 00:15:55,410 an array whose length is 3? 357 00:15:55,410 --> 00:15:57,090 Have I invoked that property, 358 00:15:57,090 --> 00:16:00,750 have I invoked that component with the correct properties? 359 00:16:00,750 --> 00:16:03,870 So it's a bit like mocking, really. 360 00:16:03,870 --> 00:16:05,520 There is this other component 361 00:16:05,520 --> 00:16:07,650 that I'm thinking about calling. 362 00:16:07,650 --> 00:16:09,030 Let's just check that I'm passing 363 00:16:09,030 --> 00:16:11,130 the right parameters into it so that it 364 00:16:11,130 --> 00:16:12,963 will work later on, hopefully. 365 00:16:13,860 --> 00:16:15,870 Okay, so that was quite a lot going on there. 366 00:16:15,870 --> 00:16:18,060 You probably wanna have another look through those tests 367 00:16:18,060 --> 00:16:21,540 and just make sure that you're confident. 368 00:16:21,540 --> 00:16:23,670 But all we need to do now is just run the tests 369 00:16:23,670 --> 00:16:25,770 and cross our fingers and hope it works, 370 00:16:25,770 --> 00:16:27,480 and it does work. 371 00:16:27,480 --> 00:16:30,360 So we had an example, a component 372 00:16:30,360 --> 00:16:32,010 with an empty bunch of products, 373 00:16:32,010 --> 00:16:35,340 returned a simple "No products in stock," 374 00:16:35,340 --> 00:16:38,400 we passed in a collection of three Products, 375 00:16:38,400 --> 00:16:41,760 and ensured that it rendered them correctly, 376 00:16:41,760 --> 00:16:44,580 and then we passed in the same, but this time, 377 00:16:44,580 --> 00:16:46,290 we just verified the properties 378 00:16:46,290 --> 00:16:48,450 we were passing into a child component. 379 00:16:48,450 --> 00:16:51,903 Okay, so that's basically shallow rendering in a nutshell.