1
00:00:00,180 --> 00:00:06,240
In this lesson which is part to a continuation of the last one and you'll actually use jest to test

2
00:00:06,240 --> 00:00:07,800
one of the Express end points.

3
00:00:07,800 --> 00:00:10,560
Now there are two ways we could get this done.

4
00:00:10,560 --> 00:00:15,630
One would be to actually start up the Express server on port three thousand.

5
00:00:15,630 --> 00:00:22,290
We would then use an H TTP request library like the one we used with the weather application to make

6
00:00:22,290 --> 00:00:26,100
real requests to our API from code.

7
00:00:26,100 --> 00:00:30,690
Then we could make assertions about the response seeing if it's correct or not.

8
00:00:30,690 --> 00:00:37,610
Well the Express team they actually released their own library that makes this even easier to do.

9
00:00:37,620 --> 00:00:43,320
It's called Super Test and we're gonna go ahead and check it out in the browser install it and then

10
00:00:43,320 --> 00:00:45,950
use it to over in the browser.

11
00:00:45,960 --> 00:00:49,970
I've got a bunch of tabs open I'll go ahead and close a few.

12
00:00:50,040 --> 00:00:50,830
I'm going to close.

13
00:00:50,850 --> 00:00:57,570
Send grid my production database for the moment and over here in the new tab what I'm going to do is

14
00:00:57,570 --> 00:01:02,010
Google the following NPM Super Test.

15
00:01:02,010 --> 00:01:03,660
So the package we're looking for.

16
00:01:03,650 --> 00:01:06,180
Super test should be the first result.

17
00:01:06,300 --> 00:01:13,140
And once again this is a very popular library for testing especially when it comes to testing express

18
00:01:13,170 --> 00:01:14,450
applications.

19
00:01:14,460 --> 00:01:20,130
Now before we install this down below in the documentation I want to pull up a single example so we

20
00:01:20,130 --> 00:01:23,340
can wrap our heads around what exactly we're trying to do.

21
00:01:23,340 --> 00:01:30,120
So here is an entire example creating an express application and making a request to it asserting something

22
00:01:30,120 --> 00:01:32,130
about the response.

23
00:01:32,220 --> 00:01:38,430
So what do we do we load in both Super Test and express and then we define an express application and

24
00:01:38,430 --> 00:01:41,610
set up a single route something we've already done.

25
00:01:41,610 --> 00:01:44,560
So this is the stuff we already have in place.

26
00:01:44,580 --> 00:01:47,040
We're not going to need to recreate this.

27
00:01:47,160 --> 00:01:53,910
What we are going to do though is use these super test library loaded in up above to make a request

28
00:01:53,910 --> 00:01:58,840
to the endpoint so we pass the Express application into request.

29
00:01:58,920 --> 00:02:06,030
Then we chain on various methods to fire off the request attach images send Jason and assert things

30
00:02:06,060 --> 00:02:10,250
about the response and we'll learn more about exactly how we can use it.

31
00:02:10,260 --> 00:02:12,310
Once we start to use it.

32
00:02:12,330 --> 00:02:18,680
So for now one key thing you'll notice is that a call to app not listen is nowhere.

33
00:02:18,690 --> 00:02:21,470
But this still works super test.

34
00:02:21,470 --> 00:02:25,170
Does it need your server to actually be up and running.

35
00:02:25,170 --> 00:02:28,370
All it needs is the express application itself.

36
00:02:28,410 --> 00:02:34,050
Even if it's not up and running and it can use that to fire off any of the requests that you're trying

37
00:02:34,050 --> 00:02:34,950
to test.

38
00:02:35,040 --> 00:02:41,160
So this is gonna be excellent for us when we're testing from just now that we can see what we're getting

39
00:02:41,160 --> 00:02:42,390
ourselves into.

40
00:02:42,420 --> 00:02:48,270
Let's go ahead and actually install this in our project and use it to make a request to one of our endpoints.

41
00:02:48,750 --> 00:02:50,530
So over in package dot Jason.

42
00:02:50,550 --> 00:02:59,250
I'll be shutting down the test command and I'll use NPM I to install Super Test at the latest version

43
00:02:59,490 --> 00:03:06,840
which is three point four point one and we're gonna save this as a dev dependency using save Dev.

44
00:03:07,110 --> 00:03:12,990
It's only something we're going to need on our local setup when we're running our test command.

45
00:03:12,990 --> 00:03:18,640
Now once we have that installed we're actually going to be able to use it in our test file.

46
00:03:18,660 --> 00:03:21,690
So right here it did get installed correctly.

47
00:03:21,690 --> 00:03:28,830
I'm gonna go ahead and rerun NPM test and then we can actually take a moment to close down a few files

48
00:03:28,830 --> 00:03:31,300
will no longer need package dock.

