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 stop@hpe.com or contact me @opichals