With the Angular-CLI it is incredibly easy to create an application, however one thing that I have been struggling to find documentation on is e2e testing.
It seems the simplest way to begin exploring e2e testing is to start with John Papa’s Tour of Heroes repo. After recreating the application with the CLI it was time to do some basic tests, or so I thought.
As I started to create the tests I realized that I was getting into promise hell. I’m sure you’ve heard of callback hell, but this is worse, about three layers deep of promise then layers I started thinking that there must be a better way.
Recently I had the opportunity to get some assistance on a node project from Blake Embrey and in the process of the refactor of that node server he started showing me how to use async await. Admittedly I am not an expert but this sparked some ideas. Could I use this same methodology to help simplify my test stack? Turns out I could.
In order to use async await you will need to update your compilation target in your
I also added the protractor and selenium-webdriver types to my project. Note the specific version for selenium-webdriver. I ran into some issues when using newer versions and after some github-fu I found that this version works.
app.po.ts file is where you should be putting functionality that is shared across your e2e tests, at least that is how
I understood the initial scaffold. Because we want to not have to deal with promises you can add async to each of the
function blocks. After you do that you can add the await to the return and this will allow you to write code synchronously.
When starting to look into async await I found this article to be the most helpful.
This is actually where the biggest gotcha’s were. I was fighting for a long time to try and get async await to work
and it wasn’t until Blake suggested that I add async to the
it blocks themselves that everything started to come together.
I know these tests are far from perfect but I hope it helps provide a start for anyone looking to explore e2e testing and the angular cli.
If you want to see the full repo you can find it here if you have any questions or comments please feel free to open a PR or create an issue.