asynchroniczne testy javascript aplikacji webowych
DESCRIPTION
Prezentacja Przemka Secha w ramach Quality Meetup #2. O inicjatywie: http://qualityexcites.pl/quality-meetup/archiwalne-spotkania/TRANSCRIPT
Copyright © 2014 Rockwell Automation, Inc. All Rights Reserved.Rev 5058-CO900E
PUBLIC INFORMATION
Asynchroniczne testy JavaScript aplikacji webowych
Przemysław SechSoftware Test Engineer31.05.2014
Email: [email protected]: @PrzemekSech
#220.08.2014
Copyright © 2014 Rockwell Automation, Inc. All Rights Reserved.PUBLIC INFORMATION 2
Agenda
Demo
Promises
Model zdarzeniowy
Callback
Asynchroniczność – co to jest?
Copyright © 2014 Rockwell Automation, Inc. All Rights Reserved.PUBLIC INFORMATION 3
Asynchronicznośćco to jest?
„Jest pewna rzecz w JavaScript, którą wszyscy kochamy: asynchroniczność. Jest też pewna rzecz w JavaScript, którą wszyscy nienawidzimy: asynchroniczność.”
Źródło: http://webroad.pl/javascript/746-synchroniczna-asynchronicznosc
Cechy JavaScript: Jednowątkowy – jednocześnie może być przetwarzane tylko jedno
zadanie Zadania w tle – zadania czasochłonne czekają w tle na swój
moment
Copyright © 2014 Rockwell Automation, Inc. All Rights Reserved.PUBLIC INFORMATION 4
Asynchronicznośćco to jest?
„Wielka moc niesie ze sobą wielką odpowiedzialność”
1 var result = AJAX.get('strona.html');
Funkcje asynchroniczne nie zwracają wartości
Obejście problemu: Callback Event Promise
Copyright © 2014 Rockwell Automation, Inc. All Rights Reserved.PUBLIC INFORMATION
Callback
5
1 function mySandwich(param, callback) {
2 console.log('Moja kanapka ma: ' + param);
3 if (callback && typeof (callback) === "function") {
4 callback();
5 }
6 }
1 mySandwich('ser', function () {
2 console.log('Zjadłem kanapkę.');
3 });
Copyright © 2014 Rockwell Automation, Inc. All Rights Reserved.PUBLIC INFORMATION
Callbackprzykłady
6
jQuery
Pętla forEach
1 $("#btn_1").click(function () {
2 alert("Btn 1 Clicked");
3 });
1 var friends = ["Mike", "Stacy", "Andy", "Rick"];
2 friends.forEach(function (eachName, index) {
3 console.log(index + ". " + eachName);
4 });
Copyright © 2014 Rockwell Automation, Inc. All Rights Reserved.PUBLIC INFORMATION
1 AJAX.get('strona.html', function (result) {
2 AJAX.get('innastrona.html', function (nextResult) {
3 AJAX.get('jeszczeinnastrona.html', function (alsoResult) {
4 //tutaj robimy coś z pobranymi danymi
5 });
6 });
7 });
1 AJAX.get('strona.html', function (result) {
2 AJAX.get('innastrona.html', function (nextResult) {
3 //tutaj robimy coś z pobranymi danymi
4 });
5 });
1 AJAX.get('strona.html', function (result) {
2 //tutaj robimy coś z pobranymi danymi
3 });
Callbackproblem choinki
7
Copyright © 2014 Rockwell Automation, Inc. All Rights Reserved.PUBLIC INFORMATION
Model zdarzeniowy
8
jQuery1 $('button').on('click', function (e)
{
2 alert('Kliknięty! :D');
3 });
1 $('button').on('click', function (e) {
2 alert('Kliknięty! :D');
3 });
4 //tutaj tona innego kodu JS
5 $('button').on('click', function (e) {
6 alert('Kliknięty 2!');
7 });
Copyright © 2014 Rockwell Automation, Inc. All Rights Reserved.PUBLIC INFORMATION
Promises
9
1 AJAX.get('strona.html').then(
2 function (result) {
3 //wszystko się udało
4 console.log(result);
5 },
6 function (error) {
7 //pojawił się błąd
8 console.error(error);
9 });
Copyright © 2014 Rockwell Automation, Inc. All Rights Reserved.PUBLIC INFORMATION
Promisesc.d.
10
1 AJAX.get('strona.html').then(function (result) {
2 return AJAX.get('innastrona.html');
3 }).then(function (nextResult) {
4 return AJAX.get('jeszczeinnastrona.html');
5 }).then(function (alsoResult) {
6 //tutaj robimy coś z pobranymi danymi
7 });
1 AJAX.get('strona.html').then(function (result) {
2 return AJAX.get('innastrona.html');
3 }).then(function (nextResult) {
4 //tutaj robimy coś z pobranymi danymi
5 });
1 AJAX.get('strona.html').then(function (result) {
2 //tutaj robimy coś z pobranymi danymi
3 });
Copyright © 2014 Rockwell Automation, Inc. All Rights Reserved.PUBLIC INFORMATION
Demo
11
GitHub: https://github.com/psech/QualityExcites2014-Demo
Copyright © 2014 Rockwell Automation, Inc. All Rights Reserved.PUBLIC INFORMATION
Pytania i odpowiedzi
12
GoogleDrive: http://goo.gl/v9wv7J
Copyright © 2014 Rockwell Automation, Inc. All Rights Reserved.
www.rockwellautomation.com
Follow ROKAutomation on Facebook & Twitter.Connect with us on LinkedIn.
Rev 5058-CO900F
PUBLIC INFORMATION
Dziękuję
Email: [email protected]: @PrzemekSech