1 00:00:00,150 --> 00:00:03,580 No they were done with mocking and let's go ahead and close mail. 2 00:00:03,630 --> 00:00:10,230 J.S. and account dot J S and we can collapse those directories as well just to free up a bit of space 3 00:00:10,260 --> 00:00:14,420 in the sidebar and what we're going to do from here is right. 4 00:00:14,420 --> 00:00:18,170 Just a few more tests related to the user. 5 00:00:18,270 --> 00:00:23,300 Then in the next lesson we'll write some tests focused on our tasks. 6 00:00:23,310 --> 00:00:29,010 Now there are a couple of new techniques we need to explore to add some new tools to our tool belt. 7 00:00:29,250 --> 00:00:35,250 And one is figuring out how we can send a file using super test. 8 00:00:35,250 --> 00:00:41,790 So what I'm gonna do is send an image off to my upload Avatar endpoint and I'll make sure that I do 9 00:00:41,790 --> 00:00:46,650 get a buffer stored in the Avatar field in the database. 10 00:00:46,770 --> 00:00:52,740 So to get that done let's go ahead and kick things off by creating the brand new test case I'll call 11 00:00:52,740 --> 00:00:55,290 test right here providing a name. 12 00:00:55,290 --> 00:01:04,270 Something like should upload Avatar image then I can set this test up as an async function down below. 13 00:01:04,290 --> 00:01:11,490 Now one thing we're gonna need to do is get access to an image that we can upload in the test cases. 14 00:01:11,490 --> 00:01:17,140 Now to do this what we're going to do is create a new directory in our tests folder. 15 00:01:17,160 --> 00:01:23,760 This is a directory we'll be using right now as well as in the next lesson for something kind of different. 16 00:01:23,850 --> 00:01:31,320 And this directory is gonna be called fixtures in the testing world a fixture or fixtures plural are 17 00:01:31,320 --> 00:01:35,640 things that allow you to set up the environment your tests are going to run in. 18 00:01:35,640 --> 00:01:41,310 So what we're going to do is put an image inside of this directory that our tests can use when they're 19 00:01:41,310 --> 00:01:45,510 trying to upload an image to the server to test that endpoint. 20 00:01:45,510 --> 00:01:50,760 Now if you remember from earlier in the class I did provide you with a bunch of sample images that we 21 00:01:50,760 --> 00:01:53,810 had use to test things out using postmen. 22 00:01:53,850 --> 00:01:57,660 We're just going to grab one of those and use it for this as well. 23 00:01:57,660 --> 00:02:05,140 Now if you don't have those you can find those over at links dot Meade dot I O forward slash files. 24 00:02:05,160 --> 00:02:09,540 This is exactly where we grabbed them from a few sections ago. 25 00:02:09,540 --> 00:02:14,940 You can download the note of course images zip extract it and get those images. 26 00:02:15,000 --> 00:02:17,010 Now I still have that on my machine. 27 00:02:17,040 --> 00:02:20,980 So what I'm gonna do is add an image into the fixtures directory. 28 00:02:21,210 --> 00:02:26,940 I'll crack open my finder on the Mac or the file explorer depending on your operating system. 29 00:02:26,970 --> 00:02:32,910 I have that directory in my downloads folder and right here what I'm going to do is go ahead and grab 30 00:02:32,910 --> 00:02:35,670 a profile pic dot J P G. 31 00:02:35,700 --> 00:02:37,170 So that is sitting right here. 32 00:02:37,170 --> 00:02:42,780 That is the robot picture I'm gonna use command see to copy that into the clipboard that you can always 33 00:02:42,780 --> 00:02:47,690 right click if you do not know the keyboard shortcut for your operating system. 34 00:02:47,730 --> 00:02:53,380 We want to copy that file and bring it over to our fixtures directory. 35 00:02:53,430 --> 00:03:00,990 Now right here I have that on the desktop that is node course task manager that is tests followed by 36 00:03:01,050 --> 00:03:02,930 fixtures right here. 37 00:03:02,940 --> 00:03:09,330 This is where I want to put that file so I will paste it using either the keyboard shortcut or the right 38 00:03:09,390 --> 00:03:10,930 click menu. 39 00:03:10,950 --> 00:03:16,890 Now we can close down the founder or file explorer and inside of the fixtures folder we should have 40 00:03:16,890 --> 00:03:21,080 an image that we can use when testing that upload route. 41 00:03:21,120 --> 00:03:26,520 As long as you're seeing an image inside of here then you're ready to actually fill out this test case. 42 00:03:26,520 --> 00:03:31,290 Now to get started it's going to look very similar to what we've done with our other test cases. 43 00:03:31,290 --> 00:03:37,440 I'll be using a wait with Super Test so I'll call a request passing the app in and then we're going 44 00:03:37,440 --> 00:03:40,320 to specify the TTP method. 45 00:03:40,320 --> 00:03:47,850 Here we are trying to use post with the following You are L that is forward slash users forward slash 46 00:03:47,850 --> 00:03:50,550 me forward slash avatar. 47 00:03:50,550 --> 00:03:53,060 Now in this case we do want to be authenticated. 48 00:03:53,070 --> 00:03:55,970 So we'll go ahead and set that up as well. 49 00:03:56,130 --> 00:04:03,870 Just down below I'll use set to configure this and we're going to set up authorization using as always 50 00:04:03,870 --> 00:04:12,570 an iOS 6 template string we have a bearer space then we use the E6 template string syntax to interpolate 51 00:04:12,570 --> 00:04:21,890 the following value that is user 1 dot tokens we're gonna grab that first token object and grab the 52 00:04:21,920 --> 00:04:28,550 token property off of it exactly like we had done up above for the other test cases now that we have 53 00:04:28,570 --> 00:04:35,540 the token set what we want to do is also attach the avatar field remember that is the one we're looking 54 00:04:35,540 --> 00:04:43,580 for to do that we use dot attach attaches provided by Super Test allowing us to attach files. 55 00:04:43,670 --> 00:04:50,470 So right here what we do if we want to attach a file is provide two arguments both are strings. 56 00:04:50,480 --> 00:04:57,170 The first is the form field we're trying to set now our server is configured to look for Avatar we also 57 00:04:57,170 --> 00:05:04,870 configured this when sending the image via postman and in this case the second is the path to the file 58 00:05:04,880 --> 00:05:06,860 and this starts from the root of our project. 59 00:05:06,860 --> 00:05:17,780 So for us that would be tests forward slash fixtures forward slash profile hyphen pic dot J P G. 60 00:05:17,780 --> 00:05:22,350 So that is going to correctly upload that file to the following endpoint. 61 00:05:22,430 --> 00:05:28,670 And what are we going to do while I'm going to expect that I get a two hundred back meaning that everything 62 00:05:28,700 --> 00:05:34,550 went well let's go ahead and start here first then we'll focus on adding a couple of other assertions 63 00:05:34,640 --> 00:05:40,700 down below right here I'll go ahead and save the test to suite and in a moment we should see 14 passing 64 00:05:40,700 --> 00:05:47,000 tests down below and that is exactly what we get now we could continue on to write other assertions 65 00:05:47,210 --> 00:05:52,940 and for this particular test case we can figure out what makes sense now we can't compare the binary 66 00:05:52,940 --> 00:05:59,420 data for this image directly with what's stored in the database because remember we do use that sharp 67 00:05:59,480 --> 00:06:02,660 NPM module to manipulate the image. 68 00:06:02,660 --> 00:06:09,980 Now if we wanted to we could load this file in using the F S module I could manipulate it using these 69 00:06:09,980 --> 00:06:15,920 same techniques and then compare the binary data but that is definitely overkill what we're going to 70 00:06:15,920 --> 00:06:19,230 do is just check that binary data was indeed safe. 71 00:06:19,250 --> 00:06:20,960 That's a great place to start. 72 00:06:20,990 --> 00:06:28,670 So right here we're going to grab the user const user equals a weight with user dot find by I.D. And 73 00:06:28,670 --> 00:06:35,660 we're just looking for user 1 I.D. as we had done before now there's one important thing we need to 74 00:06:35,660 --> 00:06:41,840 talk about when it comes to our assertions and to illustrate this let's use expect what I'm gonna do 75 00:06:41,840 --> 00:06:49,520 is expect this empty object to be this empty object and it's going to fail let's go ahead and see it 76 00:06:49,520 --> 00:06:56,630 fail first then we'll talk about why it's failing so down below I can see I expected this and I received 77 00:06:56,660 --> 00:06:57,180 this. 78 00:06:57,260 --> 00:07:01,480 Now this doesn't seem to make much sense because we have the exact same thing. 79 00:07:02,030 --> 00:07:09,560 What's important to note is that to be uses these triple equality operator provided by JavaScript So 80 00:07:09,560 --> 00:07:15,050 when you first learn about if statements in JavaScript you learn about the equality operator now you 81 00:07:15,050 --> 00:07:17,980 know that one is indeed equal to 1. 82 00:07:18,080 --> 00:07:24,860 So this is why if I use expect and to be with these numbers it would work but you also learn that objects 83 00:07:24,860 --> 00:07:28,920 are not equal to other objects even if they have these same properties. 84 00:07:29,060 --> 00:07:34,700 When we're checking objects for equality it's checking to see if it's the exact same object in memory 85 00:07:34,910 --> 00:07:36,690 and in this case it is not. 86 00:07:36,680 --> 00:07:41,600 I'm creating two distinct objects even though they have these same properties. 87 00:07:41,600 --> 00:07:47,780 So if we want to compare objects using expect we can't use to be the good news though is that we can 88 00:07:47,780 --> 00:07:54,440 just switch over to two equal to equal does not use the triple equality operator. 89 00:07:54,440 --> 00:08:00,470 Instead it uses an algorithm which is going to look at the properties on the object and compare those 90 00:08:00,740 --> 00:08:07,820 and in this case I would expect those two to be equal down below the test suite is rerunning and now 91 00:08:07,820 --> 00:08:10,550 we're getting a passing test suite. 92 00:08:10,550 --> 00:08:15,980 So once again the whole purpose of bringing this up is to just show you that there are times where to 93 00:08:15,980 --> 00:08:21,370 be is not going to work as expected when working with objects to equal is what you want. 94 00:08:21,380 --> 00:08:26,480 Now what we're going to do is check the data stored on user right here. 95 00:08:26,660 --> 00:08:29,950 We're going to look at user dot Avatar. 96 00:08:29,990 --> 00:08:36,100 That is where the binary data should be stored and we're going to check if it's equal to something. 97 00:08:36,140 --> 00:08:38,380 Now we don't have that real something. 98 00:08:38,480 --> 00:08:45,140 We just want to see if it's a buffer if it's binary data stored in a buffer and expect gives us a way 99 00:08:45,170 --> 00:08:46,490 to get that done. 100 00:08:46,640 --> 00:08:56,030 Right here we can pass in a two to equal expect dot any this takes in the constructor function for some 101 00:08:56,030 --> 00:08:57,130 sort of type. 102 00:08:57,140 --> 00:09:01,590 And it's going to check if what you're looking at is indeed of that type. 103 00:09:01,700 --> 00:09:04,590 And right here we're going to check if it's a buffer. 104 00:09:04,610 --> 00:09:11,060 Now we could use expect dot any with string to check if it's any string or with something like number 105 00:09:11,060 --> 00:09:13,090 to check if it's any number. 106 00:09:13,160 --> 00:09:17,150 In this case we want to go ahead and use capital B buffer. 107 00:09:17,150 --> 00:09:23,060 So once again we're looking at that Avatar property and we're checking if it equals any buffer. 108 00:09:23,060 --> 00:09:24,470 If it does great. 109 00:09:24,500 --> 00:09:29,690 If it does not that's a problem because the image hasn't been uploaded correctly. 110 00:09:29,690 --> 00:09:30,430 Down below. 111 00:09:30,560 --> 00:09:34,780 All we're going to do is save the user test suite to see what happens. 112 00:09:34,790 --> 00:09:40,970 The test suite is rerunning we should have those 14 passing tests and that is exactly what we end up 113 00:09:41,030 --> 00:09:42,040 getting. 114 00:09:42,230 --> 00:09:47,520 Now that we've messed around with a few other techniques allowing us to write test cases you're gonna 115 00:09:47,540 --> 00:09:51,950 go ahead and write a couple on your own as the challenge for the video. 116 00:09:52,040 --> 00:09:52,780 So down below. 117 00:09:52,790 --> 00:09:55,810 Let's go ahead and talk about what I'd like you to do right here. 118 00:09:55,810 --> 00:10:00,200 You'll be creating two test cases for testing update functionality. 119 00:10:00,230 --> 00:10:07,310 So one create should update valid user fields to try to update something like the user's name. 120 00:10:07,400 --> 00:10:13,830 So up above I believe before my test user I have the name Mike I'll change that to something else. 121 00:10:13,910 --> 00:10:20,050 Then I'm going to actually find the user in the database and make sure the name has changed. 122 00:10:20,090 --> 00:10:26,240 So this makes sure that things go well when you're authenticated and you're changing a valid field down 123 00:10:26,240 --> 00:10:30,140 below create should not update invalid user fields. 124 00:10:30,170 --> 00:10:35,150 So in this case I could try to update something like location which doesn't exist. 125 00:10:35,150 --> 00:10:41,270 And I would expect the correct error status code and you could always refer to the javascript code we 126 00:10:41,270 --> 00:10:47,990 wrote for that route if you forget what the status code was last up test your work with the new test 127 00:10:47,990 --> 00:10:56,420 cases in place save the test suite and you should go from 14 passing tests to 16 and that'll be where 128 00:10:56,420 --> 00:10:58,190 we stop for now. 129 00:10:58,190 --> 00:11:02,170 Take some time to get this done when you're done come back and click play 130 00:11:06,180 --> 00:11:06,930 how'd that go. 131 00:11:06,930 --> 00:11:07,770 Let's get to it. 132 00:11:07,770 --> 00:11:15,280 Just down below with our first one right here a new test with the name I should update right here. 133 00:11:15,300 --> 00:11:19,690 Valid user fields and we're going to try to update the name. 134 00:11:19,710 --> 00:11:21,780 Let's go ahead and try to spell things correctly. 135 00:11:21,780 --> 00:11:22,800 There we go. 136 00:11:22,830 --> 00:11:26,370 Now this will be an async function and we will set it up as such. 137 00:11:26,370 --> 00:11:30,160 And the first thing we're gonna do is fire off this request. 138 00:11:30,180 --> 00:11:37,680 So what I'll do is use a wait calling request once again a theme amongst our tests that test our API 139 00:11:38,170 --> 00:11:41,700 will pass in the application and we'll set up our call. 140 00:11:41,730 --> 00:11:44,010 Now right here we want to use a patch. 141 00:11:44,010 --> 00:11:51,960 So that is dot patch exactly what we used in Express when setting the endpoint up and the actual path 142 00:11:51,990 --> 00:11:58,380 is forward slash users forward slash and me to update your user profile. 143 00:11:58,380 --> 00:12:01,270 Next up we want to make sure we're sending some data. 144 00:12:01,290 --> 00:12:08,100 So let's go ahead and use send it to send our Jason request body and I will update the name. 145 00:12:08,100 --> 00:12:12,550 I'll go from a mike to Jess or at least I'll try to. 146 00:12:12,660 --> 00:12:16,500 Next up we'll go ahead and set up our expect call. 147 00:12:16,500 --> 00:12:20,280 So don't expect expecting a two hundred right here. 148 00:12:20,520 --> 00:12:21,840 Now with this in place. 149 00:12:21,840 --> 00:12:27,450 Things should at least be passing so we can save the test suite though we're still going to go ahead 150 00:12:27,720 --> 00:12:31,360 and check the data to see if that's been changed. 151 00:12:31,500 --> 00:12:37,710 Down below I did forget to add the authentication token on so I can see the test is failing and that's 152 00:12:37,710 --> 00:12:38,280 okay. 153 00:12:38,310 --> 00:12:40,860 I'll just make sure to add it in right here. 154 00:12:40,890 --> 00:12:42,130 Dot set. 155 00:12:42,180 --> 00:12:46,770 It's okay if you don't type everything out and hit the home run right away. 156 00:12:46,770 --> 00:12:51,800 Sometimes you have typos and you have to write a little code rerun it again to get things working. 157 00:12:51,810 --> 00:12:53,660 That's perfectly normal. 158 00:12:53,670 --> 00:13:01,370 So right here set authorization we're gonna go ahead and set that equal to what we've been using before 159 00:13:01,530 --> 00:13:09,140 bearer with these space followed by that user token User 1 dot tokens grabbing the first item and then 160 00:13:09,140 --> 00:13:11,440 grabbing its token prop.. 161 00:13:11,450 --> 00:13:17,090 So now I would expect things to be working if I go ahead and save that file down below. 162 00:13:17,090 --> 00:13:20,630 This suite is rerunning and it looks like we're all set. 163 00:13:20,630 --> 00:13:26,240 Now we can move on to the second part for this test case fetching that user and confirming the name 164 00:13:26,240 --> 00:13:35,000 is changed so console user will use a with user dot defined by I.D. again grabbing that test user. 165 00:13:35,150 --> 00:13:40,160 User 1 I.D. is the I.D. of the user we're looking for and down below. 166 00:13:40,160 --> 00:13:44,870 I'm going to expect something about the user name field. 167 00:13:44,870 --> 00:13:47,480 I'm going to expect it to be Jess. 168 00:13:47,480 --> 00:13:53,720 Now in this case we are comparing something that would work with to be but if we wanted to we could 169 00:13:53,720 --> 00:13:55,640 use to equal as well. 170 00:13:55,640 --> 00:13:58,070 That would work just as well. 171 00:13:58,070 --> 00:14:03,330 So typically I'll find myself using just two equal and not using to be at all. 172 00:14:03,440 --> 00:14:08,520 Right here I'm going to provide what I expect which would be Jess. 173 00:14:08,570 --> 00:14:14,690 Now we can save this test case and if that one is passing we can move on to the second test case for 174 00:14:14,690 --> 00:14:17,380 the challenge down below it is. 175 00:14:17,420 --> 00:14:23,300 So let's create that second test should not update invalid user fields. 176 00:14:23,540 --> 00:14:29,360 So to get started let's go ahead and grab this entire test case copy it to the clipboard and paste it 177 00:14:29,360 --> 00:14:30,670 down below. 178 00:14:30,680 --> 00:14:34,160 Now we can just go ahead and edit this to fit our needs. 179 00:14:34,190 --> 00:14:43,630 So for example I'm going to change the name right here should not update invalid user fields. 180 00:14:43,640 --> 00:14:46,970 Then down below we'll make some changes to the request as well. 181 00:14:46,970 --> 00:14:53,300 For example I don't want to send a name I want to send something else like location and I'll try to 182 00:14:53,300 --> 00:14:57,880 set that equal to Philadelphia even though it's not a field that we can set. 183 00:14:57,920 --> 00:15:05,910 And next up will change what we're expecting down below in terms of a status code right here we're going 184 00:15:05,910 --> 00:15:12,120 to expect a four hundred which is what we would get back if we tried to update an invalid field. 185 00:15:12,120 --> 00:15:18,600 Now down here there's no need to do anything like find the user and make sure that their name did not 186 00:15:18,600 --> 00:15:19,380 change. 187 00:15:19,440 --> 00:15:23,900 You could do that if you wanted to but that would definitely be overkill. 188 00:15:23,910 --> 00:15:24,660 All right. 189 00:15:24,670 --> 00:15:26,790 Right here the test is running. 190 00:15:26,790 --> 00:15:33,690 We can see that everything is passing so far and now we have 16 passing tests. 191 00:15:33,690 --> 00:15:39,390 So with this in place we've covered all of the basic techniques necessary for testing. 192 00:15:39,390 --> 00:15:43,640 We know how to test our requests with or without authentication. 193 00:15:43,650 --> 00:15:50,110 We know how to mock libraries and how to check the database to make sure everything's when as expected. 194 00:15:50,130 --> 00:15:56,640 And with this in place what I'd like to do to wrap up this section is do something similar for our tasks. 195 00:15:56,640 --> 00:16:02,760 We'll figure out how we can create some task data for our test user and then we'll write some tests 196 00:16:02,760 --> 00:16:07,290 for a couple of those endpoints as well using what we've already learned. 197 00:16:07,530 --> 00:16:12,450 So there's not a lot of new information to cover but we are going to get a bit more experience working 198 00:16:12,450 --> 00:16:14,470 with testing and creating tests. 199 00:16:14,580 --> 00:16:16,410 Then we'll be done with the section. 200 00:16:16,410 --> 00:16:17,520 I'm excited to get to that. 201 00:16:17,550 --> 00:16:19,920 So let's jump right in to the next one.