End-To-End Testing
Zlatko Duric
What are we talking about
- About End-To-End - What and why
- Difference between the tests
- How does it work with Angular
- What are the options
Sorts of testing
...according to me.
Today's topic
Unit test
- component functionality
- component API
Integration test
- all components integrate well together
System test
- the whole system works - the database, the backend(s), frontend(s)
End-To-End Testing
...according to Internet.
"SMOKE TESTING , also known as “Build Verification Testing”, is a type of software testing that comprises of a non-exhaustive set of tests that aim at ensuring that the most important functions work."
http://softwaretestingfundamentals.com/smoke-testing/
"SYSTEM TESTING of software or hardware is testing conducted on a complete, integrated system to evaluate the system's compliance with its specified requirements . System testing falls within the scope of black-box testing , and as such, should require no knowledge of the inner design of the code or logic. "
https://en.wikipedia.org/wiki/System_testing
End-To-End Testing
...accoring to, again, Internet.
" End-to-end testing is a methodology used to test whether the flow of an application is performing as designed from start to finish. The purpose of carrying out end-to-end tests is to identify system dependencies and to ensure that the right information is passed between various system components and systems ."
https://www.techopedia.com/definition/7035/end-to-end-test
Angular End-To-End Testing
- Integration or system testing - no big difference
- Build-specific environment.ts can mock or not the backend(s)
Good reasons for E2E
...in my humble opinion.
Automation
- automated CI/CD pipeline
- confidently deploy to production and go to sleep
Verification of contracts
- Microservices and small independant teams can live through contracts
- make sure you don't take the blame ;)
Integration of all your components
- making sure that your components work well together
- user flow is functioning properly
Ungood reasons for E2E
...if I understand it correctly.
Code quality or other code-related matters
- can't go into implementation details here => don't even think in Angular terms here!
Feature-completeness
- E2E is not exhaustive test => don't test every checkbox!
Every top-level route
- make sure all the lazy modules load
Main feature modules
... essentially the same as above, including submodules and child-routes
What to endtoendtest
...back to my humble opinion.
Reads and writes
- from the backend
Login and logout
- if you really feel you must
After every merge to main branch
- be it development or anything else / Fail fast and noisily.
Nightly
- especially for bigger teams and/or systems
When to endtoendtest
- more of the humbleness.
On deployments
- as part of a "Computer, deploy torpedoes", manual or CI
On Demand
- when you think you need it
When to endtoendtest
- according to my humble PhotoshMS Paint skills!
https://xkcd.com/303/
Thanks, Randalph
When on Twitter
- to have an excuse!
How to test
ng e2eI know I'm not funny but I couldn't resist.
Protractor
- ...
Built by Google
- to test Angular with
Default option
- has cool angular "selectors"
Selenium wrapper
- Java Shops love it (Selenium, not Protractor)
Mechanics
- ...
Locators (selectors)
- what to look for on the page
- promise-based
Actions
- what we do with the page (click, type in the page, scroll)
- P.S. not Angular specific actions!
- P.P.S. nor ngrx!
Assertions
- What should happen.
Locators
How
- Selenium and protractor locators (find by id, css, name, link, css, XPath, tagName etc)
Why
- help you find the desired element and manipulate it
Page Object
- extract all locators and actions to a Page object (*.po.ts)
Locators
<header><a routerLink="home">Home</a></header>
<input type="text" name="search" [ngModel]="searchTerm">
<main>
<table>
<thead>
<tr>
<th></th>
<th>Username</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users; let i = index;">
<td><input type="checkbox" [id]="'row- + i'"></td>
<td>{{ user.username }}</th>
<td>{{ user.email }}</th>
</tr>
</tbody>
</table>
</main>
<button (click)="previous()">Previous</button>
<button (click)="next()">Next</button>
<aside>
<div *ngIf="news">
<news-component></news-component>
</div>
</aside>
import { browser, by, element } from 'protractor';
export class UsersPage {
navigateTo() {
return browser.get('/users'); // Navigate
}
homeLink() {
return element(by.linkText('Home'); // Find routes
}
clickHomeLink() {
return element(by.linkText('Home').click(); // Click something
}
getUserRows() {
return element.all(by.css('tbody tr')); // .all() elements
}
selectRow() {
// all().first()
return element.all(by.css('input[type="checkbox"]')).first().click();
}
getSearchBox() {
return element(by.model('searchTerm'));
}
searchFor(text) {
return element(by.model('searchTerm')).sendKeys(text);
}
}
Actions and assertions
What is it
- simply do things you do on a web page
- create an action, assert the results
Test example
import { UsersPage } from './users.po';
describe('Users page', () => {
let page: UsersPage ;
beforeEach(() => {
page = new UsersPage ();
page.navigateTo();
});
it('should show users', () => {
expect(page.getUserRows().count()).toEqual(10);
});
// "async"
it('should filter table', () => {
page.searchFor('me')
.then(() => {
expect(page.getUserRows().count()).toEqual(5);
});
});
// Debug
it('should wait for me to make up my mind', () => {
browser.wait();
});
});
It did work, I swear!
Troubles
...that bothered me.
Windows
- fails and timeouts 20% of the time. No idea why.
- Have to have a backend to test with (not always easy (see "Windows" above))
Jenkins server
- You have to install all the things - including browsers
- No Edge/Safari ¯\_(ツ)_/¯
Protractor/Selenium
- learn all the APIs, error codes, standard issues
Options
DIY
That's it.
End-To-End Testing
By Zlatko Đurić
