Angular End to End Testing (inkl. Video)

=> Please follow us on Twitter & Medium for more!

Sponsored by letsboot.com

What will we do:

1. Compare Unit/Component with E2E Testing
2. Create or use a @angular/cli based project
3. Adapt the e2e page object to match our app
4. Write e2e tests that walk through a process
5. Run the tests

Check out our Angular in-house trainings or a public Angular courses.
Try out fossilo.com, our angular project to archive complete websites.

Video Version:

1. Difference Unit/Component vs. End 2 end Testing:

Unit/Component:
(Angular 4 TDD with gitlab-ci Component/Unit Testing)

• Test a single Component, Service, Pipe etc.
• Test a single specific behaviour in a controlled environment
• Mock everything you need to test this functionality
• Use code coverage analysis to make sure everything is covered
• (Usually) Improves code structure and quality
• Test edge cases on the most detailed level
• Know if a change breaks a specific behaviour
• Does not test if the whole application or a process works in real life

End to end Testing

• Test complete processes “End 2 End”
• Test in real environments with the whole application
• Test real live situations
• Know if most important features work with the complete application
• Focussed on the overall functionality and not the specific code structure
• Does not test Edge cases
• Does not necessarily improve code quality

Conclusion: You need both e2e and unit/component testing!
(We are happy for any input to improve our content.)

2. Mini App example

I took this mini-app as an example.

ng new letslearn-ci

Example - Code for app.component.html/ts:

We have a points variable, a plus1 button, a reset button and a title. If you click the plus1 button, the points are increased, if then you click reset, the points go back to 0.

3. Prepare e2e Page Object to Access the Elements

With @angular/cli, you get a e2e folder and structure that suggests to create a page object which helps you to access the elements. The page object for the default page is found in ./e2e/app.po.ts.

What: Page Object: A class with functions that return elements like Buttons, Texts or whatever you need for the test.

Why: If you change your page structure, you only have to change the Page Object, but the Tests can stay the same.

4. Write e2e tests that walk through a process

Now we can write our e2e tests that use those elements to interact with the page and test its result.

Tests should speak for themselves, meaning that you should be able to read them from top down as if it was a story (with some imagination).

5. Run the tests

ng e2e

6. What’s Next: Let’s integrate it in continuous integration with gitlab-ci.

We’ll cover this in a separate article.

Credits:

• How to use E2E with PhantomJS. by Konrad Cerny

=> Please follow on Twitter & Medium for more!