unit-testing and e2e testing in js
TRANSCRIPT
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: [email protected] Twitter: @hab_mic Blog: http://blogs.microsoft.co.il/michaelh/