1 00:00:00,240 --> 00:00:05,940 In this lesson you're going to continue to explore testing and the goal here is to figure out how we 2 00:00:05,940 --> 00:00:09,670 can test asynchronous code using jest. 3 00:00:09,780 --> 00:00:15,360 Now it's gonna look super similar to what we've already done when testing our synchronous code we'll 4 00:00:15,360 --> 00:00:21,930 just be making a couple of small changes to the test cases to get support for testing asynchronous code 5 00:00:21,930 --> 00:00:23,160 with jest. 6 00:00:23,220 --> 00:00:29,460 Now before we even get to that I want to take a quick moment to add a command line argument onto our 7 00:00:29,460 --> 00:00:32,190 just command over here in package Dot. 8 00:00:32,200 --> 00:00:40,380 Jason this is going to keep jest up and running and just will automatically restart rerunning our tests 9 00:00:40,650 --> 00:00:48,120 when either the test case code changes or the code that's being tested changes so it'll be similar to 10 00:00:48,120 --> 00:00:54,240 how node on restarts our node server when we're running in development mode though this time it'll be 11 00:00:54,240 --> 00:01:00,630 doing the same thing for the test cases to configure that all you have to do is add a new command line 12 00:01:00,630 --> 00:01:05,610 option on right here that is hyphen hyphen watch That's it. 13 00:01:05,610 --> 00:01:09,340 Now we can restart our test suite using the same command. 14 00:01:09,420 --> 00:01:14,240 It's still NPM test and it's still going to run those test cases. 15 00:01:14,340 --> 00:01:19,230 But one thing you'll notice is that it doesn't bring you back to the command prompt. 16 00:01:19,230 --> 00:01:23,620 So up above I can see the results of that test suite running. 17 00:01:23,760 --> 00:01:28,020 I have all of the test cases running for passing which is great. 18 00:01:28,020 --> 00:01:33,120 Down below we now have a list of options for when we're in this watch mode. 19 00:01:33,120 --> 00:01:37,590 Now it's automatically going to rerun tests that do change right here. 20 00:01:37,590 --> 00:01:44,010 I could press a to run all tests again and they can use other options to do things like quit the watch 21 00:01:44,010 --> 00:01:51,000 mode with Q So right here I can type a while focused on the terminal to rerun things and I could always 22 00:01:51,000 --> 00:01:55,080 use w to bring those watch options open again. 23 00:01:55,140 --> 00:01:57,090 So this is what we're going to use going forward. 24 00:01:57,120 --> 00:02:03,990 So we don't have to constantly head back to the terminal and manually rerun things as we change our 25 00:02:03,990 --> 00:02:05,480 test cases. 26 00:02:05,490 --> 00:02:11,070 Now if you want to explore other command line options that are supported by jest you can view all of 27 00:02:11,070 --> 00:02:17,400 those over in the documentation to over in the docs sidebar if you scroll way to the bottom. 28 00:02:17,400 --> 00:02:25,290 Under API reference once again that's where we found expect you'll see just CLIA options down below. 29 00:02:25,290 --> 00:02:31,530 This page contains every single command line option you can use in the right hand side bar. 30 00:02:31,530 --> 00:02:33,450 We have a list of all of them. 31 00:02:33,600 --> 00:02:37,440 And if I scroll down near the bottom we have the one that we used right here. 32 00:02:37,440 --> 00:02:38,270 Watch. 33 00:02:38,370 --> 00:02:39,770 And there are a bunch of others. 34 00:02:39,770 --> 00:02:42,990 The watch is the only one we'll actually need. 35 00:02:42,990 --> 00:02:48,840 So with this in place we now have a slightly better setup and we're going to focus on figuring out how 36 00:02:48,840 --> 00:02:55,770 we can test asynchronous code using just let's get started with a very simple test case to illustrate 37 00:02:55,770 --> 00:02:56,790 a specific point. 38 00:02:57,210 --> 00:03:03,600 So right here what I'm gonna do is call the test function and I'll set up this demo test case I can 39 00:03:03,600 --> 00:03:09,660 call it something like a sync test demo and then I'll also go ahead and set up the callback function 40 00:03:09,660 --> 00:03:16,770 to run it which contains the testing code and we're going to do inside of here is use expect to perform 41 00:03:16,770 --> 00:03:20,150 an assertion that is clearly incorrect. 42 00:03:20,190 --> 00:03:28,660 Let's go ahead and do just that I'm going to expect that the number 1 equals using to be the number 43 00:03:28,690 --> 00:03:29,260 two. 44 00:03:29,260 --> 00:03:35,020 Now clearly that's not the case and based off of what we know already I would expect this test case 45 00:03:35,020 --> 00:03:35,920 to fail. 46 00:03:36,010 --> 00:03:43,240 If I save the program that is exactly what happens just automatically restarts rerunning the test suite 47 00:03:43,660 --> 00:03:52,030 and if I scroll up I can see that too it was expected but one was received so async test demo has failed. 48 00:03:52,120 --> 00:03:54,160 Now nothing shocking there. 49 00:03:54,190 --> 00:03:59,920 What we're gonna do though is introduce a little bit of asynchronous programming by simulating it with 50 00:03:59,920 --> 00:04:06,220 set time out and we're going to see how that changes the behavior and the output of this test case running 51 00:04:06,370 --> 00:04:07,000 right here. 52 00:04:07,000 --> 00:04:10,820 We'll call set time out like we've done dozens of times so far. 53 00:04:10,900 --> 00:04:15,150 We'll pass in our callback function in the amount of time we would like to wait. 54 00:04:15,250 --> 00:04:21,250 I'll go ahead and use two seconds by providing two thousand milliseconds as the second argument and 55 00:04:21,250 --> 00:04:21,930 down below. 56 00:04:21,930 --> 00:04:27,970 All we're gonna do is take our call to expect we're going to cut it out of its current location and 57 00:04:27,970 --> 00:04:31,680 paste it right here inside of the callback function. 58 00:04:31,690 --> 00:04:38,490 Now we can go ahead and remove those extra lines and we'll just rerun the test case like we did before. 59 00:04:38,500 --> 00:04:41,730 So what's going to happen while our function is going to run. 60 00:04:41,740 --> 00:04:48,190 It's then going to register a callback function to run after two seconds after two seconds. 61 00:04:48,190 --> 00:04:53,110 This function is going to run and then our assertion will be performed. 62 00:04:53,140 --> 00:04:57,910 So let's go ahead and save the file and then we're gonna count to 2 and it's done. 63 00:04:58,270 --> 00:04:59,250 So what happened. 64 00:04:59,260 --> 00:05:05,900 Clearly it didn't wait those two seconds and clearly something's gone wrong because down below async 65 00:05:05,950 --> 00:05:12,850 test demo is passing even though the assertion we're performing is clearly invalid. 66 00:05:12,850 --> 00:05:15,970 The problem here is that just did it no. 67 00:05:16,000 --> 00:05:21,010 Our test contained asynchronous code so it simply ran the function. 68 00:05:21,010 --> 00:05:24,730 By the time the function was done no error got throw in. 69 00:05:24,730 --> 00:05:28,530 So what did it do it considered the test a success. 70 00:05:28,570 --> 00:05:34,880 It didn't wait for those two seconds to pass to see that the assertion would fail later down the line. 71 00:05:35,020 --> 00:05:41,980 The entire test suite only took less than half a second so it definitely did not wait the time necessary 72 00:05:42,280 --> 00:05:45,840 for this failed assertion to actually run. 73 00:05:45,880 --> 00:05:53,140 Now all we need to do to address this is to add a little bit of extra code to tell jest this is a synchronous. 74 00:05:53,140 --> 00:05:59,800 All we have to do to tell just this function contains a synchronous code is to add a single parameter 75 00:05:59,800 --> 00:06:02,050 onto the callback function. 76 00:06:02,050 --> 00:06:03,780 Now we're going to name this done. 77 00:06:03,790 --> 00:06:09,130 But you could technically call it whatever you wanted and it's your job to call done. 78 00:06:09,190 --> 00:06:15,460 After everything is complete so after your asynchronous process is complete and your assertions have 79 00:06:15,460 --> 00:06:16,680 been made. 80 00:06:16,720 --> 00:06:23,980 So when we provide done as a parameter just sees that and it won't consider this test case a success 81 00:06:24,040 --> 00:06:26,720 or a failure until done is called. 82 00:06:26,740 --> 00:06:32,680 So all I'm going to do is add a call to done right here that will make sure that just actually waits 83 00:06:32,680 --> 00:06:40,270 for set time out to finish and for our assertion to be created and made before figuring out if the test 84 00:06:40,270 --> 00:06:42,220 succeeded or failed. 85 00:06:42,220 --> 00:06:48,100 Now if I save the program we'll notice it actually takes more than two seconds so it is indeed waiting 86 00:06:48,340 --> 00:06:55,030 for those two seconds related to set time out and we can see we have a single failing test which is 87 00:06:55,030 --> 00:07:00,680 perfect if we scroll up to the test case itself a async test demo. 88 00:07:00,760 --> 00:07:02,490 We expected to. 89 00:07:02,500 --> 00:07:06,480 We received one and that's what's causing the test to fail. 90 00:07:06,520 --> 00:07:13,000 So when we're working with asynchronous code we have to make sure that just doesn't consider our test 91 00:07:13,000 --> 00:07:18,470 a success or failure before we've actually finished the asynchronous process. 92 00:07:18,580 --> 00:07:20,680 And this is one approach you provide. 93 00:07:20,680 --> 00:07:24,660 The done parameter and you call done well when you're done. 94 00:07:24,700 --> 00:07:30,670 Now there are other ways we can get this done as well especially when it comes to working with promises 95 00:07:30,700 --> 00:07:32,340 and async await. 96 00:07:32,350 --> 00:07:34,840 So that's what I'd like to talk about next. 97 00:07:34,840 --> 00:07:40,570 Now we are going to need an asynchronous function we can actually test into continue on with our little 98 00:07:40,570 --> 00:07:45,180 demonstration before we worry about testing the task manager app. 99 00:07:45,250 --> 00:07:50,410 We're gonna go ahead and grab one of the functions we created in the playground directory earlier in 100 00:07:50,410 --> 00:07:51,590 the class. 101 00:07:51,790 --> 00:08:00,040 So over in the playground folder down below near the bottom I have async await and I have an add function. 102 00:08:00,040 --> 00:08:06,520 This add function adds up to numbers but it waits 2 seconds first so we're gonna figure out how we could 103 00:08:06,520 --> 00:08:14,440 test this then in the next lesson I promise we'll actually start to test our Express application for 104 00:08:14,440 --> 00:08:19,050 the moment though what we're gonna do is copy this function to the clipboard. 105 00:08:19,060 --> 00:08:24,330 Now if you don't have this in place for whatever reason you can always download the lecture zip for 106 00:08:24,330 --> 00:08:25,940 this lesson to grab it. 107 00:08:26,190 --> 00:08:28,890 So take a moment to do that if you need to. 108 00:08:29,040 --> 00:08:36,630 And we're going to bring this function over to math dot J S I'll add it just below Celsius to Fahrenheit 109 00:08:36,990 --> 00:08:41,250 and I'll make sure to export it down below down here. 110 00:08:41,290 --> 00:08:45,710 I will set up ad as something exporting and I'll save the file. 111 00:08:45,790 --> 00:08:52,240 Now over in the math test file we can go ahead and load that in in our required call up top. 112 00:08:52,240 --> 00:08:56,440 I'll make sure to grab add right here and then down below. 113 00:08:56,440 --> 00:09:00,850 We're actually going to use that inside of a test case. 114 00:09:00,940 --> 00:09:06,250 Now I'm going to leave this one in place for the moment as a demonstration of asynchronous testing. 115 00:09:06,520 --> 00:09:13,450 So down below we'll go ahead and add another call to test to create a new test case to test our promise 116 00:09:13,660 --> 00:09:15,510 based asynchronous function. 117 00:09:15,580 --> 00:09:18,210 The structure of the test case is still the same. 118 00:09:18,210 --> 00:09:20,510 We'll set up a name for this one. 119 00:09:20,560 --> 00:09:28,090 I'll say something like should add two numbers and then I'll go ahead and set up the test case callback 120 00:09:28,090 --> 00:09:29,010 function. 121 00:09:29,080 --> 00:09:33,260 And in this case we are going to provide that done parameter. 122 00:09:33,310 --> 00:09:39,040 So just knows that something asynchronous is happening inside of here and down below. 123 00:09:39,100 --> 00:09:46,090 We're going to go ahead and call add I'll call add adding up the number two and the number three for 124 00:09:46,090 --> 00:09:53,950 the total five now right here what we're going to do is call then allowing us to provide a function 125 00:09:53,950 --> 00:10:00,520 to run when the promise has been fulfilled with a value in this case these sum will get access to these 126 00:10:00,520 --> 00:10:07,210 some right here which is exactly what we explored much earlier in the class when working with promises. 127 00:10:07,300 --> 00:10:11,740 Now inside of here it is our job to do the same thing we were doing up above. 128 00:10:11,740 --> 00:10:15,510 We make our assertions and then we called done so right here. 129 00:10:15,520 --> 00:10:23,730 I will be expecting that the sum equals the number five using to B and passing five in. 130 00:10:23,740 --> 00:10:30,130 Now at this point we'd call done a sense are assertions are in place and we know the asynchronous process 131 00:10:30,130 --> 00:10:30,850 has finished. 132 00:10:30,850 --> 00:10:37,120 If this function is actually running and here we go now we can go ahead and save the program to see 133 00:10:37,120 --> 00:10:38,330 what happens. 134 00:10:38,440 --> 00:10:41,520 Now before we do let's go ahead and comment out. 135 00:10:41,530 --> 00:10:45,850 This test case up above that one's going to fail by default. 136 00:10:45,880 --> 00:10:52,020 So we'll go ahead and prevent that one from running for the moment and down below we can see what happens. 137 00:10:52,090 --> 00:11:00,640 A few seconds pass and right here we can see that every single test case is a success which is fantastic. 138 00:11:00,640 --> 00:11:05,500 That means just did go ahead and wait for these some following it. 139 00:11:05,500 --> 00:11:08,820 It made the assertion and it called done. 140 00:11:08,860 --> 00:11:12,150 Now if any of these were to fail the test case would fail. 141 00:11:12,160 --> 00:11:14,850 So if I was expecting the number six. 142 00:11:14,890 --> 00:11:17,710 Clearly that would be an issue and down below. 143 00:11:17,710 --> 00:11:21,360 After a few seconds we would see the failed test case. 144 00:11:21,520 --> 00:11:24,640 So I'll revert that bringing it back to its working state. 145 00:11:24,730 --> 00:11:28,550 And we're going to explore one more way we could get this done. 146 00:11:28,570 --> 00:11:34,030 So what we're going to do is use async await and to start we will call test and we'll provide a name 147 00:11:34,570 --> 00:11:42,730 should add two numbers async await and then we'll provide our function to run. 148 00:11:42,730 --> 00:11:47,500 This time though we're going to mark the function as a sync. 149 00:11:47,560 --> 00:11:48,790 So what is this going to do. 150 00:11:48,790 --> 00:11:52,560 Well yes it's going to allow us to use a weight inside of here. 151 00:11:52,660 --> 00:11:55,860 But let's remember what we also know about async functions. 152 00:11:55,870 --> 00:12:01,800 They always always return a promise when your test function returns a promise. 153 00:12:01,810 --> 00:12:08,740 Gest is going to see that and it'll wait for the promise to either be fulfilled or rejected before figuring 154 00:12:08,740 --> 00:12:13,090 out if the test case should be considered a success or a failure. 155 00:12:13,090 --> 00:12:14,780 So what does that mean for us. 156 00:12:14,800 --> 00:12:21,010 It means we can use a wait inside of here and just will actually wait till everything's done so we'll 157 00:12:21,010 --> 00:12:26,800 get to go ahead and recreate the exact same test case up above using the alternative syntax. 158 00:12:26,830 --> 00:12:33,340 So right here concept some equals whatever comes back from awaiting our call to add. 159 00:12:33,340 --> 00:12:39,040 I'll go ahead and add up the number 10 with the number 22 for a total of 32. 160 00:12:39,490 --> 00:12:47,550 And down below 0 we need to do is make our assertion I'm expecting the sum to be the number thirty two 161 00:12:47,800 --> 00:12:49,020 if it is great. 162 00:12:49,150 --> 00:12:51,050 If not we have a problem. 163 00:12:51,190 --> 00:12:58,270 Right here I'll save the program to rerun the test cases down below we wait and all of the tests pass 164 00:12:58,270 --> 00:13:00,930 which is fantastic and just approve. 165 00:13:00,940 --> 00:13:02,380 This is actually working. 166 00:13:02,650 --> 00:13:04,750 Let's go ahead and mess things up. 167 00:13:04,750 --> 00:13:11,950 I'll switch 10 over to eleven that should cause our assertion to fail and I would expect to see a single 168 00:13:11,950 --> 00:13:14,110 failing test right here. 169 00:13:14,110 --> 00:13:18,300 It's running through the process and we do indeed have that failing test. 170 00:13:18,850 --> 00:13:24,580 So when we're working with promises we can choose to either use done though this approach is a little 171 00:13:24,580 --> 00:13:25,540 less common. 172 00:13:25,630 --> 00:13:31,900 It's more common to use async await because of the benefits the syntax provides the same benefits we 173 00:13:31,900 --> 00:13:38,330 get when using it in our program less nested callbacks and easier to read code. 174 00:13:38,650 --> 00:13:44,420 So there's no challenge this video as I just wanted to go over a couple of basic concepts. 175 00:13:44,480 --> 00:13:50,030 So here's where we're gonna go from here in the next lesson we're going to start the process of setting 176 00:13:50,030 --> 00:13:51,960 up a test environment. 177 00:13:52,040 --> 00:13:57,470 So if we are going to interact with our API we're gonna be reading and writing from the database and 178 00:13:57,470 --> 00:14:01,740 we don't want to mess up our development database or our production database. 179 00:14:01,850 --> 00:14:07,850 So we'll quickly set up a test environment with a test database and then we'll focus on testing the 180 00:14:07,850 --> 00:14:09,580 Express application. 181 00:14:09,590 --> 00:14:10,790 I'm excited to get to that. 182 00:14:10,820 --> 00:14:13,160 So let's jump right in to the next lesson.