Video Transcript

NOTE: This video was originally filmed using Ionic 3, so the folder structure looks a little different, but the same concepts still apply

In the last lesson, we looked at how to create a really simple unit test. In this lesson, we are going to look at how to create a really simple end to end test.

0:07 We have talked a little bit about the difference between unit tests and end to end tests in previous lessons but to put it simply, a unit test is code that tests our code. In the last lesson, we took the MyItems provider, we created a new instance of that in the code and we run some tests on it. With an end to end test, we are not testing the code but we are testing the application itself through the browser. The test allows us to interact with the browser and test that certain things are happening.

0:40 To do this test I have the application running - I have run ionic serve. If we jump over into the other desktop you can see that I have the app running on screen now. It is just a simple home page that we have got here. All we are going to do in this test is check that when we go to the default page for the application that there is a title that says "home".

1:06 If we open up our app.e2e-spec.ts file, this is what we have so far for our test. It looks pretty similar to the unit test. We have a describe block here to set up our test. Then we have our beforeEach block which is arranging the test for us. In this case, we are setting up a new instance of the appPage object and that is just something that is going to help us run the test. I talked a little bit about what page objects are used for in a previous lesson but the basic idea is that when we are running an e2e test we are going to be grabbing specific elements by CSS selectors. By creating page object they provide little helper functions so that we can just say 'get the input field' or 'get the login button' without having to worry about the specific CSS that we need to grab all the time. All we are doing with the appPage right now is calling the browseToPage method.