49
00:03:31,320 --> 00:03:39,210
Jason is all set up so as test dot EMV and Dev dot EMV now in here what do we have.

50
00:03:39,210 --> 00:03:45,970
We have our math dot and J.S. file and our math dot test dot J.S. file.

51
00:03:45,990 --> 00:03:51,570
We're not going to use these for now but I will leave them in place just so we can remember exactly

52
00:03:51,570 --> 00:03:53,880
how we did certain things though.

53
00:03:53,880 --> 00:04:00,570
Now we're gonna focus on actually testing the task manager app so I'll create a more appropriately named

54
00:04:00,600 --> 00:04:06,960
test suite alongside of the existing one over here in the test directory.

55
00:04:07,020 --> 00:04:14,610
I'm going to create one called user dot test dot J S for testing the user related functionality for

56
00:04:14,640 --> 00:04:16,230
our task manager app.

57
00:04:16,230 --> 00:04:20,460
Now the first thing we need to do is load and super test so we'll start there.

58
00:04:20,460 --> 00:04:26,190
Const request equals whatever comes back from requiring a super test.

59
00:04:26,190 --> 00:04:31,950
Now you'll notice that these don't match up and once again this is just the convention that super test

60
00:04:31,980 --> 00:04:32,760
uses.

61
00:04:32,820 --> 00:04:38,490
You could call this whatever you wanted including something like Super Test but we'll go ahead and stick

62
00:04:38,490 --> 00:04:41,450
with the variable name that they usually use.

63
00:04:41,520 --> 00:04:48,450
The next thing we need to do is get access to our Express application but we don't want listen to be

64
00:04:48,450 --> 00:04:49,160
called.

65
00:04:49,230 --> 00:04:55,590
We just want the Express application before listen is called now for the moment and that's a problem

66
00:04:55,830 --> 00:05:02,650
because the Express application is defined in this file we create it right here and then listen is called

67
00:05:02,650 --> 00:05:03,940
down below.

68
00:05:03,940 --> 00:05:11,080
So what we're going to do is perform a little bit of refactoring just restructuring things across two

69
00:05:11,080 --> 00:05:17,390
files so we can get the Express application without necessarily actually calling.

70
00:05:17,410 --> 00:05:24,250
Listen to do that all we're gonna do is create a separate file in the source directory so a new file

71
00:05:24,250 --> 00:05:26,650
sitting right next to index dot J.

72
00:05:26,650 --> 00:05:29,520
S and I'm going to call this app dot and J.

73
00:05:29,520 --> 00:05:35,220
S This is where the Express application will get set up and exported.

74
00:05:35,290 --> 00:05:42,010
Then our test suite can load it in an index dot in J S we'll also be able to load it in just so it can

75
00:05:42,010 --> 00:05:42,280
call.

76
00:05:42,280 --> 00:05:45,440
Listen let's go ahead and see what this is going to look like.

77
00:05:45,500 --> 00:05:49,130
As it'll be easier to understand once it's done to start.

78
00:05:49,150 --> 00:05:56,230
We're gonna take everything in index dot J.S. and copy it over to app dot J S now the only thing we

79
00:05:56,230 --> 00:05:59,170
don't want to do an app dot J.S. is call listen.

80
00:05:59,170 --> 00:06:01,740
So we'll remove it from there.

81
00:06:01,840 --> 00:06:10,460
We'll go ahead and export the application so module right here dot exports and we're going to set that

82
00:06:10,490 --> 00:06:16,820
equal to app now since we're no longer calling listen we're no longer using the port and we could go

83
00:06:16,820 --> 00:06:18,790
ahead and remove that as well.

84
00:06:18,830 --> 00:06:22,010
You could leave it in place but it's a bit unnecessary.

85
00:06:22,010 --> 00:06:26,630
So this file sets up the Express application and exports the app.

86
00:06:26,660 --> 00:06:32,930
Now we still want index dot J asked to work as expected but we don't want to have the same code in multiple

87
00:06:32,930 --> 00:06:33,500
places.

88
00:06:33,500 --> 00:06:36,220
These files are basically duplicates.

89
00:06:36,350 --> 00:06:37,940
So what are we going to do.

90
00:06:37,940 --> 00:06:44,660
Oh we're going to do is start this file off up top by loading in the Express application from app dot

91
00:06:44,690 --> 00:06:52,910
J S so right here const app equals I'm going to require the file we just created that is dot forward

92
00:06:52,910 --> 00:06:58,070
slash app and now we can remove almost everything in this file.

93
00:06:58,070 --> 00:07:01,310
We can remove all of our required calls.

94
00:07:01,310 --> 00:07:07,610
We can remove the line where we create the Express application and where we can figure it all we're

95
00:07:07,610 --> 00:07:08,650
going to leave in place.

