Automated testing for client-side - Adam Klein, 500 Tech
-
Upload
codemotion-tel-aviv -
Category
Technology
-
view
97 -
download
2
Transcript of Automated testing for client-side - Adam Klein, 500 Tech
Before we startBefore we startHebrew or English?Don't wait for the "Questions?" slideI'm skipping the "why test?" intro
Adam KleinCTO of 500Techmeetup.com/AngularJS-ILangular.co.ilhackademy.co.il Among our clients:- Wix- Cellebrite- eToro- Autodesk- ...
MeMe
var Person = function(first, last) { this.fullname = function() { return first + ' ' + last; }}
describe ('Person', function() { it('should return fullname correctly', function() { var p = new Person('Adam', 'Klein'); expect(p.fullname()).toEqual('Adam Klein'); });});
ExampleExample
It runs in the browserIt runs in the browser+1 on credibility+1 on credibility
Let's see it in action
Is a test running frameworkMakes the browser interaction seamlessWorks with various testing frameworks, not justjasmine
KarmaKarmaformerly testacular
renamed because it resembles....
Let's see it live
Run in severalRun in severalbrowsers at oncebrowsers at once
karma-firefox-launcherkarma-chrome-launcherkarma-phantomjs-launcher
You might ask yourself, how the hell do IYou might ask yourself, how the hell do Iunit test this code:unit test this code:
<button onclick="addOne()"> Add one</button><h1>0</h1>
function addOne() { var count = $('h1'); var number = parseInt(count.text()); count.text(number + 1);}
html
Javascript
Karma html2JS toKarma html2JS tothe rescuethe rescue
Load an html file in the current DOMTest the javascript that interacts with it
Preparationdocument.body.innerHTML = __html__['views/index.html'];var button = $('button');var h1 = $('h1');
it('should start with 0', function() { expect(h1.text()).toEqual('0');});
it('should add one', function() { button.click(); expect(h1.text()).toEqual('1');});
Test
AngularJSAngularJS<div ng-controller="myController"> <button ng-click="addOne()"> Add one </button> <h1>{{count}}</h1></div>
function MyController($scope) { $scope.count = 0; $scope.addOne = function() { $scope.count++; }}
AngularJSAngularJS
ControllerHandles view stateMakes data and functions accessible via $scopeDoesn't know DOM
View (template)Data bindingGlue events
How the test will look likeHow the test will look like
it('should bind h1 to count', function() { $scope.count = 10; $scope.$apply(); expect(h1.text()).toEqual('10');});
it('should call add one on button click', function() { button.click(); expect($scope.addOne).toHaveBeenCalled();});
What about system testsWhat about system testswith Selenium you ask?with Selenium you ask?
Good question!!Follow our twitter for my
coming presentation on how tomake maintainable, readable,
and fast system tests.....
Our mediaOur media
Our presentationsCool libraries & servicesInteresting blog postsCourses & workshops
@500TechIL
500Tech on facebook
external serverexternal server
productsService = { products: [], create: function(product) { var response = $.ajax(...); if(response.success) { this.products.push(product); } }}
Something like thisSomething like thisproductsService = { products: [], create: function(product) { var response = serverApi.createProduct(product); if(response.success) { this.products.push(product); } }}
serverApi = { createProduct: function(product) { $.ajax(...); }}
Spy / Mock / Stub / FakeSpy / Mock / Stub / FakespyOnspyOn
var product = {name: 'product'};
spyOn(serverApi, 'createProduct').andReturn({success: true});
productsService.create(product);
expect(productsService.products).toEqual([product]);
Test the side effectTest the side effect
expect(serverApi.createProduct). toHaveBeenCalledWith(product);
Credibility alert!Credibility alert!
Test might pass but code will failThe spies are the contract with the server