+ All Categories
Home > Software > Using zone.js

Using zone.js

Date post: 08-Jan-2017
Category:
Upload: standa-opichal
View: 297 times
Download: 0 times
Share this document with a friend
22
Using Zone.js @opichals HPE Service Virtualization hpsv.cz
Transcript
Page 1: Using zone.js

Using Zone.js@opichals

HPE Service Virtualizationhpsv.cz

Page 2: Using zone.js

What is this about

2

– zones– zone.js– examples– hands on– practical use

Page 3: Using zone.js

Heard of zones?

3

anyone?

Page 4: Using zone.js

Used zones?

4

somebody...

Page 5: Using zone.js

What is a zone

5

Execution context

Something like a Thread-local storage like feature in JavaScript

Page 6: Using zone.js

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

Page 7: Using zone.js

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

Page 8: Using zone.js

zone.fork().run(function () {

stacks.push(getStack())

setTimeout(function () {

stacks.push(getStack())

stacks.forEach(console.log)

}, 0);

});

Long Stack Trace Zone Example

8

Page 9: Using zone.js

Hands on

9

Page 10: Using zone.js

Hands on - Recap

10

Frontend Integration and End to End Testing

– Long Stack Trace Zone

– WTF Zone

– Timing Zone

Page 11: Using zone.js

How does it work

11

It wraps every async browser API with a zone.wrap

setTimeout, setInterval, XHR, Promise, MutationObserver

Page 12: Using zone.js

Real World Use

12

Frontend Integration and End to End Testing

– React application

– Protractor– Tracks ng-1.x digest

– Real browsers

– Selenium

Page 13: Using zone.js

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(); });

});

Page 14: Using zone.js

React - Protractor Integration

14

Page 15: Using zone.js

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() {}}

Page 16: Using zone.js

angular.getTestability().whenStable(fn)

16

Straightforward with zone.jsInvoke the whenStable fn() callback when all the zone tasks are finished

Page 17: Using zone.js

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(); });

});

Page 18: Using zone.js

Protractor Testing Demo

18

Page 19: Using zone.js

Protractor Testing Demo - Recap

19

– React Application

– CSS Transitions

– Protractor

Page 21: Using zone.js

Questions

21

Thank you!

Page 22: Using zone.js

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


Recommended