1 00:00:00,540 --> 00:00:03,010 In the last video we finished working on our mailer. 2 00:00:03,060 --> 00:00:08,530 And I really hope that's the last of it because the censored stuff as we've spoken about is pretty nasty. 3 00:00:08,700 --> 00:00:13,290 So we're now going to test out the mailer and make sure that it works the way we expect to make sure 4 00:00:13,290 --> 00:00:17,010 that the mailer actually communicates itself over to send grid. 5 00:00:17,070 --> 00:00:21,750 We have to remember to call the send function on the mailer that we create. 6 00:00:21,780 --> 00:00:26,340 So let's flip back over to our survey route's file where we've already put together just a tiny bit 7 00:00:26,340 --> 00:00:28,490 of test code to create a new mailer. 8 00:00:28,860 --> 00:00:33,870 So your survey routes and we'll find where we created the mailer at the bottom and we're going to make 9 00:00:33,870 --> 00:00:39,330 sure that we call send on this thing to make sure that the mailer actually attempts to send itself. 10 00:00:39,330 --> 00:00:42,780 So we'll add in mailer got sent. 11 00:00:43,330 --> 00:00:43,760 OK. 12 00:00:43,800 --> 00:00:46,860 So it's now time to test out this route. 13 00:00:46,860 --> 00:00:48,800 I want to somehow test this route. 14 00:00:48,810 --> 00:00:50,740 I want to make a post request to it. 15 00:00:50,760 --> 00:00:53,440 I want to verify that it requires us to be logged in. 16 00:00:53,460 --> 00:00:57,330 That requires some number of credits and all these other conditions in here as well. 17 00:00:57,330 --> 00:01:01,600 And eventually I want to make sure that we somehow send out an e-mail. 18 00:01:01,650 --> 00:01:05,310 So at this point we have written a tremendous amount of code without really testing it. 19 00:01:05,310 --> 00:01:09,960 So this is really the point of discovery where we decide whether or not everything worked out really 20 00:01:09,960 --> 00:01:15,120 well or whether it didn't work out at all and we need to go back and kind of go back to the drawing 21 00:01:15,120 --> 00:01:17,490 board so to speak. 22 00:01:17,490 --> 00:01:20,780 The only question is how do we actually test our code. 23 00:01:20,970 --> 00:01:24,600 How do we actually make a post request to API slash service. 24 00:01:24,600 --> 00:01:29,250 We don't have anything inside of a re-act application right now we don't have any type of form that 25 00:01:29,250 --> 00:01:33,840 we can use to send a post request to this thing but obviously I don't want to do all the Riak stuff 26 00:01:34,340 --> 00:01:39,090 unless we are at least somewhat sure that the back end is going to work out as we expect. 27 00:01:39,090 --> 00:01:41,990 Now you might be sitting there thinking Hey Stephen that's no problem. 28 00:01:42,150 --> 00:01:44,110 Let's use a rest client. 29 00:01:44,280 --> 00:01:50,070 So you might have heard about rest clients previously maybe one of my other courses or maybe working 30 00:01:50,070 --> 00:01:51,370 on your own. 31 00:01:51,930 --> 00:01:57,630 There are these little applications that can run on your local laptop or your local desktop called Rest 32 00:01:57,630 --> 00:02:04,870 clients and they allow you to make API requests to any arbitrary endpoint on any given server. 33 00:02:04,890 --> 00:02:08,370 So for example here's my resk client called postman. 34 00:02:08,520 --> 00:02:15,180 I can make a get request to local host 5000 slashy API slash user to figure out whether or not I'm signed 35 00:02:15,180 --> 00:02:16,020 in. 36 00:02:16,020 --> 00:02:21,090 And so I make the request and it returns back nothing at all which means okay I'm probably not signed 37 00:02:21,090 --> 00:02:22,350 in. 38 00:02:22,800 --> 00:02:29,850 So we could use postman here but I want to point out one little issue that's really going to throw a 39 00:02:29,850 --> 00:02:33,140 real wrench into doing any testing with post man. 40 00:02:33,160 --> 00:02:34,340 And here's what it is. 41 00:02:34,380 --> 00:02:40,530 Remember that our surveys route right here requires our user to be logged in and to have some number 42 00:02:40,530 --> 00:02:50,040 of credits doing a off flow through any type of rest client is a huge pain in the rear. 43 00:02:50,060 --> 00:02:54,220 So the only way for a user to log into our application is to go through that waterflow. 44 00:02:54,500 --> 00:02:59,900 But if we want to do that inside of postbag to make sure that we are able to make requests logged in 45 00:02:59,900 --> 00:03:05,050 as a current user it is a real pain in the neck to use post and for this that kind of thing. 46 00:03:05,060 --> 00:03:08,730 So if you're sitting there thinking Hey let's use postman to test out this new route. 47 00:03:08,750 --> 00:03:11,120 Handler Well we're not going to quite do that. 48 00:03:11,120 --> 00:03:16,670 We're going to do things a little bit differently and a much easier and much more straightforward fashion 49 00:03:16,910 --> 00:03:18,760 than using that postman client. 50 00:03:18,800 --> 00:03:19,160 OK. 51 00:03:19,220 --> 00:03:20,370 So let's figure out what that is. 52 00:03:20,450 --> 00:03:22,810 Let's get down to it. 53 00:03:22,970 --> 00:03:23,320 All right. 54 00:03:23,450 --> 00:03:29,840 So what we're going to do is we're going to make sure that we have direct access to the X-Post module 55 00:03:30,170 --> 00:03:33,000 inside of our browser from the re-act library. 56 00:03:33,530 --> 00:03:40,140 We will then use the axis module to make a post request to our back and server from our re-act up manually. 57 00:03:40,520 --> 00:03:44,990 Remember that any time we make a request from the re-act side of our application over to our back and 58 00:03:44,990 --> 00:03:47,000 server cookies are included. 59 00:03:47,000 --> 00:03:50,100 And so we will pass all the required logging checks. 60 00:03:50,300 --> 00:03:56,300 So essentially we can use postman or we can use kind of like this fake rest client on the client side 61 00:03:56,300 --> 00:04:01,250 of our application from inside the browser and we'll pass all the authentication checks without any 62 00:04:01,250 --> 00:04:02,400 issue whatsoever. 63 00:04:02,420 --> 00:04:04,850 So let's figure out exactly how this is going to work. 64 00:04:04,850 --> 00:04:11,330 First off I'm going to change over to my client folder and inside if you're going to find my index G-S 65 00:04:11,510 --> 00:04:21,230 file inside of the in that sarcy directory inside if you're going to import X-posts from X-posts and 66 00:04:21,230 --> 00:04:26,320 I'm going to assign it to window dot ASIO's like so. 67 00:04:26,690 --> 00:04:31,940 So this is going to be some very temporary test code that we have in here just for testing out this 68 00:04:31,940 --> 00:04:35,450 back end drought that we are attempting to figure out whether or not it works OK. 69 00:04:35,450 --> 00:04:37,920 So just very temporary right here. 70 00:04:37,970 --> 00:04:41,750 So now if I make sure that my server is running and it looks like it is. 71 00:04:41,760 --> 00:04:43,850 So here's my server right here. 72 00:04:44,000 --> 00:04:46,140 I'm now going to flip over to the browser. 73 00:04:46,600 --> 00:04:49,130 I'm going to change over to the re-act application. 74 00:04:49,370 --> 00:04:54,260 I'm going to refresh the page just to make sure I'm current and if I open up my terminal and in the 75 00:04:54,260 --> 00:05:01,390 javascript console I should be able to write X-ers and then see the actual library pop out. 76 00:05:01,460 --> 00:05:02,590 And that's what you see right here. 77 00:05:02,600 --> 00:05:08,990 This is the actual library so I can now access functions like Actio top post like so and make a post 78 00:05:09,050 --> 00:05:14,890 request using all the cookies that are required that are provided at local hoze 3000. 79 00:05:14,900 --> 00:05:20,000 So if we manually write in requests to our API endpoint right here to create a new survey we should 80 00:05:20,000 --> 00:05:23,450 be able to test out all the emails and logic. 81 00:05:23,450 --> 00:05:28,710 So with this we can at least get somewhere. 82 00:05:28,880 --> 00:05:34,650 So we're now going to create a request object manually and then send it to our backend API. 83 00:05:34,910 --> 00:05:40,340 So the first thing we need to do is to create a fake survey remember that we've been saying many times 84 00:05:40,670 --> 00:05:46,140 that a survey will have properties like the subject the body all that kind good stuff. 85 00:05:46,160 --> 00:05:48,010 So let's make a survey right now. 86 00:05:48,220 --> 00:05:52,120 It's going to say Konst survey equals. 87 00:05:52,250 --> 00:05:54,500 This is going to have a couple different properties. 88 00:05:54,750 --> 00:05:57,780 Let's make sure our font's is nice and large so you can read it. 89 00:05:58,430 --> 00:06:10,100 So we don't have a title of my title a subject of my subject will have a recipient's list and remembers 90 00:06:10,100 --> 00:06:11,200 recipients right here. 91 00:06:11,240 --> 00:06:15,320 And it's a string that is comma separated e-mails. 92 00:06:15,350 --> 00:06:19,490 Now I've already taken the liberty of creating a brand new gmail account that we can easily test out 93 00:06:19,500 --> 00:06:20,650 all this stuff with. 94 00:06:20,690 --> 00:06:25,940 So I'm going to use the e-mail address for this account right here but for you of course I recommend 95 00:06:25,940 --> 00:06:31,080 you use your own personal e-mail so you can verify that your server is working correctly. 96 00:06:31,130 --> 00:06:33,670 So the e-mail address for this account is dev. 97 00:06:33,680 --> 00:06:35,570 E-mail me at gmail dot com. 98 00:06:35,600 --> 00:06:38,110 So that's what I'm going to use for my recipients right here. 99 00:06:38,130 --> 00:06:39,210 So send. 100 00:06:39,450 --> 00:06:45,350 E-mail the dotcom groups have e-mailed me at gmail dot com. 101 00:06:45,350 --> 00:06:47,280 There we go. 102 00:06:47,290 --> 00:06:49,870 And then do we require any other properties. 103 00:06:49,910 --> 00:06:51,430 Let's go double check really quick. 104 00:06:51,430 --> 00:06:53,630 We'll go back to our survey route's file. 105 00:06:53,690 --> 00:06:55,840 So we've got titles subject. 106 00:06:55,850 --> 00:06:57,550 I think we missed body. 107 00:06:57,650 --> 00:06:59,380 We missed one of these other subject or body. 108 00:06:59,400 --> 00:07:07,740 So we got subject to the last woman's body say a body of here's the body of the email. 109 00:07:08,630 --> 00:07:08,990 OK. 110 00:07:08,990 --> 00:07:11,540 So here's our object that represents the survey. 111 00:07:11,540 --> 00:07:14,980 We're now going to make use of Axel's to send this to our back and server. 112 00:07:15,030 --> 00:07:25,620 So we'll see X-post post slash CPI slash surveys and we'll pass in the survey as the second argument. 113 00:07:25,750 --> 00:07:26,950 All right. 114 00:07:26,950 --> 00:07:32,110 So now if we check out our request log right here you are going to see that the request is pending because 115 00:07:32,110 --> 00:07:35,720 we are not properly responding to the request from our server right now. 116 00:07:35,800 --> 00:07:39,260 Remember inside of our route handler we are sending that e-mail. 117 00:07:39,280 --> 00:07:43,230 But we actually never terminate the request and send back a response. 118 00:07:43,270 --> 00:07:47,940 However we should be able at least be able to see inside of our e-mail if we have something. 119 00:07:48,160 --> 00:07:52,240 So if I flip over to gmail and look at my promotions tab you'll see. 120 00:07:52,280 --> 00:07:56,550 OK here's our e-mail as the subject of my subject. 121 00:07:56,650 --> 00:07:58,420 It says here is the body of the e-mail. 122 00:07:58,480 --> 00:08:00,600 And it definitely appeared at the e-mail address. 123 00:08:00,610 --> 00:08:02,370 Hooray. 124 00:08:02,440 --> 00:08:04,630 So it looks like everything worked out pretty well here. 125 00:08:04,630 --> 00:08:09,810 We definitely got the e-mails sent from our application over to this e-mail address. 126 00:08:09,850 --> 00:08:15,960 Now at this point it is likely even probable that you might have not gotten this e-mail. 127 00:08:16,330 --> 00:08:20,800 So if you did not get an e-mail what I'm going to recommend you do is immediately flip over to your 128 00:08:20,800 --> 00:08:24,410 terminal and see if you have any big glaring error messages over here. 129 00:08:24,430 --> 00:08:28,140 Anything that says hey something went really wrong. 130 00:08:28,480 --> 00:08:34,300 If you do I recommend you do a little bit of trouble shooting to figure out exactly what happened after 131 00:08:34,300 --> 00:08:36,310 you do a little bit of troubleshooting of course. 132 00:08:36,310 --> 00:08:41,080 Feel free to hop over to the discussion linked to your code and let me know how I can help you figure 133 00:08:41,080 --> 00:08:41,860 out what's going on. 134 00:08:41,860 --> 00:08:44,740 Just remember always try to post a screenshot of the air. 135 00:08:44,740 --> 00:08:47,840 So I've got a good idea of exactly what's happening. 136 00:08:47,860 --> 00:08:48,460 All right. 137 00:08:48,460 --> 00:08:52,350 So at this point hopefully e-mails are being sent out correctly. 138 00:08:52,390 --> 00:08:56,950 So at this point we're going to do just a little bit of quick clean up on that debug code that we just 139 00:08:56,950 --> 00:08:57,510 added. 140 00:08:57,720 --> 00:08:59,950 So back inside the index stock J.S. file. 141 00:09:00,070 --> 00:09:03,790 I'm going to clean up that X-ers import statement because we don't really want to have access on our 142 00:09:03,790 --> 00:09:05,400 windows scope at all. 143 00:09:06,100 --> 00:09:06,420 OK. 144 00:09:06,490 --> 00:09:07,680 So that looks about. 145 00:09:08,230 --> 00:09:13,930 So we now have the ability to send e-mails from our application but we're not quite done with our API 146 00:09:13,960 --> 00:09:16,320 endpoint for creating a survey just yet. 147 00:09:16,330 --> 00:09:19,570 So let's take a quick break and then continue in the next section.