The document discusses zone.js, a JavaScript library that provides execution context similar to thread-local storage, originally from the Dart language, and its integration with frontend testing frameworks like Protractor in Angular applications. It includes practical examples and hands-on demonstrations to illustrate its use in managing asynchronous tasks and tracking long stack traces. Additionally, it highlights career opportunities at HPE Service Virtualization, emphasizing required technologies and inviting CV submissions.

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