- [Instructor] Let's write some functional tests
using an express app.
There are a few steps necessary to do this.
If you want to take a look at a reference
or just copy the file,
it can be found in the exercise files.
When you're ready, switch over to VS code.
We're going to be functionally testing reservations.
So in the Explorer, navigate to the Route folder.
Right click and select New file.
We'll be testing the reservations route,
so this will be named reservations.test.js.
We'll start off by requiring SuperTest
which we'll use for HTTP assertions.
So const request equals require SuperTest.
We'll create a placeholder for the app itself,
which will be wrapped with SuperTest in a before all.
So let app, and then a semi-colon.
We also want to silence Morgan, the HTTP requests logger,
so it doesn't clutter our test output with log messages.
So we use const mock Morgan is a jest function
which is an express middleware,
so req, res, and next that just executes next,
and a trailing semi-colon.
Now to set up the mock, before all, parentheses,
and then an arrow function expression
we'll just use jest.mock on Morgan
with the implementation of an arrow function
that executes an arrow function
that finally returns mock Morgan,
add a trailing semi-colon.
With that mock ready, we can assign app to request.
So app equals request,
which will take the express application
that we wish to test.
We just need to require app
in the relative parent directory.
So ../app, and add the semi-colons.
After all the tests have run, arrow function,
use jest to unmock Morgan to put things back to normal.
Add the semi-colons and save.
Great!
Now that we're all set up,
let's describe our test group for get.
So describe, get, and then an arrow function expression.
Now for the test spec,
it should return the reservation form,
then an async arrow function expression.
Here's where SuperTest comes in.
Set const response equals await app.get
the HTTP method that we're testing
on the route quote slash reservations.
SuperTest can also be used for assertions.
New line indent, then .expect,
Then for the first argument,
we're going to be looking at the header.
So content dash type, and then for the second
a regular expression to look for slash HTML
and then another slash.
We can also check for the HTTP status code,
which we can do with a shorthand .expect
and then the status code 200.
Add a trailing semi-colon.
The response has a lot of properties,
but we're just interested in one right now.
Let's use jest expect on response in the text property
and we're going to expect that to contain a new matcher,
the phrase, to make reservations,
please fill out the following form
and then trailing semi-colons and that's it.
Save the file.
Then open up a terminal.
We're going to run the tests,
but this time I want to show more detail.
Maximize the terminal screen and then type npm test space
dash dash space then dash dash verbose.
Press enter.
All of our tests executed and passed.
Instead of just a pass summary for each file,
there's a breakdown of the test groups
in the individual test timings.
The order of test output on your screen
may be slightly different than what I have on my screen,
and that's not a problem or a bug.
If we look at the routes reservations.test.js,
we can see that the get test took 392 milliseconds.
That sounds fast, but look at the other test timings.
Some of them are one millisecond.
Some of them are five milliseconds or two milliseconds.
Functional tests can be slow
because there's a lot more code being required and executed.
Let's unmaximize the terminal and terminate it.
Requiring the whole application can be very slow
and requires a lot of mocking when getting
into more complex operations.
One way to deal with it is within your test,
create a simple express app
with an absolute bare minimum setup necessary.
Then, add only the route you wish to test
to the application.
This technique better aligns with the goals
of code isolation and speeds up execution,
but it requires more test setup.
I feel it's worth it.
So this will be the code challenge for this chapter.
Finding texts on a static page is fairly easy,
but what about functionally testing forms submissions?