Zone.js and its practical use for end to end testing react single page applications using protractor selenium

1. Using Zone.js
@opichals
HPE Service Virtualization
hpsv.cz

2. What is this about
2
– zones
– zone.js
– examples
– hands on
– practical use

3. Heard of zones?
3
anyone?

4. Used zones?
4
somebody...

5. What is a zone
5
Execution context
Something like a Thread-local storage like feature in JavaScript

6. History
6
– In the web world they came from the Dart language
– zone.js is a port of the Dart approach to JavaScript
– Used in Angular 2

7. Example
zone.fork().run(function () {
zone.inTheZone = true;
setTimeout(function () {
console.log('in the zone: ' + !!zone.inTheZone);
}, 0);
});
console.log('in the zone: ' + !!zone.inTheZone);
7

8. zone.fork().run(function () {
stacks.push(getStack())
setTimeout(function () {
stacks.push(getStack())
stacks.forEach(console.log)
}, 0);
});
Long Stack Trace Zone Example
8

9. Hands on
9

10. Hands on - Recap
10
Frontend Integration and End to End Testing
– Long Stack Trace Zone
– WTF Zone
– Timing Zone

11. How does it work
11
It wraps every async browser API with a zone.wrap
setTimeout, setInterval, XHR, Promise, MutationObserver

12. Real World Use
12
Frontend Integration and End to End Testing
– React application
– Protractor
– Tracks ng-1.x digest
– Real browsers
– Selenium

13. Protractor Test
13
describe('Lab', function() {
it('Should be able to start/stop lab', function() {
const lab = $('*[data-component="Lab"]');
const runButton = lab.element(by.css('*[data-button="Play"]'));
intoView( runButton).click();
// async actions happening in the browser (XHRs, CSS transitions, etc.)
expect(lab.element(by.cssContainingText('*', 'Started')). isPresent()).toBeTruthy();
const stopButton = lab.element(by.css('*[data-button="Stop"]'));
intoView( stopButton).click();
// async actions happening in the browser (XHRs, CSS transitions, etc.)
expect(lab.element(by.cssContainingText('*', 'Stopped')). isPresent()).toBeTruthy();
});
});

14. React - Protractor Integration
14

15. React - Protractor Integration
15
// Angular provides Protractor with a very minimal API which it uses before
// any webdriver wrapped call
window.angular = {
// hook for `github.com/angular/protractor/lib/clientsidescripts.js: waitForAngular`
getTestability: function() {
return {
whenStable: function(fn) {
// call fn() when digest is stable
}
}
},
// dummy Protractor required stuff
module: function() {
var module = { config: function() { return module; } };
return module;
},
resumeBootstrap : function() {}
}

16. angular.getTestability().whenStable(fn)
16
Straightforward with zone.js
Invoke the whenStable fn() callback when all the zone tasks are finished

17. Protractor Test Flow
17
describe('Lab', function() {
it('Should be able to start/stop lab', function() {
const lab = $('*[data-component="Lab"]');
const runButton = lab.element(by.css('*[data-button="Play"]'));
intoView( runButton).click(); // Promise
// Protractor calls whenStable() in the from within the next isPresent() call
expect(lab.element(by.cssContainingText('*', 'Started')). isPresent()).toBeTruthy();
const stopButton = lab.element(by.css('*[data-button="Stop"]'));
intoView( stopButton).click(); // Promise
// Protractor calls whenStable() in the from within the next isPresent() call
expect(lab.element(by.cssContainingText('*', 'Stopped')). isPresent()).toBeTruthy();
});
});

18. Protractor Testing Demo
18

19. Protractor Testing Demo - Recap
19
– React Application
– CSS Transitions
– Protractor

20. More Information
20
zone.js README
– Brian Ford’s presentation @ng-conf 2014
Angular 2 NgZone
Dart Zones

21. Questions
21
Thank you!

22. HPE Service Virtualization virtual reality for distributed apps
22
Want to join a an agile frontend team?
Key technologies
– ES6+ / TypeScript / Java
– React
– Redux
– Redux-sagas
– Protractor
Have a look at hpsv.cz
Send CVs via email to stop@hpe.com or contact me @opichals