Now, that we have a quick understanding of
end-to-end tests and what role
end-to-end tests play in the overall strategy for testing of angular applications.
Also, a brief introduction to protractor.
Let's proceed with the next exercise where we could employ
protractor and design our end-to-end tests.
It is fortunate that angular CLI automatically
sets up everything that we need for conducting end-to-end tests,
as we will see when we proceed with the exercise.
So, it is a matter of implementing the various tests and
then carrying out the test using protractor in this exercise.
Going to our angular application in Visual Studio,
if you look at the package of our JSON file,
you will see that we already find
the angular CLI has set up everything that we need for carrying out the end-to-end tests.
So, as you scroll down,
you would see that protractor has already been installed on
our computer within the angular project.
Also, we notice that there is a separate folder here
called e2e which contains a few files
that have been set up already for carrying out end-to-end test.
Now, if you need to carry out extensive end-to-end tests,
then it is a good idea to create
a separate file for each set of end-to-end tests that you want to carry out.
Now, in this particular exercise,
I'm just illustrating to you how to carry out end-to-end tests.
So, I'm going to stick with what has already been set up by angular CLI.
We'll work with the files that we have available right there.
So, let's take a quick look at these two files here, the app.e2e-spec.ts,
and you'll see that some code has already been scaffolded out into this file by angular.
Also, this other file called app.po.ts,
this is nothing but a standard JavaScript class
that has been set up with a few methods here.
Now, what we're going to do is to add a few more methods to
this JavaScript class and also update some of these methods that are given here.
We'll set up our tests in the app.e2e-spec.ts file.
So, to proceed forward,
let's go to the app.
Po.ts file, and then within this file, let's update this.
So, here, you see that we have two methods that have been set up here already.
I'm going to update this methods to enable them to take a parameter here.
So, I will say, navigateTo with a link,
which is provided as a string,
and then I'm going to update this browser get to
use the link which is the parameter for this method.
So, what does this do?
So, as you can see,
we are making use of protractor syntax here.
So, this says return browser get link.
So, this particular call to this browser get method will enable
our application to browse to this particular link that is supplied as a parameter here.
So, before this update,
you saw that the link supplied here was slash,
which means that the root of our angular application.
Now, I have updated this to take a parameter here.
Similarly, the second method that you see is called the getParagraphText.
Now, this method is used to obtain the inner content of an HTML element here.
So, for this, also,
I will set up a parameter called selector,
which is a CSS selector that I will supply here.
So, you see that in here,
I'm going to change this to take the selector as the parameter.
Now, from the previous experience with the unit test,
you see what by and.css stand for.
This is the same thing that we are using here also.
This by method here being used is now imported from the protractor library here.
The element method is also imported from the protractor library.
So, this element method allows you to get access to an HTML element
by providing that selection for the HTML element as a parameter here.
So, you can say by css, byID,
and many other such methods available for the by class here.
Then, the getText method,
gets as we see the visible inner text of this particular element.
So, this is one way of retrieving information from
the particular HTML element within our browser window,
and then check to see if it matches a pattern that we are specifying here.
So, with this update to the app.po.ts,
let's move on to the app.e2e-spec.ts file.
So, within this file,
you'll notice that we are using the Jasmine syntax.
So, here, you see me using describe and then which says let page AppPage.
So, here, the page is where we are creating this new class called AppPage,
which we have declared in the app.po.ts file as a JavaScript class here.
Now, this is just a convenient way of setting up all the things in one location,
and then being able to make use of them in my test code itself.
So, here, I am declaring the page to refer to this AppPage,
and so that will enable me to access
the methods that I have constructed in that class here.
So, the first test that I'm going to do is to navigate to
the root of my angular application
and then check to see if there is a specific pattern in that.
You will notice that in my homepage,
you will have the string
called Ristorante Con Fusion
inside an H1 element in my page.
So, what I'm going to do is to navigate to the root of my HTML element.
Then, in there, I will go looking around for
the app route and then look for the H1 tag inside the app route.
Then, this should equal this particular string here.
So, I'm just going to copy
the Ristorante Con Fusion string there and then supply that as a parameter here.
So, I'm just updating the test to check for
exactly what we have within our updated angular application.
So, with this setup,
now I'm going to carry out my first test of my angular application.
So, let's save all the changes and then go back to our terminal.
Within the terminal, in my project folder,
at the prompt I will type ng e2e.
You will notice that this will start a browser.
In my case, it'll start a Chrome window and then carry out the test in that window.
So, let's carry out the first test.
You will see that when the test runs after compiling my angular application,
when the test runs,
then it will ensure that the test is successful.
You see that in the back,
my browser is opened by the ng e2e,
and then the test was carried out in that browser window.
It says that the test was successfully carried out here.
So, you notice that even in this case,
it needs to start the browser,
load in my angular application into the browser,
the entire angular application into the browser.
Then, carry out the test off my angular application.
At this point, make sure that your server,
the JSON server is up and running,
otherwise, your test will fail,
because when the test has been carried out,
it will try to access the JSON server also.
So, that is something that you need to ensure.
Carrying on with our tests.
In the second step,
we're going to add in a couple of more methods into this AppPage.
Class here. So, I would use a new method
called getElement and then taking in a parameter of a selector.
This method allows me to get access to the element,
which is selected by using the same by CSS selector.
So, I'm just going to copy this.
So, in this case, instead of just getting the text,
it will actually return the reference to the element itself,
and then so that you can add in additional ways
of accessing information inside that element as we require.
In this case, the get-text is used only to fetch the specific text.
We might use other methods on
this element to fetch additional information from that elements.
So, that's the reason why I am creating this method here.
Similarly, I will implement another method called get all elements.
Now, this also uses a parameter called selector just like before.
What the GetAll method does is to select
all the elements and then return them to the collar,
so that, for example,
if your page contains many h1 elements in
reference to all of them will be returned to my collar.
So, that there, I can then decide to make
a call to a specific one within this list of elements.
So, to do this,
we will use the same return but here,
instead of saying element selector,
let me just copy that and then we have another method called
element.all which allows us to
access all the elements that match this particular selector.
The first one will return the first element that matches that selector.
After these updates, we will now switch to our test file and add in a new test here.
So, here again, I am using the Jasmine syntax for adding in the new test here.
So, I will say it and then give a description for this test.
Will say It should navigate to about
us page by clicking on the link.
Now, if you look back at your Angular application,
you would notice that within your Angular application,
you have the navigation links at the top of the page.
So, what we're going to do in this test is to automatically
go and access one of those navigation links and click on them.
Now, of course, as you expect this is going to be done programmatically,
rather than by manually clicking on the link.
So, to do that,
what I'm going to do is to navigate to the root of my Angular application and then,
I'm going to access
the links in my navigation bar at the top.
By saying page, getAllElements and
then I'll get all the elements that have the a tag in there.
Now obviously, you will have many of those a tags in our page but the top four,
are the four links in
the navigation bar at the top of our page there in the header component.
So, getting access to those
a now note that I am using get all elements so I'm going to get a number of elements.
In this particular case,
it turns out to be about 16 different a tags that will wear in that page there.
So, I'm going go and select.
So, this is where I use this method called get and then I can specify
an index for the specific element that I want.
So, I have checked if you look at the header components template file,
you will notice that the very second a tag in
the header component's HTML page is referring to the about us link there.
So, that is what I am getting access to by saying get one.
Zero, of course, refers to the home link in
the header component where we created our toolbar at the top there.
So, I get access to the second one so this is the about link there.
Now, once you get hold of this link,
there is a method that protractor supports
on a element with a link there called the click.
So, this, as you see programmatically,
causes a click on that particular element in my browser window there.
So, programmatically, we are carrying out what you would normally carry out
manually by physically going to that link and clicking on it using your mouse.
Now, once we click on the link, obviously,
you're going to navigate to the About Us page.
Now, within the About Us page,
if you go looking at the template of the About Us page,
you will find that there is an h3 element which contains the name of that page.
Within that h3 element,
you will see a text called About space Us there.
So, that is what I am going to check now.
The reason I'm going to check that is to make sure that I have really navigated to
the About Us page by doing these steps in my Angular application.
So, this is where I will use the expect.
We have already seen the use of expect and expect page.
GetParagraphText and I'm going to get the paragraph text from
h3 and this I expect toBe.
Notice the use of the Jasmine syntax here and this should be About Us.
So, introducing this second test into our test file here,
let's save the changes that we have made and then go and execute this test.
Going to the terminal.
Again, let me execute the test by saying ng e2e
and you will notice that this will again go through the same set of steps,
and then carry out both the tests that now I have in the test file.
It is interesting to watch the test being carried out in the browser.
So, you see that we are on the Homepage,
you now navigate to the About page and then success.
So, we have successfully navigated from
the Homepage to the About page and then we have verified that you have
navigated to the About page by carrying out
the specific test where we checked to make sure that
the About Us is in an h3 tag inside the About Us page there.
So, this is one more end-to-end test that we can carry out,
and you actually saw the test being carried out right in front
of your eyes without your manual intervention.
I hope you're enjoying carrying out these end-to-end tests.
Let's get a bit more ambitious.
Now, what we're going to do is to navigate to a particular dish,
and then try to insert a comment in that dish.
Now, this is where I'm going to take the help of Protractor support,
and you will see me using some more methods from
Protractor in order to navigate to the dish page,
we will navigate to the very first dish in our menu by using
the link to the dish detail page with the parameter of that particular dish,
the ID of the particular dish.
Then, we will identify the input elements of the form,
and then we will automatically type in information into
those input elements and then try to submit the form and see what happens.
So, to carry out this test, again,
go in and using the Jasmine syntax,
I will introduce an it here and then I will identify what this test is trying to do.
I would say, "It should enter a new comment for the first
dish" and arrow function
and you see that inside this arrow function,
we're going to do our first page navigateTo,
we will navigate to the dishdetail zero.
So, this is the very first dish in our menu.
Now, once we navigate to the dishdetail page, we will say,
"let newAuthor is equal to page getElement."
So, we're going to find that element which is
input and type text here,
so this will help me to identify that input element where the author name is
typed in the form that we have created in our dishdetail page.
If you are curious,
go and take a look at that form,
and then you will see that there is indeed
that input element in that dishdetail page there.
So, accessing that, I'm going to type the author name
into that input field there.
So, this is where the sendKeys' method that is supported on our element comes to our aid,
the sendKeys' method supported by Protractor.
So here, I'm going to type in the author's name as test author.
So, at the end of these two steps,
the test author should be typed into the input element in my form.
Now, in addition, I also need to type in the comment for that form.
We also can set up the rating value,
but I'm not going to do that in this particular test,
I'm just going to type in the comment value using a similar approach.
So, I'll say, "let newComment",
again, will get page,
getElement, and then this is where I look for
the textarea and newComment,
SendKeys and type in "Test Comment".
So, this will fill in the words Test Comment into the text area
which contains the comments that
the author is supposed to submit for that particular dish.
After this, we will find the SubmitButton.
So to do that, we'll say
page.getElement button type submit,
and then once we get hold of the button we just say, newSubmitButton.click.
So, once we click on the button,
the comment will resubmit it.
Now, I'm going to use another method that Protractor supports.
I am going to pause the test at that point.
This will enable me to pass the test and then carry out the test or the plant,
so this says, browser is undefined,
so I need to go back up here and then import
browser from Protractor library there,
and then you see that the red squiggly line has disappeared,
so my test should all be set up correctly there.
So, let me save the changes,
we'll go and execute this third test also,
together with the remaining two tests that we have already input.
Going to the browser, let me again execute the end-to-end test,
when the browser opens, there we go,
the first test has been carried out and that should succeed,
the second test has been carried out and the third test where we navigated dish detail,
and you see that the test comment was submitted correctly by our test.
So, with this, we complete this exercise.
In this exercise, you have carried out three different tests using the support from
Protractor and found that our application passes all these three end-to-end tests.
This is a good time for you to save the changes to
your Git repository using the message end-to-end test.