Client side testingClient side testing

Before we startBefore we startHebrew or English?Don't wait for the "Questions?" slideI'm skipping the "why test?" intro

YouYou

Adam KleinCTO of 500Techmeetup.com/AngularJS-ILangular.co.ilhackademy.co.il Among our clients:- Wix- Cellebrite- eToro- Autodesk- ...

MeMe

JasmineJasmine

The most popular testingframework

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

Debugging the testDebugging the testchrome dev toolschrome dev tools

JasmineJasmine

What it is not:It's not a framework for running tests

But karma is....

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

Other cool stuffOther cool stuffOSX reporterCoverage...

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

Easy to mockEasy to mock

serverApi

productsService

actual server

HTTP

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

Keep in TouchKeep in Touch

@500TechILblog.500tech.commeetup.com/angularjs-ilmeetup.com/hackademyhackademy.co.il