Date post: | 08-Jan-2017 |
Category: |
Software |
Upload: | standa-opichal |
View: | 297 times |
Download: | 0 times |
Using Zone.js@opichals
HPE Service Virtualizationhpsv.cz
What is this about
2
– zones– zone.js– examples– hands on– practical use
Heard of zones?
3
anyone?
Used zones?
4
somebody...
What is a zone
5
Execution context
Something like a Thread-local storage like feature in JavaScript
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
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
zone.fork().run(function () {
stacks.push(getStack())
setTimeout(function () {
stacks.push(getStack())
stacks.forEach(console.log)
}, 0);
});
Long Stack Trace Zone Example
8
Hands on
9
Hands on - Recap
10
Frontend Integration and End to End Testing
– Long Stack Trace Zone
– WTF Zone
– Timing Zone
How does it work
11
It wraps every async browser API with a zone.wrap
setTimeout, setInterval, XHR, Promise, MutationObserver
Real World Use
12
Frontend Integration and End to End Testing
– React application
– Protractor– Tracks ng-1.x digest
– Real browsers
– Selenium
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(); });
});
React - Protractor Integration
14
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() {}}
angular.getTestability().whenStable(fn)
16
Straightforward with zone.jsInvoke the whenStable fn() callback when all the zone tasks are finished
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(); });
});
Protractor Testing Demo
18
Protractor Testing Demo - Recap
19
– React Application
– CSS Transitions
– Protractor
More Information
20
zone.js README
– Brian Ford’s presentation @ng-conf 2014
Angular 2 NgZone
Dart Zones
Questions
21
Thank you!
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 [email protected] or contact me @opichals