SlideShare a Scribd company logo
1 of 33
© MIRANTIS 20134 PAGE 
Making frontend 
better: 
unit-testing 
Aleksandra 
Morozova
© MIRANTIS 2014 
Preface
© MIRANTIS 2014 
Agenda 
•Why is unit-testing JS needed? 
•Specifics of unit-tests in JS 
•Instruments overview 
•Best practices and approaches
Why do we need all these 
tests? 
© MIRANTIS 2014 PAGE
Big changes done quickly 
© MIRANTIS 2014 PAGE
Fuel example 
© MIRANTIS 2014 PAGE
Fuel example 
© MIRANTIS 2014 PAGE
Step closer to PERFECT 
CODE 
© MIRANTIS 2014 PAGE
Understanding the design 
© MIRANTIS 2014 PAGE
© MIRANTIS 2014 PAGE 
Less time 
for testing
Self-documented code 
© MIRANTIS 2014 PAGE
Tests allow 
REFACTORING 
© MIRANTIS 2014 PAGE
Testing is FUN! 
© MIRANTIS 2014 PAGE
© MIRANTIS 2014 
A few cons 
•Slow down the development process 
•Share the same blind point with the code 
•Do not prove that work one with another
© MIRANTIS 2014 
Basic terms 
•Assertion - defining if test is ok or not 
expect(26+2).to.equal(28);
© MIRANTIS 2014 
Basic terms 
•Fixture - fixed state of software to test, 
basis for tests (AJAX) 
beforeEach(function() { 
loadFixtures(‘dummymarkup.html’); 
})
© MIRANTIS 2014 
Basic terms 
•method Stub - function with pre-programmed 
behaviour 
var fn = foo.stub().throws(Error); 
expect(fn).to.throw(Error);
© MIRANTIS 2014 
Basic terms 
•Spy - function that records arguments, 
scope, return value, exception thrown for 
all its calls 
sinon.spy(cursor, ‘hide’);
© MIRANTIS 2014 
Basic terms 
•Mock - fake object with pre-programmed behavior (like 
stub) and pre-programmed expectations => stubs+spies 
var mock = sinon.mock(“jQuery”);
© MIRANTIS 2014 
Basic Structure 
•Setup - beforeEach(), before() 
•Prepare data for test 
•Call a method 
•Check output data 
•Tear down - afterEach(), after()
© MIRANTIS 2014 
Setup 
before (function() {console.log(‘before test’)};) 
test(‘first test’, 
function() {console.log(‘first test’);} 
); 
test(‘second test’, 
function() {console.log(second test’);} 
); 
afterEach(function() {console.log(‘after each’)};)
Prepare, call & check 
© MIRANTIS 2014
© MIRANTIS 2014 
Tear down 
after(function (done) { 
//remove global document object 
document = null; 
window = null; 
done(); 
})
© MIRANTIS 2014 
Instruments 
Entire space of 
frameworks...
© MIRANTIS 2014 
Instruments 
Entire space of 
frameworks...
© MIRANTIS 2014 
Karma 
Entire space of 
frameworks...
© MIRANTIS 2014 
Karma 
$ npm install karma 
Karma with 
Require.js 
Entire space of 
frameworks...
Example: Backbone Model 
© MIRANTIS 2014
Example: Backbone Collection 
© MIRANTIS 2014
Example: Backbone Collection 
© MIRANTIS 2014
© MIRANTIS 2014 
Best practices 
• Fast 
• Isolated 
• Consistent 
• Self-descriptive 
• Single responsibility 
• No exceptions handling 
• Use assertions when needed
© MIRANTIS 2014 
Conclusion 
• Each test verifies a small chunk of code 
• Unit tests work better in isolation 
• Mocks, stubs and spies help us 
• Don’t test everything, but write many tests
Q&A 
© MIRANTIS 2013 PAGE

More Related Content

What's hot

Никита Галкин "Testing in Frontend World"
Никита Галкин "Testing in Frontend World"Никита Галкин "Testing in Frontend World"
Никита Галкин "Testing in Frontend World"Fwdays
 
Javascript tdd byandreapaciolla
Javascript tdd byandreapaciollaJavascript tdd byandreapaciolla
Javascript tdd byandreapaciollaAndrea Paciolla
 
