Unit-testing and E2E testing in JS

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

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

Unit-testing and E2E testing in JS

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
ﬁlls

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

})

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

Thank you!
  E-mail: michaelh@sela.co.il
  Twitter: @hab_mic
  Blog: http://blogs.microsoft.co.il/michaelh/

Unit-testing and E2E testing in JS

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

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

More from Michael Haberman (14)

Recently uploaded (20)

Unit-testing and E2E testing in JS