In this lesson you're going to continue to learn how to test your know J.S. applications.
Now in the last lesson we got just configured in our application and we created a couple of test cases
even though they were in testing anything real in this lesson we'll actually create test cases that
verify a given function is working as expected.
Now for the moment we're going to do that with new functions will create.
We want to work with simpler functions at first as we explore these testing principles then we'll move
on to actually testing the stuff that already exists in the task manager project.
Well let's get started by creating a brand new file and this file is going to live over in the source
directory.
So the source files that make up our applications code still live over here while the test cases live
in the tests directory.
Now we're going to create a temporary file for this example called a math dot J S and let's go ahead
and say that this contains some functions for common math based operations we find ourselves performing
throughout our application.
And let's say one of those is something like calculating the tip on a given bill at a restaurant.
So if my bill was 50 dollars and I want to leave a 20 percent tip what exactly would that be.
Let's start by creating the function.
And this would be the same regardless of whether or not we were testing the code.
So right here we'll create a constant I'll call it something like calculate tip.
This will indeed be a function and I'll just set it up as an arrow function.
Now we are going to need two arguments.
We're going to want the total and the tip percent.
You're trying to leave.
That's the information we need in order to run the calculation and down below we can start to perform
it.
The first thing I'm going to do is calculate the tip that should be left.
That would be the total.
Let's say it's something like ten for ten dollars multiplied by the ten percent as a decimal.
So if I wanted to tip 30 percent I would pass in point three.
Right here.
Let's go ahead and add that into the mix.
And now tip is going to store the tip amount.
So if it was a ten dollar total and a 30 percent tip we would have three stored as the tip Variable
value.
Now down below we can go ahead and continue on.
I'm going to return the total plus the tip to let the user know exactly how much money they should leave.
Now with this in place we want to export this function like we would do for anything else we're creating
right here.
We'll use module Don exports to export an object and that's because we'll end up exporting multiple
functions from this file throughout the video.
Right here though let's start with calculate tip as the only one we're exporting.
Now if we were going to use this in the task manager app I would simply loaded into one of the other
files in the source folder and call it like we've done plenty of times before with other files and other
functions.
In this case what we're going to do is write a test case that verifies this function is running the
calculations correctly.
So we're actually going to load that function in to our test suite file and we'll be calling it in our
test cases making sure the value we get back is what we were expecting.
So right here let's go ahead and start by loading it in concert.
Math equals require.
We're going to use dot dot to get out of the test directory then forward slash source forward slash
math to grab the exports from the file we just created.
Now we know we get back an object.
That's what we're storing right here.
We can dish structure that object to grab the individual functions as variables so I can call this one
calculate tip to match up with the calculate tip export we've put on the object down below.
Now this is a function we can actually call from inside of a test case to verify it's working as expected.
Let's go ahead and create that test case by deleting the ones we had already and calling test for a
third time right here.
We'll be passing in this string.
Our test case name followed by the function the code to run that make sure calculate tip is returning
the expected results given a set of input.
Well let's get started by picking a name for our test case should calculate total with a tip.
And down below the code to run.
Now in this case the goal is to test this function which means that we want to call the function and
make an assertion about the value we get back.
We want to assert that the value we get back equals the correct value so right here we would do this
using the following const I could create a const like total.
This will be the return value from calling calculate temp and we'll pass in some numbers we can pick
whatever we'd like.
Let's go ahead and say that the bill is ten dollars and we want to tip 30 percent.
Now if things go well I would expect total to equal 13.
That is the bill plus the tip if it's not 13 then something has gone wrong.
And the calculate tip function is not working as expected.
So right here all we need to do is throw an error when total is not equal to 13.
So if the total is not equal to the number 13.
That is a problem for us and we're going to throw a new error and we're going to provide a message as
to why the test failed.
Total tip should be 13 and then I could say something like got followed by the value I actually got
I could go ahead and could continue that on or use the yes 6 template string syntax to add that into
the string.
So right here once again if the total is 13 this code won't run and no error will be thrown.
So the test will be considered a success if the total is not 13.
This code will run.
Letting them know that something has gone wrong.
Now we can save math test dot J S and rerun the test suite down below.
I'll use NPM and test once again and to get things re running it should find my single test case and
right here it is indeed passing should calculate total with Tip took three milliseconds to run.
I can see that everything is passing as expected.
Now what if calculate tip was indeed broken.
What exactly would that look like.
Well over here let's go ahead and say that we messed something up.
Let's say that we accidentally add a another value on adding the total on twice as a mistake and then
I save the program not realizing that I've made a mistake down below.
The good news is that our test case would catch this error and we would see a failure letting us know
that something needs to be addressed down below we have our tests.
We have just won and it's failing and up above we can see exactly what went wrong right here should
calculate total with Tip total tip should be 13.
Got twenty three and this would give me great information as to what's going wrong.
I could then dive into the code see exactly where things went wrong.
Remove the incorrect code and bring things back to a nice working state.
Now we could go ahead and rerun the test suite just to make sure our test case is passing once again.
And if it is we'll have confidence knowing that our code is working as expected and is correctly calculating
the tip.
Now with this in place I want to head back over to math test Jay s and talk about a slightly different
way we can get this done.
The part of the test case that I have highlighted so right here we are manually setting up an if statement
comparing values and if we don't get what we wanted we throw an error saying something like total tip
should be 13 but we got some other value now in this case it only takes three lines of code.
But there are other more complex assertions we'll be performing later on.
For example expecting that I give an object contains a set of properties with specific values so really
quickly we're going to end up starting to write a ton of code in our test cases to do things.
We're gonna be doing over and over again.
The good news is that just comes with an assertion library a set of functions and methods we can use
to assert things about values for example to assert that a given value equals a another value or to
assert that an array has four items inside of it.
So let's go ahead and see how we can use the expect library provided by Gest to replace the code right
here.
I'm actually going to comment that code out though I will leave it in place and we'll replace it with
a single line right here on line 5.
Now you can explore the documentation for what we're about to do over in the browser.
I'm going to close down the mockup tab and from just J asked what I owe we'll head over to the documentation
in the sidebar.
We're gonna scroll all the way to the bottom and under API reference we have.
Expect this is what we're trying to use now before we dive into the docs.
Let's go ahead and see an example of what exactly it's going to allow us to do right here just and provides
us with a another function similar to test that we can access in our test cases.
This is expect we call it as a function and we provide to it the value we're expecting something about
in this case we are expecting something about total so I'll pass that in right here.
Now the expect library ships with a dozen or so actually more like 50 different assertions we can perform
one of the most common is to be which checks for equality we pass in the value we're hoping for which
is 13.
So if we read this out like an English sentence it would be expect the value stored in the total variable
to be the number 13.
Now if the total variable does equal thirteen this code is not gonna throw an error and your test case
will be considered a success which is good.
Now if the total does not equal 13 this code will throw an error behind the scenes meaning the test
case will fail.
And that's good too.
It's going to alert you that something's not quite right and you'll be able to adjust.
So right here let's go ahead and see what happens when I rerun the test suite down below.
I run it.
It runs through our one test case and it still passes which is excellent.
Now let's go ahead and mess it up so it fails and see what we get.
So right here what I'm gonna do is just accidentally add the tip on again.
I will save math dot J S and rerun the test suite this time around it should indeed be failing right
here.
We do have one failing test case and if I scroll up what do we get.
I get the following should calculate total with tip is a failure down below I can see what I was expecting
I was expecting 13 and what I actually got which was 16 so expect provides this nice little output just
based off of the function calls we put in place.
We don't have to do anything ourselves to manually generate useful messages which is a good thing we
can keep our test cases nice and simple while still getting useful output.
Now let's go ahead and remove the mistake that we had just created.
I'm gonna save math dot J.S. and we'll head back over here.
So we took three lines of code and turned it into one.
But the good news is that later on when we would have had to write a dozen lines of code for a given
assertion we'll still be able to replace that with a single call to expect.
So it's a super useful part of the just test suite.
Now if we had over there we can learn how to navigate the docs quickly so you can use other assertions
as you create your projects down below.
We have different ways we can work with expect.
Right here we can call it with a value which is what we just did.
And then down below if we scroll to the methods that start with DOT we can see all of the different
assertions that we have available to us.
And there are quite a few.
For example I can check using to be null if a given value is null.
I can check if a number is greater than or less than some other number.
I have all sorts of assertions for that I can check the length of something I can check if objects contain
specific properties.
So there are a lot of useful features available to us some of which we'll explore throughout this section.
But the most basic is to use to be to check that a given value equals some other value.
Now with our test case in place we could refactor calculate tip we could change how the function is
written without changing its behavior and our test case will make sure we haven't broken anything.
So let's say we want to write this in a way that's a bit cleaner.
Instead of creating a variable and then returning the calculation I'm actually going to take advantage
of the arrow function shorthand syntax so I'll be removing the curly braces for the Arrow function and
everything inside and right here I'll implicitly return the following value.
We're gonna take the total we're going to add to it the total times the tip.
Percent now from a functional standpoint this is exactly what we had before.
All we've done is we've refactoring the function itself now without a test case.
You can't be sure that you haven't broken anything but with test cases in place we're gonna be able
to rerun our test suite and confirm that the old version of the function and the new version of the
function are functionally equivalent.
So right here we have that one test case verifying that this is so.
So already we're getting a bit of flexibility allowing us to alter how the function works behind the
scenes and then making sure based off of the test case results that we haven't broken anything.
Now let's go ahead and change the function adding one more feature we'll create one more test case then
it will be up to you to test a couple of other functions.
So right here over in math dot J asks what I'm going to do is add on a default tip percent so if you
don't provide the percentage you want a tip we'll go ahead and default it to something like point two
for 20 percent or point three for 30 percent.
The choice is yours.
I'll go ahead and pick a value of point to five as my default tip value.
So once again if you provide the tip will still go ahead and use that.
But if you don't will fall back to the default.
Now our one test case is indeed still going to work.
We could always run it to prove that what we're gonna do now though is add a second test case to make
sure that when we don't provide a tip percent the default value is correctly used.
So right here that's going to mean a another call to test.
I'll add a second call to test right here.
I'll pick a name for this one should calculate total with default tip.
Then I'll set up the function.
The actual test case code and I'm still going to create something called Total or something similar
so I can call calculate tip and store the value I get back.
Now for this particular test case the whole purpose is to make sure the default value works.
So I'm only going to provide the bill total.
I'll provide 10.
No down below we can use expect to expect something about the total variable in this case.
I'll be using to be to expect that the total is equal to twelve point five so twelve dollars and fifty
cents a ten dollar total with a twenty five percent tip.
Now right here we can go ahead and run our test suite for a another time and we should see two passing
test cases right here.
That is exactly what we have.
We are able to calculate the tip with a custom tip amount or with the default tip amount.
And now our two test cases are going to verify that both of those paths work for this function.
So in this video what did we do.
We created a function and we actually wrote some test cases for it.
We also explored how we can use the expected assertion library provided by Gest to allow us to assert
that one value equals a another without having to write a bunch of custom code on our own.
Now in the next lesson it's gonna be up to you as a challenge to write a couple of test cases for some
other functions we'll be working with then we'll actually move on to testing more advanced things like
our Express application.
First up is the challenge though so let's jump right in to the next lesson.