JavaScript Metaprogramming with ES 2015 Proxy
JavaScript Metaprogramming with ES 2015 ProxyJavaScript Metaprogramming with ES 2015 Proxy
JavaScript Metaprogramming with ES 2015 ProxyAlexandr Skachkov
 
prohuddle-utPLSQL v3 - Ultimate unit testing framework for Oracle
prohuddle-utPLSQL v3 - Ultimate unit testing framework for Oracleprohuddle-utPLSQL v3 - Ultimate unit testing framework for Oracle
prohuddle-utPLSQL v3 - Ultimate unit testing framework for OracleJacek Gebal
 
[FullStack NYC 2019] Effective Unit Tests for JavaScript
[FullStack NYC 2019] Effective Unit Tests for JavaScript[FullStack NYC 2019] Effective Unit Tests for JavaScript
[FullStack NYC 2019] Effective Unit Tests for JavaScriptHazem Saleh
 
POUG2019 - Test your PL/SQL - your database will love you
POUG2019 - Test your PL/SQL - your database will love youPOUG2019 - Test your PL/SQL - your database will love you
POUG2019 - Test your PL/SQL - your database will love youJacek Gebal
 
Артем Чайкин - JAVA+GWT
Артем Чайкин - JAVA+GWTАртем Чайкин - JAVA+GWT
Артем Чайкин - JAVA+GWTPositive Hack Days
 
Bulletproof PowerShell
Bulletproof PowerShellBulletproof PowerShell
Bulletproof PowerShellshchegrikovich
 
Testing experience - Vision team, Mar 2016
Testing experience - Vision team, Mar 2016Testing experience - Vision team, Mar 2016
Testing experience - Vision team, Mar 2016Van Huong
 
Jest: Frontend Testing leicht gemacht @EnterJS2018
Jest: Frontend Testing leicht gemacht @EnterJS2018Jest: Frontend Testing leicht gemacht @EnterJS2018
Jest: Frontend Testing leicht gemacht @EnterJS2018Holger Grosse-Plankermann
 
POUG Meetup 1st MArch 2019 - utPLSQL v3 - Testing Framework for PL/SQL
POUG Meetup 1st MArch 2019 - utPLSQL v3 - Testing Framework for PL/SQLPOUG Meetup 1st MArch 2019 - utPLSQL v3 - Testing Framework for PL/SQL
POUG Meetup 1st MArch 2019 - utPLSQL v3 - Testing Framework for PL/SQLJacek Gebal
 
AngularJS and Protractor
AngularJS and ProtractorAngularJS and Protractor
AngularJS and ProtractorFilipe Falcão
 
Setting Up CircleCI Workflows for Your Salesforce Apps
Setting Up CircleCI Workflows for Your Salesforce AppsSetting Up CircleCI Workflows for Your Salesforce Apps
Setting Up CircleCI Workflows for Your Salesforce AppsDaniel Stange
 

What's hot (20)

Никита Галкин "Testing in Frontend World"
Никита Галкин "Testing in Frontend World"Никита Галкин "Testing in Frontend World"
Никита Галкин "Testing in Frontend World"
 
Unit testing on mobile apps
Unit testing on mobile appsUnit testing on mobile apps
Unit testing on mobile apps
 
Javascript tdd byandreapaciolla
Javascript tdd byandreapaciollaJavascript tdd byandreapaciolla
Javascript tdd byandreapaciolla
 
JavaScript Metaprogramming with ES 2015 Proxy
JavaScript Metaprogramming with ES 2015 ProxyJavaScript Metaprogramming with ES 2015 Proxy
JavaScript Metaprogramming with ES 2015 Proxy
 
Testing your code
Testing your codeTesting your code
Testing your code
 
prohuddle-utPLSQL v3 - Ultimate unit testing framework for Oracle
prohuddle-utPLSQL v3 - Ultimate unit testing framework for Oracleprohuddle-utPLSQL v3 - Ultimate unit testing framework for Oracle
prohuddle-utPLSQL v3 - Ultimate unit testing framework for Oracle
 
Angular Testing
Angular TestingAngular Testing
Angular Testing
 
[FullStack NYC 2019] Effective Unit Tests for JavaScript
[FullStack NYC 2019] Effective Unit Tests for JavaScript[FullStack NYC 2019] Effective Unit Tests for JavaScript
[FullStack NYC 2019] Effective Unit Tests for JavaScript
 
