SlideShare a Scribd company logo
JS Unit Testing & E2E Testing
Michael Haberman
Join	
  the	
  conversa.on	
  on	
  Twi1er:	
  @DevWeek	
  #DW2015	
  
It’s all about insurance!
  Everything that is important or expensive we
cover with insurance
What kind of insurance can we get?
  Manual testing
  Automation testing
QA
  Human are not 100% reliable
QA test only what they see
Trying the cat thing at home
Can you trust the developers?
Humans are not objective
  They rush home
  They can’t find defects in their code
  They don’t like criticism
  Actually they hate criticism
  They forget what they did last month
  Actually they forget what they did yesterday
  We need something OBJECTIVE!
Automation testing are objective
  They can provide a real objective view on our
application
  Lets see what type of automation test can we
use
Testing – ROI?
  Pros:
  ~ 40% less bugs
  ~ 15% more accurate requirements implementation
  ~ 80% less regression bugs
  Cons:
  20% - 35% more time to invest
  We will find a way to leverage it
What can we test?
E2E	
  
Integra+on	
  
Test	
  
Unit	
  Test	
  
Our Focus
  Unit Testing – Single function
  End to End Testing - Flows
First unit test framework in JS?
  2001!
  Why it became so popular?
  Cross platform
Some numbers
0	
  
50000	
  
100000	
  
150000	
  
200000	
  
250000	
  
Downloads	
  last	
  week	
  
Karma	
  
Protractor	
  
Jasmine	
  
Mocha	
  
Example
//Arrange	
  
Michael	
  mic	
  =	
  new	
  Michael();	
  
DevWeek	
  dw	
  =	
  new	
  DevWeek();	
  
mic.Class	
  =	
  dw;	
  
	
  
//Act	
  
mic.Speak();	
  
	
  
//Assert	
  
Expect(dw.InterestLevel).toBe(10);	
  	
  
	
  
What would you test?
var	
  add	
  =	
  function(num1,	
  num2)	
  {	
  
	
  	
  	
  	
  return	
  num1	
  +	
  num2;	
  
};	
  
	
  
//	
  test	
  1	
  
var	
  result1	
  =	
  add(1,2);	
  
expect(result1).toBe(3);	
  
	
  
//test	
  2	
  
var	
  result2	
  =	
  add(‘1’,’2’);	
  
expect(result2).toBe(3);	
  
	
  
Unit Testing in JS
  Three players:
  Process to run the test
  Test runner
  Assertion library / test framework
Hosting process
  There are two options
  Real browser
  Browser simulator / driver
Test runner
  Provide the ability to run the test
  Get result (passed / failed with error)
  Change configuration
  Work with your assertion library
  There are many test runners!
  We will focus on karma
Assertion library
  The syntax you use to write the test
  We will use Jasmine
expect(object).toBeArray();	
  
expect(number).toBeOddNumber();	
  
expect(function).toThrowError();	
  
expect(date).toBeBefore(date);	
  
expect(object).toHaveBoolean(memberName);	
  
expect(string).toBeNonEmptyString();	
  
Test environment
Browser	
  
Host	
  code	
  and	
  
tests	
  
Karma	
  
Node	
  JS	
  server	
  
Connects	
  to	
  each	
  
browser	
  
Reports	
  the	
  result	
  
Browser	
  
Host	
  code	
  and	
  
tests	
  
Browser	
  
Host	
  code	
  and	
  
tests	
  
Browser	
  
Host	
  code	
  and	
  
tests	
  
Jasmine	
  
Provides	
  test	
  
syntax	
  
	
  
Demo
Talked enough! Lets set up the
environment
Karma setup
  Install – npm install karma
  Setup – karma init file_name
  Start – karma start file_name
Karma config file
  Frameworks – Jasmine
  Files – specific or pattern
autoWatch
  Browsers – multiple is supported
Jasmine
  Describe – a set of tests
  It – a single test
  Expect – single expect
Jasmine - matchers
  Array
  Boolean
  Browser
  Date
  Functions
  Errors
  Numbers
  Objects
  Strings
How to write good unit test?
  Any idea?
  It is not about good testing…
  It all about testable code
Writing testable code
  Isolated objects
  No coupling
  Single responsibility – separation of concern
  Ability to provide mock objects
Handling dependency
Function	
  saveItem(item){	
  
	
  var	
  itemValidator	
  =	
  new	
  itemValidator();	
  
	
  if(!itemValidator.validate(item))	
  
	
   	
  {	
  return	
  false;	
  }	
  
	
  	
  
	
  var	
  fileAccess	
  =	
  new	
  fileAccess();	
  
	
  if(!fileAccess.save(item))	
  
	
   	
  {	
  return	
  false;	
  }	
  
	
  
	
  var	
  notification	
  =	
  new	
  notificationService();	
  
	
  notification.show(“item	
  saved!”);	
  
	
  	
  
	
  return	
  true;	
  
}	
  	
  
Handling dependency
Function	
  saveItem(item,	
  itemValidator,	
  fileAccess,	
   	
  
	
   	
   	
  notification){	
  
	
  if(!itemValidator.validate(item))	
  
	
   	
  {	
  return	
  false;	
  }	
  
	
  	
  
	
  if(!fileAccess.save(item))	
  
	
   	
  {	
  return	
  false;	
  }	
  
	
  
	
  notification.show(“item	
  saved!”);	
  
	
  	
  
	
  return	
  true;	
  
}	
  	
  
DI – Dependency injection
Container(uses	
  mocks)	
  