96
00:07:08,660 --> 00:07:12,590
Are these three things we load in the Express app.

97
00:07:12,770 --> 00:07:15,870
We define our port and then we call listen.

98
00:07:16,400 --> 00:07:20,410
So when I want to start these server up in development mode what do I do.

99
00:07:20,480 --> 00:07:27,710
I still just run index dot J ust it takes care of everything when I want to load in the Express application

100
00:07:27,920 --> 00:07:29,990
strictly for testing purposes.

101
00:07:30,050 --> 00:07:35,280
I just grab it from app dot J S and this is exactly what we wanted to do.

102
00:07:35,330 --> 00:07:38,140
So we haven't changed the functionality at all.

103
00:07:38,150 --> 00:07:45,080
We've just done a little restructuring allowing us to access that express application without necessarily

104
00:07:45,080 --> 00:07:46,410
calling app dot.

105
00:07:46,410 --> 00:07:53,690
Listen although when we need to write here we still do now over in the test file we can grab the app

106
00:07:53,720 --> 00:08:02,300
so we can use it with super test cost app equals I'm gonna use require with the following path dot dot

107
00:08:02,300 --> 00:08:10,370
to get out of the tests directory forward slash source forward slash app the file that we just defined.

108
00:08:10,460 --> 00:08:17,930
Now with this in place will actually be able to make requests to our Express application from our test

109
00:08:17,990 --> 00:08:21,800
cases and that is exactly what we're about to do right here.

110
00:08:21,800 --> 00:08:27,130
I'm going to create the test case by calling that test function and providing a name for it.

111
00:08:27,290 --> 00:08:34,040
I'll use something like should sign up a new user and this test case as the name suggests is going to

112
00:08:34,040 --> 00:08:39,290
attempt to sign up a new user using post forward slash users.

113
00:08:39,290 --> 00:08:45,110
Now I am going to mark this function as an async function as I'll be taking advantage of a weight down

114
00:08:45,110 --> 00:08:46,020
below.

115
00:08:46,190 --> 00:08:52,820
Now we're actually going to start by using a wait with super test as a super test supports promises

116
00:08:53,090 --> 00:08:53,830
using a wait.

117
00:08:53,840 --> 00:09:01,190
We'll make sure that the request actually finishes before jest figures out if it's a success or a failure.

118
00:09:01,190 --> 00:09:08,180
Now how exactly do we use super test well we call the function we're provided request and we pass to

119
00:09:08,180 --> 00:09:10,580
it our Express application.

120
00:09:10,670 --> 00:09:13,640
So I'm going to call it passing an app.

121
00:09:13,640 --> 00:09:18,170
Now the next thing we do is specify exactly what we're trying to request.

122
00:09:18,200 --> 00:09:25,790
We have to provide the TTP method and the you are real and we do that by using a series of methods very

123
00:09:25,790 --> 00:09:30,760
similar to those we used when actually creating the Express application.

124
00:09:30,800 --> 00:09:37,240
So right here we could access get patch delete or post to make one of those requests.

125
00:09:37,310 --> 00:09:42,920
In this case I want to use post but we'll explore the others later and we provide to it.

126
00:09:42,980 --> 00:09:49,670
You are real now it's not the complete you are all just the path so forward slash users is exactly what

127
00:09:49,670 --> 00:09:53,690
we had configured when defining our Express application.

128
00:09:53,810 --> 00:09:57,980
Now from here we want to figure out how we can send data across the wire.

129
00:09:57,980 --> 00:10:04,760
I want to provide real valid data and I want to expect that the user gets created and I get my 2 0 1

130
00:10:04,820 --> 00:10:06,400
status code back.

131
00:10:06,440 --> 00:10:13,760
To do that we changed on a method send send allows us to provide an object containing our data.

132
00:10:13,760 --> 00:10:15,030
So on here we'll set up.

133
00:10:15,040 --> 00:10:21,080
Name Email and password first up let's configure the name.

134
00:10:21,250 --> 00:10:23,760
I'll go ahead and set it equal to Andrew.

135
00:10:24,010 --> 00:10:27,120
Then down below that we'll go ahead and configure the e-mail.

136
00:10:27,130 --> 00:10:28,510
Andrew an example.

137
00:10:28,510 --> 00:10:29,860
Dot com.

138
00:10:29,860 --> 00:10:32,050
And finally we'll set up a password.

139
00:10:32,050 --> 00:10:35,340
And in this case we want all of the data to be valid.

140
00:10:35,350 --> 00:10:40,120
We'll set up other test cases later with invalid data to make sure it fails.

141
00:10:40,120 --> 00:10:42,470
For now though we want this one to pass.

142
00:10:42,490 --> 00:10:46,330
So I'll use something like my password 7 7 7.