POUG2019 - Test your PL/SQL - your database will love you
POUG2019 - Test your PL/SQL - your database will love youPOUG2019 - Test your PL/SQL - your database will love you
POUG2019 - Test your PL/SQL - your database will love you
 
Артем Чайкин - JAVA+GWT
Артем Чайкин - JAVA+GWTАртем Чайкин - JAVA+GWT
Артем Чайкин - JAVA+GWT
 
Bulletproof PowerShell
Bulletproof PowerShellBulletproof PowerShell
Bulletproof PowerShell
 
Metrics
MetricsMetrics
Metrics
 
Testing experience - Vision team, Mar 2016
Testing experience - Vision team, Mar 2016Testing experience - Vision team, Mar 2016
Testing experience - Vision team, Mar 2016
 
Chaos Engineering with Neo4j
Chaos Engineering with Neo4jChaos Engineering with Neo4j
Chaos Engineering with Neo4j
 
Create, test, secure, repeat
Create, test, secure, repeatCreate, test, secure, repeat
Create, test, secure, repeat
 
Jest: Frontend Testing leicht gemacht @EnterJS2018
Jest: Frontend Testing leicht gemacht @EnterJS2018Jest: Frontend Testing leicht gemacht @EnterJS2018
Jest: Frontend Testing leicht gemacht @EnterJS2018
 
POUG Meetup 1st MArch 2019 - utPLSQL v3 - Testing Framework for PL/SQL
POUG Meetup 1st MArch 2019 - utPLSQL v3 - Testing Framework for PL/SQLPOUG Meetup 1st MArch 2019 - utPLSQL v3 - Testing Framework for PL/SQL
POUG Meetup 1st MArch 2019 - utPLSQL v3 - Testing Framework for PL/SQL
 
AngularJS and Protractor
AngularJS and ProtractorAngularJS and Protractor
AngularJS and Protractor
 
Setting Up CircleCI Workflows for Your Salesforce Apps
Setting Up CircleCI Workflows for Your Salesforce AppsSetting Up CircleCI Workflows for Your Salesforce Apps
Setting Up CircleCI Workflows for Your Salesforce Apps
 
Springaopdecoded ajip
Springaopdecoded ajipSpringaopdecoded ajip
Springaopdecoded ajip
 

Similar to Unit testing js

Continuous Load Testing with CloudTest and Jenkins
Continuous Load Testing with CloudTest and JenkinsContinuous Load Testing with CloudTest and Jenkins
Continuous Load Testing with CloudTest and JenkinsSOASTA
 
Continuous Load Testing with CloudTest and Jenkins
Continuous Load Testing with CloudTest and JenkinsContinuous Load Testing with CloudTest and Jenkins
Continuous Load Testing with CloudTest and JenkinsSOASTA
 
Make Your Testing Groovy
Make Your Testing GroovyMake Your Testing Groovy
Make Your Testing GroovyPaul King
 
Developers Testing - Girl Code at bloomon
Developers Testing - Girl Code at bloomonDevelopers Testing - Girl Code at bloomon
Developers Testing - Girl Code at bloomonIneke Scheffers
 
Into The Box 2018 | Assert control over your legacy applications
Into The Box 2018 | Assert control over your legacy applicationsInto The Box 2018 | Assert control over your legacy applications
Into The Box 2018 | Assert control over your legacy applicationsOrtus Solutions, Corp
 
10 Emerging Test Frameworks for Cross Browser Testing
10 Emerging Test Frameworks for Cross Browser Testing10 Emerging Test Frameworks for Cross Browser Testing
10 Emerging Test Frameworks for Cross Browser TestingPerfecto by Perforce
 
Structured Functional Automated Web Service Testing
Structured Functional Automated Web Service TestingStructured Functional Automated Web Service Testing
Structured Functional Automated Web Service Testingrdekleijn
 
Architecture of automated test cases for legacy applications
Architecture of automated test cases for legacy applicationsArchitecture of automated test cases for legacy applications
Architecture of automated test cases for legacy applicationsMikhail Vasylchenko
 
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSCreating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSGunnar Hillert
 
ASDSpec, Model Based Testing
ASDSpec, Model Based TestingASDSpec, Model Based Testing
ASDSpec, Model Based TestingRachid Kherrazi
 