Independent	
  
Component	
  
–	
  	
  
ServiceA	
  
Depends	
  on	
  
ServiceA	
  	
  
-­‐	
  	
  
ServiceB	
  	
  
I	
  need	
  ServiceA	
  instance	
  
Demo
Dependency injection
Overlooking the implementation
End to End
  Test user flow
  Which end to which end?
BuQon	
  
click	
  
Request	
  
to	
  server	
  
Fetch	
  
data	
  
from	
  DB	
  
Response	
  
to	
  client	
  
Table	
  fills	
  
with	
  data	
  
End to end – test implementation
  The same idea:
  Arrange – get view from browser
  Act – Interact with element(click, send key, etc…)
  Assert – UI affected correctly
  We will use Protractor
Test code
  Arrange– browser.get
  Act– input.sendKeys
  Assert– expect…
it('no	
  items	
  found',	
  function()	
  {	
  
	
  
	
  	
  	
  	
  browser.get("http://angular.github.io/angular-­‐phonecat/step-­‐4/app/");	
  
	
  	
  	
  	
  var	
  input	
  =	
  element(by.model('query'));	
  
	
  
	
  	
  	
  	
  input.sendKeys('Nokia');	
  
	
  
	
  	
  	
  	
  var	
  repeater	
  =	
  element(by.repeater('phone	
  in	
  phones'))	
  
	
  	
  	
  	
  	
  
	
  	
  	
  	
  expect(repeater).toBe(undefined);	
  
})	
  
Demo
E2E
Element and “by”
  The element get a “by” as parameter
  The “by” will find the element in the DOM
Var	
  element	
  =	
  Element(by.class(‘bold’));	
  
Global services
  Browser – instance of browser
  Element – interaction with DOM
  By – finds elements
  Protractor – interaction with protractor :
  Mouse and keyboard
  Screen shot
Getting elements by locators
  Plain html:
by.id
by.class
  Angular:
by.model (ng-model)
by.repeat (ng-repeat)
Act with DOM elements
  Click
SendKeys
isEnabled
isSelected
  Submit
  clear
Unit Test VS E2E
Unit	
   E2E	
  
Tes+ng	
  component	
   Single	
  func+on	
   En+re	
  applica+on	
  
Failed,	
  what	
  conclusion?	
  
Exact	
  func+on	
  in	
  exact	
  
parameters	
  set	
  
Could	
  be	
  any	
  component	
  
related	
  
Coupling?	
   JS	
  implementa+on	
   html	
  
Who	
  can	
  write	
  the	
  test	
  
Team	
  developer	
  (new	
  
guy)	
  
Anyone	
  
Maintenance	
  	
   low	
   high	
  
Execu+on	
  cost	
  
the	
  func+on	
  and	
  related	
  
object	
  
En+re	
  applica+on	
  
Summary
Questions
Thank you!
  E-mail: michaelh@sela.co.il
  Twitter: @hab_mic
  Blog: http://blogs.microsoft.co.il/michaelh/

More Related Content

What's hot

Automated Frontend Testing
Automated Frontend TestingAutomated Frontend Testing
Automated Frontend Testing
Neil Crosby
 
PHP Unit Testing in Yii
PHP Unit Testing in YiiPHP Unit Testing in Yii
PHP Unit Testing in Yii
IlPeach
 
Codeception presentation
Codeception presentationCodeception presentation
Codeception presentation
Andrei Burian
 
Angular Unit Testing
Angular Unit TestingAngular Unit Testing
Angular Unit Testing
Alessandro Giorgetti
 
Acceptance & Functional Testing with Codeception - Devspace 2015
Acceptance & Functional Testing with Codeception - Devspace 2015 Acceptance & Functional Testing with Codeception - Devspace 2015
Acceptance & Functional Testing with Codeception - Devspace 2015
Joe Ferguson
 
Test-Driven JavaScript Development (JavaZone 2010)
Test-Driven JavaScript Development (JavaZone 2010)Test-Driven JavaScript Development (JavaZone 2010)
Test-Driven JavaScript Development (JavaZone 2010)
Christian Johansen
 
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
Cogapp
 
Client side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karmaClient side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karma
Adam Klein
 
Codeception introduction and use in Yii
Codeception introduction and use in YiiCodeception introduction and use in Yii
Codeception introduction and use in Yii
IlPeach
 
Browser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsBrowser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.js
Luís Bastião Silva
 
Nightwatch at Tilt
Nightwatch at TiltNightwatch at Tilt
Nightwatch at Tilt
Dave King
 
Angular Unit Testing NDC Minn 2018
Angular Unit Testing NDC Minn 2018Angular Unit Testing NDC Minn 2018
Angular Unit Testing NDC Minn 2018
Justin James
 
iOS Unit Testing
iOS Unit TestingiOS Unit Testing
iOS Unit Testing
sgleadow
 
AngularJS Unit Test
AngularJS Unit TestAngularJS Unit Test
AngularJS Unit Test
Chiew Carol
 
Codeception: introduction to php testing
Codeception: introduction to php testingCodeception: introduction to php testing
Codeception: introduction to php testing
Engineor
 
Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015
Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015
Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015
Codemotion
 
Testing Web Applications
Testing Web ApplicationsTesting Web Applications
Testing Web Applications
Seth McLaughlin
 
Unit Testing in iOS
Unit Testing in iOSUnit Testing in iOS
Unit Testing in iOS
Long Weekend LLC
 
Angular Unit Testing from the Trenches
Angular Unit Testing from the TrenchesAngular Unit Testing from the Trenches
Angular Unit Testing from the Trenches
Justin James
 
Intro to testing Javascript with jasmine
Intro to testing Javascript with jasmineIntro to testing Javascript with jasmine
Intro to testing Javascript with jasmine
Timothy Oxley
 

What's hot (20)

Automated Frontend Testing
Automated Frontend TestingAutomated Frontend Testing
Automated Frontend Testing
 
PHP Unit Testing in Yii
PHP Unit Testing in YiiPHP Unit Testing in Yii
PHP Unit Testing in Yii
 
Codeception presentation
Codeception presentationCodeception presentation
Codeception presentation
 
Angular Unit Testing
Angular Unit TestingAngular Unit Testing
Angular Unit Testing
 
Acceptance & Functional Testing with Codeception - Devspace 2015
Acceptance & Functional Testing with Codeception - Devspace 2015 Acceptance & Functional Testing with Codeception - Devspace 2015
Acceptance & Functional Testing with Codeception - Devspace 2015
 
Test-Driven JavaScript Development (JavaZone 2010)
Test-Driven JavaScript Development (JavaZone 2010)Test-Driven JavaScript Development (JavaZone 2010)
Test-Driven JavaScript Development (JavaZone 2010)
 
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
 
Client side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karmaClient side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karma
 
Codeception introduction and use in Yii
Codeception introduction and use in YiiCodeception introduction and use in Yii
Codeception introduction and use in Yii
 
Browser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsBrowser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.js
 
Nightwatch at Tilt
Nightwatch at TiltNightwatch at Tilt
Nightwatch at Tilt
 
Angular Unit Testing NDC Minn 2018
Angular Unit Testing NDC Minn 2018Angular Unit Testing NDC Minn 2018
Angular Unit Testing NDC Minn 2018
 
iOS Unit Testing
iOS Unit TestingiOS Unit Testing
iOS Unit Testing
 
AngularJS Unit Test
AngularJS Unit TestAngularJS Unit Test
AngularJS Unit Test
 
Codeception: introduction to php testing
Codeception: introduction to php testingCodeception: introduction to php testing
Codeception: introduction to php testing
 
Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015
Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015
Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015
 
Testing Web Applications
Testing Web ApplicationsTesting Web Applications
Testing Web Applications
 
Unit Testing in iOS
Unit Testing in iOSUnit Testing in iOS
Unit Testing in iOS
 
Angular Unit Testing from the Trenches
Angular Unit Testing from the TrenchesAngular Unit Testing from the Trenches
Angular Unit Testing from the Trenches
 
Intro to testing Javascript with jasmine
Intro to testing Javascript with jasmineIntro to testing Javascript with jasmine
Intro to testing Javascript with jasmine
 

Viewers also liked

測試是什麼
測試是什麼測試是什麼
測試是什麼
Yvonne Yu
 
Intro do Domain Driven Design. ( PL )
Intro do Domain Driven Design. ( PL )Intro do Domain Driven Design. ( PL )
Intro do Domain Driven Design. ( PL )
GOG.com dev team
 
Automatyczne testy end-to-end aplikacji JavaScript.
Automatyczne testy end-to-end aplikacji JavaScript.Automatyczne testy end-to-end aplikacji JavaScript.
Automatyczne testy end-to-end aplikacji JavaScript.
Future Processing
 
Sap Solman E2E Trace Analysis
Sap Solman E2E Trace AnalysisSap Solman E2E Trace Analysis
Sap Solman E2E Trace Analysis
wlacaze
 
Co nowego w Javie piszczy – Java 8
Co nowego w Javie piszczy – Java 8Co nowego w Javie piszczy – Java 8
Co nowego w Javie piszczy – Java 8
3camp
 
Unit vs. Integration Tests
Unit vs. Integration TestsUnit vs. Integration Tests
Unit vs. Integration Tests
David Völkel
 
Benefit From Unit Testing In The Real World
Benefit From Unit Testing In The Real WorldBenefit From Unit Testing In The Real World
Benefit From Unit Testing In The Real World
Dror Helper
 
User Testing by Example
User Testing by ExampleUser Testing by Example
User Testing by Example
Jeremy Horn
 
QA Tester Junior
QA Tester JuniorQA Tester Junior
QA Tester Junior
Shelby Martin
 
Mind Mapping automation in the visualization of SAP information
Mind Mapping automation in the visualization of SAP informationMind Mapping automation in the visualization of SAP information
Mind Mapping automation in the visualization of SAP information
José M. Guerrero
 
Agile testing and_the_banking_domain_2009
Agile testing and_the_banking_domain_2009Agile testing and_the_banking_domain_2009
Agile testing and_the_banking_domain_2009
Anil Kumar
 
Is an agile SDLC an oxymoron?
Is an agile SDLC an oxymoron? Is an agile SDLC an oxymoron?
Is an agile SDLC an oxymoron?
Dave Sharrock
 
Advanced unit testing – real life examples and mistakes
Advanced unit testing – real life examples and mistakesAdvanced unit testing – real life examples and mistakes
Advanced unit testing – real life examples and mistakes
Milan Vukoje
 
Browser-level testing
Browser-level testingBrowser-level testing
Browser-level testing
Martin Kleppmann
 
Testing of e-Banking - Case Study
Testing of e-Banking - Case Study Testing of e-Banking - Case Study
Testing of e-Banking - Case Study
OAK Systems Pvt Ltd
 
Developer Experience to Testing
Developer Experience to TestingDeveloper Experience to Testing
Developer Experience to Testing
Mozaic Works
 
Testing javascript in the frontend
Testing javascript in the frontendTesting javascript in the frontend
Testing javascript in the frontend
Frederic CABASSUT
 
JavaScript Unit Testing
JavaScript Unit TestingJavaScript Unit Testing
JavaScript Unit Testing
Keir Bowden
 
Unit Testing Lightning Components with Jasmine
Unit Testing Lightning Components with JasmineUnit Testing Lightning Components with Jasmine
Unit Testing Lightning Components with Jasmine
Keir Bowden
 
The Developer Experience
The Developer ExperienceThe Developer Experience
The Developer Experience
Atlassian
 

Viewers also liked (20)

測試是什麼
測試是什麼測試是什麼
測試是什麼
 
Intro do Domain Driven Design. ( PL )
Intro do Domain Driven Design. ( PL )Intro do Domain Driven Design. ( PL )
Intro do Domain Driven Design. ( PL )
 
Automatyczne testy end-to-end aplikacji JavaScript.
Automatyczne testy end-to-end aplikacji JavaScript.Automatyczne testy end-to-end aplikacji JavaScript.
Automatyczne testy end-to-end aplikacji JavaScript.
 
Sap Solman E2E Trace Analysis
Sap Solman E2E Trace AnalysisSap Solman E2E Trace Analysis
Sap Solman E2E Trace Analysis
 
Co nowego w Javie piszczy – Java 8
Co nowego w Javie piszczy – Java 8Co nowego w Javie piszczy – Java 8
Co nowego w Javie piszczy – Java 8
 
Unit vs. Integration Tests
Unit vs. Integration TestsUnit vs. Integration Tests
Unit vs. Integration Tests
 
Benefit From Unit Testing In The Real World
Benefit From Unit Testing In The Real WorldBenefit From Unit Testing In The Real World
Benefit From Unit Testing In The Real World
 
User Testing by Example
User Testing by ExampleUser Testing by Example
User Testing by Example
 
QA Tester Junior
QA Tester JuniorQA Tester Junior
QA Tester Junior
 
Mind Mapping automation in the visualization of SAP information
Mind Mapping automation in the visualization of SAP informationMind Mapping automation in the visualization of SAP information
Mind Mapping automation in the visualization of SAP information
 
Agile testing and_the_banking_domain_2009
Agile testing and_the_banking_domain_2009Agile testing and_the_banking_domain_2009
Agile testing and_the_banking_domain_2009
 
Is an agile SDLC an oxymoron?
Is an agile SDLC an oxymoron? Is an agile SDLC an oxymoron?
Is an agile SDLC an oxymoron?
 
Advanced unit testing – real life examples and mistakes
Advanced unit testing – real life examples and mistakesAdvanced unit testing – real life examples and mistakes
Advanced unit testing – real life examples and mistakes
 
Browser-level testing
Browser-level testingBrowser-level testing
Browser-level testing
 
Testing of e-Banking - Case Study
Testing of e-Banking - Case Study Testing of e-Banking - Case Study
Testing of e-Banking - Case Study
 
Developer Experience to Testing
Developer Experience to TestingDeveloper Experience to Testing
Developer Experience to Testing
 
Testing javascript in the frontend
Testing javascript in the frontendTesting javascript in the frontend
Testing javascript in the frontend
 
JavaScript Unit Testing
JavaScript Unit TestingJavaScript Unit Testing
JavaScript Unit Testing
 
Unit Testing Lightning Components with Jasmine
Unit Testing Lightning Components with JasmineUnit Testing Lightning Components with Jasmine
Unit Testing Lightning Components with Jasmine
 
The Developer Experience
The Developer ExperienceThe Developer Experience
The Developer Experience
 

Similar to Unit-testing and E2E testing in JS

Pragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScriptPragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScript
davejohnson
 
Grails unit testing
Grails unit testingGrails unit testing
Grails unit testing
pleeps
 
Extreme
ExtremeExtreme
Extreme
ESUG
 
Unit tests & TDD
Unit tests & TDDUnit tests & TDD
Unit tests & TDD
Dror Helper
 
Getting Started With Testing
Getting Started With TestingGetting Started With Testing
Getting Started With Testing
Giovanni Scerra ☃
 
[Rakuten TechConf2014] [G-4] Beyond Agile Testing to Lean Development
[Rakuten TechConf2014] [G-4] Beyond Agile Testing to Lean Development[Rakuten TechConf2014] [G-4] Beyond Agile Testing to Lean Development
[Rakuten TechConf2014] [G-4] Beyond Agile Testing to Lean Development
Rakuten Group, Inc.
 
Angular Unit Test
Angular Unit TestAngular Unit Test
Angular Unit Test
Michael Haberman
 
Top100summit 谷歌-scott-improve your automated web application testing
Top100summit  谷歌-scott-improve your automated web application testingTop100summit  谷歌-scott-improve your automated web application testing
Top100summit 谷歌-scott-improve your automated web application testing
drewz lin
 
Security Testing
Security TestingSecurity Testing
Security Testing
Kiran Kumar
 
Automation - web testing with selenium
Automation - web testing with seleniumAutomation - web testing with selenium
Automation - web testing with selenium
Tzirla Rozental
 
Working Effectively With Legacy Code
Working Effectively With Legacy CodeWorking Effectively With Legacy Code
Working Effectively With Legacy Code
Naresh Jain
 
Automating Django Functional Tests Using Selenium on Cloud
Automating Django Functional Tests Using Selenium on CloudAutomating Django Functional Tests Using Selenium on Cloud
Automating Django Functional Tests Using Selenium on Cloud
Jonghyun Park
 
Python Testing 101 with Selenium
Python Testing 101 with SeleniumPython Testing 101 with Selenium
Python Testing 101 with Selenium
Leonardo Jimenez
 
Effective Unit Testing
Effective Unit TestingEffective Unit Testing
Effective Unit Testing
Narendra Pathai
 
UI Testing
UI TestingUI Testing
UI Testing
Josh Black
 
Java script unit testing
Java script unit testingJava script unit testing
Java script unit testing
Mats Bryntse
 
Functional Testing for React Native Apps
Functional Testing for React Native AppsFunctional Testing for React Native Apps
Functional Testing for React Native Apps
K. Matthew Dupree
 
Tdd pecha kucha_v2
Tdd pecha kucha_v2Tdd pecha kucha_v2
Tdd pecha kucha_v2
Paul Boos
 
Testing with VS2010 - A Bugs Life
Testing with VS2010 - A Bugs LifeTesting with VS2010 - A Bugs Life
Testing with VS2010 - A Bugs Life
Peter Gfader
 
Upstate CSCI 540 Unit testing
Upstate CSCI 540 Unit testingUpstate CSCI 540 Unit testing
Upstate CSCI 540 Unit testing
DanWooster1
 

Similar to Unit-testing and E2E testing in JS (20)

Pragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScriptPragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScript
 
Grails unit testing
Grails unit testingGrails unit testing
Grails unit testing
 
Extreme
ExtremeExtreme
Extreme
 
Unit tests & TDD
Unit tests & TDDUnit tests & TDD
Unit tests & TDD
 
Getting Started With Testing
Getting Started With TestingGetting Started With Testing
Getting Started With Testing
 
[Rakuten TechConf2014] [G-4] Beyond Agile Testing to Lean Development
[Rakuten TechConf2014] [G-4] Beyond Agile Testing to Lean Development[Rakuten TechConf2014] [G-4] Beyond Agile Testing to Lean Development
[Rakuten TechConf2014] [G-4] Beyond Agile Testing to Lean Development
 
Angular Unit Test
Angular Unit TestAngular Unit Test
Angular Unit Test
 
Top100summit 谷歌-scott-improve your automated web application testing
Top100summit  谷歌-scott-improve your automated web application testingTop100summit  谷歌-scott-improve your automated web application testing
Top100summit 谷歌-scott-improve your automated web application testing
 
Security Testing
Security TestingSecurity Testing
Security Testing
 
Automation - web testing with selenium
Automation - web testing with seleniumAutomation - web testing with selenium
Automation - web testing with selenium
 
Working Effectively With Legacy Code
Working Effectively With Legacy CodeWorking Effectively With Legacy Code
Working Effectively With Legacy Code
 
Automating Django Functional Tests Using Selenium on Cloud
Automating Django Functional Tests Using Selenium on CloudAutomating Django Functional Tests Using Selenium on Cloud
Automating Django Functional Tests Using Selenium on Cloud
 
Python Testing 101 with Selenium
Python Testing 101 with SeleniumPython Testing 101 with Selenium
Python Testing 101 with Selenium
 
Effective Unit Testing
Effective Unit TestingEffective Unit Testing
Effective Unit Testing
 
UI Testing
UI TestingUI Testing
UI Testing
 
Java script unit testing
Java script unit testingJava script unit testing
Java script unit testing
 
Functional Testing for React Native Apps
Functional Testing for React Native AppsFunctional Testing for React Native Apps
Functional Testing for React Native Apps
 
Tdd pecha kucha_v2
Tdd pecha kucha_v2Tdd pecha kucha_v2
Tdd pecha kucha_v2
 
Testing with VS2010 - A Bugs Life
Testing with VS2010 - A Bugs LifeTesting with VS2010 - A Bugs Life
Testing with VS2010 - A Bugs Life
 
Upstate CSCI 540 Unit testing
Upstate CSCI 540 Unit testingUpstate CSCI 540 Unit testing
Upstate CSCI 540 Unit testing
 

More from Michael Haberman

Deploying microservices on AWS
Deploying microservices on AWSDeploying microservices on AWS
Deploying microservices on AWS
Michael Haberman
 
Angular universal
Angular universalAngular universal
Angular universal
Michael Haberman
 
React in production
React in productionReact in production
React in production
Michael Haberman
 
Multiplayer game with angular and firebase
Multiplayer game with angular and firebaseMultiplayer game with angular and firebase
Multiplayer game with angular and firebase
Michael Haberman
 
How to: node js & micro-services
How to: node js & micro-servicesHow to: node js & micro-services
How to: node js & micro-services
Michael Haberman
 
Javascript issues and tools in production for developers
Javascript issues and tools in production for developersJavascript issues and tools in production for developers
Javascript issues and tools in production for developers
Michael Haberman
 
AWS Serverless solution for developers
AWS Serverless solution for developersAWS Serverless solution for developers
AWS Serverless solution for developers
Michael Haberman
 
Angular 4 - quick view
Angular 4 - quick viewAngular 4 - quick view
Angular 4 - quick view
Michael Haberman
 
React vs angular (mobile first battle)
React vs angular (mobile first battle)React vs angular (mobile first battle)
React vs angular (mobile first battle)
Michael Haberman
 
React vs-angular-mobile
React vs-angular-mobileReact vs-angular-mobile
React vs-angular-mobile
Michael Haberman
 
MEAN.js Workshop
MEAN.js WorkshopMEAN.js Workshop
MEAN.js Workshop
Michael Haberman
 
AWS intro
AWS introAWS intro
AWS intro
Michael Haberman
 
XAML/C# to HTML/JS
XAML/C# to HTML/JSXAML/C# to HTML/JS
XAML/C# to HTML/JS
Michael Haberman
 
XAML/C# to HTML5/JS
XAML/C#  to HTML5/JS XAML/C#  to HTML5/JS
XAML/C# to HTML5/JS
Michael Haberman
 

More from Michael Haberman (14)

Deploying microservices on AWS
Deploying microservices on AWSDeploying microservices on AWS
Deploying microservices on AWS
 
Angular universal
Angular universalAngular universal
Angular universal
 
React in production
React in productionReact in production
React in production
 
Multiplayer game with angular and firebase
Multiplayer game with angular and firebaseMultiplayer game with angular and firebase
Multiplayer game with angular and firebase
 
How to: node js & micro-services
How to: node js & micro-servicesHow to: node js & micro-services
How to: node js & micro-services
 
Javascript issues and tools in production for developers
Javascript issues and tools in production for developersJavascript issues and tools in production for developers
Javascript issues and tools in production for developers
 
AWS Serverless solution for developers
AWS Serverless solution for developersAWS Serverless solution for developers
AWS Serverless solution for developers
 
Angular 4 - quick view
Angular 4 - quick viewAngular 4 - quick view
Angular 4 - quick view
 
React vs angular (mobile first battle)
React vs angular (mobile first battle)React vs angular (mobile first battle)
React vs angular (mobile first battle)
 
React vs-angular-mobile
React vs-angular-mobileReact vs-angular-mobile
React vs-angular-mobile
 
MEAN.js Workshop
MEAN.js WorkshopMEAN.js Workshop
MEAN.js Workshop
 
AWS intro
AWS introAWS intro
AWS intro
 
XAML/C# to HTML/JS
XAML/C# to HTML/JSXAML/C# to HTML/JS
XAML/C# to HTML/JS
 
XAML/C# to HTML5/JS
XAML/C#  to HTML5/JS XAML/C#  to HTML5/JS
XAML/C# to HTML5/JS
 

Recently uploaded

原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
mz5nrf0n
 
Graspan: A Big Data System for Big Code Analysis
Graspan: A Big Data System for Big Code AnalysisGraspan: A Big Data System for Big Code Analysis
Graspan: A Big Data System for Big Code Analysis
Aftab Hussain
 
Atelier - Innover avec l’IA Générative et les graphes de connaissances
Atelier - Innover avec l’IA Générative et les graphes de connaissancesAtelier - Innover avec l’IA Générative et les graphes de connaissances
Atelier - Innover avec l’IA Générative et les graphes de connaissances
Neo4j
 
E-commerce Application Development Company.pdf
E-commerce Application Development Company.pdfE-commerce Application Development Company.pdf
E-commerce Application Development Company.pdf
Hornet Dynamics
 
openEuler Case Study - The Journey to Supply Chain Security
openEuler Case Study - The Journey to Supply Chain SecurityopenEuler Case Study - The Journey to Supply Chain Security
openEuler Case Study - The Journey to Supply Chain Security
Shane Coughlan
 
Revolutionizing Visual Effects Mastering AI Face Swaps.pdf
Revolutionizing Visual Effects Mastering AI Face Swaps.pdfRevolutionizing Visual Effects Mastering AI Face Swaps.pdf
Revolutionizing Visual Effects Mastering AI Face Swaps.pdf
Undress Baby
 
Automated software refactoring with OpenRewrite and Generative AI.pptx.pdf
Automated software refactoring with OpenRewrite and Generative AI.pptx.pdfAutomated software refactoring with OpenRewrite and Generative AI.pptx.pdf
Automated software refactoring with OpenRewrite and Generative AI.pptx.pdf
timtebeek1
 
Transform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR SolutionsTransform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR Solutions
TheSMSPoint
 
Using Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional SafetyUsing Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional Safety
Ayan Halder
 
Enterprise Resource Planning System in Telangana
Enterprise Resource Planning System in TelanganaEnterprise Resource Planning System in Telangana
Enterprise Resource Planning System in Telangana
NYGGS Automation Suite
 
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j
 
Oracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptxOracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptx
Remote DBA Services
 
What is Augmented Reality Image Tracking
What is Augmented Reality Image TrackingWhat is Augmented Reality Image Tracking
What is Augmented Reality Image Tracking
pavan998932
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOMLORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
lorraineandreiamcidl
 
Microservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we workMicroservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we work
Sven Peters
 
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CDKuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
rodomar2
 
Webinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for EmbeddedWebinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for Embedded
ICS
 
Vitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke Java Microservices Resume.pdfVitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
Drona Infotech
 
Energy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina JonuziEnergy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina Jonuzi
Green Software Development
 

Recently uploaded (20)

原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
 
Graspan: A Big Data System for Big Code Analysis
Graspan: A Big Data System for Big Code AnalysisGraspan: A Big Data System for Big Code Analysis
Graspan: A Big Data System for Big Code Analysis
 
Atelier - Innover avec l’IA Générative et les graphes de connaissances
Atelier - Innover avec l’IA Générative et les graphes de connaissancesAtelier - Innover avec l’IA Générative et les graphes de connaissances
Atelier - Innover avec l’IA Générative et les graphes de connaissances
 
E-commerce Application Development Company.pdf
E-commerce Application Development Company.pdfE-commerce Application Development Company.pdf
E-commerce Application Development Company.pdf
 
openEuler Case Study - The Journey to Supply Chain Security
openEuler Case Study - The Journey to Supply Chain SecurityopenEuler Case Study - The Journey to Supply Chain Security
openEuler Case Study - The Journey to Supply Chain Security
 
Revolutionizing Visual Effects Mastering AI Face Swaps.pdf
Revolutionizing Visual Effects Mastering AI Face Swaps.pdfRevolutionizing Visual Effects Mastering AI Face Swaps.pdf
Revolutionizing Visual Effects Mastering AI Face Swaps.pdf
 
Automated software refactoring with OpenRewrite and Generative AI.pptx.pdf
Automated software refactoring with OpenRewrite and Generative AI.pptx.pdfAutomated software refactoring with OpenRewrite and Generative AI.pptx.pdf
Automated software refactoring with OpenRewrite and Generative AI.pptx.pdf
 
Transform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR SolutionsTransform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR Solutions
 
Using Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional SafetyUsing Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional Safety
 
Enterprise Resource Planning System in Telangana
Enterprise Resource Planning System in TelanganaEnterprise Resource Planning System in Telangana
Enterprise Resource Planning System in Telangana
 
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
 
Oracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptxOracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptx
 
What is Augmented Reality Image Tracking
What is Augmented Reality Image TrackingWhat is Augmented Reality Image Tracking
What is Augmented Reality Image Tracking
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOMLORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
 
Microservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we workMicroservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we work
 
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CDKuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
 
Webinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for EmbeddedWebinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for Embedded
 
Vitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke Java Microservices Resume.pdfVitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke Java Microservices Resume.pdf
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
 
Energy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina JonuziEnergy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina Jonuzi
 

Unit-testing and E2E testing in JS

  • 1. JS Unit Testing & E2E Testing Michael Haberman Join  the  conversa.on  on  Twi1er:  @DevWeek  #DW2015  
  • 2. It’s all about insurance!   Everything that is important or expensive we cover with insurance
  • 3. What kind of insurance can we get?   Manual testing   Automation testing
  • 4. QA   Human are not 100% reliable
  • 5. QA test only what they see
  • 6. Trying the cat thing at home
  • 7. Can you trust the developers?
  • 8. Humans are not objective   They rush home   They can’t find defects in their code   They don’t like criticism   Actually they hate criticism   They forget what they did last month   Actually they forget what they did yesterday   We need something OBJECTIVE!
  • 9. Automation testing are objective   They can provide a real objective view on our application   Lets see what type of automation test can we use
  • 10. Testing – ROI?   Pros:   ~ 40% less bugs   ~ 15% more accurate requirements implementation   ~ 80% less regression bugs   Cons:   20% - 35% more time to invest   We will find a way to leverage it
  • 11. What can we test? E2E   Integra+on   Test   Unit  Test  
  • 12. Our Focus   Unit Testing – Single function   End to End Testing - Flows
  • 13. First unit test framework in JS?   2001!   Why it became so popular?   Cross platform
  • 14. Some numbers 0   50000   100000   150000   200000   250000   Downloads  last  week   Karma   Protractor   Jasmine   Mocha  
  • 15. Example //Arrange   Michael  mic  =  new  Michael();   DevWeek  dw  =  new  DevWeek();   mic.Class  =  dw;     //Act   mic.Speak();     //Assert   Expect(dw.InterestLevel).toBe(10);      
  • 16. What would you test? var  add  =  function(num1,  num2)  {          return  num1  +  num2;   };     //  test  1   var  result1  =  add(1,2);   expect(result1).toBe(3);     //test  2   var  result2  =  add(‘1’,’2’);   expect(result2).toBe(3);    
  • 17. Unit Testing in JS   Three players:   Process to run the test   Test runner   Assertion library / test framework
  • 18. Hosting process   There are two options   Real browser   Browser simulator / driver
  • 19. Test runner   Provide the ability to run the test   Get result (passed / failed with error)   Change configuration   Work with your assertion library   There are many test runners!   We will focus on karma
  • 20. Assertion library   The syntax you use to write the test   We will use Jasmine expect(object).toBeArray();   expect(number).toBeOddNumber();   expect(function).toThrowError();   expect(date).toBeBefore(date);   expect(object).toHaveBoolean(memberName);   expect(string).toBeNonEmptyString();  
  • 21. Test environment Browser   Host  code  and   tests   Karma   Node  JS  server   Connects  to  each   browser   Reports  the  result   Browser   Host  code  and   tests   Browser   Host  code  and   tests   Browser   Host  code  and   tests   Jasmine   Provides  test   syntax    
  • 22. Demo Talked enough! Lets set up the environment
  • 23. Karma setup   Install – npm install karma   Setup – karma init file_name   Start – karma start file_name
  • 24. Karma config file   Frameworks – Jasmine   Files – specific or pattern autoWatch   Browsers – multiple is supported
  • 25. Jasmine   Describe – a set of tests   It – a single test   Expect – single expect
  • 26. Jasmine - matchers   Array   Boolean   Browser   Date   Functions   Errors   Numbers   Objects   Strings
  • 27. How to write good unit test?   Any idea?   It is not about good testing…   It all about testable code
  • 28. Writing testable code   Isolated objects   No coupling   Single responsibility – separation of concern   Ability to provide mock objects
  • 29. Handling dependency Function  saveItem(item){    var  itemValidator  =  new  itemValidator();    if(!itemValidator.validate(item))      {  return  false;  }        var  fileAccess  =  new  fileAccess();    if(!fileAccess.save(item))      {  return  false;  }      var  notification  =  new  notificationService();    notification.show(“item  saved!”);        return  true;   }    
  • 30. Handling dependency Function  saveItem(item,  itemValidator,  fileAccess,          notification){    if(!itemValidator.validate(item))      {  return  false;  }        if(!fileAccess.save(item))      {  return  false;  }      notification.show(“item  saved!”);        return  true;   }    
  • 31. DI – Dependency injection Container(uses  mocks)   Independent   Component   –     ServiceA   Depends  on   ServiceA     -­‐     ServiceB     I  need  ServiceA  instance  
  • 33.
  • 35. End to End   Test user flow   Which end to which end? BuQon   click   Request   to  server   Fetch   data   from  DB   Response   to  client   Table  fills   with  data  
  • 36. End to end – test implementation   The same idea:   Arrange – get view from browser   Act – Interact with element(click, send key, etc…)   Assert – UI affected correctly   We will use Protractor
  • 37. Test code   Arrange– browser.get   Act– input.sendKeys   Assert– expect… it('no  items  found',  function()  {            browser.get("http://angular.github.io/angular-­‐phonecat/step-­‐4/app/");          var  input  =  element(by.model('query'));            input.sendKeys('Nokia');            var  repeater  =  element(by.repeater('phone  in  phones'))                    expect(repeater).toBe(undefined);   })  
  • 39. Element and “by”   The element get a “by” as parameter   The “by” will find the element in the DOM Var  element  =  Element(by.class(‘bold’));  
  • 40. Global services   Browser – instance of browser   Element – interaction with DOM   By – finds elements   Protractor – interaction with protractor :   Mouse and keyboard   Screen shot
  • 41. Getting elements by locators   Plain html: by.id by.class   Angular: by.model (ng-model) by.repeat (ng-repeat)
  • 42. Act with DOM elements   Click SendKeys isEnabled isSelected   Submit   clear
  • 43. Unit Test VS E2E Unit   E2E   Tes+ng  component   Single  func+on   En+re  applica+on   Failed,  what  conclusion?   Exact  func+on  in  exact   parameters  set   Could  be  any  component   related   Coupling?   JS  implementa+on   html   Who  can  write  the  test   Team  developer  (new   guy)   Anyone   Maintenance     low   high   Execu+on  cost   the  func+on  and  related   object   En+re  applica+on  
  • 46. Thank you!   E-mail: michaelh@sela.co.il   Twitter: @hab_mic   Blog: http://blogs.microsoft.co.il/michaelh/