143
00:10:46,330 --> 00:10:48,940
With an exclamation mark on the end.

144
00:10:48,940 --> 00:10:51,480
Now from here we haven't made any assertions.

145
00:10:51,490 --> 00:10:54,260
We've just sent things off to the endpoint.

146
00:10:54,310 --> 00:11:00,400
We'll learn how to assert things about the response body a bit later to start let's just assert something

147
00:11:00,400 --> 00:11:04,360
about the H TTP status code to do that.

148
00:11:04,360 --> 00:11:11,230
We add on a another method call to super test that is expect we past to expect a number.

149
00:11:11,230 --> 00:11:13,750
And in this case we're expecting a 2 0 1.

150
00:11:13,750 --> 00:11:15,090
If things go well.

151
00:11:15,100 --> 00:11:20,440
Now at this point I want to take things nice and slow because there's a specific problem with our setup

152
00:11:20,470 --> 00:11:22,780
that won't be obvious at first.

153
00:11:22,780 --> 00:11:25,920
So at first all we're going to do is save the file.

154
00:11:25,960 --> 00:11:32,470
It's going to rerun all of our tests and we're going to see two passing test suites with seven passing

155
00:11:32,470 --> 00:11:33,380
tests.

156
00:11:33,430 --> 00:11:34,930
So this is fantastic.

157
00:11:34,960 --> 00:11:42,550
It means that obviously our math tests are still working but it also means that our setup is correct.

158
00:11:42,550 --> 00:11:49,360
We were able to load in just the Express application pass it to Super Test and make a request with this

159
00:11:49,360 --> 00:11:54,080
data to the following endpoint and we got a 2 0 1 back.

160
00:11:54,190 --> 00:11:58,200
Now we actually have data in that test database as well.

161
00:11:58,240 --> 00:12:05,440
So if I had over to my Mongo D.B. compass application we can switch between the production database

162
00:12:05,470 --> 00:12:07,690
and the local host database.

163
00:12:07,690 --> 00:12:10,700
We'll be connecting to that local host database.

164
00:12:10,810 --> 00:12:17,790
And now we have a task manager API test database alongside of our original one.

165
00:12:17,800 --> 00:12:21,310
So this is the database that contains our test data.

166
00:12:21,400 --> 00:12:27,340
And if I crack that open we have the one user created by our test cases.

167
00:12:27,340 --> 00:12:28,980
Now what's the problem.

168
00:12:28,990 --> 00:12:36,460
The problem is that if I rerun the test suite by either saving the file or just using a from just down

169
00:12:36,460 --> 00:12:44,560
below this test case is gonna fail and it's failing because there's already a user with that email in

170
00:12:44,590 --> 00:12:47,800
the database and this is gonna be a problem for us.

171
00:12:48,280 --> 00:12:53,830
So when I mentioned earlier that we want to have separate databases for development and test this is

172
00:12:53,830 --> 00:12:59,590
what I'm starting to talk about when our test case is run we need to make sure they're starting from

173
00:12:59,590 --> 00:13:01,670
a nice clean slate.

174
00:13:01,720 --> 00:13:08,590
So I actually want to wipe all of the data in the test database before the test cases execute to make

175
00:13:08,590 --> 00:13:11,410
sure they can run consistently over time.

176
00:13:11,410 --> 00:13:17,230
So it's up to us to set up a little bit of code to tell jest that it should be wiping data and setting

177
00:13:17,230 --> 00:13:21,840
up specific data before the test cases run our test cases.

178
00:13:21,840 --> 00:13:28,210
It shouldn't work once and then fail the second time because of what the previous run of the test case

179
00:13:28,240 --> 00:13:32,880
did to the database that's going to create a test suite that's useless.

180
00:13:33,040 --> 00:13:39,490
Every time our test suite runs the environment should be recreated and in our case that's as simple

181
00:13:39,520 --> 00:13:42,360
as deleting everything in the database.

182
00:13:42,400 --> 00:13:48,670
And as mentioned we'll also be setting up data in the database to start with later so we can test things

183
00:13:48,670 --> 00:13:53,170
like the ability to log in or update a profile.

184
00:13:53,170 --> 00:13:55,660
So let's go ahead and see what all of this is going to look like.

185
00:13:55,670 --> 00:14:00,630
It'll make a lot more sense once we actually have it in place and that's coming up in the next lesson.

186
00:14:00,640 --> 00:14:03,280
For now though we have a great start.

187
00:14:03,310 --> 00:14:10,060
We do have a test case that is successfully able to interact with our Express application and make an

188
00:14:10,060 --> 00:14:12,530
assertion about the response.

189
00:14:12,670 --> 00:14:17,080
We'll talk about those lifecycle functions that just provides in the next lesson.

190
00:14:17,080 --> 00:14:18,340
So let's jump right in.