When assertthat(you).understandUnitTesting() fails
When assertthat(you).understandUnitTesting() failsWhen assertthat(you).understandUnitTesting() fails
When assertthat(you).understandUnitTesting() failsMartin Skurla
 
Getting your mobile test automation process in place - using Cucumber and Cal...
Getting your mobile test automation process in place - using Cucumber and Cal...Getting your mobile test automation process in place - using Cucumber and Cal...
Getting your mobile test automation process in place - using Cucumber and Cal...Niels Frydenholm
 
Testing ASP.NET - Progressive.NET
Testing ASP.NET - Progressive.NETTesting ASP.NET - Progressive.NET
Testing ASP.NET - Progressive.NETBen Hall
 
20160913 cookpad ios_en
20160913 cookpad ios_en20160913 cookpad ios_en
20160913 cookpad ios_enKazuaki Matsuo
 
Effective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and DapperEffective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and DapperMike Melusky
 
Breaking Dependencies To Allow Unit Testing - Steve Smith | FalafelCON 2014
Breaking Dependencies To Allow Unit Testing - Steve Smith | FalafelCON 2014Breaking Dependencies To Allow Unit Testing - Steve Smith | FalafelCON 2014
Breaking Dependencies To Allow Unit Testing - Steve Smith | FalafelCON 2014FalafelSoftware
 
Breaking Dependencies to Allow Unit Testing
Breaking Dependencies to Allow Unit TestingBreaking Dependencies to Allow Unit Testing
Breaking Dependencies to Allow Unit TestingSteven Smith
 

Similar to Unit testing js (20)

Unit testing js
Unit testing jsUnit testing js
Unit testing js
 
Continuous Load Testing with CloudTest and Jenkins
Continuous Load Testing with CloudTest and JenkinsContinuous Load Testing with CloudTest and Jenkins
Continuous Load Testing with CloudTest and Jenkins
 
Continuous Load Testing with CloudTest and Jenkins
Continuous Load Testing with CloudTest and JenkinsContinuous Load Testing with CloudTest and Jenkins
Continuous Load Testing with CloudTest and Jenkins
 
Make Your Testing Groovy
Make Your Testing GroovyMake Your Testing Groovy
Make Your Testing Groovy
 
Developers Testing - Girl Code at bloomon
Developers Testing - Girl Code at bloomonDevelopers Testing - Girl Code at bloomon
Developers Testing - Girl Code at bloomon
 
Into The Box 2018 | Assert control over your legacy applications
Into The Box 2018 | Assert control over your legacy applicationsInto The Box 2018 | Assert control over your legacy applications
Into The Box 2018 | Assert control over your legacy applications
 
10 Emerging Test Frameworks for Cross Browser Testing
10 Emerging Test Frameworks for Cross Browser Testing10 Emerging Test Frameworks for Cross Browser Testing
10 Emerging Test Frameworks for Cross Browser Testing
 
Structured Functional Automated Web Service Testing
Structured Functional Automated Web Service TestingStructured Functional Automated Web Service Testing
Structured Functional Automated Web Service Testing
 
Architecture of automated test cases for legacy applications
Architecture of automated test cases for legacy applicationsArchitecture of automated test cases for legacy applications
Architecture of automated test cases for legacy applications
 
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSCreating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS
 
ASDSpec, Model Based Testing
ASDSpec, Model Based TestingASDSpec, Model Based Testing
ASDSpec, Model Based Testing
 
Introduction to DevOps
Introduction to DevOpsIntroduction to DevOps
Introduction to DevOps
 
When assertthat(you).understandUnitTesting() fails
When assertthat(you).understandUnitTesting() failsWhen assertthat(you).understandUnitTesting() fails
When assertthat(you).understandUnitTesting() fails
 
Getting your mobile test automation process in place - using Cucumber and Cal...
Getting your mobile test automation process in place - using Cucumber and Cal...Getting your mobile test automation process in place - using Cucumber and Cal...
Getting your mobile test automation process in place - using Cucumber and Cal...
 
Testing ASP.NET - Progressive.NET
Testing ASP.NET - Progressive.NETTesting ASP.NET - Progressive.NET
Testing ASP.NET - Progressive.NET
 
20160913 cookpad ios_en
20160913 cookpad ios_en20160913 cookpad ios_en
20160913 cookpad ios_en
 
Effective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and DapperEffective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and Dapper
 
