1 00:00:00,210 --> 00:00:05,510 In this lesson you're going to continue to learn how to test your know J.S. applications. 2 00:00:05,520 --> 00:00:11,970 Now in the last lesson we got just configured in our application and we created a couple of test cases 3 00:00:12,270 --> 00:00:18,590 even though they were in testing anything real in this lesson we'll actually create test cases that 4 00:00:18,600 --> 00:00:22,940 verify a given function is working as expected. 5 00:00:22,980 --> 00:00:26,760 Now for the moment we're going to do that with new functions will create. 6 00:00:26,760 --> 00:00:32,760 We want to work with simpler functions at first as we explore these testing principles then we'll move 7 00:00:32,760 --> 00:00:38,520 on to actually testing the stuff that already exists in the task manager project. 8 00:00:38,520 --> 00:00:43,980 Well let's get started by creating a brand new file and this file is going to live over in the source 9 00:00:43,980 --> 00:00:44,910 directory. 10 00:00:44,910 --> 00:00:50,820 So the source files that make up our applications code still live over here while the test cases live 11 00:00:50,820 --> 00:00:52,980 in the tests directory. 12 00:00:52,980 --> 00:00:59,700 Now we're going to create a temporary file for this example called a math dot J S and let's go ahead 13 00:00:59,700 --> 00:01:06,510 and say that this contains some functions for common math based operations we find ourselves performing 14 00:01:06,510 --> 00:01:08,280 throughout our application. 15 00:01:08,430 --> 00:01:15,180 And let's say one of those is something like calculating the tip on a given bill at a restaurant. 16 00:01:15,180 --> 00:01:20,550 So if my bill was 50 dollars and I want to leave a 20 percent tip what exactly would that be. 17 00:01:20,550 --> 00:01:22,430 Let's start by creating the function. 18 00:01:22,440 --> 00:01:26,790 And this would be the same regardless of whether or not we were testing the code. 19 00:01:26,820 --> 00:01:32,450 So right here we'll create a constant I'll call it something like calculate tip. 20 00:01:32,550 --> 00:01:36,990 This will indeed be a function and I'll just set it up as an arrow function. 21 00:01:36,990 --> 00:01:39,300 Now we are going to need two arguments. 22 00:01:39,300 --> 00:01:42,810 We're going to want the total and the tip percent. 23 00:01:42,810 --> 00:01:44,120 You're trying to leave. 24 00:01:44,160 --> 00:01:50,040 That's the information we need in order to run the calculation and down below we can start to perform 25 00:01:50,040 --> 00:01:50,690 it. 26 00:01:50,730 --> 00:01:54,600 The first thing I'm going to do is calculate the tip that should be left. 27 00:01:54,720 --> 00:01:55,890 That would be the total. 28 00:01:56,070 --> 00:02:02,790 Let's say it's something like ten for ten dollars multiplied by the ten percent as a decimal. 29 00:02:02,790 --> 00:02:07,020 So if I wanted to tip 30 percent I would pass in point three. 30 00:02:07,170 --> 00:02:07,730 Right here. 31 00:02:08,010 --> 00:02:10,290 Let's go ahead and add that into the mix. 32 00:02:10,590 --> 00:02:14,490 And now tip is going to store the tip amount. 33 00:02:14,490 --> 00:02:21,330 So if it was a ten dollar total and a 30 percent tip we would have three stored as the tip Variable 34 00:02:21,390 --> 00:02:22,340 value. 35 00:02:22,440 --> 00:02:25,050 Now down below we can go ahead and continue on. 36 00:02:25,050 --> 00:02:32,600 I'm going to return the total plus the tip to let the user know exactly how much money they should leave. 37 00:02:32,820 --> 00:02:38,670 Now with this in place we want to export this function like we would do for anything else we're creating 38 00:02:38,730 --> 00:02:39,860 right here. 39 00:02:39,870 --> 00:02:47,430 We'll use module Don exports to export an object and that's because we'll end up exporting multiple 40 00:02:47,430 --> 00:02:50,310 functions from this file throughout the video. 41 00:02:50,310 --> 00:02:55,740 Right here though let's start with calculate tip as the only one we're exporting. 42 00:02:55,740 --> 00:03:00,990 Now if we were going to use this in the task manager app I would simply loaded into one of the other 43 00:03:00,990 --> 00:03:07,290 files in the source folder and call it like we've done plenty of times before with other files and other 44 00:03:07,320 --> 00:03:08,100 functions. 45 00:03:08,100 --> 00:03:15,150 In this case what we're going to do is write a test case that verifies this function is running the 46 00:03:15,150 --> 00:03:17,190 calculations correctly. 47 00:03:17,280 --> 00:03:23,670 So we're actually going to load that function in to our test suite file and we'll be calling it in our 48 00:03:23,670 --> 00:03:28,680 test cases making sure the value we get back is what we were expecting. 49 00:03:28,680 --> 00:03:33,680 So right here let's go ahead and start by loading it in concert. 50 00:03:33,690 --> 00:03:36,280 Math equals require. 51 00:03:36,540 --> 00:03:43,470 We're going to use dot dot to get out of the test directory then forward slash source forward slash 52 00:03:43,470 --> 00:03:48,260 math to grab the exports from the file we just created. 53 00:03:48,270 --> 00:03:50,220 Now we know we get back an object. 54 00:03:50,220 --> 00:03:52,310 That's what we're storing right here. 55 00:03:52,500 --> 00:03:58,980 We can dish structure that object to grab the individual functions as variables so I can call this one 56 00:03:59,040 --> 00:04:06,540 calculate tip to match up with the calculate tip export we've put on the object down below. 57 00:04:06,540 --> 00:04:14,280 Now this is a function we can actually call from inside of a test case to verify it's working as expected. 58 00:04:14,310 --> 00:04:21,270 Let's go ahead and create that test case by deleting the ones we had already and calling test for a 59 00:04:21,300 --> 00:04:23,440 third time right here. 60 00:04:23,610 --> 00:04:25,370 We'll be passing in this string. 61 00:04:25,380 --> 00:04:33,060 Our test case name followed by the function the code to run that make sure calculate tip is returning 62 00:04:33,090 --> 00:04:36,270 the expected results given a set of input. 63 00:04:36,270 --> 00:04:43,530 Well let's get started by picking a name for our test case should calculate total with a tip. 64 00:04:43,530 --> 00:04:46,170 And down below the code to run. 65 00:04:46,170 --> 00:04:51,630 Now in this case the goal is to test this function which means that we want to call the function and 66 00:04:51,630 --> 00:04:54,930 make an assertion about the value we get back. 67 00:04:54,990 --> 00:05:01,770 We want to assert that the value we get back equals the correct value so right here we would do this 68 00:05:01,770 --> 00:05:06,390 using the following const I could create a const like total. 69 00:05:06,390 --> 00:05:12,840 This will be the return value from calling calculate temp and we'll pass in some numbers we can pick 70 00:05:12,840 --> 00:05:14,180 whatever we'd like. 71 00:05:14,250 --> 00:05:20,310 Let's go ahead and say that the bill is ten dollars and we want to tip 30 percent. 72 00:05:20,520 --> 00:05:25,350 Now if things go well I would expect total to equal 13. 73 00:05:25,350 --> 00:05:31,400 That is the bill plus the tip if it's not 13 then something has gone wrong. 74 00:05:31,410 --> 00:05:35,840 And the calculate tip function is not working as expected. 75 00:05:35,850 --> 00:05:42,690 So right here all we need to do is throw an error when total is not equal to 13. 76 00:05:42,690 --> 00:05:48,930 So if the total is not equal to the number 13. 77 00:05:48,930 --> 00:05:55,920 That is a problem for us and we're going to throw a new error and we're going to provide a message as 78 00:05:55,920 --> 00:05:58,560 to why the test failed. 79 00:05:58,560 --> 00:06:08,340 Total tip should be 13 and then I could say something like got followed by the value I actually got 80 00:06:08,790 --> 00:06:15,630 I could go ahead and could continue that on or use the yes 6 template string syntax to add that into 81 00:06:15,630 --> 00:06:16,730 the string. 82 00:06:16,770 --> 00:06:22,950 So right here once again if the total is 13 this code won't run and no error will be thrown. 83 00:06:22,980 --> 00:06:27,810 So the test will be considered a success if the total is not 13. 84 00:06:27,810 --> 00:06:29,250 This code will run. 85 00:06:29,250 --> 00:06:32,200 Letting them know that something has gone wrong. 86 00:06:32,280 --> 00:06:38,730 Now we can save math test dot J S and rerun the test suite down below. 87 00:06:38,730 --> 00:06:45,510 I'll use NPM and test once again and to get things re running it should find my single test case and 88 00:06:45,510 --> 00:06:52,290 right here it is indeed passing should calculate total with Tip took three milliseconds to run. 89 00:06:52,380 --> 00:06:56,400 I can see that everything is passing as expected. 90 00:06:56,400 --> 00:06:59,070 Now what if calculate tip was indeed broken. 91 00:06:59,130 --> 00:07:01,370 What exactly would that look like. 92 00:07:01,380 --> 00:07:05,190 Well over here let's go ahead and say that we messed something up. 93 00:07:05,190 --> 00:07:12,210 Let's say that we accidentally add a another value on adding the total on twice as a mistake and then 94 00:07:12,210 --> 00:07:16,710 I save the program not realizing that I've made a mistake down below. 95 00:07:16,710 --> 00:07:23,040 The good news is that our test case would catch this error and we would see a failure letting us know 96 00:07:23,040 --> 00:07:27,290 that something needs to be addressed down below we have our tests. 97 00:07:27,390 --> 00:07:33,750 We have just won and it's failing and up above we can see exactly what went wrong right here should 98 00:07:33,750 --> 00:07:38,100 calculate total with Tip total tip should be 13. 99 00:07:38,100 --> 00:07:43,380 Got twenty three and this would give me great information as to what's going wrong. 100 00:07:43,710 --> 00:07:48,410 I could then dive into the code see exactly where things went wrong. 101 00:07:48,510 --> 00:07:54,290 Remove the incorrect code and bring things back to a nice working state. 102 00:07:54,300 --> 00:08:00,400 Now we could go ahead and rerun the test suite just to make sure our test case is passing once again. 103 00:08:00,510 --> 00:08:07,080 And if it is we'll have confidence knowing that our code is working as expected and is correctly calculating 104 00:08:07,080 --> 00:08:08,340 the tip. 105 00:08:08,340 --> 00:08:14,670 Now with this in place I want to head back over to math test Jay s and talk about a slightly different 106 00:08:14,670 --> 00:08:16,460 way we can get this done. 107 00:08:16,470 --> 00:08:22,950 The part of the test case that I have highlighted so right here we are manually setting up an if statement 108 00:08:22,980 --> 00:08:29,370 comparing values and if we don't get what we wanted we throw an error saying something like total tip 109 00:08:29,400 --> 00:08:36,020 should be 13 but we got some other value now in this case it only takes three lines of code. 110 00:08:36,120 --> 00:08:40,330 But there are other more complex assertions we'll be performing later on. 111 00:08:40,440 --> 00:08:47,760 For example expecting that I give an object contains a set of properties with specific values so really 112 00:08:47,760 --> 00:08:53,710 quickly we're going to end up starting to write a ton of code in our test cases to do things. 113 00:08:53,790 --> 00:08:56,550 We're gonna be doing over and over again. 114 00:08:56,610 --> 00:09:04,350 The good news is that just comes with an assertion library a set of functions and methods we can use 115 00:09:04,560 --> 00:09:12,270 to assert things about values for example to assert that a given value equals a another value or to 116 00:09:12,270 --> 00:09:15,580 assert that an array has four items inside of it. 117 00:09:16,080 --> 00:09:23,220 So let's go ahead and see how we can use the expect library provided by Gest to replace the code right 118 00:09:23,220 --> 00:09:24,180 here. 119 00:09:24,180 --> 00:09:29,460 I'm actually going to comment that code out though I will leave it in place and we'll replace it with 120 00:09:29,490 --> 00:09:33,110 a single line right here on line 5. 121 00:09:33,120 --> 00:09:38,350 Now you can explore the documentation for what we're about to do over in the browser. 122 00:09:38,400 --> 00:09:45,900 I'm going to close down the mockup tab and from just J asked what I owe we'll head over to the documentation 123 00:09:46,350 --> 00:09:47,640 in the sidebar. 124 00:09:47,640 --> 00:09:53,020 We're gonna scroll all the way to the bottom and under API reference we have. 125 00:09:53,020 --> 00:09:58,140 Expect this is what we're trying to use now before we dive into the docs. 126 00:09:58,170 --> 00:10:04,950 Let's go ahead and see an example of what exactly it's going to allow us to do right here just and provides 127 00:10:05,010 --> 00:10:11,210 us with a another function similar to test that we can access in our test cases. 128 00:10:11,220 --> 00:10:19,170 This is expect we call it as a function and we provide to it the value we're expecting something about 129 00:10:19,500 --> 00:10:25,200 in this case we are expecting something about total so I'll pass that in right here. 130 00:10:25,200 --> 00:10:32,550 Now the expect library ships with a dozen or so actually more like 50 different assertions we can perform 131 00:10:32,880 --> 00:10:40,260 one of the most common is to be which checks for equality we pass in the value we're hoping for which 132 00:10:40,260 --> 00:10:41,170 is 13. 133 00:10:41,610 --> 00:10:48,400 So if we read this out like an English sentence it would be expect the value stored in the total variable 134 00:10:48,640 --> 00:10:51,220 to be the number 13. 135 00:10:51,220 --> 00:10:58,270 Now if the total variable does equal thirteen this code is not gonna throw an error and your test case 136 00:10:58,270 --> 00:11:01,100 will be considered a success which is good. 137 00:11:01,150 --> 00:11:08,380 Now if the total does not equal 13 this code will throw an error behind the scenes meaning the test 138 00:11:08,380 --> 00:11:09,590 case will fail. 139 00:11:09,670 --> 00:11:11,100 And that's good too. 140 00:11:11,110 --> 00:11:16,130 It's going to alert you that something's not quite right and you'll be able to adjust. 141 00:11:16,180 --> 00:11:21,060 So right here let's go ahead and see what happens when I rerun the test suite down below. 142 00:11:21,190 --> 00:11:21,980 I run it. 143 00:11:22,030 --> 00:11:26,680 It runs through our one test case and it still passes which is excellent. 144 00:11:26,680 --> 00:11:30,640 Now let's go ahead and mess it up so it fails and see what we get. 145 00:11:30,640 --> 00:11:35,530 So right here what I'm gonna do is just accidentally add the tip on again. 146 00:11:35,860 --> 00:11:43,210 I will save math dot J S and rerun the test suite this time around it should indeed be failing right 147 00:11:43,210 --> 00:11:43,720 here. 148 00:11:43,720 --> 00:11:48,190 We do have one failing test case and if I scroll up what do we get. 149 00:11:48,190 --> 00:11:55,360 I get the following should calculate total with tip is a failure down below I can see what I was expecting 150 00:11:55,420 --> 00:12:03,400 I was expecting 13 and what I actually got which was 16 so expect provides this nice little output just 151 00:12:03,400 --> 00:12:06,490 based off of the function calls we put in place. 152 00:12:06,490 --> 00:12:12,520 We don't have to do anything ourselves to manually generate useful messages which is a good thing we 153 00:12:12,520 --> 00:12:18,100 can keep our test cases nice and simple while still getting useful output. 154 00:12:18,100 --> 00:12:21,850 Now let's go ahead and remove the mistake that we had just created. 155 00:12:21,850 --> 00:12:25,630 I'm gonna save math dot J.S. and we'll head back over here. 156 00:12:25,630 --> 00:12:28,760 So we took three lines of code and turned it into one. 157 00:12:28,810 --> 00:12:34,540 But the good news is that later on when we would have had to write a dozen lines of code for a given 158 00:12:34,540 --> 00:12:39,700 assertion we'll still be able to replace that with a single call to expect. 159 00:12:39,700 --> 00:12:44,210 So it's a super useful part of the just test suite. 160 00:12:44,230 --> 00:12:49,330 Now if we had over there we can learn how to navigate the docs quickly so you can use other assertions 161 00:12:49,360 --> 00:12:52,500 as you create your projects down below. 162 00:12:52,600 --> 00:12:54,810 We have different ways we can work with expect. 163 00:12:54,820 --> 00:12:58,860 Right here we can call it with a value which is what we just did. 164 00:12:59,110 --> 00:13:04,540 And then down below if we scroll to the methods that start with DOT we can see all of the different 165 00:13:04,540 --> 00:13:06,630 assertions that we have available to us. 166 00:13:06,640 --> 00:13:08,270 And there are quite a few. 167 00:13:08,320 --> 00:13:13,240 For example I can check using to be null if a given value is null. 168 00:13:13,240 --> 00:13:17,510 I can check if a number is greater than or less than some other number. 169 00:13:17,560 --> 00:13:24,100 I have all sorts of assertions for that I can check the length of something I can check if objects contain 170 00:13:24,130 --> 00:13:25,830 specific properties. 171 00:13:25,930 --> 00:13:32,090 So there are a lot of useful features available to us some of which we'll explore throughout this section. 172 00:13:32,140 --> 00:13:38,980 But the most basic is to use to be to check that a given value equals some other value. 173 00:13:38,980 --> 00:13:45,100 Now with our test case in place we could refactor calculate tip we could change how the function is 174 00:13:45,100 --> 00:13:50,410 written without changing its behavior and our test case will make sure we haven't broken anything. 175 00:13:50,890 --> 00:13:53,950 So let's say we want to write this in a way that's a bit cleaner. 176 00:13:53,950 --> 00:13:59,260 Instead of creating a variable and then returning the calculation I'm actually going to take advantage 177 00:13:59,260 --> 00:14:05,710 of the arrow function shorthand syntax so I'll be removing the curly braces for the Arrow function and 178 00:14:05,710 --> 00:14:11,380 everything inside and right here I'll implicitly return the following value. 179 00:14:11,380 --> 00:14:17,080 We're gonna take the total we're going to add to it the total times the tip. 180 00:14:17,080 --> 00:14:22,650 Percent now from a functional standpoint this is exactly what we had before. 181 00:14:22,750 --> 00:14:27,480 All we've done is we've refactoring the function itself now without a test case. 182 00:14:27,480 --> 00:14:33,310 You can't be sure that you haven't broken anything but with test cases in place we're gonna be able 183 00:14:33,310 --> 00:14:39,730 to rerun our test suite and confirm that the old version of the function and the new version of the 184 00:14:39,730 --> 00:14:42,460 function are functionally equivalent. 185 00:14:42,460 --> 00:14:47,200 So right here we have that one test case verifying that this is so. 186 00:14:47,230 --> 00:14:52,630 So already we're getting a bit of flexibility allowing us to alter how the function works behind the 187 00:14:52,630 --> 00:14:58,810 scenes and then making sure based off of the test case results that we haven't broken anything. 188 00:14:58,840 --> 00:15:05,050 Now let's go ahead and change the function adding one more feature we'll create one more test case then 189 00:15:05,050 --> 00:15:07,950 it will be up to you to test a couple of other functions. 190 00:15:07,960 --> 00:15:15,790 So right here over in math dot J asks what I'm going to do is add on a default tip percent so if you 191 00:15:15,790 --> 00:15:21,760 don't provide the percentage you want a tip we'll go ahead and default it to something like point two 192 00:15:21,760 --> 00:15:25,090 for 20 percent or point three for 30 percent. 193 00:15:25,090 --> 00:15:26,760 The choice is yours. 194 00:15:26,890 --> 00:15:32,280 I'll go ahead and pick a value of point to five as my default tip value. 195 00:15:32,290 --> 00:15:36,520 So once again if you provide the tip will still go ahead and use that. 196 00:15:36,610 --> 00:15:39,610 But if you don't will fall back to the default. 197 00:15:39,700 --> 00:15:42,930 Now our one test case is indeed still going to work. 198 00:15:42,940 --> 00:15:49,590 We could always run it to prove that what we're gonna do now though is add a second test case to make 199 00:15:49,590 --> 00:15:55,950 sure that when we don't provide a tip percent the default value is correctly used. 200 00:15:55,950 --> 00:15:59,320 So right here that's going to mean a another call to test. 201 00:15:59,370 --> 00:16:02,460 I'll add a second call to test right here. 202 00:16:02,580 --> 00:16:10,850 I'll pick a name for this one should calculate total with default tip. 203 00:16:10,950 --> 00:16:12,440 Then I'll set up the function. 204 00:16:12,460 --> 00:16:18,580 The actual test case code and I'm still going to create something called Total or something similar 205 00:16:18,910 --> 00:16:23,130 so I can call calculate tip and store the value I get back. 206 00:16:23,290 --> 00:16:29,120 Now for this particular test case the whole purpose is to make sure the default value works. 207 00:16:29,230 --> 00:16:32,520 So I'm only going to provide the bill total. 208 00:16:32,590 --> 00:16:34,070 I'll provide 10. 209 00:16:34,330 --> 00:16:40,930 No down below we can use expect to expect something about the total variable in this case. 210 00:16:40,930 --> 00:16:48,940 I'll be using to be to expect that the total is equal to twelve point five so twelve dollars and fifty 211 00:16:48,940 --> 00:16:53,950 cents a ten dollar total with a twenty five percent tip. 212 00:16:54,050 --> 00:17:00,460 Now right here we can go ahead and run our test suite for a another time and we should see two passing 213 00:17:00,460 --> 00:17:02,350 test cases right here. 214 00:17:02,350 --> 00:17:04,180 That is exactly what we have. 215 00:17:04,270 --> 00:17:10,300 We are able to calculate the tip with a custom tip amount or with the default tip amount. 216 00:17:10,300 --> 00:17:17,790 And now our two test cases are going to verify that both of those paths work for this function. 217 00:17:17,800 --> 00:17:19,810 So in this video what did we do. 218 00:17:19,810 --> 00:17:23,950 We created a function and we actually wrote some test cases for it. 219 00:17:23,950 --> 00:17:31,390 We also explored how we can use the expected assertion library provided by Gest to allow us to assert 220 00:17:31,420 --> 00:17:37,550 that one value equals a another without having to write a bunch of custom code on our own. 221 00:17:37,570 --> 00:17:43,510 Now in the next lesson it's gonna be up to you as a challenge to write a couple of test cases for some 222 00:17:43,570 --> 00:17:48,880 other functions we'll be working with then we'll actually move on to testing more advanced things like 223 00:17:48,880 --> 00:17:50,760 our Express application. 224 00:17:50,770 --> 00:17:54,550 First up is the challenge though so let's jump right in to the next lesson.