1 00:00:06,660 --> 00:00:09,870 - In a real application, users click buttons, 2 00:00:09,870 --> 00:00:11,790 enter the values into text boxes, 3 00:00:11,790 --> 00:00:15,270 and we have event handlers that process those events. 4 00:00:15,270 --> 00:00:17,430 And in your tests, you have to make sure 5 00:00:17,430 --> 00:00:19,530 that those event handlers work properly. 6 00:00:19,530 --> 00:00:21,270 If the user clicks this button, 7 00:00:21,270 --> 00:00:23,310 does my application respond properly? 8 00:00:23,310 --> 00:00:26,730 So you can simulate events in a react application. 9 00:00:26,730 --> 00:00:30,480 Enzyme allows you to simulate from a test harness, 10 00:00:30,480 --> 00:00:32,910 the user interacting with the application. 11 00:00:32,910 --> 00:00:35,970 The user isn't really interacting with the application 12 00:00:35,970 --> 00:00:39,420 because your test is automated, but you can emulate it. 13 00:00:39,420 --> 00:00:42,630 So this works if you're doing shallow rendering 14 00:00:42,630 --> 00:00:44,400 or full DOM rendering. 15 00:00:44,400 --> 00:00:46,170 If you call the shallow function, 16 00:00:46,170 --> 00:00:47,940 or if you call the mount function, 17 00:00:47,940 --> 00:00:50,370 Enzyme will allow you to emulate events 18 00:00:50,370 --> 00:00:52,500 upon your components. 19 00:00:52,500 --> 00:00:54,780 But if you're just calling the render function, 20 00:00:54,780 --> 00:00:56,160 then it doesn't work. 21 00:00:56,160 --> 00:00:59,490 So if you call the shallow function, or the mount function, 22 00:00:59,490 --> 00:01:03,240 Enzyme helps you simulate events on your content. 23 00:01:03,240 --> 00:01:05,430 So why bother? 24 00:01:05,430 --> 00:01:08,190 Well, like I said, because in a real application, 25 00:01:08,190 --> 00:01:11,070 the user will interact with your elements 26 00:01:11,070 --> 00:01:12,570 but in your test harness, 27 00:01:12,570 --> 00:01:15,330 the user isn't actually sitting there, it's automated. 28 00:01:15,330 --> 00:01:18,450 So you can programmatically emulate user events 29 00:01:18,450 --> 00:01:20,340 to see how your program responds. 30 00:01:20,340 --> 00:01:23,280 Does my component update itself properly 31 00:01:23,280 --> 00:01:26,670 when the user does this event? 32 00:01:26,670 --> 00:01:29,070 So what I've done is I've slightly enhanced 33 00:01:29,070 --> 00:01:30,690 the sample application. 34 00:01:30,690 --> 00:01:32,580 If you go into Enzyme Events, 35 00:01:32,580 --> 00:01:35,940 there's a demo application there and it's similar to before, 36 00:01:35,940 --> 00:01:37,800 but it's been enhanced. 37 00:01:37,800 --> 00:01:39,450 If you wanna run it yourself, 38 00:01:39,450 --> 00:01:43,470 go to the Enzyme Events demo app for lesson 10, 39 00:01:43,470 --> 00:01:46,050 npm install, to install the libraries. 40 00:01:46,050 --> 00:01:50,580 And then npm start or yarn start to start the application. 41 00:01:50,580 --> 00:01:52,680 And what you'll find is that 42 00:01:52,680 --> 00:01:54,930 the application now has two text boxes. 43 00:01:54,930 --> 00:01:57,240 The user can enter a minimum text value, 44 00:01:57,240 --> 00:02:00,690 a minimum product value and a maximum product value, 45 00:02:00,690 --> 00:02:03,390 and the application will only display products 46 00:02:03,390 --> 00:02:05,040 in that range. 47 00:02:05,040 --> 00:02:08,010 So that makes it a little bit more interactive. 48 00:02:08,010 --> 00:02:09,180 Let's see how that looks. 49 00:02:09,180 --> 00:02:11,220 I've built the application and it's running. 50 00:02:11,220 --> 00:02:12,720 Let's see what it looks like. 51 00:02:12,720 --> 00:02:14,070 So here it is. 52 00:02:14,070 --> 00:02:15,990 Notice the text boxes at the top. 53 00:02:15,990 --> 00:02:18,150 They allow me to enter a minimum price. 54 00:02:18,150 --> 00:02:20,160 The default minimum is zero 55 00:02:20,160 --> 00:02:22,440 and the default maximum is a very large number. 56 00:02:22,440 --> 00:02:25,080 So by default, it displays all products. 57 00:02:25,080 --> 00:02:30,080 But if I typed in here a minimum of 300, 58 00:02:30,835 --> 00:02:34,740 then it'll only display products 300 or above. 59 00:02:34,740 --> 00:02:37,110 I can also specify a maximum value. 60 00:02:37,110 --> 00:02:38,790 I can say, let's display, 61 00:02:38,790 --> 00:02:40,290 now you'll have to bear with me a bit. 62 00:02:40,290 --> 00:02:45,290 If I display maximum of 400, 63 00:02:45,720 --> 00:02:49,620 it'll only display products that cost up to 400 64 00:02:49,620 --> 00:02:51,240 but not products that cost more. 65 00:02:51,240 --> 00:02:53,370 Interesting, but it always displays 66 00:02:53,370 --> 00:02:55,680 the total number of products in stock 67 00:02:55,680 --> 00:02:58,260 because my company does sell three products, 68 00:02:58,260 --> 00:03:00,810 but only two of them are in that price range. 69 00:03:00,810 --> 00:03:03,210 And also, obviously, you can specify the minimum 70 00:03:03,210 --> 00:03:04,320 and the maximum. 71 00:03:04,320 --> 00:03:07,290 Give me products that cost between 300 and 400, 72 00:03:07,290 --> 00:03:10,653 or let's say between 200 and 400. 73 00:03:12,120 --> 00:03:14,490 Okay, so we get just the ski boots. 74 00:03:14,490 --> 00:03:15,420 Did you notice as well 75 00:03:15,420 --> 00:03:17,550 that the total value is always correct? 76 00:03:17,550 --> 00:03:19,230 Based on what it's displayed here, 77 00:03:19,230 --> 00:03:22,500 it'll calculate the total based on the filtered products. 78 00:03:22,500 --> 00:03:25,470 So at the moment, the total value there is 1,000. 79 00:03:25,470 --> 00:03:27,930 If I clear some of these filters, 80 00:03:27,930 --> 00:03:30,720 then it'll be 1,000 plus another 1,000, 81 00:03:30,720 --> 00:03:32,250 that's a total value 2,000. 82 00:03:32,250 --> 00:03:35,220 And if I revert back completely, 83 00:03:35,220 --> 00:03:36,390 maybe actually you get the idea. 84 00:03:36,390 --> 00:03:38,790 That's how it all kind of works. 85 00:03:38,790 --> 00:03:41,860 Right, so we're gonna have to simulate events 86 00:03:42,810 --> 00:03:43,643 from the user. 87 00:03:43,643 --> 00:03:45,570 But before we look at how to simulate events, 88 00:03:45,570 --> 00:03:48,000 I thought it'd be useful to just explain 89 00:03:48,000 --> 00:03:51,630 how the application works itself before we try to test it. 90 00:03:51,630 --> 00:03:53,820 So let's take a look at the code. 91 00:03:53,820 --> 00:03:55,590 Here's my code editor. 92 00:03:55,590 --> 00:03:57,840 It is really similar to the previous examples. 93 00:03:57,840 --> 00:04:00,960 So it's just the product list that's different. 94 00:04:00,960 --> 00:04:05,400 In the product list, we have some interesting bits in here 95 00:04:05,400 --> 00:04:06,570 that I'm gonna need to explain. 96 00:04:06,570 --> 00:04:09,543 I'm gonna spend a few minutes just going through this. 97 00:04:10,830 --> 00:04:13,140 So first of all, this thing here, 98 00:04:13,140 --> 00:04:16,080 react has this concept called state. 99 00:04:16,080 --> 00:04:18,210 When a component's being rendered, 100 00:04:18,210 --> 00:04:22,110 if you want to remember values across multiple refreshes, 101 00:04:22,110 --> 00:04:25,320 then what you do is you store that data in react state. 102 00:04:25,320 --> 00:04:27,150 It's like a permanent data store 103 00:04:27,150 --> 00:04:29,460 that the component always has access to. 104 00:04:29,460 --> 00:04:32,880 As it's being refreshed, it remembers the old value. 105 00:04:32,880 --> 00:04:35,970 I'll explain that in a bit more detail in a moment. 106 00:04:35,970 --> 00:04:37,410 Okay, we'll come back to that. 107 00:04:37,410 --> 00:04:39,930 I've got two functions here. 108 00:04:39,930 --> 00:04:42,540 You know that you can have nested functions in JavaScript. 109 00:04:42,540 --> 00:04:46,230 My outer function can have nested functions. 110 00:04:46,230 --> 00:04:49,260 This function will be invoked when the user types a value 111 00:04:49,260 --> 00:04:51,540 into the minimum text box. 112 00:04:51,540 --> 00:04:54,240 And this value, it basically changes the minimum. 113 00:04:54,240 --> 00:04:55,890 This function will be invoked 114 00:04:55,890 --> 00:04:59,010 when the user types in the maximum text box. 115 00:04:59,010 --> 00:05:01,260 So again, I'm gonna come back to those in a moment. 116 00:05:01,260 --> 00:05:03,753 Let's have a look at the actual webpage itself. 117 00:05:05,960 --> 00:05:09,570 If there aren't any products, then it displays that message. 118 00:05:09,570 --> 00:05:10,980 And that's not very interesting. 119 00:05:10,980 --> 00:05:13,080 Let's come down here, this is more interesting. 120 00:05:13,080 --> 00:05:17,850 First of all, I filter the products array. 121 00:05:17,850 --> 00:05:21,060 Arrays in JavaScript have a filter function. 122 00:05:21,060 --> 00:05:23,400 It basically, you give it a lambda, 123 00:05:23,400 --> 00:05:26,040 and filter will invoke that lambda for each element. 124 00:05:26,040 --> 00:05:28,470 For each product, it'll pass it into here. 125 00:05:28,470 --> 00:05:31,503 And what you do is you return either true or false. 126 00:05:32,400 --> 00:05:35,400 If you return true, it means keep that element. 127 00:05:35,400 --> 00:05:38,850 If you return false, it means don't, it means discard. 128 00:05:38,850 --> 00:05:40,770 So this will keep the products 129 00:05:40,770 --> 00:05:44,430 that have a price in the minimum-maximum range. 130 00:05:44,430 --> 00:05:47,760 Those products will be retained in this collection, 131 00:05:47,760 --> 00:05:49,650 that's just going to be the list of products 132 00:05:49,650 --> 00:05:53,070 in the filtered price range. 133 00:05:53,070 --> 00:05:53,903 So what it does, 134 00:05:53,903 --> 00:05:56,970 it displays how many products there are altogether. 135 00:05:56,970 --> 00:05:59,763 And then down here, if I just skip down there, 136 00:06:01,800 --> 00:06:04,950 it'll only display the filtered products. 137 00:06:04,950 --> 00:06:06,990 So if I'd entered a minimum and a maximum, 138 00:06:06,990 --> 00:06:11,703 only the products in that filtered range will be displayed. 139 00:06:13,470 --> 00:06:16,020 Above it, we've got a couple of text boxes. 140 00:06:16,020 --> 00:06:20,823 There's a text box here, it just says minimum price. 141 00:06:21,930 --> 00:06:25,140 Okay, so that's the label there. 142 00:06:25,140 --> 00:06:27,240 And then there's a text box here. 143 00:06:27,240 --> 00:06:28,170 Here's the text box 144 00:06:28,170 --> 00:06:30,320 where the user can enter the minimum price. 145 00:06:31,290 --> 00:06:35,790 Okay, so when the user changes the value in that text box, 146 00:06:35,790 --> 00:06:37,920 it'll call the function. 147 00:06:37,920 --> 00:06:39,360 So the on change event, 148 00:06:39,360 --> 00:06:42,060 it'll call the on change min function 149 00:06:42,060 --> 00:06:44,103 whenever I change the value in here. 150 00:06:46,260 --> 00:06:48,720 So it calls the on change min function. 151 00:06:48,720 --> 00:06:51,993 And obviously the same thing here, for my second text box, 152 00:06:52,980 --> 00:06:55,830 when the user types a value into the max text box, 153 00:06:55,830 --> 00:06:58,113 then it'll call the on change max. 154 00:06:58,980 --> 00:07:01,260 So that's interesting in itself. 155 00:07:01,260 --> 00:07:03,360 This is how you handle events in react, 156 00:07:03,360 --> 00:07:06,150 you say on, and then the name of the windows, 157 00:07:06,150 --> 00:07:08,340 so the name of the HTML event, 158 00:07:08,340 --> 00:07:09,300 and then you give it the name 159 00:07:09,300 --> 00:07:11,220 of your event handler function. 160 00:07:11,220 --> 00:07:13,410 Don't forget the curly brackets. 161 00:07:13,410 --> 00:07:15,030 Whenever you've got JavaScript 162 00:07:15,030 --> 00:07:17,730 in the middle of all this XML malarkey, 163 00:07:17,730 --> 00:07:19,080 remember the curly brackets, 164 00:07:19,080 --> 00:07:23,460 to say this is a JavaScript function name to invoke. 165 00:07:23,460 --> 00:07:25,290 So the user will type a value 166 00:07:25,290 --> 00:07:30,290 into the minimum or the maximum text box, like so. 167 00:07:30,360 --> 00:07:33,273 As soon as you do that, it'll call one of these functions. 168 00:07:34,110 --> 00:07:36,803 So let's go back up and have a look at those functions, 169 00:07:38,550 --> 00:07:42,090 on change min and on change max. 170 00:07:42,090 --> 00:07:44,220 So before I can describe what those functions mean, 171 00:07:44,220 --> 00:07:47,913 I need to go back and explain the idea of state. 172 00:07:50,340 --> 00:07:53,463 If you declare a local variable inside a function, 173 00:07:54,630 --> 00:07:57,240 this is my render, the component function. 174 00:07:57,240 --> 00:07:59,520 If I declare a local variable in here 175 00:07:59,520 --> 00:08:01,350 as soon as the function is finished 176 00:08:01,350 --> 00:08:03,330 and the component's been rendered, 177 00:08:03,330 --> 00:08:05,700 the local variable would disappear. 178 00:08:05,700 --> 00:08:08,010 If you wanna store value for longer than that, 179 00:08:08,010 --> 00:08:09,807 we say, react, usestate. 180 00:08:10,680 --> 00:08:13,440 It basically stores the memory inside react 181 00:08:13,440 --> 00:08:15,270 to make it permanent. 182 00:08:15,270 --> 00:08:17,730 The way it works is when you call this function, 183 00:08:17,730 --> 00:08:19,650 you say, "I wanna store a value." 184 00:08:19,650 --> 00:08:21,573 Oh, the initial value of it is zero. 185 00:08:22,560 --> 00:08:25,350 The function gives you back two variables. 186 00:08:25,350 --> 00:08:26,910 It actually returns back two things. 187 00:08:26,910 --> 00:08:31,470 It returns you back a variable that basically represents 188 00:08:31,470 --> 00:08:32,880 the value zero. 189 00:08:32,880 --> 00:08:35,340 And it gives you back a function pointer. 190 00:08:35,340 --> 00:08:37,980 It says, "If you wanna change the value 191 00:08:37,980 --> 00:08:39,480 can you tell me, please? 192 00:08:39,480 --> 00:08:41,490 Because if you change the value, 193 00:08:41,490 --> 00:08:45,180 react will automatically re-render your component." 194 00:08:45,180 --> 00:08:48,540 When you change the value that react is holding in state, 195 00:08:48,540 --> 00:08:50,550 when you call one of these helper functions 196 00:08:50,550 --> 00:08:52,627 to change the value, react will say, 197 00:08:52,627 --> 00:08:56,340 "Oh, you've changed the value of your data?" 198 00:08:56,340 --> 00:08:58,740 It'll automatically re-render, 199 00:08:58,740 --> 00:09:01,593 it'll call your function again, to re-display itself. 200 00:09:02,430 --> 00:09:04,200 So what's gonna happen then? 201 00:09:04,200 --> 00:09:05,407 It'll say to react, 202 00:09:05,407 --> 00:09:08,544 "Okay, I want to store the value zero, 203 00:09:08,544 --> 00:09:12,720 let's have a variable called min that grabs that value." 204 00:09:12,720 --> 00:09:15,153 So min here is initially the value zero. 205 00:09:16,440 --> 00:09:18,510 This is a return value, 206 00:09:18,510 --> 00:09:21,330 this is returned from react, usestate. 207 00:09:21,330 --> 00:09:25,140 It says, "Here's a function that you can call, call me back, 208 00:09:25,140 --> 00:09:27,630 if you want to change the value of the minimum." 209 00:09:27,630 --> 00:09:29,610 And that's what happens here. 210 00:09:29,610 --> 00:09:32,883 If the user typed in the value in the min text box, 211 00:09:34,350 --> 00:09:36,780 like that, the change event occurs, 212 00:09:36,780 --> 00:09:38,640 it comes into this function. 213 00:09:38,640 --> 00:09:42,390 This event basically represents what just happened. 214 00:09:42,390 --> 00:09:44,070 It's the change event. 215 00:09:44,070 --> 00:09:48,060 Events in HTML have a target property, 216 00:09:48,060 --> 00:09:49,237 and the target property says, 217 00:09:49,237 --> 00:09:51,930 "Which element generated the event?" 218 00:09:51,930 --> 00:09:54,090 Well, it was the text box, wasn't it? 219 00:09:54,090 --> 00:09:58,290 So e.target is the text box that generated the change event. 220 00:09:58,290 --> 00:10:00,450 Get the value from the text box. 221 00:10:00,450 --> 00:10:03,393 What is the value in the text box 1234? 222 00:10:04,830 --> 00:10:06,690 It could have been empty. 223 00:10:06,690 --> 00:10:09,690 If it's empty, then we just used that value there, zero. 224 00:10:09,690 --> 00:10:10,980 This is like the way of saying, 225 00:10:10,980 --> 00:10:15,980 give me the value of the text box at all zero as a default. 226 00:10:16,350 --> 00:10:18,450 We have to convert it into a number, by the way. 227 00:10:18,450 --> 00:10:20,430 Whenever you get the value from a text box 228 00:10:20,430 --> 00:10:21,730 it comes back as a string. 229 00:10:22,680 --> 00:10:23,640 Well, that's not much use 230 00:10:23,640 --> 00:10:25,980 if you're doing mathematical range check-in. 231 00:10:25,980 --> 00:10:28,230 So convert that string into a number. 232 00:10:28,230 --> 00:10:30,570 That's the number that the user just entered 233 00:10:30,570 --> 00:10:34,890 into the minimum text box or zero as a default. 234 00:10:34,890 --> 00:10:37,680 That's the value that the user just entered. 235 00:10:37,680 --> 00:10:39,900 And what you do here is you say set min. 236 00:10:39,900 --> 00:10:42,870 At this point I'm calling back the function 237 00:10:42,870 --> 00:10:44,460 that react gave me. 238 00:10:44,460 --> 00:10:46,327 React gave me that function, it said, 239 00:10:46,327 --> 00:10:48,060 "Call that function, 240 00:10:48,060 --> 00:10:53,060 if you want to change the value of the minimum price." 241 00:10:53,460 --> 00:10:57,427 So when I call the set min function, react says, 242 00:10:57,427 --> 00:11:01,140 "Oh, you have changed the value of some data." 243 00:11:01,140 --> 00:11:04,200 It will automatically re-display the component 244 00:11:04,200 --> 00:11:06,420 based on the new value of the minimum. 245 00:11:06,420 --> 00:11:08,970 It automatically re-renders everything 246 00:11:08,970 --> 00:11:10,710 whenever you change state. 247 00:11:10,710 --> 00:11:13,470 So whenever I change a value in here, 248 00:11:13,470 --> 00:11:16,020 and I tell react that the state has changed, 249 00:11:16,020 --> 00:11:20,130 react will automatically re-render my component 250 00:11:20,130 --> 00:11:21,450 per key stroke. 251 00:11:21,450 --> 00:11:24,600 And obviously, it's the same idea when the user changes 252 00:11:24,600 --> 00:11:26,280 the maximum value. 253 00:11:26,280 --> 00:11:29,490 In here, this event will describe the event. 254 00:11:29,490 --> 00:11:31,770 It'll say, "What just happened?" 255 00:11:31,770 --> 00:11:33,900 There'll be a text box. 256 00:11:33,900 --> 00:11:36,420 That's the value of the maximum text box 257 00:11:36,420 --> 00:11:38,310 converted into a number. 258 00:11:38,310 --> 00:11:39,150 Oh, did you know this? 259 00:11:39,150 --> 00:11:41,310 I've got a large default. 260 00:11:41,310 --> 00:11:44,250 If the maximum text box is empty 261 00:11:44,250 --> 00:11:46,110 then by default, it'll use this, 262 00:11:46,110 --> 00:11:49,620 it'll use a million as the default upper limit. 263 00:11:49,620 --> 00:11:51,600 That's the value for the maximum. 264 00:11:51,600 --> 00:11:54,355 Whenever you change, whenever you call one of these state 265 00:11:54,355 --> 00:11:55,530 to change your functions, 266 00:11:55,530 --> 00:11:57,690 react will automatically re-render, 267 00:11:57,690 --> 00:11:59,310 it'll call your function again, 268 00:11:59,310 --> 00:12:01,710 to repaint your user interface 269 00:12:01,710 --> 00:12:05,640 with the new filtered products based on the new value 270 00:12:05,640 --> 00:12:07,680 for the minimum and the maximum. 271 00:12:07,680 --> 00:12:09,540 So that was quite useful actually, 272 00:12:09,540 --> 00:12:12,810 that shows what happens, it shows how state can help us 273 00:12:12,810 --> 00:12:15,750 manage data across multiple refreshes 274 00:12:15,750 --> 00:12:17,370 and how to handle events. 275 00:12:17,370 --> 00:12:19,590 But of course, this is just in the real world. 276 00:12:19,590 --> 00:12:21,780 What about when we're testing this? 277 00:12:21,780 --> 00:12:25,650 How can I simulate the user interacting with the text box? 278 00:12:25,650 --> 00:12:28,380 How can I simulate the change event? 279 00:12:28,380 --> 00:12:31,440 Well, that's the whole point of this discussion. 280 00:12:31,440 --> 00:12:36,440 You call in your text code, you've rendered the component, 281 00:12:36,570 --> 00:12:37,860 you get back a wrapper. 282 00:12:37,860 --> 00:12:40,560 You call simulate and you give it two parameters, 283 00:12:40,560 --> 00:12:44,643 this is simulating an event and an event argument object. 284 00:12:45,840 --> 00:12:47,840 So here's the code, we're gonna look at. 285 00:12:49,302 --> 00:12:52,590 Well, first of all, it gets the text box, 286 00:12:52,590 --> 00:12:55,410 that was the text box with an ID of min. 287 00:12:55,410 --> 00:12:58,623 Upon that text box, it simulates the change event. 288 00:13:00,390 --> 00:13:03,810 And notice the second parameter, the second parameter here 289 00:13:03,810 --> 00:13:05,850 is the event object. 290 00:13:05,850 --> 00:13:08,583 So remember when you have an event object, 291 00:13:11,220 --> 00:13:14,463 this object here is basically the event object 292 00:13:14,463 --> 00:13:15,873 that I'm passing in. 293 00:13:17,340 --> 00:13:21,480 So event objects, this is going to be the event object. 294 00:13:21,480 --> 00:13:24,753 Event objects in HTML have a target property. 295 00:13:25,650 --> 00:13:30,150 What was the element that generated the event? 296 00:13:30,150 --> 00:13:33,183 So in our simulated world, well, that would be a text box. 297 00:13:34,170 --> 00:13:35,943 And text boxes have a value. 298 00:13:37,500 --> 00:13:41,440 So what I'm doing here is I'm creating this object 299 00:13:42,420 --> 00:13:45,933 and I'm setting the target property to point to this object. 300 00:13:46,800 --> 00:13:49,890 This object here is like a very, very cute 301 00:13:49,890 --> 00:13:51,930 and careful simulated text box 302 00:13:51,930 --> 00:13:53,940 whose value I've just simulated. 303 00:13:53,940 --> 00:13:58,263 I've simulated the user change in the minimum to be 101, 304 00:13:59,280 --> 00:14:01,530 as if the user had typed this in. 305 00:14:01,530 --> 00:14:06,030 I've just simulated that event 101 as text. 306 00:14:06,030 --> 00:14:09,360 Obviously it gets converted into a number by my code. 307 00:14:09,360 --> 00:14:12,570 So the target property identifies the text box 308 00:14:12,570 --> 00:14:15,900 that there is effectively the bit that matters 309 00:14:15,900 --> 00:14:17,400 for the text box. 310 00:14:17,400 --> 00:14:19,620 And that text box I've simulated 311 00:14:19,620 --> 00:14:22,740 the user change in the value as if they typed it in 312 00:14:22,740 --> 00:14:25,260 but they haven't, I've programmatically assigned it. 313 00:14:25,260 --> 00:14:28,470 It's as if the user just set the value to 101. 314 00:14:28,470 --> 00:14:31,020 What should happen in that case? 315 00:14:31,020 --> 00:14:33,750 Well, what should happen in that case is, 316 00:14:33,750 --> 00:14:35,643 we started off with three products. 317 00:14:36,660 --> 00:14:38,460 If the user types in 101, 318 00:14:38,460 --> 00:14:40,500 we should just have two products left. 319 00:14:40,500 --> 00:14:42,450 Let's check that it actually works well. 320 00:14:42,450 --> 00:14:45,090 It does work, we can write tests to ensure that 321 00:14:45,090 --> 00:14:47,100 there are just two products displayed now, 322 00:14:47,100 --> 00:14:48,990 and what should the total value be? 323 00:14:48,990 --> 00:14:51,300 That's what our test will establish. 324 00:14:51,300 --> 00:14:56,300 Right, so simulating the user setting the minimum price. 325 00:14:57,510 --> 00:14:59,902 Right, so first of all, you can either call 326 00:14:59,902 --> 00:15:02,820 the shallow function or you can call the mount function. 327 00:15:02,820 --> 00:15:04,380 So I call the mount function, 328 00:15:04,380 --> 00:15:06,270 and I mount the product list component 329 00:15:06,270 --> 00:15:09,000 and I give it an array of three products. 330 00:15:09,000 --> 00:15:10,443 It gives you back a wrapper. 331 00:15:11,820 --> 00:15:15,330 I just wanna simulate, I just wanna check at the moment 332 00:15:15,330 --> 00:15:18,300 there should be three products. 333 00:15:18,300 --> 00:15:19,680 It should render three products. 334 00:15:19,680 --> 00:15:24,680 Remember, in my code, initially, if there aren't any minimum 335 00:15:26,040 --> 00:15:27,270 or maximum entered, 336 00:15:27,270 --> 00:15:30,360 then the number of products that are rendered 337 00:15:30,360 --> 00:15:33,690 should be three, unless the user types anything in, 338 00:15:33,690 --> 00:15:35,690 there should be three products rendered. 339 00:15:36,660 --> 00:15:39,300 Let's verify that there are three products 340 00:15:39,300 --> 00:15:42,060 at the moment initially. 341 00:15:42,060 --> 00:15:44,730 Okay, now let's simulate the event. 342 00:15:44,730 --> 00:15:48,060 In my rendered content, find the minimum text box, 343 00:15:48,060 --> 00:15:52,200 simulate the change event, such that the text box value, 344 00:15:52,200 --> 00:15:54,090 the minimum, is now 101. 345 00:15:54,090 --> 00:15:55,470 As soon as you do that, 346 00:15:55,470 --> 00:15:57,843 code should happen in your component. 347 00:15:58,710 --> 00:15:59,820 In your component, 348 00:15:59,820 --> 00:16:01,890 the user has just typed the value effectively 349 00:16:01,890 --> 00:16:03,360 into the text box. 350 00:16:03,360 --> 00:16:06,090 That should call this function 351 00:16:06,090 --> 00:16:09,330 to change the minimum to be 101. 352 00:16:09,330 --> 00:16:12,390 That should cause the component to re-render 353 00:16:12,390 --> 00:16:14,730 with a minimum of 101. 354 00:16:14,730 --> 00:16:16,747 So down here, it'll say, 355 00:16:16,747 --> 00:16:21,747 "Oh, let's filter the products based on the minimum of 101." 356 00:16:21,874 --> 00:16:25,200 And then, what products should be left 357 00:16:25,200 --> 00:16:27,993 if the minimum price is 101? 358 00:16:29,122 --> 00:16:31,110 So if the user entered 101, 359 00:16:31,110 --> 00:16:35,520 we should see two products there, carving skis, 1,000, 360 00:16:35,520 --> 00:16:37,230 ski boots are 250. 361 00:16:37,230 --> 00:16:41,370 Let's verify that did all actually happen in our test. 362 00:16:41,370 --> 00:16:45,063 Right, so there should now just be two products, 363 00:16:47,100 --> 00:16:49,383 the two products that cost 101 or above. 364 00:16:50,970 --> 00:16:53,430 What about if the user enters a value 365 00:16:53,430 --> 00:16:55,140 in the max text box? 366 00:16:55,140 --> 00:16:58,140 Same idea, this is my second test. 367 00:16:58,140 --> 00:17:00,300 First of all, render in all products, 368 00:17:00,300 --> 00:17:02,610 there should be three products displayed. 369 00:17:02,610 --> 00:17:06,810 Let's simulate the user entering into the max text box, 370 00:17:06,810 --> 00:17:09,813 changing the max to be 999. 371 00:17:10,680 --> 00:17:14,190 So what value should we get back if the user enters 372 00:17:14,190 --> 00:17:16,200 a value of 999 in here? 373 00:17:16,200 --> 00:17:18,000 999. 374 00:17:18,000 --> 00:17:19,560 Again, we should just see those two. 375 00:17:19,560 --> 00:17:22,140 The skis have gone because they were too expensive. 376 00:17:22,140 --> 00:17:24,093 We just have those two products left. 377 00:17:25,260 --> 00:17:28,320 So we can verify that there were just two products left 378 00:17:28,320 --> 00:17:29,153 in our page. 379 00:17:29,153 --> 00:17:30,330 There is more detail. 380 00:17:30,330 --> 00:17:34,050 If you want to, you can go deeper into the content to see 381 00:17:34,050 --> 00:17:36,123 in exact detail, what did I get back? 382 00:17:37,170 --> 00:17:42,170 So in my test here, I can say, 383 00:17:42,270 --> 00:17:45,870 simulate the user entering the value of 101, 384 00:17:45,870 --> 00:17:47,320 there should be two products. 385 00:17:48,597 --> 00:17:52,290 Simulate the user entering a minimum value of 251, 386 00:17:52,290 --> 00:17:53,670 there should just be one product. 387 00:17:53,670 --> 00:17:56,310 If you look at the numbers for the prices, you'll see. 388 00:17:56,310 --> 00:18:01,290 Simulate the user change in the minimum to be 1,001. 389 00:18:01,290 --> 00:18:03,360 In which case, there shouldn't be any products, 390 00:18:03,360 --> 00:18:05,550 because they all cost less than that. 391 00:18:05,550 --> 00:18:07,560 And same idea for the max. 392 00:18:07,560 --> 00:18:08,910 When you doing unit testing, 393 00:18:08,910 --> 00:18:10,620 you often check different numbers 394 00:18:10,620 --> 00:18:12,270 to make sure that the ranges work. 395 00:18:12,270 --> 00:18:15,270 Initially, all products are rendered. 396 00:18:15,270 --> 00:18:18,787 Simulate the maximum text box change in to be 999. 397 00:18:20,040 --> 00:18:22,200 That should just give us two products. 398 00:18:22,200 --> 00:18:26,640 Simulate the maximum value being 249. 399 00:18:26,640 --> 00:18:28,740 That should just give us one. 400 00:18:28,740 --> 00:18:30,480 Simulate then the user setting, 401 00:18:30,480 --> 00:18:33,930 the maximum value to be 99, and then we should have zero. 402 00:18:33,930 --> 00:18:35,310 If you look at the values, 403 00:18:35,310 --> 00:18:37,953 you'll see that that filtering is correct. 404 00:18:38,910 --> 00:18:41,670 So we just need to run the tests 405 00:18:41,670 --> 00:18:44,397 and see if it works, and it works. 406 00:18:44,397 --> 00:18:49,397 All right, so that's a really useful exercise, I think. 407 00:18:49,560 --> 00:18:52,710 First of all, state management, handling events, 408 00:18:52,710 --> 00:18:55,920 and then simulating the user, invoking those events, 409 00:18:55,920 --> 00:18:58,953 to make sure that the content that was rendered was correct.