Breaking Dependencies To Allow Unit Testing - Steve Smith | FalafelCON 2014
Breaking Dependencies To Allow Unit Testing - Steve Smith | FalafelCON 2014Breaking Dependencies To Allow Unit Testing - Steve Smith | FalafelCON 2014
Breaking Dependencies To Allow Unit Testing - Steve Smith | FalafelCON 2014
 
Breaking Dependencies to Allow Unit Testing
Breaking Dependencies to Allow Unit TestingBreaking Dependencies to Allow Unit Testing
Breaking Dependencies to Allow Unit Testing
 
Testing Angular
Testing AngularTesting Angular
Testing Angular
 

Unit testing js

  • 1. © MIRANTIS 20134 PAGE Making frontend better: unit-testing Aleksandra Morozova
  • 3. © MIRANTIS 2014 Agenda •Why is unit-testing JS needed? •Specifics of unit-tests in JS •Instruments overview •Best practices and approaches
  • 4. Why do we need all these tests? © MIRANTIS 2014 PAGE
  • 5. Big changes done quickly © MIRANTIS 2014 PAGE
  • 6. Fuel example © MIRANTIS 2014 PAGE
  • 7. Fuel example © MIRANTIS 2014 PAGE
  • 8. Step closer to PERFECT CODE © MIRANTIS 2014 PAGE
  • 9. Understanding the design © MIRANTIS 2014 PAGE
  • 10. © MIRANTIS 2014 PAGE Less time for testing
  • 11. Self-documented code © MIRANTIS 2014 PAGE
  • 12. Tests allow REFACTORING © MIRANTIS 2014 PAGE
  • 13. Testing is FUN! © MIRANTIS 2014 PAGE
  • 14. © MIRANTIS 2014 A few cons •Slow down the development process •Share the same blind point with the code •Do not prove that work one with another
  • 15. © MIRANTIS 2014 Basic terms •Assertion - defining if test is ok or not expect(26+2).to.equal(28);
  • 16. © MIRANTIS 2014 Basic terms •Fixture - fixed state of software to test, basis for tests (AJAX) beforeEach(function() { loadFixtures(‘dummymarkup.html’); })
  • 17. © MIRANTIS 2014 Basic terms •method Stub - function with pre-programmed behaviour var fn = foo.stub().throws(Error); expect(fn).to.throw(Error);
  • 18. © MIRANTIS 2014 Basic terms •Spy - function that records arguments, scope, return value, exception thrown for all its calls sinon.spy(cursor, ‘hide’);
  • 19. © MIRANTIS 2014 Basic terms •Mock - fake object with pre-programmed behavior (like stub) and pre-programmed expectations => stubs+spies var mock = sinon.mock(“jQuery”);
  • 20. © MIRANTIS 2014 Basic Structure •Setup - beforeEach(), before() •Prepare data for test •Call a method •Check output data •Tear down - afterEach(), after()
  • 21. © MIRANTIS 2014 Setup before (function() {console.log(‘before test’)};) test(‘first test’, function() {console.log(‘first test’);} ); test(‘second test’, function() {console.log(second test’);} ); afterEach(function() {console.log(‘after each’)};)
  • 22. Prepare, call & check © MIRANTIS 2014
  • 23. © MIRANTIS 2014 Tear down after(function (done) { //remove global document object document = null; window = null; done(); })
  • 24. © MIRANTIS 2014 Instruments Entire space of frameworks...
  • 25. © MIRANTIS 2014 Instruments Entire space of frameworks...
  • 26. © MIRANTIS 2014 Karma Entire space of frameworks...
  • 27. © MIRANTIS 2014 Karma $ npm install karma Karma with Require.js Entire space of frameworks...
  • 28. Example: Backbone Model © MIRANTIS 2014
  • 29. Example: Backbone Collection © MIRANTIS 2014
  • 30. Example: Backbone Collection © MIRANTIS 2014
  • 31. © MIRANTIS 2014 Best practices • Fast • Isolated • Consistent • Self-descriptive • Single responsibility • No exceptions handling • Use assertions when needed
  • 32. © MIRANTIS 2014 Conclusion • Each test verifies a small chunk of code • Unit tests work better in isolation • Mocks, stubs and spies help us • Don’t test everything, but write many tests
  • 33. Q&A © MIRANTIS 2013 PAGE