Angular CLI comes with E2E testing out of the box. 

This guide displays how to quickly get a new Angular CLI project running, some of the important files for E2E, basic E2E language and syntax and some simple tests that can be expanded upon.

Prerequisites

• NodeJs

• Angular CLI

This project was built using Angular CLI: 7.2.3 and Node: 11.8.0.

1. Open command prompt and type ng --version to verify.

You should get something like this.

2. Create a new Angular app by typing ng new endtoend-app.

3. Change directory to the new app cd .\endtoend-app\.

Now typing ng serve will run the app.

4. Stop the app and look at the folder structure, it should look like this.

The app has an app.e2e-spec.ts file and an app.po.ts file.

The app has an app.e2e-spec.ts file describes the tests to be ran and should look something like this.

The app has an app.po.ts file is used to create a page object that can be used to return and interact with individual elements on the page. It should look something like this.

5. In the command prompt type ng e2e to run tests, the default tests should pass provided the title in the <h1> element hasn’t been changed.

It should look something like this. (This example has 3 extra tests, by default the ‘should display welcome message’ test is the only test available)

Now that E2E is running it’s time to experiment with it.

Full project is available here (https://github.com/ericcolganwork/endtoend-app)

I have added some simple features to be tested.

getUsers() Should now display a list of users and change the user status message

deleteUsers() Should delete the list of users and change the user status message

Here are the tests using the spec and page object.

If we look at the ‘should display We have users message after clicking get users and show users’ test in more detail here.

page.navigateTo(); //using the AppPage page object to navigate to the appropriate page.

var userList = page.getUserList(); //the page object getUserList returns a element for each <li> in the unordered list on the page using the element.all(by.css('ul li')) to find the required elements by the css tags.

expect(userList.count()).toEqual(0); //verify that there are no users.

page.getUserButton().click(); //the page object getUserButton returns a button element using element(by.id('getUsers')); to get the element by id.

userList = page.getUserList(); // Get the user list elements again.

expect(userList.count()).toEqual(3); // Verify that there are 3 list elements

expect(userList.get(0).getText()).toEqual('Eric') //Verify the first list element text is ‘Eric’

The ‘should display No Users message after clicking delete users and delete users’ uses very similar methods to verify the users have been deleted. Full project is available here (https://github.com/ericcolganwork/endtoend-app)

At Dataworks we enable the perfect hybrid of configurable off the shelf toolsets and custom development to deliver innovative solutions to match your specific business process requirments. This ensures that we are the best at what we do.

If you would like to discuss how we can use our experience and expertise to deliver real benefits to your business please Contact Us today or call us on 051 878555.